var lastIndex = 10;
var elt;
var btn;
var trait;
var current;
var currentElt = null;
var currentBtn = null;
var currentTrait = null;
var autoNumber = 1;
var autoTurn = true;



function showCategory(num) {


    elt = document.getElementById("products_"+num);
    btn = document.getElementById("btn_"+num);
    
    if(currentElt == null){
        currentElt = document.getElementById("products_1");
        currentBtn = document.getElementById("btn_1");
    }
    
    document.getElementById("Cabine").focus();
    
    changeLink(num);

    if(currentElt != elt){
        lastIndex++;
        elt.style.opacity = "0"; 
        elt.style.filter = 'alpha\(opacity=0\)';


        elt.style.zIndex = lastIndex; 
         
        var fx = new Fx.Styles(currentElt, {duration: 400, wait: false});
        fx.start({'opacity': "0"});
        
        fx = new Fx.Styles(currentBtn, {duration: 400, wait: false});
        fx.start({'opacity': "0"});
        
        fx = new Fx.Styles(document.getElementById("LinkHeader"), {duration: 400, wait: false});
        fx.start({'opacity': "0"});
                
	    setTimeout("fadeCadre()",500);
	    setTimeout("changeLink("+num+")",500);
    }
}

function showCategory2(num){
    elt = document.getElementById("products_"+num);
    btn = document.getElementById("Slider"+num);
    trait = document.getElementById("Trait"+num);
    
    if(currentElt == null){
        current = "1";
        currentElt = document.getElementById("products_1");
        currentBtn = document.getElementById("Slider1");
        currentTrait = document.getElementById("Trait1");
    }
        
    changeLink(num);

    if(currentElt != elt){
        lastIndex++;
        elt.style.opacity = "0"; 
        elt.style.filter = 'alpha\(opacity=0\)';


        elt.style.zIndex = lastIndex; 
         
        var fx = new Fx.Styles(document.getElementById("products_"+current), {duration: 300, wait: false});
        fx.start({'opacity': "0"});
        
        fx = new Fx.Styles(document.getElementById("products_"+num), {duration: 300, wait: false});
        fx.start({'opacity': "1"});
        
        fx = new Fx.Styles(document.getElementById("Slider"+num), {duration: 300, wait: false});
        fx.start({'left': "0px"});
        
        fx = new Fx.Styles(document.getElementById("Slider"+current), {duration: 300, wait: false});
        fx.start({'left': "-220px"});
        
        fx = new Fx.Styles(document.getElementById("LinkHeader"), {duration: 300, wait: false});
        fx.start({'opacity': "0"});
        
        
        //btn.style.color="#FFFFFF";  
        //currentBtn.style.color="#000000";
        
        
        if(num == "8")
            trait.style.borderLeft = "1px solid #348baa";
        else
            trait.style.borderLeft = "1px solid #940060";
        
        switch(parseInt(current)){
            case 1 : document.getElementById("Menu"+current).style.color="#FF00A5";break;
            case 8 : document.getElementById("Menu"+current).style.color="#00BAFC";break;
            default : document.getElementById("Menu"+current).style.color="#000000";break;
        }
        
        document.getElementById("Menu"+num).style.color = "#FFFFFF";
        currentTrait.style.borderLeft = "1px solid #CCCCCC";       
        
  
        currentElt = elt;
	    currentBtn = btn;
	    currentTrait = trait;
	    current = num;
	    
	    setTimeout("changeLink("+num+")",500);
    }
}

function changeLink(num){
    var divLink = document.getElementById("LinkHeader");
    switch(num){
        case 1 :divLink.innerHTML = '<a href="/lunettes-soleil/type-homme">Homme</a>\n<a href="/lunettes-soleil/type-femme">Femme</a>\n<a href="#">Enfant</a>\n<a href="/lunettes-soleil">+ de lunettes de soleil</a>';break;
        case 2 :divLink.innerHTML = '<a href="/lunettes-soleil/type-homme">Homme</a>\n<a href="/lunettes-soleil/type-femme">Femme</a>\n<a href="#">Enfant</a>\n<a href="/lunettes-soleil">+ de lunettes de soleil</a>';break;
        case 3 :divLink.innerHTML = '<a href="/masques/type-homme">Homme</a>\n<a href="/masques/type-femme">Femme</a>\n<a href="#">Enfant</a>\n<a href="/masques">+ de masques</a>';break;
        case 4 :divLink.innerHTML = '<a href="/masques/type-homme">Homme</a>\n<a href="/masques/type-femme">Femme</a>\n<a href="#">Enfant</a>\n<a href="/masques">+ de masques</a>';break;
        case 5 :divLink.innerHTML = '<a href="/casques">+ de casques</a>';break;
        case 6 :divLink.innerHTML = '<a href="/montres/type-homme">Homme</a>\n<a href="/montres/type-femme">Femme</a>\n<a href="/montres">+ de montres</a>';break;
        case 7 :divLink.innerHTML = '<a href="#">Homme</a>\n<a href="#">Femme</a>\n<a href="#">Enfant</a>\n<a href="#">+ de textiles</a>';break;
        case 8 :divLink.innerHTML = '';break;
    }
    
    var fx = new Fx.Styles(divLink, {duration: 400, wait: false});
    fx.start({'opacity': "1"});
    
}

function fadeCadre(){
    
    var fx = new Fx.Styles(elt, {duration: 400, wait: false});
    fx.start({'opacity': "1"});
    currentElt = elt;
    
    fx = new Fx.Styles(btn, {duration: 400, wait: false});
    fx.start({'opacity': "1"});
    currentBtn = btn;
}

/*************** TURN FADE ******************/
var timerTurnFade;

function StartTurnFade(){
    timerTurnFade = setInterval("autoShowCategory()",5000);
}

function autoShowCategory(){
     showCategory(autoNumber);
     if(autoNumber < 8)
        autoNumber++;
     else
        autoNumber = 1;
}

function StopTurnFade(){
    clearInterval(timerTurnFade);
    autoTurn = false;
}

/********************************************/
/*************** TURN SWITCH ****************/

var timerTurn;

function StartTurn(){
    timerTurn = setInterval("autoShowCategory2()",4000);
}

function autoShowCategory2(){
     showCategory2(autoNumber);
     if(autoNumber < 8)
        autoNumber++;
     else
        autoNumber = 1;
}

function StopTurn(){
    clearInterval(timerTurn);
    autoTurn = false;
}

/********************************************/

function HighlightCabine(){
    var bgCabine = document.getElementById("BGFittingBox");
       
    bgCabine.style.opacity = "1";   
       
    var fx = new Fx.Styles(bgCabine, {duration: 300, wait: false});
    fx.start({'opacity': 0});
}

function changeLunetteCabine(modele){
    HighlightCabine();
    EasyTryOn.tryOn(modele, 'Cabine');
}

var i = 0;
var affich;
function moveDefilWS(val)
{
    var target = $('DefilementWS');
    var calcul;
    
    var fx = new Fx.Styles(target, {duration: 1000, wait: false});
	fx.options.transition = Fx.Transitions['Expo']['easeOut'];
	fx.options.duration = 1000;

    if(val == "right")
    {
        if(i == -2)
        {
            affich = false;
        }
        else
        {
            i--;
            affich = true;
        }
    }
    
    if(val == "left")
    {
        if(i == 0)
        {
            affich = false;
        }
        else
        {
            i++;
            affich = true;
        }
    }

    calcul = i*715;
    
    if(affich)
        fx.start({'marginLeft': calcul});
}


function getPositions(event)
{
	var e = event || window.event;
	var scroll = new Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);;
	var pos = parseInt((new Array(e.clientX + scroll[0] - document.body.clientLeft,e.clientY + scroll[1] - document.body.clientTop)[1])-677);
	document.getElementById('ContentScroll').style.marginTop = (-pos-10)+"px";
}

function ActiveLogo(num_marque,img)
{
	img.src = "/marques/" + num_marque + "_logo.jpg";
}

function DesactiveLogo(num_marque,img)
{
	img.src = "/marques/" + num_marque + "_logo_gris.jpg";
}