(function( $ ){
    var n=0;
    $.fn.accordeon = function( div ){
        return this.each(function(){

            // pour les navigateur ne supportant pas CSS3
            $(this).children("div:last-child").addClass("last-child");

            // initialiser les variables
            var img = $(this).find("img");
            var div = $(this).children("div");
            var target = $(this);

            // calcule la taille dynamiquement
            var openW = img.last().width();
            var closedW = ($(this).width() - openW)/(div.length-1) - 0.5;

            /* créer une div pour le voile blanc */
            div.last().append('<div id="voile"></div>');
            var voile=$(this).find("#voile");
            voile.css({
                display:'none',
                position:'absolute',
                width:img.last().width()+(div.length-1)*closedW,
                height:img.last().height(),
                background:'white',
                top:img.first().offset().top,
                left:img.first().offset().left,
                'z-index':2
            });

            img.each(function(){
                $(this).data('accordeon',{target:target, div:div, openW:openW, closedW:closedW, voile:voile});
            });

            // pour toutes les images ...
            img.each(function() {
                // ... sur un click ...
                $(this).click(function(evt){
                    var data = $(this).data('accordeon');
                    data.me=this;
                    // boucler de nouveau sur toutes les images
                    data.div.each(function(i) {
                        if ($(this).children("img").get()[0] == data.me) {
                            // c'est l'image sur laquelle on vient de cliquer : l'ouvrir
                            $(this).animate({width: openW+'px'});
                        } else {
                            // sinon : la fermer si elle est ouverte
                            if ($(this).css('width')!=closedW+'px'){
                                $(this).animate({width: closedW+'px'});
                            }
                        }
                    });
                });
                // ... quand la souris passe dessus ...
                $(this).mouseenter(function(){
                    var data = $(this).data('accordeon');
                    data.voile.stop(true,true);
                    data.voile.css('opacity',0);
                    $(this).css('z-index',1);
                    data.voile.fadeTo(600,0.2);
                    data.voile.data('accordeon',{img:$(this)});
                });
            });
            voile.mouseleave(function(){
                $(this).fadeOut(50);
                $(this).data('accordeon').img.css('z-index',3);
            }).click(function(){
                $(this).data('accordeon').img.click();
            });

            // initialiser en affichant la dernière image
            img.last().click();
        });
    }
})( jQuery );