//***************************Objetos items del menu
/*=====================================================================================
FUNCION:	Constructor del objeto oItem. Usado por oMenu.
ARGS:		ident: identificador del objeto
			it: Cadena con el nombre del item
			enlace: cadena URL del enlace
			activo: cadena, nombre del estilo para el estado activo
			inactivo: cadena, nombre del estilo para el estado inactivo o normal
			texto: Cadena, explicación del enlace
			idPadre: cadena con el identificador del menu del que depende el item	
DEVUELVE:
DESCRIP:	Construye objetos oItem, los items que contiene un determinado menu. Esta 
			función es usada por el objeto oMenu y no tiene que llamarse desde ningún 
			otro lugar.
=====================================================================================*/

function oItem(ident, it, enlace, activo, inactivo, texto, idPadre)
{
this.ident = ident;
this.titulo = it;
this.enlace = enlace;
this.claseAct = activo;
this.claseInact = inactivo;
this.descrip = texto;
this.num = 0;
this.blPadre = idPadre;	
this.dibujar = oItem_dibujar;
this.activar = oItem_activar;
this.pulsar = oItem_click;
}
/*=====================================================================================
FUNCION:	oItem_click(). Método del objeto oItem
ARGS:		--- 
DEVUELVE:	---
DESCRIP:	Redirige la página a la dirección almacenada en la propiedad enlace del  
			objeto item. Sólo la usa MSIE.
=====================================================================================*/
function oItem_click()
{
location = this.enlace;
return;
}

/*=====================================================================================
FUNCION:	oItem_activar(obj, act). Método del objeto oItem
ARGS:		obj: objeto HTML que la dispara
			act: lógico: true= activar; false= desactivar.
DEVUELVE:	---
DESCRIP:	Pone el item en estado activo o inactivo, se usa para reaccionar ante el paso 
			del cursor por encima del item.
=====================================================================================*/
function oItem_activar(obj, act)
{
var menuPadre = eval(this.blPadre);
var capaPadre = menuPadre.blDespl;
var capaDescr = menuPadre.blDescr;
var ancho, capaItem, posHor = 0, estilo, limder;
var borde = menuPadre.separador;
estilo = menuPadre.estDesp;
switch (miNavegador.modVer){
case "IE4":
case "IE5":
case "IE6":
case "NS5":
	if (act)
		{
		obj.className = this.claseAct;		
		if (miNavegador.NS)
			{
			ancho = parseInt(capaPadre.offsetWidth);
			posHor = ancho + parseInt(capaPadre.offsetLeft);
			limder = document.width;
			}
		else{
			ancho = parseInt(estiloActual(capaPadre, estilo, 'width'));	
			posHor = ancho+parseInt(estiloActual(capaPadre,estilo,'left'));
			limder = document.body.offsetWidth;
			}
		capaDescr.style.top = obj.offsetTop+capaPadre.offsetTop;
		if (posHor + capaDescr.offsetWidth +15>= limder)
			posHor = posHor - ancho - capaDescr.offsetWidth;
		capaDescr.style.left = posHor;
		if (this.descrip != ''){
			capaDescr.innerHTML = this.descrip;
			capaDescr.style.visibility = "visible";
			}
		}
	else{	
		capaDescr.style.visibility = "hidden";
		obj.className = this.claseInact;
		}
	break;	
case "NS4":
	capaItem = capaPadre.layers[0].document.layers[obj];
	ancho = capaItem.clip.width;
	if (act)
		{
		if(menuPadre.itActual >=0) return false;
		menuPadre.itActual = this.num;
		posHor = capaPadre.pageX+ capaPadre.clip.width;
		capaDescr.pageY = capaItem.pageY;
		if (posHor+capaDescr.clip.width > screen.width)
			posHor =  capaPadre.pageX - capaDescr.clip.width;
		capaDescr.pageX = posHor;
		capaDescr.document.open();
		capaDescr.document.write('<div id="par" class="'+menuPadre.estDesc + '">');
		capaDescr.document.write(this.descrip+'</div>'); 
		capaDescr.document.close();
		capaDescr.clip.height = capaDescr.document.layers[0].clip.height; 
		capaItem.bgColor = document.classes[this.claseAct].all.backgroundColor; 
		with(capaItem){ 
			document.open(); 
			document.write('<a href = "'+this.enlace);
			document.write('" class="'+this.claseAct+'">'); 
			document.write( this.titulo+'</a>');
			document.write('<br><layer id="L2" height="'+borde[0]+'" z-index="auto"')
			document.write('bgcolor="'+borde[2]+'" clip="0,0,'+ancho+','+borde[0]+'">');
			document.write('</layer>');			
			document.close();
			}
		capaDescr.visibility = "visible"; 
		}
	 else{ 
	 	document.classes[this.claseInact].all.position = ''; 
		with(capaItem){ 
			document.open();
			document.write('<span class="'+this.claseInact+'">'+this.titulo+'</span>') 
			document.write('<br><layer id="L2" height="'+borde[0]+'" z-index="auto" ');
			document.write('bgcolor="'+borde[2]+'"clip="0,0,'+ancho+','+borde[0]+'">')
			document.write('</layer>');
			document.close(); 
			}
		capaItem.bgColor = null;  
		capaDescr.visibility  = "hidden"; 
		menuPadre.itActual = -1; 
		}
	break;	
	}
 } 
/*=====================================================================================
FUNCION:	oItem_dibujar(num,ancho, alto). Método del objeto oItem
ARGS:		num: número del item
			ancho: número, ancho del bloque (NS)
			alto: alto del bloque (NS)	
DEVUELVE:	---
DESCRIP:	Escribe en la página el bloque HTML correspondiente a un item del menu. 
			MSIE usa bloques DIV, mientras NS usa sus bloques LAYERS
=====================================================================================*/
function oItem_dibujar(num,ancho, alto)
 {
var ident = "i_" + num; 
var est;
var menuPadre = eval(this.blPadre)
var borde = menuPadre.separador;
switch (miNavegador.modVer){
case "IE4":
case "IE5":
case "IE6":
case "IE7":
case "IE8":
case "NS5":
	document.write('<div id="'+ident+'" style="border-bottom:'+borde+'; width:100%" ');
	document.write(' onmouseover ="'+ this.ident+'.activar(this, true)"');
	document.write(' onmouseout = "'+ this.ident+'.activar(this, false)" ');
	document.write(' onmousedown = "'+ this.ident+'.pulsar()" >');
	document.write("&nbsp;&nbsp;"+this.titulo+'</div>');
	break; 
case "NS4":
	est = this.claseInact; 
	this.num = num; 
	document.write('<layer id="'+ident+'" class="'+ est+'" top="'+(alto*num+8)+'px"');
	document.write(' onmouseover ="'+ this.ident+'.activar(\''+ident+'\', true, event)"');
	document.write(' onmouseout = "'+ this.ident+'.activar(\''+ident+'\', false, event)" ');
	document.write('left="4" width="'+ancho+'px">');
	document.write( this.titulo) 
	document.write('<br><layer id="L2" height="'+borde[0]+'" z-index="auto"')
	document.write('bgcolor="'+borde[2]+'" clip="0,0,'+ancho+','+borde[0]+'"></layer>');
	document.write('</layer>');
	break;
	}
} 
//***************************Objeto menu 
/*=====================================================================================
FUNCION:	Constructor del objeto oMenu
ARGS:		ident: nombre de la variable usada para el objeto.
			titulo: nombre que aparece en la cabecera del menu.
			estTit: nombre del estilo CSS para las cabeceras.
			estDesp: nombre del estilo CSS para la capa desplegable con los items.
			estAct: nombre del estilo CSS para los items activos.
			estDescr: nombre del estilo CSS para la descripción de los items.
			borde: una cadena que describe un borde separador de los items, esta cadena
				   responde a la definición CSS de los bordes (Ej.: '2px thin red')
				   grosor: número seguido de px o thin, medium, thick
				   estilo: none, solid, double, inset, outset, ridge, groove
				   color: nombre de color o su código hexadecimal
DEVUELVE:	---
DESCRIP:	El objeto oMenu corresponde a la cabecera o título que al activarse 
			despliega una capa con items que al ser pulsados dirigen la página al URL
			correspondiente a ese item. 
=====================================================================================*/
function oMenu(ident, titulo, estTit, estDesp, estAct, estDesc, borde) 
{ 
this.varMenu = ident;
this.titulo = titulo;
//Estos son los ID de cabecera, desplegable y descripciones para los bloques HTML
this.idMenu = "$"+ident; 
this.idDespl = "d_"+ident; 
this.idDescr = "e_"+ident;
//Estas serán los bloques HTML de cada elemento: Titulo, Desplegable y Descripciones
this.blMenu = null;
this.blDespl = null;
this.blDescr = null;
//Almacena la lista de items asociada a este menú
this.elementos = new Array(); 
//Aspectos de formato, nombres de estilos CSS
this.estItemAct = estAct; 
this.estItemInac = ''; 
this.separador = borde.replace(/ /g,' ');
this.estTit = estTit; 
this.estDesp = estDesp; 
this.estDesc = estDesc; 
this.itActual = -1; 
//Métodos del objeto oMenu
this.agregar = oMenu_agregar; 
this.abrir = oMenu_abrir; 
this.cerrar = oMenu_cerrar; 
this.dibujar = oMenu_dibujar; 

if (miNavegador.modVer =="NS4") 
	with (document)
		{
		classes[estDesp].all.position="absolute"; 
		classes[this.estItemInac].all.fontFamily=classes[estDesp].all.fontFamily; 
		classes[this.estItemInac].all.fontSize=classes[estDesp].all.fontSize; 
		classes[this.estItemInac].all.textDecoration="none"; 
		classes[this.estItemInac].all.position="absolute"; 
		classes[this.estItemInac].all.color=classes[estDesp].all.color; 
		classes[this.estItemInac].all.fontSize=classes[estAct].all.fontSize; 
		this.separador = borde.split(' ');
		}
}
/*=====================================================================================
FUNCION:	oMenu_abrir(), método del objeto oMenu. Abre el menu
ARGS:		ninguno
DEVUELVE:	nada
DESCRIP:	Despliega la capa donde están los items del menu. Estará vinculada a un
			evento onMouseOver para que actue al pasar el ratón por la cabecera del
			menú.
=====================================================================================*/
function oMenu_abrir(evnt) { 
if (this.blDespl.style) 
	{ 
	this.blDespl.style.visibility = "visible";
	evnt.cancelBubble = true; 
	} 
else
	this.blDespl.visibility = "visible";
}
/*=====================================================================================
FUNCION:	oMenu_cerrar(). Método del objeto oMenu. Oculta el menú.
ARGS:		ninguno
DEVUELVE:	nada
DESCRIP:	Oculta la caap del menú cuando el ratón abandona la cabecera del menú o la
			capa con los items. Está vinculada con un evento oMouseOut.
=====================================================================================*/
function oMenu_cerrar(evnt) { 
var titulo = this.idMenu; 
switch (miNavegador.modVer){
case "IE4":
case "IE5":
case "IE6":
	//Si el destino está dentro de la capa desplegable o el destino es la cabecera NO cerrar 
 	if (!this.blDespl.contains(event.toElement) && event.toElement.id != titulo) 
		this.blDespl.style.visibility = "hidden";
	event.cancelBubble = true;
	break;
case "NS5":
	this.blDespl.style.visibility = "hidden";
	evnt.cancelBubble = true;
	break;
case "NS4":
	this.blDespl.visibility = "hidden";	
	break;
	}
}

/*=====================================================================================
FUNCION:	oMenu_agregar(). Método del objeto oMenu. Agrega un item al menú.
ARGS:		it: nombre que aparece en el item.
			enlace: dirección URL asociada al item
			desc: Texto que describe el enlace.
DEVUELVE:	nada
DESCRIP:	Este método agrega al objeto oMenu los objetos oItem que lo forman. Crea el
			item y le asigna un identificador igual al identificador del elemento del
			array de items del oMenu. O sea, el primer item dun oMenu que se llame 
			opciones tiene como identificador opciones.elemento[0].
=====================================================================================*/
function oMenu_agregar(it, enlace, desc) 
{
var ind = this.elementos.length; 
var idItem = this.varMenu+".elementos["+ind+"]"; 
this.elementos[ind] = new oItem(idItem, it, enlace, this.estItemAct, this.estItemInac, desc, this.varMenu);
} 
/*=====================================================================================
FUNCION:	oMenu_dibujar(posX, posY). Método del objeto oMenu. Construye el código HTML 
			del menú.
ARGS:		posX, posY: posición horizontal y vertical de la cabecera del menú.
DEVUELVE:	nada
DESCRIP:	Escribe en la página el código HTML correspondiente a todo el menú: cabecera,
			capa de items, items y capa para las descripciones. MSIE usa bloques DIV 
			mientras que NS usa sus particulares LAYERS
=====================================================================================*/
function oMenu_dibujar(posX, posY, tipo) 
{ 
var ind, offY, ancho; 
var clase = 'class="'+this.estTit+'" '; 
var idCapa = this.idMenu; 
var activar = 'onmouseover ="'+this.varMenu+'.abrir(event)"'; 
var desact = 'onmouseout="'+this.varMenu +'.cerrar(event)" ';
//Bloque para la cabecera del menu
switch (miNavegador.modVer){
case "IE4":
case "IE5":
case "IE6":
case "NS5":
	var estilo = 'style = "position: absolute; left: '+posX+'px; top:'+posY + 'px"'; 
	document.write('<div id= "'+idCapa + '"' + estilo + clase);
	document.write(activar + ' '+desact +' align="center">'); 
	document.write(this.titulo+'</div>'); 
	break;
case "NS4":
	document.write('<layer id="'+idCapa+ '" ' + activar + ' ' +desact);
	document.write(' class="'+this.estTit+'">'); 
	document.write('<div align="center">'+this.titulo+'</div>'); 
	document.write('</layer>'); 
	document.layers[idCapa].top = posY; 
	document.layers[idCapa].left = posX;
	break;
	}
//Bloque desplegable para los items del menu.
clase = 'class="'+this.estDesp+'" '; 
eleHtml = objHtml(idCapa);
switch (miNavegador.modVer){
case "IE4":
case "IE5":
case "IE6":
case "NS5":
	offY = eleHtml.offsetHeight;
	if (isNaN(offY)) 
		offY = Math.floor(parseInt(estiloActual(eleHtml,this.estTit, 'fontSize'))*1.5);
	ancho=parseInt(eleHtml.offsetWidth)
	if (tipo && tipo.toUpperCase()=='V')
		{posX+=ancho;offY=0}
	estilo = 'style="position:absolute; left: '+posX+'px; top:'+ (posY+offY-1); 
	estilo+= 'px; visibility: hidden;"'; 
	document.write('<div id= "' + this.idDespl + '"' + estilo + clase + activar + ' ');
	document.write(desact +'>'); 
	for (ind in this.elementos)
		this.elementos[ind].dibujar(ind,ancho); 
	document.write('</div>');
//Capa para descripción de los items del menu. 
	document.write('<div id= "' + this.idDescr+'"');
	document.write(' class= "'+this.estDesc+'"');
	document.write(' style=" position:absolute; visibility:hidden">'); 
	document.write(this.titulo+'</div>'); 
	break;
case "NS4":
	offY = parseInt(document.classes[this.estDesp].all.fontSize)*1.5+1;
	ancho = eleHtml.clip.width*0.9;
	idCapa = this.idDespl; 
	clase = this.estDesp; 
	alto = parseInt(document.classes[this.estDesp].all.fontSize)*1.5; 
	document.classes[this.estDesp].all.width= eleHtml.clip.width;
	document.write('<layer id= "' +idCapa+ '" class="'+clase+'" ');
	document.write( activar + ' '+desact +' visibility="hidden" >');
	for (ind in this.elementos)
		this.elementos[ind].dibujar(ind,ancho, alto); 
	document.ids['l#'].fontSize = alto*(ind+1)+ind;
	document.write('<span id="l#">&nbsp;</span>');
	document.write('</layer>');
	document.classes[this.claseInact].all.position="static"; 
	document.classes[this.claseAct].all.position="static"; 
	if (tipo && tipo.toUpperCase()=='V')
		{posX+=ancho; offY=0}
	document.layers[idCapa].top = posY+offY; 
	document.layers[idCapa].left = posX;
	document.layers[idCapa].zIndex = document.classes[this.estDesp].all.zIndex;
	//Capa para descripción de los items del menu. 
	document.write('<DIV id="'+ this.idDescr +'" class= "'+this.estDesc+'"></DIV>');
	document.layers[this.idDescr].visibility="hidden";
	break;
	}
	this.blMenu = objHtml(this.idMenu); 	//Cabecera
	this.blDespl = objHtml(this.idDespl);	//Capa desplegable
	this.blDescr = objHtml(this.idDescr);	//Capa explicaciones
	if (miNavegador.modVer != "NS4")
		{
		this.blMenu.style.cursor = miNavegador.IE7"hand":"pointer";
		this.blDespl.style.cursor = miNavegador.IE7"hand":"pointer";
		}
}
//=======================================================================================
//                              FIN DEL OBJETO MENU
//=======================================================================================
/*=======================================================================================
Aquí puedes colocar una función con el código generador del menú y hacer una llamada a la misma desde las páginas donde quieras colocar tu menú, páginas a las que como es lógico deberás enlazar este archivo. De esta forma si quieres añadir o eliminar opciones sólo deberás tocar este archivo y el cambio repercutirá en todas la páginas donde lo uses. 
=======================================================================================*/

