$(document).ready(function() {	
	var currentPosition = 0;
	// longueur du conteneur du slideShow (pixel)
	var slideWidth = 948;
	var slides = $('.slide');  
	var numberOfSlides = slides.length;
	
	// Activation (true) desactivation (false) du retour au premier 
	// slide quand on arrive au dernier
	var retour = true;
	// Duree de la transition (en seconde)
	var tempsTransition = 1000;
	// Affichage des boutons play/pause (true) masquage (false)
	var affichePlayPause = true;
	// Active ou desactive la lecture automatique
	var lectureAutomatique = true;
	// Temps de pause (en seconde) entre chaque animation
	var tempsAttente = 7000;  
	
	// Chemin vers les images pour les boutons play et pause
	var icones = new Array();  
		icones['play'] = 'images/play_slider.png';  
		icones['pause'] = 'images/pause_slider.png';     
	// Activation (true) desactivation (false) l'affichage des fleches  
	// slide suivant / slide precedent
	var afficheSuivantPrecedent = false;
	// Arffiche la navigation qui permet d'aller directement sur un slide
	var navigation = true;
	
	var interval;  
	var lectureEnCours = false;
	var barreNav;

	// Construction du slideShow
	$('#slidesContainer').css('overflow', 'hidden');  
	slides
		.wrapAll('<div id="slideInner"></div>')
		.css({
			'float': 'left', 
			'width': slideWidth 
		});
	$('#slideInner').css('width', slideWidth * numberOfSlides);
	// Si on veut les flèches suivant precedent
	if(afficheSuivantPrecedent == true){
		$('#slideshow')
			.append('<span class="control" id="leftControl">Move left</span>')
			.append('<span class="control" id="rightControl">Move right</span>');
		manageControls(currentPosition);
		$('.control')
			.bind('click', function(){  
				currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
				if(currentPosition == numberOfSlides && retour == false ){
					currentPosition--;
					pause();
				}
				manageControls(currentPosition);
				animSlide(currentPosition);
			}
		);
		function manageControls(position){  
			if(position==0){ $('#leftControl').hide();
			}else{ $('#leftControl').show(); }  
			if ( position == numberOfSlides -1 && retour == false ) {
				$('#rightControl').hide();
			} else {
				$('#rightControl').show();
			}
			if ( position == numberOfSlides && retour == true ) {
				currentPosition=0;
				$('#leftControl').hide();
			}
		}
	}
	function animSlide(pos){
		$('#slideInner').animate({  
			'marginLeft' : slideWidth*(-pos)  
		},tempsTransition);
	}
	function suivant(){
		if(currentPosition == numberOfSlides-1){
			if(retour == true){ 
				currentPosition = 0;
			} else {
				currentPosition--;
				pause();
			}
		} else {
			currentPosition = currentPosition+1;
		}
		animSlide(currentPosition);
	}
	function start() {  
		lectureEnCours = true;  
		interval = setInterval(suivant, tempsAttente );  
	}
	function pause() {  
		lectureEnCours = false;  
		clearInterval(interval);  
	}
	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();
			}
		});
	}
	
	// Si on veut la navigation avec les petits arbres
	if(navigation == true){
		barreNav = '';
		barreNav += '<span id="slideNav">';
		slides.each(function(i){
			barreNav += '<span class="controlNav" id="'+i+'">&nbsp;</span>';
		});
		barreNav += '</span>';
		$('#slideshow').append(barreNav);
		$('#slideNav').css({'left': ((slideWidth/2)-((22*numberOfSlides)/2))+'px'});
		$('.controlNav').bind('click', function(){
			pause();
			currentPosition = parseInt($(this).attr('id'),10);
			animSlide(currentPosition);
		});

	}	
});