menu = new Array('Carros','Pick-ups','Utilitários','Crossover');

lista1 = new Array('New Fiesta','New Fiesta Hatch','Fiesta Hatch','Fiesta Sedan','Ford Fusion','Focus Hatch','Focus Sedan','Ford Ka' );
lista2 = new Array('Ranger Cabine Dupla','Ranger Cabine Simples','Courier','F-250 Cabine Dupla','F-250 Cabine Simples');
lista3 = new Array('EcoSport');
lista4 = new Array('Edge');

//<img src="img/menu_cars/car_image_menu.jpg" width="235" height="168" alt="" />

detalhe1_1 = new Array('img/menu_cars/new_fiesta.jpg','New Fiesta','O carro global da ford','235','135','new_fiesta.html');
detalhe1_2 = new Array('img/menu_cars/new_fiesta_hatch.jpg','New Fiesta Hatch','O carro global da ford','235','135','new_fiesta_hatch.html');
detalhe1_3 = new Array('img/menu_cars/fiesta_hatch.jpg','Fiesta Hatch','Vale a pena ser exigente','235','135','fiesta_hatch.html');
detalhe1_4 = new Array('img/menu_cars/fiesta_sedan.jpg','Fiesta Sedan','Vale a pena ser exigente','235','135','fiesta_sedan.html');
detalhe1_5 = new Array('img/menu_cars/fusion.jpg','Ford Fusion','Quem dirige o Fusion fez por merecer','235','135','fusion.html');
detalhe1_6 = new Array('img/menu_cars/focus_hatch.jpg','Focus Hatch','Um carro pra quem gosta de carro','235','135','focus_hatch.html');
detalhe1_7 = new Array('img/menu_cars/focus_sedan.jpg','Focus Sedan','Um carro pra quem gosta de carro','235','135','focus_sedan.html');
detalhe1_8 = new Array('img/menu_cars/ka.jpg','Ford Ka','Um carro bacana como você sempre quis','235','135','ka.html');

detalhe2_1 = new Array('img/menu_cars/ranger_dupla.jpg','Ranger Cabine Dupla','Pode confiar. É Raça Forte','235','135','ranger_dupla.html');
detalhe2_2 = new Array('img/menu_cars/ranger_simples.jpg','Ranger Cabine Simples','Pode confiar. É Raça Forte','235','135','ranger_simples.html');
detalhe2_3 = new Array('img/menu_cars/courier.jpg','Courier','A pick-up ideal para o seu negócio','235','135','courier.html');
detalhe2_4 = new Array('img/menu_cars/f250_dupla.jpg','F-250 Cabine Dupla','Ford F-250. É forte. É 4x4. É Ford','235','135','f250_dupla.html');
detalhe2_5 = new Array('img/menu_cars/f250_simples.jpg','F-250 Cabine Simples','Ford F-250. É forte. É 4x4. É Ford','235','135','f250_simples.html');


detalhe3_1 = new Array('img/menu_cars/ecosport.jpg','EcoSport','Pratique EcoSport','235','135','ecosport.html');


detalhe4_1 = new Array('img/menu_cars/edge.jpg','Edge','Tenha total controle na ponta dos dedos','235','135','edge.html');




function retornaLista(palavra) {
    for(var i = 0; i < menu.length; i++) {
        if(menu[i] == palavra){
            return (i + 1);
        }
    }
    return 0;
}

function retornaDetalhe(obj) {
    var pai = obj.parentNode;

    var numLista = 0;
    var numDetalhe = 0;

    for(var i = 0; i < menu.length; i++) {
        if(menu[i].toUpperCase() == pai.id){
            numLista =  i + 1;
            break;
        }
    }

    if(numLista !=0){
        //compara com o nome dentro do link do li
        for(i = 0; i < eval("lista" + numLista).length; i++) {
            if(eval("lista" + numLista)[i] == obj.childNodes[0].innerHTML){
                numDetalhe = i + 1;
                break;
            }
        }

        return numLista + '_' + numDetalhe;
    }

    return 0;
}

function removeElementos(idFilho) {
    document.getElementById('BRANCA').removeChild(document.getElementById(idFilho));
}

function menu1(event){

    var p0x = getPosicaoElemento('MENULI').left;
    var p0y = getPosicaoElemento('MENULI').top;

    var largura = document.getElementById('MENULI').offsetWidth;
    var altura = document.getElementById('MENULI').offsetHeight;
    
    var pNx = p0x + largura;
    var pNy = p0y + altura;

    //primeiro testa a cordenada X depois a cordenada Y
    var X = event.clientX;
    var Y = event.clientY;

    if(X >= p0x && X <= pNx){
        if(Y >= (p0y-10) && Y <= (pNy+10))  abreMenu1();
    }

}
   
function abreMenu1(){
    var filhos = document.getElementById('BRANCA').children;

    if(filhos){
        while(filhos.length != 0){
            removeElementos(filhos[filhos.length - 1].id);
        }
        document.getElementById('TRANSPARENTE').style.visibility = 'hidden';
    }

    if(document.getElementById('TRANSPARENTE').style.visibility == 'hidden'){        

        document.getElementById('TRANSPARENTE').style.visibility = 'visible';

        //cria elementos ul e li
        var ulMenu = document.createElement('ul');
        ulMenu.setAttribute('id','PRIMO');

        for(var i = 0; i < menu.length; i++) {
            var liMenu = document.createElement('li');            
            var aMenu = document.createElement('a');
            aMenu.innerHTML = menu[i];
            aMenu.setAttribute('onmouseover', 'Javascript: menu2(this);');
            liMenu.appendChild(aMenu);
            ulMenu.appendChild(liMenu);
        }      

        document.getElementById('BRANCA').appendChild(ulMenu);

        var brMenu = document.createElement('br');
        brMenu.setAttribute('class', 'clear');
        brMenu.setAttribute('id', 'BR');

        document.getElementById('BRANCA').appendChild(brMenu);

    }
}

function menu2(obj){
    var filhos = document.getElementById('BRANCA').children;
    var j = 0;
    while(filhos.length != 1){
        if((filhos[j].tagName.toUpperCase() == 'UL' && filhos[j].id != 'PRIMO') || filhos[j].tagName.toUpperCase() == 'DIV' || filhos[j].tagName.toUpperCase() == 'BR'){
            removeElementos(filhos[j].id);
            j = 0;
        }else j++;
    }

    var numeroLista = retornaLista(obj.innerHTML);
    if(numeroLista != 0){
        //cria elementos ul e li
        var ulMenu = document.createElement('ul');
        ulMenu.setAttribute('id', obj.innerHTML.toUpperCase());
        for(var i = 0; i < eval("lista" + numeroLista).length; i++) {
            var liMenu = document.createElement('li');
            var aMenu = document.createElement('a');

//pelo o link do array detalhe
            var link = eval("detalhe" + numeroLista+'_'+(i+1))[5];
            
            aMenu.innerHTML = eval("lista" + numeroLista)[i];
            aMenu.setAttribute('onmouseover', 'Javascript: menu3(this.parentNode);');
            aMenu.setAttribute('href',link);

            liMenu.appendChild(aMenu);
            ulMenu.appendChild(liMenu);
        }
        document.getElementById('BRANCA').appendChild(ulMenu);

        var brMenu = document.createElement('br');
        brMenu.setAttribute('class', 'clear');
        brMenu.setAttribute('id', 'BR');

        document.getElementById('BRANCA').appendChild(brMenu);
    }
}

function menu3(obj){

    var filhos = document.getElementById('BRANCA').children;
    var j = 0;
    while(filhos.length != 2){
        if(filhos[j].tagName.toUpperCase() == 'DIV' || filhos[j].tagName.toUpperCase() == 'BR'){
            removeElementos(filhos[j].id);
            j = 0;
        }else j++;
    }

    var numero = retornaDetalhe(obj);
    if(numero != 0){

        var aMenu1 = document.createElement('a');
        aMenu1.setAttribute('href', eval("detalhe" + numero)[5]);

        var imgMenu = document.createElement('img');
        imgMenu.setAttribute('src', eval("detalhe" + numero)[0]);
        imgMenu.setAttribute('alt', eval("detalhe" + numero)[1] + eval("detalhe" + numero)[2]);
        imgMenu.setAttribute('title', eval("detalhe" + numero)[1] + eval("detalhe" + numero)[2]);
        imgMenu.setAttribute('width', eval("detalhe" + numero)[3]);
        imgMenu.setAttribute('height', eval("detalhe" + numero)[4]);

        aMenu1.appendChild(imgMenu);

        var aMenu2 = document.createElement('a');
        aMenu2.setAttribute('href', eval("detalhe" + numero)[5]);

        var h2Menu = document.createElement('h2');
        h2Menu.innerHTML = eval("detalhe" + numero)[1];

        aMenu2.appendChild(h2Menu);

        var aMenu3 = document.createElement('a');
        aMenu3.setAttribute('href', eval("detalhe" + numero)[5]);

        var h3Menu = document.createElement('h3');
        h3Menu.innerHTML = eval("detalhe" + numero)[2];

        aMenu3.appendChild(h3Menu);

        var divMenu = document.createElement('div');
        divMenu.setAttribute('id', obj.innerHTML.toUpperCase().replace(/\s/g,''));
        divMenu.setAttribute('class', 'carImage');
        divMenu.appendChild(aMenu1);
        divMenu.appendChild(aMenu2);
        divMenu.appendChild(aMenu3);

        document.getElementById('BRANCA').appendChild(divMenu);

        var brMenu = document.createElement('br');
        brMenu.setAttribute('class', 'clear');
        brMenu.setAttribute('id', 'BR');

        document.getElementById('BRANCA').appendChild(brMenu);
    }
}

function fechaMenu(event) {
    if(document.getElementById('TRANSPARENTE').style.visibility == 'visible'){
        
        var posicaoLeft = getPosicaoElemento('BRANCA').left;
        var posicaoTop = getPosicaoElemento('BRANCA').top;

        var posicaoLeftInicial = posicaoLeft - 0;
        var posicaoTopInicial = posicaoTop - 20;

        var largura = document.getElementById('BRANCA').offsetWidth;
        var altura = document.getElementById('BRANCA').offsetHeight;

        var posicaoLeftFinal = posicaoLeft + largura + 0;
        var posicaoTopFinal = posicaoTop + altura + 0;

        var filhos = document.getElementById('BRANCA').children;

        if((event.clientX < posicaoLeftInicial || event.clientX > posicaoLeftFinal) || (event.clientY < posicaoTopInicial || event.clientY > posicaoTopFinal)){
            for(var i = 0; i < filhos.length; i++) {
                removeElementos(filhos[i].id);
            }
            document.getElementById('TRANSPARENTE').style.visibility = 'hidden';
        }

    }
}

function getPosicaoElemento(elemID){
    var offsetTrail = document.getElementById(elemID);
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf("Mac") != -1 &&
        typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    return {
        left:offsetLeft,
        top:offsetTop
    };
}

function trocaClass(obj,event) {
    if(event.type == 'mouseover') obj.className = 'open';
    else if(event.type == 'mouseover') obj.className = 'open';
}

function fecharMenu2(event){
    
    var menu = false;

    var p0x = getPosicaoElemento('MENULI').left;
    var p0y = getPosicaoElemento('MENULI').top;

    var largura = document.getElementById('MENULI').offsetWidth;
    var altura = document.getElementById('MENULI').offsetHeight;
    //document.getElementById('MENULI').style.backgroundColor = '#ff0000';
    var pNx = p0x + largura;
    var pNy = p0y + altura;

    //primeiro testa a cordenada X depois a cordenada Y
    var X = event.clientX;
    var Y = event.clientY;

    if(X >= p0x && X <= pNx){
        if(Y >= (p0y-10) && Y <= (pNy+10))  menu = true;
    }

    if(document.getElementById('TRANSPARENTE').style.visibility == 'visible' && !menu){
         
        p0x = getPosicaoElemento('BRANCA').left;
        p0y = getPosicaoElemento('BRANCA').top;

        largura = document.getElementById('BRANCA').offsetWidth;
        altura = document.getElementById('BRANCA').offsetHeight;

        pNx = p0x + largura + 20;
        pNy = p0y + altura + 20;

        //primeiro testa a cordenada X depois a cordenada Y
        X = event.clientX;
        Y = event.clientY;
        if(X < p0x) remove();
        else if(X > pNx) remove();
        else if(X > p0x && X < pNx){
            if(Y < p0y) remove();
            else if(Y > pNy) remove();
        }
    }
}

function remove() {
    var filhos = document.getElementById('BRANCA').children;
    for(var i = 0; i < filhos.length; i++) {
        removeElementos(filhos[i].id);
    }
    document.getElementById('TRANSPARENTE').style.visibility = 'hidden';
}