var rollOverArr = new Array();
var layerActivo = false;
var layerActivo2 = false;
var ultimaImagen;
var categoriaActual = 0;
var flechitaOver = "";

function setOverflow(oUl, blnActivo){
	if (blnActivo)
		oUl.style.overflow = "visible";
	else
		oUl.style.overflow = "hidden";
}

function setFlechitaOver(iId){
    flechitaOver = "flechita_gris.gif";
}

function setBgColumnas(oFila, sBgColor){
	for (i=0; i<oFila.cells.length; i++){
		oFila.cells[i].style.backgroundColor = sBgColor;
	}
}

function marcarSeccion(iId, blnModo, sFlechita){
    // iId     : ID del objeto contenedor	
    // blnModo : indica si se debe marcar (true) o desmarcar (false)
	
    // Primero se obtiene el objeto relacionado al "id"
    obj = document.getElementById(iId);
    // Luego, su primer objeto tabla (que en este caso es el unico)
    tabla = obj.getElementsByTagName("table")[0];
    // Despues se obtiene el body de la tabla
    tableBody = tabla.getElementsByTagName("tbody")[0];
    // Se obtiene la primer fila
    fila = tableBody.getElementsByTagName("tr")[0];
    // Se modifica su color de fondo
    if (blnModo){
    	//fila.style.backgroundColor = "#FFFFFF";
    	setBgColumnas(fila, "#FFFFFF");
    	//alert(fila.style.backgroundColor);
    }else 
    	if (!layerActivo2) 
    		setBgColumnas(fila, "#FFFFFF");
    		//fila.style.backgroundColor = "#F7F6F6";
    // Se obtiene la tercera columna, que es donde esta el tag "a" para modificar su color de fondo
    celda = fila.getElementsByTagName("td").item(2);
    // Se obtiene el objeto imagen, para cambiar su "src"
    img = fila.getElementsByTagName("img").item(0);
    pos = img.src.lastIndexOf('/');
    str = img.src.substring(0,pos+1);
    if (blnModo)
    	img.src = str + "flechita_naranja.gif";
    else
    	if (!layerActivo2) img.src = str + sFlechita;
    // Se obtiene el elemento "a"
    a = celda.getElementsByTagName("a").item(0); 
    // Finalmente se cambia su color de fondo
    if (blnModo){
    	a.style.backgroundColor = "#666666";
    	a.style.color = "#FFFFFF";
    } else {
    	if (!layerActivo2) {
    		a.style.backgroundColor = "#FBFBFB";
    		a.style.color = "#999999";
    	}
    }
}

function setrollover(OverImgSrc,pageImageName) {
    if (! document.images) return;
    if (pageImageName == null)
        pageImageName = document.images[document.images.length-1].name;
    rollOverArr[pageImageName] =new Object;
    rollOverArr[pageImageName].overImg = new Image;
    rollOverArr[pageImageName].overImg.src = OverImgSrc;
}

function rollover(pageImageName) {
    if (! document.images) return;
    if (! rollOverArr[pageImageName]) return;
    if (! rollOverArr[pageImageName].outImg) {
        rollOverArr[pageImageName].outImg = new Image;
        rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
    }
    document.images[pageImageName].src = rollOverArr[pageImageName].overImg.src;
    ultimaImagen = pageImageName;
}

function rollout(pageImageName) {
    if (!layerActivo) {
        if (! document.images) return;
        if (! rollOverArr[pageImageName]) return;
        document.images[pageImageName].src = rollOverArr[pageImageName].outImg.src;
    }
}

function detectBrowser() {
	var detect = navigator.userAgent.toLowerCase();
	var OS, browser, version, total, thestring;

	if(checkIt('konqueror')) {
		browser = "Konqueror";
		OS = "Linux";
	}
	else if(checkIt('safari'))  browser = "Safari";
	else if(checkIt('omniweb')) browser = "OmniWeb";
	else if(checkIt('opera'))   browser = "Opera";
	else if(checkIt('webtv'))   browser = "WebTV";
	else if(checkIt('icab'))    browser = "iCab";
	else if(checkIt('msie'))    browser = "Internet Explorer";
	else if(!checkIt('compatible')) {
		browser = "Netscape Navigator";
		version = detect.charAt(8);
	}
	else browser = "An unknown browser";

	if(!version) version = detect.charAt(place + thestring.length);

	if(!OS) {
		if (checkIt('linux')) OS = "Linux";
		else if (checkIt('x11')) OS = "Unix";
		else if (checkIt('mac')) OS = "Mac";
		else if (checkIt('win')) OS = "Windows";
		else OS = "an unknown operating system";
	}

	function checkIt(string) {
		place = detect.indexOf(string) + 1;
		thestring = string;
		return place;
	}

	return browser;
}

function isIE5() {
	var appVersion = navigator.appVersion;
	var pos = navigator.appVersion.indexOf("MSIE");
	if(appVersion.substr(pos + 5, 1) == '5') {
		return true;
	} else {
		return false;
	}
}

function setBgColor(sId,sColor) {
	oMenu = document.getElementById(sId);
	oMenu.style.backgroundColor = sColor;
}

function totalChilds (iId) {
	var arrAux = new Array();
	for (var z=0;z<arrMenu.length;z++) {
		if (arrMenu[z][1] == iId) {
			arrAux[arrAux.length] = z;
		}
	}
	return arrAux;
}

//Construyo los Items del Menu
function makeMenuItems (iPos, blnCatPpal, iColor, blnEsPrimero) {
	var arrChilds = new Array();
	var iId;
	var iFkId;
	var sHref;
	var sName;
	var sContenido;
	var sNombreImg;
	var sNombreImgOver;
	var iWidth;
	var iHeight;
	var sHeader;
	var sLink;
	var sRollOver;
	var sFlechita;
	var sMargenSeccion_1 = "";
	var sHeight = ""
	var sValign = "";
	var sVspace = "";
	
	iId		= arrMenu[iPos][0];
	iFkId 	= arrMenu[iPos][1];
	sHref	= arrMenu[iPos][2];
	sName	= arrMenu[iPos][3];

	sFlechita = "flechita_gris.gif";
	
	arrChilds = totalChilds (iId);
	
	sBgColor = "#FBFBFB";
	
	// Segun sea la categoria principal o no, el contenido será una imagen, o solo texto
	if (blnCatPpal) {
	    // Si es una categoria principal, se obtiene del array arrImg el ancho y 
	    // alto de la imagen
	    iWidth = arrImg[iId][0];
	    iHeight = arrImg[iId][1];
	    
	    // Segun la categoria, setea en flechita_naranja.gif o flechita_roja.gif el bullet
	    setFlechitaOver(iId);

	    // Si iId es la categoria actual (idCategoria por $_GET[]), entonces 
	    // activarla poniendo como imagen la imagen "_over"
	    if (iCategoriaPrincipal == iId){
	        sNombreImg = 'cat_' + iId + '_over';
	        sNombreImgOver = sNombreImg;
	    } else {
	        sNombreImg = 'cat_' + iId;
	        sNombreImgOver = sNombreImg + '_over';
	    }
	    
	    // Chequeo si ademas de ser categoria principal, tiene o no hijos (de eso 
	    // dependen los eventos onMouseOver y onMouseOut)
	    if (arrChilds.length > 0)
	        sHeader = "<li style='border:0px; width:" + iWidth + "px; height:" + iHeight + "px' id='li_"+ iId +"' onMouseOver='this.lastChild.style.display=\"block\"; layerActivo = true; rollover(ultimaImagen);' onMouseOut='this.lastChild.style.display=\"none\"; layerActivo = false; rollout(ultimaImagen);'>";
	    else
	        sHeader = "<li style='border:0px; width:" + iWidth + "px; height:" + iHeight + "px' id='li_"+ iId +"'>";
	        
	    sContenido = "<img name='" + sNombreImg + "' src='images/menu/" + sNombreImg + ".gif' border='0' width='" + iWidth + "' height='" + iHeight + "'>";
	    sLink = "<a href='" + sHref + "' onMouseOver=\"rollover('" + sNombreImg + "')\" onMouseOut=\"rollout('" + sNombreImg + "')\">" + sContenido + "</a>";
	    sRollOver = "<SCRIPT TYPE='text/javascript'>\n<!--\n setrollover('images/menu/" + sNombreImgOver + ".gif');\n //-->\n</SCRIPT>";

	} else {
		if (sName.length > 26){
			sHeight = "height:25px;";	
			sValign = "top";
			sVspace = "vspace='3'";
		} else
			sValign = "middle";
			
		if (arrChilds.length > 0){
	        sHeader = "<li style='" + sHeight + " border:0px;' id='li_"+ iId +"' onMouseOver='this.lastChild.style.display=\"block\"; layerActivo=true; layerActivo2=true; marcarSeccion(\"li_"+ iId +"\", true, \"" + sFlechita + "\");' onMouseOut='this.lastChild.style.display=\"none\"; layerActivo=false; layerActivo2=false; marcarSeccion(\"li_"+ iId +"\", false, \"" + sFlechita + "\");'>";
	        sContenido = "<table width='100%' cellspacing='0' cellpadding='0'><tr><td style='border:0px; background-color:" + sBgColor + "' width='13' align='right' valign='" + sValign +"'><img " + sVspace + " border='0' src='images/menu/" + flechitaOver + "' width='7' height='9'></td><td style='border:0px; background-color:" + sBgColor + "'><img src='images/trans.gif' width='1' height='20'></td><td style='border:0px; background-color:" + sBgColor + "' width='142' align='left'><a href='" + sHref + "' style='background-color:" + sBgColor + "'>" + sName + "</a></td></tr></table>";
	    } else { 
	        sHeader = "<li style='" + sHeight + " border:0px;' id='li_"+ iId +"' onMouseOut='layerActivo2=false; marcarSeccion(\"li_"+ iId +"\", false, \"" + sFlechita + "\");'>";
	        sContenido = "<table width='100%' cellspacing='0' cellpadding='0'><tr><td style='border:0px; background-color:" + sBgColor + "' width='13' align='right' valign='" + sValign +"'><img " + sVspace + " border='0' src='images/menu/" + flechitaOver + "' width='7' height='9'></td><td style='border:0px; background-color:" + sBgColor + "'><img src='images/trans.gif' width='1' height='20'></td><td style='border:0px; background-color:" + sBgColor + "' width='142' align='left'><a href='" + sHref + "' style='background-color:" + sBgColor + "'>" + sName + "</a></td></tr></table>";
	    }
	    sLink = "<a onMouseOver='marcarSeccion(\"li_"+ iId +"\", true, \"" + sFlechita + "\");' onMouseOut='marcarSeccion(\"li_"+ iId +"\", false, \"" + sFlechita + "\");'>" + sContenido + "</a>";
	    sRollOver = "";
	}

	if (arrChilds.length > 0) {
		document.write          (sHeader)
		document.write              (sLink)
		document.write                  (sRollOver)
		document.write				("<ul id='ul_"+ iId +"' onmouseover='setOverflow(this,true);' onmouseout='setOverflow(this,false);'>")		
		for (var w=0;w<arrChilds.length;w++) {
			makeMenuItems (arrChilds[w], false, iColor, true);
		}
		document.write				("</ul>")
		document.write			("</li>")

	} else {
		document.write          (sHeader)
		document.write               (sLink)
		document.write                   (sRollOver)
		document.write			("</li>")

	}
}

//Construyo el contenedor del menu
function makeMenu() {
	var cant = 0;
	
	setCSS ('horz');
	document.write	("<ul id='nav'>");
	document.write		("<table width='190' cellpadding='0' cellspacing='0' border='0' bgcolor='#FFFFFF'>");

	for (var i=0;i<arrMenu.length;i++){
		if (arrMenu[i][1] == 0) {		// Es un ítem padre?
		    cant++;
		    categoriaActual++;
			document.write		("<tr>");
			document.write			("<td>");
			makeMenuItems(i, true, 0, true);
			document.write			("</td>");
			document.write		("</tr>");
		}
	}
	document.write		("<tr><td bgcolor='#DCDCDC'><img src='images/trans.gif' width='1' height='1'></td></tr>");	
	document.write		("</table>");
	document.write	("</ul>");
	//Activo el menu ** DEBE ESTAR SIEMPRE AL FINAL**
}

function setCSS (sStyle) {
	var oStyle;
	var cssPath = "estilos/";
	oStyle = document.getElementById("styles");
	switch(detectBrowser()) {
	case "Internet Explorer":
		if(isIE5()) {
			oStyle.href = cssPath + "menu_"+ sStyle +"_ie5.css";
		} else {
			oStyle.href = cssPath + "menu_"+ sStyle +"_ie6.css";
		}
	break;
	case "Netscape Navigator":
		oStyle.href = cssPath + "menu_"+ sStyle +"_nn.css";
	break;
	default:
		if(isIE5()) {
			oStyle.href = cssPath + "menu_"+ sStyle +"_ie5.css";
		} else {
			oStyle.href = cssPath + "menu_"+ sStyle +"_ie6.css";
		}
	break;
	}
}