$(document).ready(function(){
    //variable configurable :
    var sliderImgWidth = 130;
    var sliderImgHeight = 85;
    var current = 2;
    var imgReductionRatio = 0.90;
    //doit être impair
    var nbVisuel = 5;
    var slider = $("#flip");

    //variable non configurate (= ne pas toucher)
    var txDirWidth = sliderImgWidth - (sliderImgWidth * imgReductionRatio);
    var txDirHeight = sliderImgHeight - (sliderImgHeight * imgReductionRatio);
    var sliderImgWidthD2 = sliderImgWidth / 2;
    var eachSideVisuel = (nbVisuel - 1) / 2

    //on déplace les vignettes sinon on a un effet de déplacement pas esthétique
    $("li", slider).each(function(i, el){
        var offset = i - current;
        var liLeft;

        if (offset < 0) //before
           liLeft = ((slider.width( ) / 2) - sliderImgWidthD2) - getWidthSum(-offset);
        else if (offset == 0)//current
            liLeft = ( slider.width( )/2 - sliderImgWidthD2 );
        else //after
            liLeft = ((slider.width( ) / 2) + sliderImgWidthD2) + getWidthSum(offset - 1);
        $(el).css({left: liLeft});
        $('img', el).css({width: 0, height: 0});
    });


    slider.jcoverflip({
        current: current,
        beforeCss: function( el, container, offset ){
            if (offset <= eachSideVisuel){
                var imgWidth = getWidth(offset + 1);
                var imgHeight = getHeight(offset + 1);
                var liWidth;
                if (offset == eachSideVisuel)
                    liWidth = 0;
                else
                    liWidth = imgWidth * (75 - offset * 10) / 100;
                var liLeft = ((container.width( ) / 2) - sliderImgWidthD2) - getWidthSum(offset);
                return [
                    $.jcoverflip.animationElement( el, {left: liLeft,width: liWidth, bottom: (sliderImgHeight - imgHeight) / 2}, { } ),
                    $.jcoverflip.animationElement( el.find( 'img' ), {opacity: 0.5, width: imgWidth, height: imgHeight, marginLeft: 0}, {} )
                ];
            } else {
                return [$.jcoverflip.animationElement( el , {width: 0}, {})];
            }
	},
	afterCss: function( el, container, offset ){
            if (offset <= eachSideVisuel) {
                var imgWidth = getWidth(offset + 1);
                var imgHeight = getHeight(offset + 1);
                var liWidth;
                if (offset == eachSideVisuel)
                    liWidth = 0;
                else
                    liWidth = imgWidth * (75 - offset *10) / 100;
                var liLeft = ((container.width( ) / 2) + sliderImgWidthD2) + getWidthSum(offset - 1);
                return [
                    $.jcoverflip.animationElement( el, {left: liLeft,width: liWidth, bottom: (sliderImgHeight - imgHeight) / 2}, { } ),
                    $.jcoverflip.animationElement( el.find( 'img' ), {opacity: 0.5, width: imgWidth, height: imgHeight, marginLeft: -(imgWidth - liWidth)}, {} )
                ];
            } else {
                return [$.jcoverflip.animationElement( el , {width: 0}, {})];
            }
	},
	currentCss: function( el, container ){
            return [
                $.jcoverflip.animationElement( el, {left: ( container.width( )/2 - sliderImgWidthD2 )+'px', width: '250px', bottom: 0}, { } ),
                $.jcoverflip.animationElement( el.find( 'img' ), {opacity: 1, width: sliderImgWidth, height: sliderImgHeight, marginLeft: 0}, { } )
            ];
	}
    });


    $("#wrapper .wrapper-next").click(function(){
        slider.jcoverflip('next');
    });
    $("#wrapper .wrapper-prev").click(function(){
        slider.jcoverflip('previous');
    });

    function getWidth(idx){
        return (sliderImgWidth - txDirWidth * idx);
    }

    function getWidthSum(idx){
        var eps = 0;
        for (; idx >= 0; --idx)
            eps += (getWidth(idx + 1) * (75 - idx * 10)) / 100;
        return (eps);
    }

    function getHeight(idx){
        return (sliderImgHeight - txDirHeight * idx);
    }

    function getHeightSum(idx){
        var eps = 0;
        for (; idx >= 0; --idx)
            eps += (getHeight(idx + 1) * (75 - idx * 10)) / 100;
        return (eps);
    }
});