$(document).ready(function()
{
    var currentPosition = 0;                // position de départ
    var slideWidth = 870;                   // largeur totale du slide show
    var imgWidth = 219;                     // largeur d'une image (en prenant en compte l'espace entre 2 images)
    var nbVisible = 4;                      // nombre d'images visibles en même temps
    var timeout = 3000;                     // pause entre chaque slide en ms
    var sens = 1;                           // sens de déplacement du slideshow [1 = vers la droite / -1 = vers la gauche]
    
    var slides = $('.petit_slide');
    var numberOfSlides = slides.length;
    var timeOutHandler;
    var animating = 0;                      // check si une animation est en cours ou pas

    // Supprime la scrollbar en JS  
    $('#petit_slidesContainer').css('overflow', 'hidden');  

    slides
    .wrapAll('<div id="petit_slideInner" style="margin-left: 0px;"></div>')
    // on met tous les slides en float:left pour qu'il s'affichent de manière horizontale  
    .css({
     'float' : 'left',  
     'width' : imgWidth  
    });  

    // La longueur de #slideInner équivaut à la somme de la longueur de tous les slides  
    $('#petit_slideInner').css('width', slideWidth * numberOfSlides);

    $('#fleche_gauche_diapo').click( function() { onFlecheGauche() } );
    $('#fleche_droite_diapo').click( function() { onFlecheDroite() } );
     
    timeOutHandler = setTimeout(lecture_auto, timeout);

    function lecture_auto()
    {
        if(numberOfSlides > nbVisible && animating == 0)
        {
            animating = 1;
            
            currentPosition = currentPosition + sens;

            /*if(parseInt(currentPosition + nbVisible - 1) == numberOfSlides)
                currentPosition = 0;*/
            if(currentPosition == parseInt(numberOfSlides - nbVisible + 1))
            {
                sens = -1;
                currentPosition = currentPosition - 2;
            }
            else if(currentPosition == -1)
            {
                sens = 1;
                currentPosition = currentPosition + 2;
            }
            
            $('#petit_slideInner').animate(
                {'marginLeft' : parseInt($('#petit_slideInner').css('marginLeft')) - parseInt(imgWidth * sens)},
                "medium",
                function() {animating = 0;}
            );
            timeOutHandler = setTimeout(lecture_auto, timeout);
        }
    }
    
    function onFlecheGauche(event)
    {
        if(animating == 0)
        {
            animating = 1;
            clearTimeout(timeOutHandler);

            currentPosition++;
            if(currentPosition == parseInt(numberOfSlides - nbVisible + 1))
            {
                sens = -1;
                currentPosition = currentPosition - 2;
                
                $('#petit_slideInner').animate(
                    {'marginLeft' : parseInt($('#petit_slideInner').css('marginLeft')) + parseInt(imgWidth)},
                    "medium",
                    function() {animating = 0;}
                );
            }
            else
            {
                $('#petit_slideInner').animate(
                    {'marginLeft' : parseInt($('#petit_slideInner').css('marginLeft')) - parseInt(imgWidth)},
                    "medium",
                    function() {animating = 0;}
                );
            }
            
            timeOutHandler = setTimeout(lecture_auto, timeout);
        }
    }
    
    function onFlecheDroite(event)
    {
        if(animating == 0)
        {
            animating = 1;
            clearTimeout(timeOutHandler);

            currentPosition--;
            if(currentPosition == -1)
            {
                sens = 1;
                currentPosition = currentPosition + 2;
                
                $('#petit_slideInner').animate(
                    {'marginLeft' : parseInt($('#petit_slideInner').css('marginLeft')) - parseInt(imgWidth)},
                    "medium",
                    function() {animating = 0;}
                );
            }
            else
            {
                $('#petit_slideInner').animate(
                    {'marginLeft' : parseInt($('#petit_slideInner').css('marginLeft')) + parseInt(imgWidth)},
                    "medium",
                    function() {animating = 0;}
                );
            }
            
            timeOutHandler = setTimeout(lecture_auto, timeout);
        }
    }
});