<{strip}>
<{assign var="mydirurl" value=$block.mydirurl}>
<{assign var="mydirname" value=$block.mydirname}>
<{assign var="mod_config" value=$block.mod_config}>

<script>
$(function(){

	var twidth = $('#news_<{$block.mydirname}>').width();
	if(twidth>480){
		var mywidth = $(document).find('.news-image').width() * 0.8;
	} else {
		var mywidth = $(document).find('.news-image').width() * 0.5;
	}
	var op = {
		width: mywidth,
		type: 'cover',
		bgColor:'#fff'
	};
	$('img.cube').within(op);

	$(window).resize(function(){
		var twidth =$('#news_<{$block.mydirname}>').width();
		if(twidth>480) {
			var mywidth = $(document).find('.news-image').width() * 0.8;
		} else {
			var mywidth = $(document).find('.news-image').width() * 0.5;
		}
		$('span.cube').css('width',mywidth);
		$('span.cube').css('height',mywidth);
	});

});

</script>

<{foreach item=fullstory from=$block.fullstories}>
  <{include file="db:`$block.mydirname`_item.html" story=$fullstory}>
  <br />
<{/foreach}>

<div class="padded" id="news_<{$block.mydirname}>">
  <{foreach item=story from=$block.stories}>
  	<div class="row">
  		<div class="one fourth small-tablet padded news-image">
  			<img src="<{$story.image}>" class="cube">
    	</div>
  		<div class="three fourth small-tablet padded">
  			<h3><a href="<{$mydirurl}>/index.php?page=article&amp;storyid=<{$story.id}>"><{$story.title}></a></h3>
  			<ul class="d3news-info">
  					<li><i class="icon-calendar"></i> <{$story.date}></li>
  					<li><i class="icon-eye"></i> <{$story.hits}></li>
  			</ul>
  			<p><{$story.desc}>&nbsp;
  				<a href="<{$mydirurl}>/index.php?page=article&amp;storyid=<{$story.id}>" class="more"> Read more <i class="icon-angle-right"></i></a>
      	</p>
    	</div>
  </div>
  <hr />
  <{/foreach}>
</div>

<{/strip}>
