$(document).ready(function(){
	//Configuration
	var retour = true;
	var tempsTransition = 1000;
	var affichePlayPause = false;
	var lectureAutomatique = true;
	var tempsAttente = 4000;

	var icones = new Array();
		icones['play'] = 'img/play_slider.png';
		icones['pause'] = 'img/pause_slider.png';	

	var currentPosition = 0;
	var slideWidth = 550;
	var slides = $('.slide');
	var numberOfSlides = slides.length;
	var interval;
	var lectureEnCours = true;

	var hash = window.location.hash.substring(1);
		  
	// Supprime la scrollbar en JS
	$('#slidesContainer').css('overflow', 'hidden');

	// Attribue  #slideInner  à toutes les div .slide
	slides
		.wrapAll('<div id="slideInner"></div>')
		// Float left to display horizontally, readjust .slides width
		.css({
		  'float' : 'left',
		  'width' : slideWidth
		});

	// Longueur de #slideInner égale au total de la longueur de tous les slides
	$('#slideInner').css('width', slideWidth * numberOfSlides);
	
	if(!isNaN(parseFloat(hash))){
		currentPosition = parseFloat(hash);
		$('#slideInner').animate({
							'marginLeft' : slideWidth*(-currentPosition)
						},tempsTransition);
	}
	
	
	// Insert controls in the DOM
	$('#slidesContainer')
		.append('<div id="leftControlContainer"><div class="control" id="leftControl">Précédent</div></div>')
		.append('<div id="rightControlContainer"><div class="control" id="rightControl">Suivant</div></div>');
		
	for(i=0; i<numberOfSlides; i++){
		if(i==0){
			$('#pagination').append('<li class="selected"><a href="#" id="pagin'+i+'" class="control">'+i+'</a></li>');
		}
		else{
			$('#pagination').append('<li class><a href="#" id="pagin'+i+'" class="control">'+i+'</a></li>');
		}
	}


	// Hide left arrow control on first load
	manageControls(currentPosition);

	//Crée un écouteur d'évènement de type clic sur les classes .control
	$('.control')
		.bind('click', function(){
			//alert($(this).attr('id').substring(0, 4));
		// Determine la nouvelle position
		if($(this).attr('id')=='rightControl'){
			currentPosition++;
		}else if($(this).attr('id')=='leftControl'){
			currentPosition--;
		}
		else if($(this).attr('id').substring(0, 5) == "pagin"){
				hash = $(this).attr('id').substring(5,6);
				currentPosition = parseFloat(hash);
				lectureAutomatique = false;
				pause();
		}
		if(currentPosition == numberOfSlides && retour == false ){
			currentPosition--;
			pause();
		}

		// Cache ou montre les controles
		manageControls(currentPosition);
		
		// Fais bouger le slide
		$('#slideInner').animate({
			  'marginLeft' : slideWidth*(-currentPosition)
		},tempsTransition);
			
		//Pagination
		$('ul .selected').removeClass('selected');
		$("li:has('#pagin"+currentPosition+"')").addClass('selected');
		alert 
		
	});

	// manageControls: Cache ou montre les flêches de controle en fonction de la position courante
	function manageControls(position){
		// Cache la fleche "précédent" si on est sur le premier slide
		if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
		// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
		if(position==numberOfSlides-1 && retour == false){
			$('#rightControl').hide();
		} else {
			$('#rightControl').show();
		}
		if(position == numberOfSlides && retour == true){
			currentPosition = 0;
			 $('#leftControl').hide();
		}
	}
	function suivant(){
		$('#rightControl').click();
		}
	function start() {
		lectureEnCours = true;
		interval = setInterval(suivant, tempsAttente );
		}
	function pause() {
		lectureEnCours = false;
		clearInterval(interval);
	}

	//Si le diapo est activé 
	if(lectureAutomatique == true){
		start();
	}
	if(affichePlayPause == true){
		$('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
	if(lectureAutomatique == true){
		$('#navDiapo').attr('src',icones['pause']);
	}else{
		$('#navDiapo').attr('src',icones['play']);	
	}
	$('#navDiapo').bind('click', function(){
		if(lectureEnCours == true){
			$(this).attr('src',icones['play']);
			pause();
		}else{
			$(this).attr('src',icones['pause']);
			start();
		}
	});
	}


  	
});