{define_derivative name='carousel' width='300' height='350' min_width='350'}

{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}


<div class="carousel">
			{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}
									{if !empty($cat.icon_ts)}
									<img title="{$cat.icon_ts.TITLE}" src="{$ROOT_URL}{$themeconf.icon_dir}/recent{if $cat.icon_ts.IS_CHILD_DATE}_by_child{/if}.png" alt="(!)">
									{/if}
								</h3>
								<div class="Nb_images">
								{if isset($cat.INFO_DATES) }
								<p class="dates">{$cat.INFO_DATES}</p>
								{/if}
								<p >{$cat.CAPTION_NB_IMAGES}</p>
								{if not empty($cat.DESCRIPTION)}
								<p>{$cat.DESCRIPTION}</p>
								{/if}
								</div>
							</div>
						</a>
						</div>
			{/foreach}
</div>