// JavaScript Document
    $(document).ready(function(){  
      var currentPosition = 0;  
      var slideWidth = 667;  //largeur des DIV
      var slides = $('.slide');  
      var numberOfSlides = slides.length; 
	  var retour = true;
	  var tempsTransition = 1000;
	  var affichePlayPause = true;
	  var lectureAutomatique = true;
      var tempsAttente = 5000;
 
var icones = new Array();
      icones['play'] = 'img/play_slider.png';
      icones['pause'] = 'img/pause_slider.png';
var interval;
var lectureEnCours = false;
	 
	  
      // Supprime la scrollbar en JS  
      $('#ContenuSlide').css('overflow', 'hidden');  
      
      slides  
      .wrapAll('<div id="slideInner"></div>')  
      // on met tous les slides en float:left pour qu'il s'affichent de manière horizontale  
      .css({  
        'float' : 'left',  
        'width' : slideWidth  
      });  
      
      // La longueur de #slideInner équivaut à la somme de la longueur de tous les slides  
      $('#slideInner').css('width', slideWidth * numberOfSlides);  
      
      // Insert les flèches de gauche et de droite  
      $('#MonSlideShow')  
        .prepend('<span class="control" id="leftControl">Précédent</span>')  
        .append('<span class="control" id="rightControl">Suivant</span>');  
      
      // Cache la flèche de gauche au début  
      manageControls(currentPosition);  
      
		//Crée un écouteur d'évènement de type clic sur les classes .control
		  $('.control')
			.bind('click', function(){
		 
			// Determine la nouvelle position
			currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
		 
			if(currentPosition == numberOfSlides && retour == false ){
				currentPosition--;
				pause();
			}
      
          //Cache ou montre les flèches  
          manageControls(currentPosition);  
          // Déplace le slide en utilisant la flèche de gauche  
          $('#slideInner').animate({  
            'marginLeft' : slideWidth*(-currentPosition) 
          });  
        });  
      
      // manageControls: Cache ou montre les flèches de contrôles en fonction de la position  
      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();
		   }
 }
	
		//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();
        }
    });
}
	

function start() {
    lectureEnCours = true;
        interval = setInterval(suivant, tempsAttente );
}
 
function suivant(){
    $('#rightControl').click();
}
 
function pause() {
    lectureEnCours = false;
        clearInterval(interval);
}

 
    // Cache ou montre les controles
    manageControls(currentPosition);
    // Fais bouger le slide
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    },tempsTransition);
	});