var IE = (navigator.appName.indexOf("Microsoft") >= 0) ? true : false;
var w_y;
var w_x;

var timeoutMarcar = 0;
var cantidadColumnaModelos = 8;
var anchoLiModelos = 150;
var altoLiModelos = 23;
var pathResourcesModelos = '';

var idDivModelosULT = '';
var idLinkMarcaULT = '';
var idImgMarcaULT = '';
var idLiMarcaULT = '';

function LlenarModelos(idMarca, idDivModelos, pathResources, idLinkMarca, idImgMarca, idLiMarca) 
{
    pathResourcesModelos = pathResources;

    CerrarTodasVersiones();
    if (idDivModelosULT != '') CerrarModelos(idDivModelosULT, idLinkMarcaULT, idImgMarcaULT, idLiMarcaULT);
    SacarTimeOut("");

    var linkMarca = document.getElementById(idLinkMarca);
    if (linkMarca.className == "nombreMarca")
        {
            linkMarca.className = linkMarca.className + " desplegado";
        }
 
    var imgMarca = document.getElementById(idImgMarca);
    if (imgMarca.className == "verModelos")
        {
            imgMarca.className = imgMarca.className + " desplegado";
        }

    var divModelos = document.getElementById(idDivModelos);
    if (divModelos.innerHTML.toLowerCase().indexOf('ul') != -1)
        AbrirModelos(idDivModelos, idLinkMarca, idImgMarca, idLiMarca)
    else
        makeRequestModelos(idMarca, idDivModelos, pathResources, idLinkMarca, idImgMarca, idLiMarca);
    
};

function AbrirModelos(idDivModelos, idLinkMarca, idImgMarca, idLiMarca) 
{
    var imgMarca = document.getElementById(idImgMarca);
    var linkMarca = document.getElementById(idLinkMarca);
    var divModelos = document.getElementById(idDivModelos);
    var divBodyModelos = document.getElementById("divBody" + idDivModelos);
    var liMarca = document.getElementById(idLiMarca);

    DefinirPosicionModelos(liMarca, divModelos, divBodyModelos);
    
    divModelos.style.display = "";

    if (liMarca.className.indexOf('first') != -1) 
        liMarca.className = 'first darZ';
    else
        liMarca.className = 'darZ';
    
    if (linkMarca.className == "nombreMarca") 
        linkMarca.className = linkMarca.className + " desplegado";
    
    if (imgMarca.className == "verModelos") 
        imgMarca.className = imgMarca.className + " desplegado";    
}

function CerrarModelos(idDivModelos, idLinkMarca, idImgMarca, idLiMarca) 
{
    var linkMarca = document.getElementById(idLinkMarca);
    var imgMarca = document.getElementById(idImgMarca);
    var divModelos = document.getElementById(idDivModelos);
    var liMarca = document.getElementById(idLiMarca);
    
    if (liMarca.className.indexOf('first') != -1) 
       liMarca.className = 'first';
    else
       liMarca.className = '';
    
    linkMarca.className = "nombreMarca"; 
    imgMarca.className = "verModelos";    
    divModelos.style.display = "none";
};

function ArmarModelos(idMarca, idDivModelos, pathResources, Xml, idLinkMarca, idImgMarca, idLiMarca) 
{
    var cantidadModelos = Xml.getElementsByTagName("id").length;
    var columnasModelos = 1;

    for (var i = 1; i <= cantidadModelos; i++) 
    {
        if (cantidadModelos > (cantidadColumnaModelos * (i - 1)) && cantidadModelos <= (cantidadColumnaModelos * i)) columnasModelos = i;
    }

    var modelosColumna = Math.floor(cantidadModelos / columnasModelos);
    if ((cantidadModelos % columnasModelos) > 0) modelosColumna++; 

    var divModelos = document.getElementById(idDivModelos);
    divModelos.innerHTML = "";
    divModelos.className = "boxBlanca_UR";

    if (IE) {
        divModelos.onmouseover = function() { AbrirModelos(idDivModelos, idLinkMarca, idImgMarca, idLiMarca); };
        divModelos.onmouseout = function() { CerrarModelos(idDivModelos, idLinkMarca, idImgMarca, idLiMarca); };
    }
    else {
        divModelos.setAttribute("onmouseover", "AbrirModelos('" + idDivModelos + "', '" + idLinkMarca + "', '" + idImgMarca + "', '" + idLiMarca + "');");
        divModelos.setAttribute("onmouseout", "CerrarModelos('" + idDivModelos + "', '" + idLinkMarca + "', '" + idImgMarca + "', '" + idLiMarca + "');");
    }

    idDivModelosULT = idDivModelos;
    idLinkMarcaULT = idLinkMarca;
    idImgMarcaULT = idImgMarca;
    idLiMarcaULT = idLiMarca;

    var div1 = document.createElement("DIV");
    div1.className = "boxBlanca_LL";
    divModelos.appendChild(div1);
    var div2 = document.createElement("DIV");
    div2.className = "boxBlanca_LR";
    div1.appendChild(div2);
    var div3 = document.createElement("DIV");
    div3.className = "boxBlanca_UL";
    div2.appendChild(div3);
    
    var altoTotal = 0;
    if (columnasModelos == 1)
        altoTotal = (altoLiModelos * cantidadModelos)
    else
        altoTotal = (altoLiModelos * modelosColumna)

    var div = document.createElement("DIV");
    div.id = "divBody" + idDivModelos;
    div.className = "boxBlanca";
    div.style.width = (anchoLiModelos * columnasModelos) + "px";
    div.style.height = (altoTotal - 3) + "px";
        
    var ul;
    
    for (i = 1; i <= cantidadModelos; i++) {

        if ((i == 1) || ((i - 1) % modelosColumna == 0)) 
        {
            ul = document.createElement("UL");
            ul.className = "modelos";
            ul.style.width = anchoLiModelos + "px";
        }

        var _id = DarValorXML(Xml.getElementsByTagName("id")[i - 1]);
        var _link = DarValorXML(Xml.getElementsByTagName("link")[i - 1]);
        var _nombre = DarValorXML(Xml.getElementsByTagName("nombre")[i - 1]);
        
        var li = document.createElement("LI");
        li.setAttribute("id", "li" + _id);
        li.style.width = (anchoLiModelos - 17) + "px";
        
        if (IE) {
            li.onmouseover = function() { ModeloMouseOver(this.id); DefinirTimeOut(this.id); };
            li.onmouseout = function() { ModeloMouseOut(this.id); SacarTimeOut(this.id); };
        }
        else {
            li.setAttribute("onmouseover", "ModeloMouseOver(this.id); DefinirTimeOut(this.id);");
            li.setAttribute("onmouseout", "ModeloMouseOut(this.id); SacarTimeOut(this.id);");
        }
        
        var p1 = document.createElement("A");
        p1.innerHTML = _nombre;
        p1.setAttribute('href', _link);
        li.appendChild(p1);

        var divV = document.createElement("DIV");
        divV.setAttribute("id", "idVersion" + _id);
        divV.style.display = "none";
        
        li.appendChild(divV);

        ul.appendChild(li);

        if ((i - 1) % modelosColumna == 0) 
            div.appendChild(ul);
    }
    
    div3.appendChild(div);

    var liMarca = document.getElementById(idLiMarca);

    DefinirPosicionModelos(liMarca, divModelos, div);

    if (liMarca.className.indexOf('first') != -1)
        liMarca.className = 'first darZ';
    else
        liMarca.className = 'darZ';
};

function makeRequestModelos(idMarca, idDivModelos, pathResources, idLinkMarca, idImgMarca, idLiMarca) {
    try {

        var url = pathResources + "Webservices/Catalogo.aspx?action=getmodelosCH&id=" + idMarca;

        http_request = false;
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) { }
            }
        }

        if (!http_request) return false;
        
        http_request.open('GET', url, false);
        http_request.send(null);
        ArmarModelos(idMarca, idDivModelos, pathResources, http_request.responseXML, idLinkMarca, idImgMarca, idLiMarca);
    }
    catch (ex) {
    }

}

function SacarTimeOut(idLiVersiones) 
{
    var idDivVersiones = "idVersion" + idLiVersiones.replace("li", "");

    if (idLiVersiones != "") 
    {
        var divVersiones = document.getElementById(idDivVersiones);
        if (divVersiones.style.display != "")
            CerrarTodasVersiones();
    }
    
    if (timeoutMarcar != 0) 
    {
        clearTimeout(timeoutMarcar);
        timeoutMarcar = 0;
    }
}

function ModeloMouseOver(idLiVersiones) {
    var liModelo = document.getElementById(idLiVersiones);
    var divVersiones = document.getElementById("idVersion" + idLiVersiones.replace("li", ""));

    if (divVersiones.style.display == 'none' && liModelo.className.indexOf('overTo') == -1)
        liModelo.className = 'modeloover';
}

function ModeloMouseOut(idLiVersiones) {
    var liModelo = document.getElementById(idLiVersiones);
    var divVersiones = document.getElementById("idVersion" + idLiVersiones.replace("li", ""));

    if (divVersiones.style.display == 'none' && liModelo.className.indexOf('overTo') == -1) 
        liModelo.className = '';
}

function DefinirTimeOut(idLiVersiones) 
{
    var idModelo = idLiVersiones.replace("li", "");
    var idDivVersiones = "idVersion" + idLiVersiones.replace("li", "");

    timeoutMarcar = setTimeout(function() { LlenarVersiones(idModelo, idDivVersiones, pathResourcesModelos) }, 500);
}

var leftCentro = 0;
var topCentro = 0;

function findPosModelos(obj) {
    leftCentro = 0;
    topCentro = 0;
    if (obj.offsetParent) {
        do {
            leftCentro += obj.offsetLeft;
            topCentro += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
}

function getWindowDimsCatalogo() {
    if (IE) {
        var _scrollheight = 0;
        var _scrolltop = 0;
        var _scrollwidth = 0;
        var bodys = document.getElementsByTagName("HTML");
        var count = bodys.length;
        for (var i = 0; i < count; i++) {
            var obj = document.getElementsByTagName("HTML")[i];
            _scrollheight = obj.clientHeight;
            _scrolltop = obj.scrollTop;
            _scrollwidth = obj.clientWidth;
        }
        w_y = _scrollheight + _scrolltop;
        w_x = _scrollwidth;
    }
    else {
        w_y = window.innerHeight + window.scrollY;
        w_x = window.innerWidth;
    }
}

function DefinirPosicionModelos(objCentro, divMover, divBody) 
{
    var altoMover = parseInt(divBody.style.height.replace("px",""));
    var anchoMover = parseInt(divBody.style.width.replace("px", ""));

    findPosModelos(objCentro);

    getWindowDimsCatalogo();

    if (topCentro + altoMover > (w_y - 20))
        topCentro = (altoMover + 22) * (-1);
    else
        topCentro = 13;

    if (leftCentro + anchoMover > w_x)
        leftCentro = (anchoMover - 128) * (-1);
    else
        leftCentro = -20;

    divMover.style.top = topCentro + "px";
    divMover.style.left = leftCentro + "px";
}