// 	MENU TOP --------------------------------------------------------------------------------- >
/*//
	ojo, proxima idea
	que papa e hija se manejen en el objeto y no en div




	Qué hace esto
		- Calcula posición y tamaño del menú para mostrarlo correctamente
	Advertencias - Problemas conocidos:
		- No definir nada que esté dentro del menú mediante getElementById sino relativo a los ChildNodes
		- Los DIVS de menus deben estar dentro de una tabla o Firefox abre submenus en lugar equivocado
	Como funciona esto:
		- Se llama el script <script src="scripts/menutop.js"></script>
		- Se crean divs que contienen el menú (solo es necesario cambiar:
			- id del div 1 -> 'xxxx_parent'
			- id del div 2 -> 'xxxx'
			- Los <li> de la lista
			- El id de <ul> que concuerde con el de
		// ANCHO DEL MENÚ
			- Declarar única y explícitamente width de #menu_opciones, #menu_etc en la primera regla del stylesheet
			- Layers de cierre por izq y der son del 10%. No cambiar eso o hay que modificar este script...
			- Por lo tanto las tablas desplegables son del 80%
		// ALTO DEL MENÚ
			- Declarar única y explícitamente width de #menu_opciones, #menu_etc en la primera regla del stylesheet

*/

var zInd = 300;
var encima=0;
var menutoptimeout = 2000;
var	resizetime = 200
var	cerrarTime = 200
var arrMenus = new Array()
var menutopsub = 0;
var cur_lyr;	// holds id of currently visible layer
var creadoArrMenus = false
var ultimaAccionAbriendo = 0

function crearMenu(id){
	this.id = id
	this.visible = false
	this.currentSize = 0
}
function menutopsubmenu(id, imgName, botonW, botonH, papa) {
	encima=id
	a=id
	var b
	var c
	if (imgName)	c=imgName.toString()
	if (papa){
		b = papa.toString()
		setTimeout("menutopsubmenuB('" + a + "','" + c + "'," + botonW + "," + botonH + ",'" + b + "')",(400));
	}else{
		setTimeout("menutopsubmenuB('" + a + "','" + c + "'," + botonW + "," + botonH  + ")",(400));
	}



}
function menutopsubmenuB(id, imgName, botonW, botonH, papa) {
		if (encima!=id) return false
	if (!creadoArrMenus){
	// Crear array de menus desde el principio
		cbs=document.getElementsByTagName('div');
		for(c=0;c<cbs.length;c++) {
			f_id = (cbs[c].id);
			if (f_id.indexOf('menu_')>-1){
				arrMenus[f_id] = new crearMenu(f_id)
			}
		}
		creadoArrMenus = true
	}
	menutopsub=1
	divhija = document.getElementById(id)
	if (id==cur_lyr) {
		return false
	}else if (!papa){
		menutopsub=0
		// Es abrir menu principal, as+i es que supuestamente cerrar todo lo demás
		arrMenus[id].visible = true
		var menu
		for (menu in arrMenus){
			// Cerrar todo menu VISIBLE pues este es principal y debe ser el único a la vista
			if (menu!=id && arrMenus[menu].visible) cerrarHijos(menu)
		}
	}else{
		// Es abrir un SUBMENU
		// Buscar ascendientes
		tmplyr = papa
		strPapas=''
		while(tmplyr){
			// Uno de los papás se está cerrando, entonces no abrir...
			if (!arrMenus[tmplyr].visible) return false
			tmplyr = document.getElementById(tmplyr)
			strlyrpapa = tmplyr.getAttribute('papa')
			if (strlyrpapa==0){
				tmplyr=false
			}else{
				tmplyr=strlyrpapa;		
				strPapas += strlyrpapa+',';
			}
		}			
		for (menu in arrMenus){
			// Cerrar todo menu que no sea parte de sus PAPAS
			if (menu!=id && arrMenus[menu].visible && menu!=papa){
				if (strPapas.indexOf(menu+',')<0) cerrarHijos(menu)
			}
		}
		arrMenus[id].visible = true
		divhija.setAttribute('papa',papa);
		divpapa = document.getElementById(papa)
		divpapa.setAttribute('hija',id);
	}
	cur_lyr = id
	menutop(id, imgName, botonW, botonH)

}
	


function cerrarHijos(id){
	hideLayer(id);
		while(id){
			tmplyr = document.getElementById(id)
			strlyrpapa = tmplyr.getAttribute('hija')
			tmplyr.setAttribute ('hija','0')
			if (strlyrpapa==0){
				id=false
			}else{
				id=strlyrpapa;		
				hideLayer(id);
			}
		}				
}


// Ya no la uso, si pasado el tiempo no la uso, borrarla...
function cerrarPadresHijos(id){
	lyrinicial = id
	//ideLayer(cur_lyr);
				//alert('2'+id)

	hideLayer(id);
	while(id){					
		id = document.getElementById(id)
		strlyrpapa = id.getAttribute('papa')
		id.setAttribute ('papa','0')
		if (strlyrpapa==0){
			id=false
		}else{
			id=strlyrpapa;		
			hideLayer(id);
		}
	}
	id = lyrinicial
	while(id){
		id = document.getElementById(id)
		strlyrpapa = id.getAttribute('hija')
		id.setAttribute ('hija','0')
		if (strlyrpapa==0){
			id=false
		}else{
			id=strlyrpapa;		
			hideLayer(id);
		}
	}				
}


function menutop(id, imgName, botonW, botonH) {
		// botonW es el ancho a respetar para el botón que abre el menú. Si es 0, se toma el ancho de la imagen del HOver
		// botonH, idem
		var reset_encima
		if (encima) reset_encima = 1 
		if (id) {
			if (cur_lyr !=  id) {
				encima=0;
			}
		}
		if (reset_encima) encima = 1
		if (!id || !imgName){
			return false;
		}

		var yPos
		if (imgName) if ((img=MM_findObj(imgName))!=null)
		var lyr = document.getElementById(id);	
		if (lyr){			
	  		var lyr_parent = lyr.parentNode
			yPos = findPosY(img)
			var xpos = findPosX(img)
		}else{
			alert('No existe '+id+'_parent')
		}
		cur_lyr = id;
	// ====================================
	var browsername=navigator.appName; 
	if (browsername.indexOf("Netscape")!=-1) {browsername="NS"}
	else {if (browsername.indexOf("Microsoft")!=-1) {browsername="MSIE"}
	else {browsername="N/A"}};
	// ====================================
	var lista_cantidad = 0
	var ul_id
	var mistylesheet = 'css_menutop';
		// DETERMINAR CANTIDAD DE ELEMENTOS DE LISTA EN EL MENÚ
		if (lyr.childNodes.length){
			children = lyr.childNodes
				for (i=0;i<children.length;i++){
				// EVALUAR CADA NODO DENTRO DEL LAYER TRABAJAR CON ÉL
				// AJUSTAR POSICIÓN DEL MENÚ
					if (children[i].nodeName=='UL'){
						ul = children[i]
						// Obtiene id del UL que a su vez nos da el style 
						ul_id = ul.id
					// Si la lista tiene nodos
						if (ul.childNodes.length){
							children_ul = ul.childNodes
							for (ii=0;ii<children_ul.length;ii++){
								if (children_ul[ii].nodeName=='LI'){
									lista_cantidad += 1;
								}
							}
						}
					}
				}
		}

			var sslen = document.styleSheets.length;
			if (sslen<0){
				alert("error en menutop.js -> no hay styleSheets")
			}
			var css = false;
			for (i=0; i<(sslen);i++ ){
	//		alert (sslen);
	//		alert (document.styleSheets[i].id);
	//		alert (document.styleSheets[i].title);
				if (document.styleSheets[i].title==mistylesheet){
					css = document.styleSheets[i];
				}
			}
			if (!css){
				if (browsername=="NS" || browsername=="MSIE" ){
					alert('El css que contiene los estilos del menú debe tener title = '+mistylesheet)
				}
				return false;
			}
			var regla_existe_1 = false;
			var regla_existe_2 = false;
			var altura_item = false;
			var altura_paddingtop = false;
			var altura_paddingbottom = false;
			var altura_bordertop = false;
			var altura_borderbottom = false;
			var altura_margintop = false;
			var altura_marginbottom = false;

	if (browsername=="NS"){		
		// EVALUAR STYLE SHEET
			for (i=0;i<css.cssRules.length ; i++ ){
				rule_selector = css.cssRules[i].selectorText; // Todo lo que hay antes del corchete de la regla Ej #tabla_desplegable li,  li a
				// Buscar heigth de la regla que define style de los elementos del menú (ul)
				regla_existe_1 = true
				if (rule_selector.indexOf(id)>0){
					if (css.cssRules[i].style.width){
						ancho_total_menu = parseFloat(css.cssRules[i].style.width)
					} 
					regla_existe_1 = true
				}
				if (rule_selector.indexOf(ul_id)>0){
					//alert (rule_selector)
					regla_existe_2 = true
				// HEIGHT
					if (css.cssRules[i].style.height && !altura_item){
						//alert(css.cssRules[i].selectorText)								
						//alert("___________>"+css.cssRules[i].style.height)		
						altura_item = parseFloat(css.cssRules[i].style.height);
					}
				// PADDING-TOP
					if (css.cssRules[i].style.paddingTop && !altura_paddingtop){
						altura_paddingtop = parseFloat(css.cssRules[i].style.paddingTop);
					}
				// PADDING-BOTTOM
					if (css.cssRules[i].style.paddingBottom && !altura_paddingbottom){
						altura_paddingbottom = parseFloat(css.cssRules[i].style.paddingBottom);
					}

				// BORDER-TOP
					if (css.cssRules[i].style.borderTop && !altura_bordertop){
						altura_bordertop = parseFloat(css.cssRules[i].style.borderTop);
					}
				// BORDER-bottom
					if (css.cssRules[i].style.borderBottom && !altura_borderbottom){
						altura_borderbottom = parseFloat(css.cssRules[i].style.borderBottomWidth);
					}
				// MARGIN-TOP
					if (css.cssRules[i].style.marginTop && !altura_margintop){
						altura_margintop = parseFloat(css.cssRules[i].style.marginTop);
					}
				// MARGIN-bottom
					if (css.cssRules[i].style.marginBottom && !altura_marginbottom){
						altura_marginbottom = parseFloat(css.cssRules[i].style.marginBottom);
					}
				}
			}
		// CONTROL DE ERRORES
			if(!regla_existe_1){
				alert ('En la primera definición del STYLESHEET debería estar incluido #'+id);
				return false;			
			}
			if(!regla_existe_2){
				alert ('No existe una regla en el stylesheet para la tabla del menú llamada '+ul_id);
				return false;			
			}
			if(!altura_item){
				alert ('No está determinado el HEIGHT de la regla de estilo '+ul_id+' en el stylesheet ->'+mistylesheet);
				return false;			
			}
			// Calculada cantidad de elementos del menú, reestablecemos altura de lyr con lo cual los layers invisibles iz y der también se agrandan
			altura_item += altura_paddingtop + altura_paddingbottom + altura_bordertop+altura_borderbottom+altura_margintop+altura_marginbottom;
			nueva_altura = lista_cantidad * altura_item;
			// Corrección especial para FIREFORX si menu_x tiene borde (establecido en primera regla del css)
			yPos += 2
			lyr.style.height =  nueva_altura;
			//lyr_cierrame_por_abajo.style.width = ancho_total_menu
			//alert (lista_cantidad)
			//alert (altura_item)
		// Cuando se baa en la posición x de un elemento lista, firefox la caga y coge un punto en la mitad de la lista...
		//if (menutopsub) xpos = findPosX(img) - (ancho_total_menu/2) + 2
	}else if (browsername=="MSIE"){	
	// INTERNET EXPLORER
		// EVALUAR STYLE SHEET
			for (i=0;i<css.rules.length ; i++ ){
				rule_selector = css.rules[i].selectorText; // Todo lo que hay antes del corchete de la regla Ej #tabla_desplegable li,  li a
				// Buscar heigth de la regla que define style de los elementos del menú (ul)
				if (rule_selector.indexOf(id)>0){
					if (css.rules[i].style.width){
						ancho_total_menu = parseFloat(css.rules[i].style.width)
					} 
					regla_existe_1 = true
				}
				if (rule_selector.indexOf(ul_id)>0){
					//alert (rule_selector)
					regla_existe_2 = true
				// HEIGHT
					if (css.rules[i].style.height && !altura_item){
						//alert(css.rules[i].selectorText)								
						//alert("___________>"+css.rules[i].style.height)		
						altura_item = parseFloat(css.rules[i].style.height);
					}
				// PADDING-TOP
					if (css.rules[i].style.paddingTop && !altura_paddingtop){
						altura_paddingtop = parseFloat(css.rules[i].style.paddingTop);
					}
				// PADDING-BOTTOM
					if (css.rules[i].style.paddingBottom && !altura_paddingbottom){
						altura_paddingbottom = parseFloat(css.rules[i].style.paddingBottom);
					}

				// BORDER-TOP
					if (css.rules[i].style.borderTop && !altura_bordertop){
						altura_bordertop = parseFloat(css.rules[i].style.borderTopWidth);
						//alert("altura_bordertop"+altura_bordertop)								
					}
				// BORDER-bottom
					if (css.rules[i].style.borderBottom && !altura_borderbottom){
						altura_borderbottom = parseFloat(css.rules[i].style.borderBottomWidth);
					}
				// MARGIN-TOP
					if (css.rules[i].style.marginTop && !altura_margintop){
						altura_margintop = parseFloat(css.rules[i].style.marginTop);
					}
				// MARGIN-bottom
					if (css.rules[i].style.marginBottom && !altura_marginbottom){
						altura_marginbottom = parseFloat(css.rules[i].style.marginBottom);
					}
				}
			}

		// CONTROL DE ERRORES
			if(!regla_existe_1){
				//alert ('En la primera definición del STYLESHEET debería estar incluido #'+id);
				//return false;			
			}
			if(!regla_existe_2){
				alert ('No existe una regla en el stylesheet para la tabla del menú llamada '+ul_id);
				return false;			
			}
			if(!altura_item){
				alert ('No está determinado el HEIGHT de la regla de estilo '+ul_id+' en el stylesheet ->'+mistylesheet);
				return false;			
			}
//			alert(altura_item)
			// Calculada cantidad de elementos del menú, reestablecemos altura de lyr con lo cual los layers invisibles iz y der también se agrandan
			altura_item += altura_paddingtop + altura_paddingbottom + altura_bordertop+altura_borderbottom+altura_margintop+altura_marginbottom;
//			alert(lyr.style.height)
			nueva_altura = lista_cantidad * altura_item;

			lyr.style.height =  nueva_altura;

			//lyr_cierrame_por_abajo.style.width = ancho_total_menu * (1-(ancho_cerrador*2/100))
//			alert(lyr.style.height)
//alert (nueva_altura)
//alert (altura_item)	
	}
	lyr_parent.style.top = yPos + botonH
// AJUSTAR POSICIÓN X
	var xsobra = (menutopsub) ? document.body.clientWidth - (xpos + ancho_total_menu+ancho_total_menu) : document.body.clientWidth - (xpos + ancho_total_menu)	
//	document.title = (imgName+' '+document.body.clientWidth+' - xpos '+xpos+' '+ancho_total_menu + ' - sobra '+xsobra)
	if (xsobra > 0 ) {
		lyr_parent.style.left = (menutopsub) ? xpos  + ancho_total_menu : xpos
	}else{	
		lyr_parent.style.left = xpos - ancho_total_menu
	}
	lyr.style.width = ancho_total_menu
	showLayer(id);
}
	
	
function findPosX(obj)
{
	var x=1
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
			x++
		}
	}
//	else if (obj.x)
//	curleft += obj.x;

	return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}

var zInd = 300;
function cerrarMenu(id,idAccion){
	if (ultimaAccionAbriendo!=idAccion) return false
	if (encima){
	   var speed = Math.round(resizetime / 100);
		timer = cerrarTime
		setTimeout("cerrarMenu('" + id + "'," + idAccion + ")",(timer * speed));
		return false
	} 
	while (!encima && ultimaAccionAbriendo==idAccion){
		for (menu in arrMenus){
			// Cerrar todo menu que no sea parte de sus PAPAS
			if (arrMenus[menu].visible ){
				cerrarHijos(menu)
			}
		}
		ultimaAccionAbriendo=0
		cur_lyr=0
	}
	
//	alert('encima '+encima)
}
function showLayer(id) {
  var lyr = getElemRefs(id);
  enviarAlFrente(id);
  resizelayera(id,arrMenus[id].currentSize,lyr.style.height)
}
function resizelayera(id,alturaInicial,alturaFinal){
	alturaInicial = parseFloat (alturaInicial)
	alturaFinal = parseFloat (alturaFinal)
	lyr = document.getElementById(id)
     //speed for each frame
    var speed = Math.round(resizetime / 100);
    var timer = 0;
    //determine the direction for the blending, if start and end are the same nothing happens
	// iDaCCION Me permite identificar cuando la acción debe ser abortada porque una nueva esta en curso...
	var idAccion = Math.random()*1000
	// Cerrar
	lyr.idAccion = idAccion
    if(alturaInicial > alturaFinal) {
        for(i = alturaInicial; i >= alturaFinal; i--) {
            setTimeout("resizelayerb(" + i + ",'" + id + "'," + idAccion + ")",(timer * speed));			
            timer++;
        }
		//setTimeout("hideLayerB('"+id + "')",(timer * speed));			
	// Abrir		
    } else if(alturaInicial < alturaFinal) {
        for(i = alturaInicial; i <= alturaFinal; i++)
            {
            setTimeout("resizelayerb(" + i + ",'" + id + "'," + idAccion + ")",(timer * speed));
            timer++;
        }
		timer += cerrarTime
		ultimaAccionAbriendo = idAccion
		setTimeout("cerrarMenu('" + id + "'," + idAccion + ")",(timer * speed));

    }  
}

function resizelayerb(altura,id,idAccion){
	lyr = document.getElementById(id)
	if (idAccion != lyr.idAccion) return false
  	lyr.css.visibility = "visible";	
	lyr.style.height = altura
	arrMenus[id].currentSize = altura
		if(altura==0)   	lyr.css.visibility = "hidden";	
}
function hideLayer(id) {

	if(!id) return false
  lyr = document.getElementById(id)
	arrMenus[id].visible = false
		if (id=='menu_3'){
//		alert('hidelayer 3')
		}

  resizelayera(id,arrMenus[id].currentSize,0)  
}
function hideLayerB(id) {
  lyr = document.getElementById(id)
  if (lyr && lyr.css) lyr.css.visibility = "hidden";
}
function getElemRefs(id) {
	var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;
	if (el) el.css = (el.style)? el.style: el;
	return el;
}
function enviarAlFrente(theDiv) {
	oldtheDiv = theDiv
	theDiv = document.getElementById(theDiv)
	theDiv = theDiv.parentNode
	if( !theDiv ) { window.alert( 'Esta no es la layer. ' + oldtheDiv ); return; }
	if( theDiv.style ) { theDiv = theDiv.style; }
	theDiv.zIndex = zInd; zInd++;
}
<!-- ------------------- END ----- MENUTOP -  SWAP LAYERS HIDE LAYERS  -->