$(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/play2.png';
		icones['pause'] = '/img/pause2.png';	
			
		  var currentPosition = 0;
		  var slideWidth = 285;
		  var marginLeft = 15;
		  var marginRight = 10;
		  var slides = $('.slide');
		  var numberOfSlides = slides.length - 2;
		  var interval;
		  var lectureEnCours = false;

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

  // Longueur de #slideInner égale au total de la longueur de tous les slides
  $('#slideInner').css('width', (slideWidth * numberOfSlides ));

  // Insert controls in the DOM
  $('#Selection')
    .prepend('<span class="control" id="leftControl"></span>')
    .append('<span class="control" id="rightControl"></span>');
 
  // 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(){
	
    // 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
    $('#slidesContainer').animate({
      'marginLeft' : (slideWidth + marginLeft + marginRight)*(-currentPosition)
    },tempsTransition);    
	});
  
	$(".slide").mouseover(function(){		
	lectureEnCours = false;
	clearInterval(interval);	
	manageControls(currentPosition);
	});
    
    $(".slide").mouseout(function(){
    start();	
    });

  // 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){

	$('#Selection').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();
		}
	});
}  	
});