// JavaScript Document

$(document).ready(function(){
        //Configuration
              var retour = true;
              var tempsTransition = 1000;
              var affichePlayPause = true;
              var lectureAutomatique = true;
              var tempsAttente = 3000;
                
              var icones = new Array();
                    icones['play'] = 'css/img/play_slider.png';
                    icones['pause'] = 'css/img/pause_slider.png';	
                
              var currentPosition = 0;
              var slideWidth = 260;
              var slides = $('.slide');
              var numberOfSlides = slides.length;
              var interval;
              var lectureEnCours = false;
			  
			  
		//on ajoute les boutons 
 			slides.each(function(index) {
 			$('.slidenav').append('<a href="#'+(index+1)+'" class="slideidx">'+(index+1)+'</a>');
			})

 		//on marque le premier bouton comme actif
 			$('.slideidx:eq(0)').addClass('curslideidx');

 			$('.slideidx')
				.bind('click', function() {
					currentPosition = $(this).html()-1;
 					manageControls(currentPosition);
				 	$('.slideidx').each(function(){
 						$(this).removeClass('curslideidx');
 					})
 					$(this).addClass('curslideidx');

 					// Move slideInner using margin-left
 					$('#slideInner').animate({
 						'marginLeft' : slideWidth*(-currentPosition)
					 });
 			});
	  
			  
      // 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);
    
      // Insert controls in the DOM
      $('#slideshow')
        .prepend('<span class="control" id="leftControl">Précédent</span>')
        .append('<span class="control" id="rightControl">Suivant</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
        $('#slideInner').animate({
          'marginLeft' : slideWidth*(-currentPosition)
        },tempsTransition);
      });
    
      // 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();
            }
        });
    }  
    });