// 	MENU TOP --------------------------------------------------------------------------------- >
/*//
	ERRORES CONOCIDOS 
	- PILAS, TRABAJAR CON LA ÚLTIMA VERSION. BUSCAR EN EL FINDER PARA SABER CUÁL FUE...
	- Cuando se instaló en Abraqui se volvio M porque faltaba agregar 'px' a las medidas al asignarlas
	- Maldición... unas tildes en algunos comentarios se tiraban todo en explorer
	- El CSS debe estar también en UTF8
	
	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 = 400; // Esto lo sobrescribe paramjs_menutoptimeout si existe
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) {
	menutoptimeout=paramjs_menutoptimeout
	// menutopsubmenu -> menutopsubmenuB() -> menutop()
	encima=id
	var a=id
	var b=''
	var c=''
	if (imgName)	c=imgName.toString()
	if (papa){
		b = papa.toString()
		setTimeout("menutopsubmenuB('" + a + "','" + c + "'," + botonW + "," + botonH + ",'" + b + "')",(menutoptimeout));
	}else{
		setTimeout("menutopsubmenuB('" + a + "','" + c + "'," + botonW + "," + botonH  + ")",(menutoptimeout));
	}
}
function menutopsubmenuB(id, imgName, botonW, botonH, papa) {
	// menutopsubmenu -> menutopsubmenuB() -> menutop()
	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(!arrMenus[id]){
		alert('No existe un DIV llamado '+id+' err 923548734')
		return false
	}
	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+',';
			}
		}	
		var menu		
		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, papa)
}
	


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, papa) {
	// menutopsubmenu -> menutopsubmenuB() -> menutop()

	// 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){
		var img=document.getElementById(imgName)
		if (!img){
			alert('No existe la imagen con id:\n'+imgName+'\nRevisar que el id de imagen coincida con el id enviado en la función menutopsubmenu()')
			return false
		}
	}else {
		alert('No hay imgName en menutop() err 354987345')
		return false
	}
	var lyr = document.getElementById(id);	
	if (lyr){			 
		var lyr_parent = lyr.parentNode
		var yPos = findPosY(img)
		var xpos = findPosX(img)
	}else{
		alert('No existe '+id)
		return false
	}

	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';
		if (lyr.childNodes.length) {
			var 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++ ){
				var rule_selector = css.cssRules[i].selectorText; // Todo lo que hay antes del corchete de la regla Ej #tabla_desplegable li,  li a
				if(!rule_selector) continue
				// Buscar heigth de la regla que define style de los elementos del menú (ul)
				if (rule_selector.indexOf('menu_desplegable')>0){
					regla_existe_1 = true
					if (css.cssRules[i].style.width){
						var ancho_total_menu = parseFloat(css.cssRules[i].style.width)
					} 
				}
				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);
						//alert(altura_item)
					}
				// 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 menu_desplegable o #'+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 DEL LAYER
			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+'px';
			//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++ ){
				var rule_selector = css.rules[i].selectorText; // Todo lo que hay antes del corchete de la regla Ej #tabla_desplegable li,  li a
				if(!rule_selector) continue
				// Buscar heigth de la regla que define style de los elementos del menú (ul)
				if (rule_selector.indexOf('menu_desplegable')>0){
					if (css.rules[i].style.width){
						var 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 menu_desplegable o #'+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)	
	}
	tmpStr = yPos + botonH
	lyr_parent.style.top = tmpStr + 'px'
// AJUSTAR POSICIÓN X
	var xsobra = papa ? document.body.clientWidth - (xpos + ancho_total_menu) : document.body.clientWidth - (xpos + ancho_total_menu)	
	//	document.title = (imgName+' '+document.body.clientWidth+' - xpos '+xpos+' '+ancho_total_menu + ' - botonH '+botonH+ ' - sobra '+xsobra)
	if (xsobra > 0 ) {
		tmpStr = (menutopsub) ? xpos  + ancho_total_menu : xpos
		lyr_parent.style.left = tmpStr+'px'
	}else{	
		// NO CABE A LO ANCHO EN LA PANTALLA
		if(papa){
			// ES UN SUBMENU
			var tmpStr = xpos - ancho_total_menu
		}else {
			// ES UN MENU PRINCIPAL
			var tmpStr = document.body.clientWidth - ancho_total_menu		
		}
//			alert(ancho_total_menu)
			//tmpStr+=img.width
//			tmpStr+= img.width ? img.width : botonW
//			alert('tmpStr '+tmpStr)
//			alert('img.width '+img.width)
		lyr_parent.style.left = tmpStr+'px'
	}
	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){
		var menu
		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);
  if(!lyr.getAttribute('alturaOriginal')) lyr.setAttribute('alturaOriginal',lyr.style.height)	
  resizelayera(id,arrMenus[id].currentSize,lyr.getAttribute('alturaOriginal'))
//  resizelayera(id,0,100)

}
function resizelayera(id,alturaInicial,alturaFinal){
	//alert(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
	lyr.style.height = altura+'px'
	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++;
}