$(document).ready(function() {

	// calcul puis assignation de la largeur du slide
	var imgload = new Image(); // pour preload
	var sliderWidth = 0;
	$('ul#pager').children().each(function() {
		imgload.src = $(this).children().children().attr('src') ;
		sliderWidth += parseInt($(this).width());
	});

	$('ul#pager')
		.before('<div id="prevButton"><a href="#" title="Image précédente"></a></div>')
		.before('<div id="nextButton"><a href="#" title="Image suivante"></a></div>')
		.wrap($('<div/>').attr('id', 'myGalerie_ThumbsWrapper'))
		.width(sliderWidth)
		.css('position', 'absolute');

	$('div#big ul').cycle({
		timeout:1000,
		speed:1000,
		next: '#nextButton',
		prev: '#prevButton',
		pager:'#pager',
		pagerAnchorBuilder: function (idx, slide) {
			return '#pager li:eq(' + idx + ') a';
		},
		before : function(slideIn, slideOut){
			// position de l'élément voulu
			var slideOutId = $(slideOut).attr('id');
			leftPos = 0;
			$("ul#pager li").each(function(){
				var a = $(this).find('a').attr('href').substring(1);
				if(a==slideOutId) return false;		
				leftPos += $(this).width();
			});

			if(leftPos >=  $("ul#pager").width() - $('div#myGalerie_ThumbsWrapper').width()) 
				leftPos = $("ul#pager").width() - $('div#myGalerie_ThumbsWrapper').width();

			$('ul#pager').stop().animate({left:-leftPos});
			$('div#big').height($(slideOut).height());
		}
	});	
});