//----------------------------------------------------------------------------//
// Noe Intéractive - Créé le 25/11/2009 - Rémi
//----------------------------------------------------------------------------//

//----------------------------------------------------------------------------//
//
//----------------------------------------------------------------------------//
getOffsetPosition = function(inID, inTYPE){
// renvoie la valeur de l'attribut <inTYPE> de l'élément d'id <inID> 

    var iVal = 0;
    var oObj = document.getElementById(inID);
    var sType = 'oObj.offset' + inTYPE;
    while (oObj && oObj.tagName != 'BODY') {
        iVal += eval(sType);
        oObj = oObj.offsetParent;
    }
    return iVal;
}

//----------------------------------------------------------------------------//
//
//----------------------------------------------------------------------------//
$(function() {
    
    //------------------------------------------------------------------------//
    // on lance l'animation : automatique + sur bouton navigation + hover vignette
    //------------------------------------------------------------------------//
    $('#diaporama').cycle({ 
        speed:  200, 
        timeout: 3000,
        pager:  '#nav', 
        /* pagerEvent: 'mouseover', // hover navigation */
        prev:   '#cylcePrev', 
        next:   '#cylceNext',
        pause:   1, // pause on hover
        
        
        pagerAnchorBuilder: function(idx, slide) { 
            // return selector string for existing anchor 
            return '#nav li:eq(' + idx + ') a'; 
        }
    });
    //------------------------------------------------------------------------//
    //------------------------------------------------------------------------//
    
    
    
    //
    // on fait un slide horrizontal de la barre des vignettes
    //
    
    
    // on détecte la position de la souris sur l'élément de navigation
    // si on est dans la partie gauche ou droite => on déclale le tout
    $('#navigation').mouseover(function(e){
        
        // parametres
        //var width_div = 540;
        var width_div = $('#navigation').css('width').replace('px','');
        var interval = 2; // en px
        var interval_timer = 10; // en ms
        var width_bt_nav = width_div/4; // largeur des 'boutons' de gauche et droite pour le déplacement
        
        var nb_vignette_tot = $('#nb_vignette_tot').val(); // nombre de vignette total
        var nb_vignette_screen = 4; // nombre de vignette qu'on voit
        var width_vignette = 90;    // largeur d'une vignette
        booltimer = false;
        
        // x_div est le nombre de pixel qui sépare l'élément id=navigation du bord de la fenetre
        var x_div = getOffsetPosition('navigation', 'Left');
        
        // si on est dans la partie gauche
        if(e.pageX - x_div <= width_bt_nav ){
        
            if(!booltimer){
                
                booltimer = true;
                timer = setInterval(function(){
                        left = $('#nav').css('left').replace('px','');
                        if(isNaN(left) || left > 0){
                            left = 0;
                            clearInterval(timer);
                        //$(".debug").text('2 -> '+left);
                        }
                        else {
                            
                            new_left = parseInt(left*1+interval);
                            $('#nav').css("left", new_left+"px");
                        }
                    }
                    ,
                    interval_timer
                );
            }
        }
        else{
        
            // si on est dans la partie droite
            if(e.pageX - x_div >= width_div - width_bt_nav ){
                
                if(!booltimer){
                    
                    booltimer = true;
                    timer = setInterval(function(){
                        left = $('#nav').css('left').replace('px','');
                        
                        //alert(nb_vignette_tot*width_vignette-Math.abs(left)+' '+parseInt(nb_vignette_screen*width_vignette));
                        
                        if(isNaN(left) || nb_vignette_tot*width_vignette-Math.abs(left) < parseInt(nb_vignette_screen*width_vignette)){
                            left = 0;
                            clearInterval(timer);
                        }
                        else {
                            
                            $('#nav').css('left', parseInt(left*1-interval)+'px');
                        }
                    }
                    ,
                    interval_timer
                    );
                }
            }
            else {
            
                if(booltimer){
                    clearInterval(timer);
                } 
            }
        }
    }); 
    //------------------------------------------------------------------------//
    // on arrete l'animation 
    //------------------------------------------------------------------------//
    $('#navigation').mouseout(function(e){
        
        clearInterval(timer);
    });
    //------------------------------------------------------------------------//
    //------------------------------------------------------------------------//
});