$(document).ready(function() {
	// Calculs préalables : 
		// Element de référence pour la zone de visualisation (ici le premier item)
	var reference = $('.caroussel li:first-child');
		// Calcul du nombre d'éléments
	var nbElement = $('.caroussel li').length;
		// Ciblage de la bande à faire défiler
	$('.caroussel')
			// Englobage de la liste par la zone de visualisation
		.wrap('<div class="caroussel-conteneur"></div>')
		.css("width", (reference.width() * nbElement) );
		// Ciblage de la zone de visualisation
	$('.caroussel-conteneur')
			// Application de la hauteur d'une seule diapositive
		.css('height', reference.height())
			// Application de la largeur d'une seule diapositive
		.css('width', reference.width())
			// Blocage des débordements
		.css('overflow', 'hidden')
			// Insertion des boutons de navigation
		.after('' 
			+   '<div class="caroussel-pagination">'
	        +   '   <div class="caroussel-prev"><button type="button">&nbsp;</button></div>'
	        +   '   <div class="caroussel-next"><button type="button">&nbsp;</button></div>'
	        +   '</div>'
	        +   '');
		
		// Actions de navigation
		// 
		// Initialisation du compteur
		var cpt = 0;
			// Clic sur le bouton "Suivant"
		$('.caroussel-next button').click(function() {
			// Si le compteur est inférieur au nombre d'élements - 1
			if(cpt < nbElement-1) {
			// Déplacement à la diapositive suivante
				cpt++;

				// Déplacement du caroussel en arrière-plan
				$('.caroussel').animate({
					marginLeft : - (reference.width() * cpt)
				});
			}
		});

		// Clic sur le bouton "Précédent"
		$('.caroussel-prev button').click(function() {
			// Si le compteur est supérieur à 0
			if(cpt > 0) {
				// Déplacement à la diapositive suivante
				cpt--;

				// Déplacement du caroussel en arrière-plan
				$('.caroussel').animate({
					marginLeft : - (reference.width() * cpt)
				});
			}
		});
});