$(document).ready(function(){
	var currentPos=0;
	var totWidth=0;
	var totSucre=0;
	var positions=new Array();
	$('.slide').each(function(i){
		totSucre+=1;
		positions[i]= totWidth;
		totWidth += $(this).width();
	});
	$('#projet_cadre').after('<ul id="thumbs"></ul>');
	$('#projet_cadre').after('<div id="left" class="controle" style="display:none;"></div><div id="right" class="controle"></div>');
	$('#projet_slide').width(totWidth);
	for (var y=0;y<totSucre;y++) {
	
		$('#thumbs').append('<li id="'+(y+1)+'"></li>');
	
	};
	
	var direct = function() {
		$('#thumbs li').removeClass('survol');
		currentPos = $(this).attr('id')-1;
		$(this).addClass('survol');
		$('#projet_slide').stop().animate({marginLeft:-positions[currentPos]+'px'},1000);
		$('.controle').fadeIn();
		if(currentPos==0) $('#left').fadeOut();
		if(currentPos==totSucre-1) $('#right').fadeOut();
	};
	
	var animation = function() {
		$('#thumbs li').removeClass('survol');
		$('.controle').unbind('click', animation);
		($(this).attr('id')=='right') ? currentPos+=1 : currentPos-=1;
		$('#projet_slide').stop().animate({marginLeft:-positions[currentPos]+'px'},1000,function(){
			$('.controle').bind('click', animation);
		});
		$('#'+(currentPos+1)).addClass('survol');
		$('.controle').fadeIn();
		if(currentPos==0) $('#left').fadeOut();
		if(currentPos==totSucre-1) $('#right').fadeOut();
	};
	
	$('.controle').bind('click', animation);
	$('#thumbs li').bind('click', direct);
	$('#thumbs li:first').addClass('survol');
	
	
});