$(document).ready(function() {



    // on numérote les LI
    var compteur = 1;
    $('.gallery ul li').each(function() {
        $(this).addClass('' + compteur + '');
        compteur++;
    });
    
    if ($('.gallery ul li').size() <= 1) {
        $('.pagination .prev, .pagination .next').hide()
    }
    
    // Initialisation de variable
    var variable = {
        liWidth: 450,
        tailleUl: ($('.gallery ul li').size() * 450),
        positionUl: null,
        positionLi: 1,
        nombre_de_li: $('.gallery ul li').size()
    };

    // On défini la taille du LI et on pose la classe active sur le 3eme
    $('.gallery ul').width(variable.tailleUl);
    $('.gallery ul li').eq(0).addClass('active')

    $('.next').click(function() {
        moveNext();
    });




    $('.prev').click(function() {
        movePrev();
    });

    function moveNext() {

        $('.prev, .next').unbind('click');

        if ($('.gallery ul li.active').next().size() == 0) {
            $('.gallery ul li:first').clone().insertAfter('.gallery ul li:last');
            $('.gallery ul').css('left', 0);
            $('.gallery ul li:first').remove();
        }

        variable.positionUl = parseInt($('.gallery ul').css('left'));
        variable.destination = variable.positionUl - variable.liWidth;

        $('.gallery ul').animate({ 'left': variable.destination }, 1000, function() {
            $('.gallery ul li.active').removeClass('active').next().addClass('active');

            variable.destination = variable.positionUl;
            $('.gallery ul').css('left', variable.destination);
            $('.gallery ul li:first').clone().insertAfter('.gallery ul li:last');
            $('.gallery ul li:first').remove();
            $('.next').bind('click', function() {
                moveNext()
            });
            $('.prev').bind('click', function() {
                movePrev()
            });
        });
    }

    function movePrev() {
        // TODO VERIFIER S'IL Y A UN PRECEDENT ET CLONER AVANT D4ANIMER S'IL N'Y EN A PAS.
        $('.prev, .next').unbind('click');


        //alert($('.gallery ul li.active').prev().size());

        if ($('.gallery ul li.active').prev().size() == 0) {
            $('.gallery ul li:last').clone().insertBefore('.gallery ul li:first');
            $('.gallery ul').css('left', -450);
            $('.gallery ul li:last').remove();
        }

        variable.positionUl = parseInt($('.gallery ul').css('left'));
        variable.destination = variable.positionUl + variable.liWidth;

        $('.gallery ul').animate({ 'left': variable.destination }, 1000, function() {
            $('.gallery ul li.active').removeClass('active').prev().addClass('active');

            variable.destination = variable.positionUl;
            $('.gallery ul').css('left', variable.destination);
            $('.gallery ul li:last').clone().insertBefore('.gallery ul li:first');
            $('.gallery ul li:last').remove();
            $('.prev').bind('click', function() {
                movePrev()
            });
            $('.next').bind('click', function() {
                moveNext()
            });
        });
    }
});