$(document).ready(function() {
		
		// on numérote les LI
		var compteur = 1;
		$('.gallery ul li').each(function(){
			$(this).addClass(''+compteur+'');
			compteur++;
		});
	
		// Initialisation de variable
		var variable = {
			liWidth: 200,
			tailleUl: ($('.gallery ul li').size()*200),
			positionUl: null,
			positionLi: 3,
			nombre_de_li: $('.gallery ul li').size()
		}; 
		
		if ($('.gallery ul li').size()<10)
			{variable.tailleUl=2000;
			$('.navigation_gamme ul').css('margin-left' , '480px');
			}
		
		// On défini la taille du LI et on pose la classe active sur le 3eme
		$('.gallery ul').width(variable.tailleUl);
		$('.gallery ul li').eq(2).addClass('active');
		
		$('.next').click(function(){
			moveNext();
		});
		$('.prev').click(function(){
			movePrev();
		});
		
		function moveNext() {
			
			$('.prev, .next').unbind('click');
			
			variable.positionUl = parseInt( $('.gallery ul').css('left') );
			variable.destination = variable.positionUl - 200;
			
			$('.gallery ul').animate({'left':variable.destination},800,function(){
				$('.gallery ul li.active').removeClass('active').next().addClass('active');
				
				variable.destination = variable.positionUl;
				$('.gallery ul').css('left',variable.destination);
				$('.gallery ul li:first').detach().insertAfter('.gallery ul li:last');
				//$('.gallery ul li:first').remove();
				$('.next').bind('click',function(){
					moveNext()
				});
				$('.prev').bind('click',function(){
					movePrev()
				});
			});
		}
		
		function movePrev() {
		
			$('.prev, .next').unbind('click');
		
			variable.positionUl = parseInt( $('.gallery ul').css('left') );
			variable.destination = variable.positionUl + 200;
			
			$('.gallery ul').animate({'left':variable.destination},800,function(){
				$('.gallery ul li.active').removeClass('active').prev().addClass('active');
				
				variable.destination = variable.positionUl;
				$('.gallery ul').css('left',variable.destination);
				$('.gallery ul li:last').detach().insertBefore('.gallery ul li:first');
				//$('.gallery ul li:last').remove();
				$('.prev').bind('click',function(){
					movePrev()
				});
				$('.next').bind('click',function(){
					moveNext()
				});
			});
		}	
		
		
		$('.navigation_gamme').mouseenter(function(){
			$(this).addClass('hover');										   
		});
		$('.navigation_gamme').mouseleave(function(){
			$(this).removeClass('hover');										   
		});
		
		function moveAlone(){
			if ( $('.navigation_gamme.hover').size() == 0 ) {
				moveNext();
			}
			setTimeout(function(){moveAlone() }, 3000);
		}
		
		
		setTimeout(function(){moveAlone() }, 3000);
		
		
	});