$(document).ready(function(){  
  var currentPosition = 0;  
  var slideWidth = 600;  
  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">Move left</span>')  
    .append('<span class="control" id="rightControl">Move right</span>');  
  
  // Cache la fl�che de gauche au d�but  
  manageControls(currentPosition);  
  
  // cr�e un �couteur pour l'�v�nement de type clic sur les div qui ont la classe .control  
  $('.control')  
    .bind('click', function(){  
    // Determine une nouvelle position  
      currentPosition = ($(this).attr('id')=='rightControl')  
    ? currentPosition+1 : currentPosition-1;  
  
      //Cache ou montre les fl�ches  
      manageControls(currentPosition);  
      // Move slideInner using margin-left  
      $('#slideInner').animate({  
        'marginLeft' : slideWidth*(-currentPosition)  
      });  
    });  
  
  // manageControls: Cache ou montre les fl�ches de contr�les en fonction de la position  
  function manageControls(position){  
    // Hide left arrow if position is first slide  
    if(position==0){ $('#leftControl').hide() }  
    else{ $('#leftControl').show() }  
    // Hide right arrow if position is last slide  
    if(position==numberOfSlides-1){ $('#rightControl').hide() }  
    else{ $('#rightControl').show() }  
    }  
  });