{define_derivative name='carousel' width='300' height='350' min_width='350'}
{php}
    global $page, $template;
    $template->assign('cat_name', $page['category']['name']);
	
{/php}

{footer_script}{literal}
(function($) {
	$(document).ready(function(){
	
		var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)),
			start;
		
		if (isTouch==true){
		start="";
		}else{
		start="onStart";
		};
		
		$("div.carousel").smoothDivScroll({
			autoScrollingMode: start,
			touchScrolling: true,
			autoScrollingStep: {/literal}{$Slim.carousel_speed}{literal},
			manualContinuousScrolling: true,
			mousewheelScrolling: "allDirections",
		
		});	
				
		$("div.carousel").bind("mouseover", function() {
			$(this).smoothDivScroll("stopAutoScrolling");
		}).bind("mouseout", function() {
			$(this).smoothDivScroll("startAutoScrolling");
		});	
	
		
	});
})(jQuery);
{/literal}{/footer_script}

{if (($Slim.style_slim)!=3)}
{footer_script}{literal}
(function($) {
	$(document).ready(function(){
		$('.fancybox').fancybox({
			helpers : {
				title : {
					type : 'over'
				},
			},	
			afterLoad: function() {
			$("div.carousel").smoothDivScroll("stopAutoScrolling");
			},
			afterClose: function() {
			$("div.carousel").smoothDivScroll("startAutoScrolling");
			}
		});		
		
	});
})(jQuery);
{/literal}{/footer_script}
{/if}

	<div class="carousel">
			{if !empty($category_thumbnails)}
			{foreach from=$category_thumbnails item=cat}
						<div class="illustration">
							<a href="{$cat.URL}">
								<img src="{$pwg->derivative_url($carousel, $cat.representative.src_image)}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '|@strip_tags:false} - {'display this album'|@translate}" min-width="{$carousel->max_width()}" height="{$carousel->max_height()-22}"/>
							
						<div class="CatMPdescription">
							<h3>
								{$cat.NAME}
							</h3>
							<div>
								{$cat.CAPTION_NB_IMAGES}
						</div>
							</div>	
						</a>
						</div>
			{/foreach}
			{/if}
				{foreach from=$thumbnails item=thumbnail}
				{assign var=derivative value=$pwg->derivative($carousel, $thumbnail.src_image)}
					<div class="illustration">
						<a href="{if ($Slim.style_slim)!=3}{$thumbnail.path}" class="fancybox" data-fancybox-group="gallery"{else}{$thumbnail.URL}"{/if} title="{$thumbnail.NAME|strip_tags:false|replace:'\'':'&#39;'|replace:'"':'&quot;'}">
						<img class="thumbnail" src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" height="{$carousel->max_height()-22}"/>
						{if $SHOW_THUMBNAIL_CAPTION }
							<div class="CatMPdescription">
								<H3>
									{$thumbnail.NAME}
									{if !empty($thumbnail.icon_ts)}
										<img title="{$thumbnail.icon_ts.TITLE}" src="{$ROOT_URL}{$themeconf.icon_dir}/recent.png" alt="(!)">
									{/if}
								</h3>
								{if isset($thumbnail.NB_COMMENTS) or isset($thumbnail.NB_HITS)}
									<div>
									{if isset($thumbnail.NB_COMMENTS)}
										<p class="{if 0==$thumbnail.NB_COMMENTS}zero {/if}nb-comments">
											{$pwg->l10n_dec('%d comment', '%d comments',$thumbnail.NB_COMMENTS)}
										</p>
									{/if}
									{if isset($thumbnail.NB_HITS)}
										<p class="{if 0==$thumbnail.NB_HITS}zero {/if}nb-hits">
											{$pwg->l10n_dec('%d hit', '%d hits',$thumbnail.NB_HITS)}
										</p>
									{/if}
									</div>
								{/if}
							</div>
						{/if}
						</a>	
					</div>	
				{/foreach}
	</div>