var cantidadColumnaVersiones = 15;
var anchoLiVersiones = 180;
var altoLiVersiones = 25;

function LlenarVersiones(idModelo, idDivVersiones, pathResources) 
{
    CerrarTodasVersiones();
    
    var divVersiones = document.getElementById(idDivVersiones);
    if (divVersiones.innerHTML.indexOf('ul') != -1)
        AbrirVersiones(idModelo, idDivVersiones)
    else
        makeRequestVersiones(idModelo, idDivVersiones, pathResources);    
};

function AbrirVersiones(idModelo, idDivVersiones) 
{
    var divVersiones = document.getElementById(idDivVersiones);
    divVersiones.style.display = "";

    var liModelo = document.getElementById("li" + idModelo);

    DefinirPosicionVersiones(liModelo, divVersiones, idDivVersiones);
};

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

    divVersiones.style.display = "none";
    liModelo.className = '';
};

function CerrarTodasVersiones() 
{
    try {
        var divs = document.getElementsByTagName("DIV");
        for (var i = 0; i < divs.length; i++) {
            var obj = divs[i];
            if (obj.id.indexOf('idVersion') != -1 && obj.style.display == "") 
            {
                var liModelo = document.getElementById("li" + obj.id.replace("idVersion", ""));
                obj.style.display = "none";
                liModelo.className = '';
            }
        }
    }
    catch (ex) {
        var nada = "";
    }
};

function ArmarVersiones(idModelo, idDivVersiones, pathResources, Xml) 
{
    var cantidadVersiones = Xml.getElementsByTagName("id").length;
    var columnasVersiones = 1;

    for (var i = 1; i <= cantidadVersiones; i++) {
        if (cantidadVersiones > (cantidadColumnaVersiones * (i - 1)) && cantidadVersiones <= (cantidadColumnaVersiones * i)) columnasVersiones = i;
    }

    var versionesColumna = Math.floor(cantidadVersiones / columnasVersiones);
    if ((cantidadVersiones % columnasVersiones) > 0) versionesColumna++; 

    var divVersiones = document.getElementById(idDivVersiones);
    divVersiones.className = 'boxCeleste_UR';
    divVersiones.innerHTML = "";

    var span = document.createElement("SPAN");
    span.id = 'spanVersion_' + idDivVersiones;
    span.className = "noBorder";
        
    var boxCeleste2 = document.createElement("DIV");
    boxCeleste2.className = 'boxCeleste_LL';
    var boxCeleste3 = document.createElement("DIV");
    boxCeleste3.className = 'boxCeleste_LR';
    var boxCeleste4 = document.createElement("DIV");
    boxCeleste4.className = 'boxCeleste_UL';
    var boxCeleste5 = document.createElement("DIV");
    boxCeleste5.className = 'boxCeleste';
    
    divVersiones.appendChild(boxCeleste2);
    divVersiones.appendChild(span);
    boxCeleste2.appendChild(boxCeleste3);
    boxCeleste3.appendChild(boxCeleste4);
    boxCeleste4.appendChild(boxCeleste5);

    var ul;

    for (i = 1; i <= cantidadVersiones; i++) {

        if ((i == 1) || ((i - 1) % versionesColumna == 0)) {
            ul = document.createElement("UL");
            ul.style.width = anchoLiVersiones + "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.style.width = anchoLiVersiones - 20 + "px";

        var _nombreMostrar = _nombre;
        if (_nombre.length > 20) _nombreMostrar = _nombre.substring(0, 17) + "...";

        var a = document.createElement("A");
        a.setAttribute("href", _link);
        a.innerHTML = _nombreMostrar;
        a.title = _nombre;
        li.appendChild(a);

        ul.appendChild(li);

        if ((i - 1) % versionesColumna == 0)
            boxCeleste5.appendChild(ul);
    }

    boxCeleste5.style.width = (anchoLiVersiones * columnasVersiones) + "px";
    
    var liModelo = document.getElementById("li" + idModelo);

    divVersiones.style.display = "";

    DefinirPosicionVersiones(liModelo, divVersiones, idDivVersiones);    
};

function makeRequestVersiones(idModelo, idDivVersiones, pathResources) {
    try {

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

        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);
        ArmarVersiones(idModelo, idDivVersiones, pathResources, http_request.responseXML);
    }
    catch (ex) {
    }

}

function DefinirPosicionVersiones(objCentro, divMover, idDivVersiones) {

    var altoMover = divMover.clientHeight;
    var anchoMover = divMover.clientWidth;
    var estilo1 = "Right"
    var estilo2 = "Down"
    
    findPosModelos(objCentro);

    getWindowDimsCatalogo();

    if (topCentro + altoMover > (w_y - 10)) 
    {
        topCentro = (altoMover * -1) + 41; //sume 19 al 42
        estilo2 = "Up";
    }
    else
        topCentro = -20; //sume 19 al 20

    if (leftCentro + anchoMover + 150 > (w_x - 10)) 
    {
        leftCentro = (anchoMover * -1) + 9; //sume 3 a 5
        estilo1 = "Left";
    }
    else
        leftCentro = 150 - 27; //sume 3 al 27
        
    divMover.style.top = topCentro + "px";
    divMover.style.left = leftCentro + "px";

    objCentro.className = objCentro.className + ' overTo' + estilo1;

    var spanBorder = document.getElementById('spanVersion_' + idDivVersiones);
    spanBorder.className = "noBorder " + estilo1 + estilo2;
}