$(document).ready(function() {
  
  /* configuration */
  var retour = true;
  var tempsTransition = 1000;
  var affichePlayPause = true;
  var autoPlay = true;
  var tempsAttente = 7000;
  var icones = new Array();
  icones['play']  = '/themes/tronic/gfx/play-slider.png';
  icones['pause'] = '/themes/tronic/gfx/pause-slider.png';
  var currentPosition = 0;
  var slideWidth = 752;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  var interval;
  var lectureEnCours = false;
      
  // remove the scrollbar
  $('#slidesContainer').css('overflow', 'hidden');

  // #slideInner attributes to all division of '.slide' class
  slides.wrapAll('<div id="slideInner"></div>')
  
  // float left to display horizontally, readjust .slides width
  .css({
      'float' : 'left',
      'width' : slideWidth
    });

  // #slideInner length equal to the total length of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // insert controls in the DOM
  $('#highlighted-products')
    .prepend('<span class="control" id="leftControl"></span>')
    .append('<span class="control" id="rightControl"></span>');
  
  // hide left arrow control on first load
  manageControls(currentPosition);

  /**
   * Handle click for the 'control' classes
   */
  $('.control').bind('click', function() {
    
    /* determine the current 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 Precedent(){
  $('#leftControl').click();
  }
  
  function start() {
    lectureEnCours = true;
    interval = setInterval(suivant, tempsAttente );
  }
  function pause() {
    lectureEnCours = false;
   clearInterval(interval);
  }
  
  /* If AutoPlay is enabled */ 
  if (autoPlay == true) {
    start();
  }
  if(affichePlayPause == true) {
    $('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
    if(autoPlay == 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();
      }
    });
  }
   
});