$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 445;
  
  // Clone le slide 1 pour le mettre à la fin de tous les slides
  $('.slide:first').clone().appendTo('#slidesContainer');

  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Supprime la scrollbar en JS
  $('#slidesContainer').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
  $('#slideshow')
    .prepend('<span class="control" id="leftControl"></span>')
    .append('<span class="control" id="rightControl"></span>')
	.append('<div id="bouton"><div id="button_bkg"></div><a id="bouton1">&nbsp;</a><a id="bouton2">&nbsp;</a><a id="bouton3">&nbsp;</a></div>');
	

  // 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
  $('#bouton1').click(function () {
	currentPosition = 0;
	pause();
	 $('#slideInner').animate({
	      'marginLeft' : slideWidth*(-currentPosition)
	    },tempsTransition);
		manageControls(currentPosition);
		start();
  });
  
  $('#bouton2').click(function () {
	currentPosition = 1;
	pause();
	 $('#slideInner').animate({
	      'marginLeft' : slideWidth*(-currentPosition)
	    },tempsTransition);
		manageControls(currentPosition);
		start();
  });
  
  $('#bouton3').click(function () {
	currentPosition = 2;
	pause();
	 $('#slideInner').animate({
	      'marginLeft' : slideWidth*(-currentPosition)
	    },tempsTransition);
		manageControls(currentPosition);
		start();
  });

  $('.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 controles
    manageControls(currentPosition);
    // Fais bouger le slide
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    },tempsTransition);
    
    // Si on arrive sur la dernière slide, on retourne directement à la première sans aller vers la gauche
    if(currentPosition == (numberOfSlides-1)){
    	$('#slideInner').queue(function(){ $('#slideInner').css('marginLeft', 0); currentPosition = 0; $(this).dequeue();});
    } 
  });

 // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
  function manageControls(position){
    
	if(position == numberOfSlides && retour == true){
		currentPosition = 0;
	}
	if(currentPosition == 0 ){
		$('#bouton1').addClass("actif");// classe CSS pour changer image active
		$('#bouton2').removeClass();
		$('#bouton3').removeClass();
	}
	if(currentPosition == 1 ){
		$('#bouton2').addClass("actif");
		$('#bouton1').removeClass();
		$('#bouton3').removeClass();
	}
	if(currentPosition == 2 ){
		$('#bouton3').addClass("actif");
		$('#bouton1').removeClass();
		$('#bouton2').removeClass();
	}
	if(currentPosition == 3 ){
		$('#bouton1').addClass("actif");
		$('#bouton2').removeClass();
		$('#bouton3').removeClass();
	}
  }
}); 
  

  //Config
		  var retour = true;
		  var tempsTransition = 1300;
		  var affichePlayPause = false;
		  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;	
		  
  function start() {
  	lectureEnCours = true;
        interval = setInterval(suivant, tempsAttente );
}

function suivant(){
	$('#rightControl').click();
}

function pause() {
  	lectureEnCours = false;
        clearInterval(interval);
}

 //Si le diapo est activé 
if(lectureAutomatique == true){
  start();
}