/* Effets pour l'apparition du sous menu */
$(document).ready(function () {

	var idBlocCarrousel = 1; // initialisation au premier bloc
	var idBtnCurrent; // Permet de rattacher le bloc a la bonne puce
	var nbBlocCarrousel = $('div.carrouselItem').length; // Nombre de bloc total
	
	var widthCarrousel = $('div.carrouselItem').width(); // Taille des blocs: permet de savoir de combien on doit scroller
	var leftBlocCarrousel; // modification de l'attribut left du container
	
	var play; // Stockage de l'Interval
	var isClone; // permet de savoir que l'on ai sur le clone du premier bloc
	
	// On initialise les classes du bouton play et de la première puce
	$('#btn_play').removeClass('btnCarrouselPlay');
	$('#btn_play').addClass('btnCarrouselPlayActif');
	$('#carrousel_'+idBlocCarrousel).addClass('btnCarrouselActif');		
	
	
	/************************************************ Les Boutons du carrousel (item, pause, play, precedent, suivant) **************************************/	
	// Gestion des boutons item
	$('div.buttonsItem').click(function () {
		idBtnCurrent = this.id;		
		// On stop le diaporama automatique
		clearInterval(play);
		idBlocCarrousel = this.id.replace('carrousel_','');

		// défilement du carrousel
		scrollLeftCarrousel();
		
		// On réinitialise les classes des puces
		$('div.buttonsItem').each(function() { 	$(this).removeClass('btnCarrouselActif'); $(this).addClass('btnCarrousel'); });		
		
		// On active la puce correspondant au bloc courant
		$(this).removeClass('btnCarrousel');	
		$(this).addClass('btnCarrouselActif');	
		
		// On arrete le défilement automatique
		stopCarrousel();
	});
	
	// Click sur le bouton précédent
	$('#btn_before').click(function() {
		
		// On arrete le défilement automatique
		stopCarrousel();
		
		// On "recule" le carrousel
		moveCarrousel('before');
	});
	
	// Click sur le bouton précédent
	$('#btn_after').click(function() {
		
		// On arrete le défilement automatique
		stopCarrousel();
		
		// On "avance" le carrousel
		moveCarrousel('after');
	});		
	
	// Activation du diaporama
	$('#btn_play').click(function() {
		// On vérifie que le carrousel ne soit pas déja activé
		if(play == '') {
			playCarrousel();
		}		
	});
	
	// Activation de la pause
	$('#btn_pause').click(function() {
		stopCarrousel();
	});
	
	/********************************************** Fin Gestion des boutons ********************************************************/
	
	// On déplace le carrousel vers la gauche
	function scrollLeftCarrousel() {		
		// On détermine le left auquel démarre notre bloc
		leftBlocCarrousel = -(idBlocCarrousel-1)*widthCarrousel;
		$('div.carrouselContainer').animate({left: leftBlocCarrousel});
	}	
		
	// On change de bloc sens : before ou after
	function moveCarrousel(sens) {
	
		// Si l'on souhaite faire avancer le carrousel
		if(sens == 'after') {	
			// Si on vient du bloc cloné
			if(isClone == true) {
				// On se repositionne au début du carrousel
				$('div.carrouselContainer').css({left: 0});
				// Puis on passe tout de suite à la deuxième image
				idBlocCarrousel = 2;
				isClone = false;
			}
			// Si on vient pas du clone
			else {
				// On avance d'un bloc
				idBlocCarrousel++;
				// Si on est plus dans la boucle on reinitialise
				if(idBlocCarrousel > nbBlocCarrousel) {
					idBlocCarrousel = 1;
				}
			}
		}
		// Si l'on veut reculer
		else if (sens == 'before') {
			// On recule d'un bloc
			idBlocCarrousel--;
			// Si on est plus dans la boucle on va a la fin
			if(idBlocCarrousel == 0){
				$('div.carrouselContainer').css({left: -(nbBlocCarrousel-1)*widthCarrousel});				
				idBlocCarrousel = nbBlocCarrousel-1;// On ne va pas sur le clone
			}
		}		
		
		$('div.carrouselContainerSup').css({height: $('#item_carrousel_'+idBlocCarrousel).css("height")});
					
		// On regarde si on est sur le clone de la première image
		if($('#item_carrousel_'+idBlocCarrousel).hasClass('cloneItem')) {
			idBtnCurrent = 1;
			isClone = true;
		}
		else {
			idBtnCurrent = idBlocCarrousel;
		}
		
		
		
		// On réinitialise les puces des classes
		$('div.buttonsItem').each(function() { 	$(this).removeClass('btnCarrouselActif'); $(this).addClass('btnCarrousel'); });
		
		// On met active la puce courante
		$('#carrousel_'+idBtnCurrent).removeClass('btnCarrousel');
		$('#carrousel_'+idBtnCurrent).addClass('btnCarrouselActif');
		
		// On se déplace sur le carrousel
		scrollLeftCarrousel();	
	}	
	
	/*************************************************** Start and Stop Carrousel ******************************************************/	
	
	// Gestion de la pause (arret du carrousel et changement des classes)
	function stopCarrousel() {
		// On supprime la fonction automatique
		clearInterval(play);
		play = '';
		// On désactive donc le bouton play
		$('#btn_play').removeClass('btnCarrouselPlayActif');
		$('#btn_play').addClass('btnCarrouselPlay');
		// On active le bouton pause
		$('#btn_pause').removeClass('btnCarrouselPause');
		$('#btn_pause').addClass('btnCarrouselPauseActif');
	}
	
	// Gestion de la mise en route du carrousel (+chnagement des classes)
	function playCarrousel() {
		play = setInterval(function() { moveCarrousel('after') },2500); 
		// on active le bouton play
		$('#btn_play').removeClass('btnCarrouselPlay');
		$('#btn_play').addClass('btnCarrouselPlayActif');
		// On desactive le bouton pause
		$('#btn_pause').removeClass('btnCarrouselPauseActif');
		$('#btn_pause').addClass('btnCarrouselPause');
	}
		
	/**************************************************** Déclenchement du carrousel ***********************************************************/	
	playCarrousel();
	
});