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

function setFlechitaOver(iId){
    //if (iId <= 2)
    	flechitaOver = "flechita_naranja.gif";
    //else
    	//flechitaOver = "flechita_roja.gif";
}

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").item(0);
    // Despues se obtiene el body de la tabla
    tableBody = tabla.getElementsByTagName("tbody").item(0);
    // Se obtiene la primer fila (en este caso tambien es unica)
    fila = tableBody.getElementsByTagName("tr").item(0);
    // Se modifica su color de fondo
    if (blnModo)
    	fila.style.backgroundColor = "#AEAEAE";
    else 
    	if (!layerActivo2) fila.style.backgroundColor = "#DFDFDF";
    // 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_blanca.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 = "#AEAEAE";
    else
    	if (!layerActivo2) a.style.backgroundColor = "#DFDFDF";
}

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) {
	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 = "";
	
	
	iId		= arrMenu[iPos][0];
	iFkId 	= arrMenu[iPos][1];
	sHref	= arrMenu[iPos][2];
	sName	= arrMenu[iPos][3];
	
	if (categoriaActual <= 2)
		sFlechita = "flechita_naranja.gif";
	else
		sFlechita = "flechita_roja.gif";
		
	if (!esHijoDeSocios(iId)){
		if (!hijoCatPpal(iId))
			sMargenSeccion_1 = "margin-left: 0px;";
		else
			sMargenSeccion_1 = "margin-left: -10px;";
	}
	
	//llamada a funcion que chequea cantidad de hijos por padre.
		arrChilds = totalChilds (iId);
		
		// Para alternar de colores entre niveles
		if (iColor == 0){
		    sBgColor = "#DFDFDF";
		    iColor = 1;
		} else {
		    sBgColor = "#DFDFDF";
		    iColor = 0;
		}
		
		// 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][1];
		    iHeight = arrImg[iId][2];
		    
		    // 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='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='width:" + iWidth + "px; height:" + iHeight + "px' id='li_"+ iId +"'>";
		        
		    sContenido = "<img alt='' name='" + sNombreImg + "' src='images/" + sNombreImg + ".gif' border='0' width='" + iWidth + "' height='" + iHeight + "' />";
		    sLink = "<a href='" + sHref + "' onMouseOver=\"rollover('" + sNombreImg + "')\" onMouseOut=\"rollout('" + sNombreImg + "')\" style='background-color:" + sBgColor + "; padding-left:0px;'>" + sContenido + "</a>";
		    sRollOver = "<SCRIPT TYPE='text/javascript'>\n<!--\n setrollover('images/" + sNombreImgOver + ".gif');\n //-->\n</SCRIPT>";
		    
		} else {			
		    if (arrChilds.length > 0){
		        sHeader = "<li style=' " + sMargenSeccion_1 + " border-bottom: 1px solid #FFFFFF;' 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 width='10' align='right'><img alt='' border='0' src='images/" + flechitaOver + "' width='10' height='9' /></td><td width='1'></td><td width='130' align='left'><a href='" + sHref + "' style='background-color:" + sBgColor + "'>" + sName + "</a></td></tr></table>";
		        
		    } else { 
		        sHeader = "<li style=' " + sMargenSeccion_1 + " border-bottom: 1px solid #FFFFFF;' id='li_"+ iId +"' onMouseOut='layerActivo2=false; marcarSeccion(\"li_"+ iId +"\", false, \"" + sFlechita + "\");'>";
		        sContenido = "<table width='100%' cellspacing='0' cellpadding='0'><tr><td width='10'><img alt='' border='0' src='images/" + flechitaOver + "' width='10' height='9' /></td><td width='1'></td><td width='126' align='left'><a href='" + sHref + "' style='background-color:" + sBgColor + "'>" + sName + "</a></td><td width='5'></td></tr></table>";
		        
		    }
		    sLink = "<a onMouseOver='marcarSeccion(\"li_"+ iId +"\", true, \"" + sFlechita + "\");' onMouseOut='marcarSeccion(\"li_"+ iId +"\", false, \"" + sFlechita + "\");' href='" + sHref + "' style='background-color:" + sBgColor + "; padding-left:0px;'>" + sContenido + "</a>";
		    sRollOver = "";
		}

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

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

		}
}

function hijoCatPpal(id){
	return (id < 100);
}

function esHijoDeSocios(id){
	var blnEsHijo;
	
	switch (id){
		case 10:
		case 11:
		case 12:
		case 13:
		case 14:
		case 15:
		case 16:
		case 17:
				blnEsHijo = true;
				break;
		default:
				blnEsHijo = false;
				break; 
	}
	
	return blnEsHijo;
}

// Esto es para incluir los botones del menú que no se traen de la BBDD
function imprimirPrimeraColumna(){
    if (iCategoriaPrincipal == 1)
    	document.write      ("<td width='15' height='15'><img alt='' border='0' src='images/top_esquina_izq_naranja.jpg' width='15' height='15' /></td>");
    else
    	document.write      ("<td width='15' height='15'><img alt='' border='0' src='images/top_esquina_izq_gris.jpg' width='15' height='15' /></td>");
}

function imprimirUltimaColumna(){
    document.write      ("<td height='15'>");
    document.write          ("<img alt='' src='images/trans.gif' border='0' width='201' height='15' />");
    document.write      ("</td>");
    document.write      ("<td width='7'></td>");
}

//Construyo el contenedor del menu
function makeMenu() {
	var cant = 0;
	
	setCSS ('horz');
	document.write	("<ul id='nav'>");
	document.write		("<table width='754' height='15' cellpadding='0' cellspacing='0' border='0' bgcolor='#C3C3C3'>");
	document.write			("<tr>");
	
	//imprimirPrimeraColumna();
	
	for (var i=0;i<arrMenu.length;i++){
		if (arrMenu[i][1] == 0) {		// Es un ítem padre?
			cant++;
		    categoriaActual++;
			document.write		("<td>");
			makeMenuItems(i, true, 0);
			document.write		("</td>");
			// Si es la ultima categoria, NO se imprime un espacio a lo ultimo
			if (categoriaActual != ultimaCategoria)
				document.write      ("<td width='1' bgcolor='#FFFFFF'></td>");
		}
	}
	
	//imprimirUltimaColumna();
	
	document.write			("</tr>");
	document.write		("</table>");
	document.write	("</ul>");
	//Activo el menu ** DEBE ESTAR SIEMPRE AL FINAL**
}

function setCSS (sStyle) {
	var oStyle;
	var cssPath = "css/";
	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;
	}
}


var itemAnterior = "icono_default";

function mostrarItemActual(sIdSeccion) {
	ocultarItemMenu(itemAnterior);
	mostrarItemMenu(sIdSeccion);
	itemAnterior = sIdSeccion;
}

function mostrarItem (oItem) {
	oItem.style.visibility ='visible';
	oItem.style.display = 'block';
}

function mostrarItemMenu (sIdItem) {
	oItem = document.getElementById(sIdItem);
	mostrarItem(oItem);	
}

function ocultarItem (oItem) {
	oItem.style.visibility ='hidden';
	oItem.style.display = 'none';
}

function ocultarItemMenu (sIdItem) {
	oItem = document.getElementById(sIdItem);
	ocultarItem(oItem);
}