var timeslide;


//lance le slide
function slideOn(tempo) {

    if(tempo == 1)moveToDiv(false);
    timeslide = setTimeout("slideOn(1)",6000);
}

//Coupe le slide
function slideOff() {
    clearTimeout(timeslide);
}

// JavaScript Document

var globalLength = 0;
var globalFace =0;
var globaldivison = false;
var paddingRight = 15;
var paddingLeft = 14;
var borderLeft = 1;
var website_width = 960;
var maskWidth;
var windows_width
var ratio_scrollerWidth;
var subMenuWidth;
var newValuePadding;
var slideIn = true;

$(document).ready(function(){

        initALL();

        $("#scroll .scrollNav li.prev a").click(function(){moveToDiv(true);});

        $("#scroll .scrollNav li.next a").click(function(){moveToDiv(false);});
            
         $("#global-slide").mouseover(function() {
            //fonctionne pas trop

        }).mouseout(function(){
            //fonctionne pas trop
        });
    slideOn(0);
});

function initScrollerBar () {

    //nombre d'element
    globalLength = $('#slider .item').length;

    //Taille de la nav

    if($(".scrollNav").length){

        sn = $(".scrollNav").outerWidth();
    } else sn = 0;

    //Taille de l'objet à slider '
    windows_width = $('#global-slider').width();
    //Calcul du masque gauche et droite
    maskWidth = (windows_width - website_width)/2;

    //Taille d'1 item
    var itemWidth = $('#slider .item').width() + (paddingRight + paddingLeft + borderLeft);
    var sliderWidth = 0;

    //taille de l'objet à sliders'
    sliderWidth = ((globalLength)*itemWidth+subMenuWidth);

    //On place le slider à droite du masque et du menu
    $('#slider').css("margin-left", maskWidth+subMenuWidth);

    //On définit la taille du scrollBar (fine barre bleue)
    var scrollBarWidth = $('#scrollBar').width()-sn;

    //Calcul du ratio (%tage de la barre de déplacement par rapport au contenu)
    ratio_scrollerWidth = (website_width)/(sliderWidth);

    //Taille du scroller
    var scrollerWidth = (scrollBarWidth)*ratio_scrollerWidth;

    //Calcul du padding à rajouter au slider (si on le met en width ca foire)
    newValuePadding = parseInt((scrollerWidth)/2);

    //Si le contenu est à la bonne taille => on désactive le slider
    if(ratio_scrollerWidth>=1) {

        $("#scrollBarInvisble" ).slider( "option", "disabled", true );
        $("#scrollBar" ).slider( "option", "disabled", true );
        $('#scroller').animate({width: (newValuePadding*2)+"px"}, 0);
        $('#scrollBar > *').animate({opacity: (0)}, 0);
        slideIn = false;
    } else {

        //On donne la taille au slider - des paddings pour eviter que ca bug
        $('#scroller').animate({width:15, paddingLeft: (newValuePadding-7.5),paddingRight: (newValuePadding-7.5)}, 300);
    }

    //On donne la taille aux masques
    $('.maskLeft').width(maskWidth);
    $('.maskRight').width(maskWidth);

     /* On force la taille du slider */
    $('#slider').width(sliderWidth-subMenuWidth);

    //nombre d items visible
    globalFace = (website_width)/$('#slider .item').outerWidth();
}

//Fonction pour connaitre le div affiché
function getActualDiv() {

    //On crée un tableau de valeurs qui va contenir les id et les valeurs des items par rapport au bord gauche

    valeurs = new Array();
    var i=0;

    //On parcours les item et on stocke leurs valeurs
    $("#slider .item").each(function(){

        //initialisation et stockage des valeurs
        valeurs[i] = new Array();
        valeurs[i]["id"] = parseInt($(this).attr("id"));
        //On stocke la valeur absolue des objets

        ratio = 100*ratio_scrollerWidth + (100*ratio_scrollerWidth/2);

        var TailleElm = ($(this).outerWidth());

        valeurs[i]["valeur"] = Math.abs(( $(this).get(0).offsetLeft - $(".maskLeft").width() - subMenuWidth));
        //On incrémente
        i++;
    })

    var indice = 0;
    var div = "";

    //Ici on parcours le tableau créé précédement afin de trouver la valeur la plus proche

    for(ii=0;ii<valeurs.length;ii++){
        //Si c'est le premier => on le stocke d'office
        if(ii==0) {

            indice = valeurs[ii]["valeur"];
            div = valeurs[ii]["id"];
        }
        //Si la valeur est plus petite que la valeur stockée on garde la valeur en mémoire en écrasant l'autre

        if(valeurs[ii]["valeur"]<indice) {

            indice = valeurs[ii]["valeur"];

            div = valeurs[ii]["id"];
        }

    }
    
    return div;

}

var passage = 0;

function moveToDiv(action) {

    //div sur lequel on est

    if(subMenuWidth>0) {

        aj = 1;
    } else {
        aj = 0;
    }

    Actual = parseInt(getActualDiv())+1;
        //+1

        if(action==false && globalLength>Actual) {

            //on va vers...
            nDivs = parseInt(Actual)+1;

        } else if(Actual==globalLength) {

            if(action===false) nDivs = 1;
            else nDivs = parseInt(Actual)-1;
            
        }else if(Actual-1>0){
            //on va vers...
            nDivs = parseInt(Actual)-1;
        } else {

            nDivs = parseInt(Actual);
        }

        if((Actual+globalFace-1-aj)==globalLength) {
            passage = 0;
            nDivs=1;
        }

        //nombre de div à parcourir
            globalFacex = (website_width-subMenuWidth)/$('#slider .item').outerWidth();

            maxDivs = globalLength-(globalFacex-1);

            if(nDivs>maxDivs) {
                nDivs=maxDivs;
            }

            //Taille des divs + leurs paddings + la bordure
            tailleDivs = $('#slider .item').outerWidth();

            //Taille de tous les divs
            tDivs = tailleDivs*(nDivs-1);

            //Minimum du bord gauche (masque + menu)
            minLeft = (parseFloat(maskWidth)+parseFloat(subMenuWidth));

            ml = minLeft-tDivs;

            //On remet l'objet qui slide à la valeur la plus proche trouvée ci dessus
            $("#slider").animate({'margin-left' : ml},1000);

            //On indique l'endroit ou on se trouve
            $("#scroller").html('<div style="width:15px;text-align:center;margin:auto;">'+(nDivs)+'/'+globalLength+'</div>');

           //Nombre d'objets à afficher
           nbobject = Math.round(930 / ($("#slider").width() / globalLength));

           //Taille de la barre en %
           vBar = 100*ratio_scrollerWidth;

           //Nombre de % dedié à un item
           ptOneBar = (vBar/nbobject);



           if((nDivs-1)+parseInt(globalFacex) == globalLength) {
                nDivs = globalLength;
                $("#scroller").html('<div style="width:15px;text-align:center;margin:auto;">'+nDivs+'/'+globalLength+'</div>');
            }



           //Si l'item vaut 1 on place le curseur à 0%

           if((nDivs-1)==0) $("#scroller").animate({"left" : "0%"},500);
                //Si c'est le dernier on le place à 100%'
                else if ((nDivs)==globalLength)  {$("#scroller").animate({"left" : "100%"},500);
                }

                    //Sinon  on calcule sa position
                    else {

                        max = (globalFacex/2);

                        //Div actuel parser en INT
                        divClean = parseInt(nDivs);

                        //Pas précédent
                        pas1 = (divClean-1)*ptOneBar;
                        //Pas suivant
                        pas2 = (divClean) * (ptOneBar);
                        //ici on prend la moitié entre les deux pas...
                        sequence = ((pas1)+(max*ptOneBar));

                        //Qu'on rajoute au divs précédents...
                        calculfinal = ((pas1)+(max*ptOneBar));

                        //on fait bouger le curseur
                        //$("#slider").animate({"left" : calculfinal+"%"});
                        $("#scroller").animate({"left" : calculfinal+"%"},500);
                    }
}

function initALL() {

$(document).ready(function(){

        //On récupère le nombre d'éléménts dans le slider
       globalLength = $('#slider > *').length;

        //On définit la taille du menu si il existe sinon -> 0
        if($('#sub-menu').length>0) subMenuWidth =  $('#sub-menu').width() +  (borderLeft*2) + paddingLeft + paddingLeft; else subMenuWidth =  0;

        /*Effet d'opacité*/
        $('#slider .item a').siblings('img').animate({opacity: '.65'}, 0)
        $("#slider .item a").mouseover (function () {$(this).siblings('img').animate({opacity: '1'}, 200)});
        $("#slider .item a").mouseout (function () {$(this).siblings('img').animate({opacity: '.65'}, 600)});

        
        $(function() {

		//scrollpane parts
		var scrollPane = $( "#scroller" ),scrollContent = $( "#slider" );


		var scrollbar = $( "#scrollBarInvisble" ).slider({

                    create : function(event, ui) {

                            //on donne un id à l'objet créé
                            $( "#scrollBarInvisble a" ).attr("id","scroller");
                            //On initiliase la barre de scroll
                            initScrollerBar();

                            //On donne un fil coonducteur proportionnel au slider d'origine jquery
                            $("#scrollBarInvisble").css("width", $("#scrollBar").width()-((newValuePadding*2))+2);

                            //On inscrit l'item sur lequel on est placés
                            if(slideIn)$("#scroller").html('<div style="width:15px;text-align:center;margin:auto;">1/'+globalLength+'</div>');
                    },
                    slide: function( event, ui ) {
                            initScrollerBar();
                            //On fait bouger le contenu avec la barre...
                            if ( scrollContent.width() > (scrollPane.width()) ) {

                                //Taille des objets à slider
                                sliderWidth = $("#slider").width();
                                //Taille du masque à gauche
                                maskLeftWidth = $("#maskLeft").width();
                                //Taille d'1 item'
                                itemWidth = $( ".item" ).outerWidth();
                                //Taille de tout les items - ceux afficher (ca permet de connaitre le maximum à slider)
                                itemsGroupSlidableWidth = (( (itemWidth * globalLength) - (itemWidth * globalFace)) );

                                //Maximum de margin-left = le masque - les items
                                maxSlide = maskLeftWidth-itemsGroupSlidableWidth;

                                minLeft = (parseFloat(maskWidth)+parseFloat(subMenuWidth));


                               newValueOfSlide = (minLeft)/ 100 * ui.value -  (maxSlide)/ 100 * ui.value ;
                                //Ici on calcule le %tage à slider

                                result =  minLeft -newValueOfSlide;
                                //ici c'est pour le retour on se remet sur
                                if(result==0)result = maskLeftWidth+subMenuWidth;

                                scrollContent.css("margin-left",result+"px");
                                
                               //scrollContent.css( "margin-left", Math.round((ui.value / 100 * ( $( "#scrollBarInvisble" ).outerWidth() - (itemsGroupSlidableWidth)  ) + $("#maskLeft").width() ) ) + "px" );
                               } else {
                                scrollContent.css( "margin-left", $("#maskLeft").width() );
                            }
                    },

                    stop: function( event, ui ) {

                            //On crée un tableau de valeurs qui va contenir les id et les valeurs des items par rapport au bord gauche

                            valeurs = new Array();
                            var i=0;

                            var TailleElm;

                            //On parcours les item et on stocke leurs valeurs
                            $("#slider .item").each(function(){

                                //initialisation et stockage des valeurs
                                valeurs[i] = new Array();
                                valeurs[i]["id"] = $(this).attr("id");
                                //On stocke la valeur absolue des objets
                                ratio = 100*ratio_scrollerWidth + (100*ratio_scrollerWidth/2);

                                TailleElm = ($(this).outerWidth());

                                valeurs[i]["valeur"] = (TailleElm-( $(this).get(0).offsetLeft - $(".maskLeft").width() - subMenuWidth));
                                //On incrémente
                                i++;
                            })


                            var indice = 0;
                            var div = "";

                            //Ici on parcours le tableau créé précédement afin de trouver la valeur la plus proche

                            for(ii=0;ii<valeurs.length;ii++){
                                //Si c'est le premier => on le stocke d'office
                                if(ii==0) {

                                    indice = valeurs[ii]["valeur"];
                                    div = valeurs[ii]["id"];
                                }
                                //Si la valeur est plus petite que la valeur stockée on garde la valeur en mémoire en écrasant l'autre

                                if(valeurs[ii]["valeur"]<indice && valeurs[ii]["valeur"]>0 && valeurs[ii]["valeur"]>(TailleElm/2)) {

                                    indice = valeurs[ii]["valeur"];

                                    div = valeurs[ii]["id"];


                                }

                            }
                            //nombre de div à parcourir
                            nDivs = parseInt(div)+1;
                            globalFacex = (website_width-subMenuWidth)/$('#slider .item').outerWidth();

                            maxDivs = globalLength-(globalFacex-1);

                            if(nDivs>maxDivs) {
                                nDivs=maxDivs;
                            }

                            //Taille des divs + leurs paddings + la bordure
                            tailleDivs = $('#slider .item').outerWidth();

                            //Taille de tous les divs
                            tDivs = tailleDivs*(nDivs-1);

                            //Minimum du bord gauche (masque + menu)
                            minLeft = (parseFloat(maskWidth)+parseFloat(subMenuWidth));

                            ml = minLeft-tDivs;

                            //On remet l'objet qui slide à la valeur la plus proche trouvée ci dessus
                            $("#slider").animate({'margin-left' : ml},300);

                            //On indique l'endroit ou on se trouve
                            $("#scroller").html('<div style="width:15px;text-align:center;margin:auto;">'+(nDivs)+'/'+globalLength+'</div>');

                           //Nombre d'objets à afficher
                           nbobject = Math.round(930 / ($("#slider").width() / globalLength));

                           //Taille de la barre en %
                           vBar = 100*ratio_scrollerWidth;

                           //Nombre de % dedié à un item
                           ptOneBar = (vBar/nbobject);



                           if((nDivs-1)+parseInt(globalFacex) == globalLength) {
                                nDivs = globalLength;
                                $("#scroller").html('<div style="width:15px;text-align:center;margin:auto;">'+nDivs+'/'+globalLength+'</div>');
                            }



                           //Si l'item vaut 1 on place le curseur à 0%

                           if((nDivs-1)==0) $("#scroller").animate({"left" : "0%"},500);
                                //Si c'est le dernier on le place à 100%'
                                else if ((nDivs)==globalLength)  {$("#scroller").animate({"left" : "100%"},500);
                                }

                                    //Sinon  on calcule sa position
                                    else {

                                        max = (globalFacex/2);

                                        //Div actuel parser en INT
                                        divClean = parseInt(nDivs);

                                        //Pas précédent
                                        pas1 = (divClean-1)*ptOneBar;
                                        //Pas suivant
                                        pas2 = (divClean) * (ptOneBar);
                                        //ici on prend la moitié entre les deux pas...
                                        sequence = ((pas1)+(max*ptOneBar));

                                        //Qu'on rajoute au divs précédents...
                                        calculfinal = ((pas1)+(max*ptOneBar));

                                        //on fait bouger le curseur
                                        //$("#slider").animate({"left" : calculfinal+"%"});
                                        $("#scroller").animate({"left" : calculfinal+"%"},500);
                                    }

                    }

		});


	});

        $(window).resize(function(){
            initScrollerBar ();
        })
});

$("#scroller").html('<div style="width:15px;text-align:center;margin:auto;">1/'+globalLength+'</div>');

}