jQuery(function(){
	
	var scrollPos = 0;
	var enableAutoScroll = true;
	
	/**
	 * Ajoute un item pour la navigation entre les slides
	 */
	function buildAnchorLink( index, DOMelement ){
		var $elem = jQuery(DOMelement);
		
		$elem.data('pagerScrollPos', scrollPos);
		
		var thumbWidth = parseInt($elem.attr('data-thumb-width'));
		scrollPos += thumbWidth + 14; // bordure de 7 pixels sur les côtés
		
		var item = '<li style="width: ' + thumbWidth + 'px;"><a href="#"><img src="' + $elem.attr('data-thumbnail') + '" /></a></li>';
		
			//s'il s'agit du dernier item, on active le hoverscroll
		if( index == $elem.siblings().length){
			setTimeout(function(){
				jQuery( '.pager' ).hoverscroll({
					arrows: false,
					width: $elem.parent().width(),
					height: 59
				}).hover(
					function(){ enableAutoScroll = false; },
					function(){ enableAutoScroll = true; }
				);
			}, 500);
		}
		
		return item;
	}
	
	/**
	 * Décale la navigation pour que l'item actif soit toojours visible
	 */
	function scrollPager(currSlideElement, nextSlideElement, options, forwardFlag){
		var $next = jQuery( nextSlideElement );
		var $listcontainer = jQuery( '.listcontainer' );
		if( $listcontainer.length && enableAutoScroll )
		{
			$listcontainer.animate( {
				scrollLeft: $next.data('pagerScrollPos')
			});
		}
	}
	
	jQuery( '.block-diaporama .pics' ).cycle({
		pager: '.pager',
		pagerAnchorBuilder: buildAnchorLink,
		before: scrollPager
	});
});