$(document).ready(function() { 
    
    marge = 60;
    
    // positions que doivent occuper les images pour donner une impression de 3d
    positions = [
                    { left: marge + 'px', zindex: 4, height: '160px', top: '30px' },
                    { left: (marge + 50) + 'px', zindex: 5, height: '190px', top: '15px' },
                    { left: (marge + 150) + 'px', zindex: 6, height: '220px', top: 0 },
                    { left: (marge + 280) + 'px', zindex: 5, height: '190px', top: '15px' },
                    { left: (marge + 360) + 'px', zindex: 4, height: '160px', top: '30px' },
                    { left: (marge + 200) + 'px', zindex: 3, height: '120px', top: '50px' }
                ];
    
    // initialisation
    for (i=0; i<6; i++) {
        $('#carrousel li:eq(' + i + ') img').each(function () {
            for (attr in positions[i]) {
                $(this).css(attr, positions[i][attr]);
            }
            $(this).css('z-index', positions[i].zindex);
            $(this).attr('class', i);
            
        });
        $('#carrousel p').html($('#carrousel li img.2').attr('alt'));
    }
    
    $('#carrousel li img.2').bind('click.lien', function() { 
        window.location.replace($('#carrousel li img.2').attr('id'));
    });
    
    count = 99996;
    
    // rotation du carousel  
    $('#carrousel li img').click(function () {
    
        var num = $(this).attr('class');
        if (num=='0') {
            run(200, ++count, ++count);
        }
        if (num=='1') {
            run(200, ++count);
        }
        if (num=='3') {
            run(200, --count);
        }
        if (num=='4') {
            run(200, --count, --count);
        }
        
        return false;
    });
    
   // animation du début
   $('#accroche').fadeTo(0,0);
   $('#accroche').css('display', 'block');
   $('#accroche').animate({ top: '60px', opacity: 1 }, 2000, function () {
        $('#accroche').animate({ top: '100px', opacity: 0 }, 1000, function () {
            $('#accroche').css('display', 'none');
        });
        $('#carrousel #cache-blanc').fadeOut(1000, function () {
            $('#carrousel p').fadeIn(1000);
            $('#carrousel a').fadeIn(1000);
        });
   });
});

// effectue une rotation
run = function(time, offset, next) {

    for (i=0; i<6; i++) {
        $('#carrousel li:eq(' + i + ') img').each(function () {
            // animation des images vers leurs nouvelles positions
            $(this).animate(positions[(offset+i)%6], time);
            // pour que le moment ou les images se croisent se voit moins on l'effectue à mi-chemin
            setTimeout('setZindex(' + i + ', ' + offset + ')', time/2);
            // ce numéro permet de facilement repérer les images en fonction de leur position
            $(this).attr('class', (offset+i)%6);
        });
    }

    $('#carrousel a').fadeOut('fast');
    $('#carrousel p').fadeOut('fast', function () {
        if (!next) {
            // affichages du text et des liens
            $('#carrousel p').removeClass().addClass($('#carrousel li img.2').parents().attr('class'));
            $('#carrousel p').html($('#carrousel li img.2').attr('alt'));
            $('#carrousel a').attr('href', $('#carrousel li img.2').attr('id'));
            setTimeout(function () { $('#carrousel p').fadeIn('fast'); }, time);
            setTimeout(function () { $('#carrousel a').fadeIn('fast'); }, time);
            $('#carrousel li img').unbind('click.lien');
            $('#carrousel li img.2').bind('click.lien', function() { 
                window.location.replace($('#carrousel li img.2').attr('id'));
            });
        }
    });


    
    if (next) {
        setTimeout('run(' + time + ',' + next + ')', time);
    }
}

setZindex = function (i, offset) {
    $('#carrousel li:eq(' + i + ') img').css('z-index', positions[(offset+i)%6].zindex);
}