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

{footer_script}{literal}
$(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: 5,
		mousewheelScrolling: "allDirections",
		manualContinuousScrolling: true,
		
	});	
			
	$("div.carousel").bind("mouseover", function() {
		$(this).smoothDivScroll("stopAutoScrolling");
	}).bind("mouseout", function() {
		$(this).smoothDivScroll("startAutoScrolling");
	});	
});
{/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}
							</h3>
							<div>
								{$cat.CAPTION_NB_IMAGES}
						</div>
							</div>	
						</a>
						</div>
			{/foreach}
</div>