//Código javascrip para el diseño de menús desplegables

/***********************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
			idPadre: cadena con el id del menu del que depende el item
DEVUELVE
DESCRIP:	construye objetos oItem 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. 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;
			}
		if (miNavegador.NS)	
			capaDescr.style.top = obj.offsetTop;
		else
			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 "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 y Desplegable
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";
	event.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) 
{ 
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('<center><div id= "'+idCapa + '"' + estilo + clase);
	document.write(activar + ' '+desact +' align="center">'); 
	document.write(this.titulo+'</div></center>'); 
	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":
	if (miNavegador.IE){
		offY = eleHtml.offsetHeight;
		if (isNaN(offY)) 
			offY = Math.floor(parseInt(estiloActual(eleHtml,this.estTit, 'fontSize'))*1.5);
		ancho = parseInt(estiloActual(eleHtml, this.estTit, 'width'));
		}
	else
		{
		offY = eleHtml.offsetHeight;
		if (isNaN(offY)) 
			offY = Math.floor(parseInt(estiloActual(eleHtml,this.estTit, 'fontSize'))*1.5);
		offY = 14;
		}	
	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"; 
	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.IE?"hand":"pointer";
		this.blDespl.style.cursor = miNavegador.IE?"hand":"pointer";
		}
}

/********************************************************************************
                              FIN DEL OBJETO MENU
*********************************************************************************/
/********************************************************************************
Lo que sigue es para la página en concreto donde vaya a usarse este objeto. 
Si se va a construir una barra de navegación con este objeto podemos ahorrar trabajo 
si alguna vez la modificamos enlazando este archivo JS en la cabecera de las páginas 
donde vaya a figurar la barra y haciendo una llamada desde dentro del cuerpo de esas 
páginas a la función donde definimos los menus concretos. Cualquier modificación que 
hagamos de la barra o del propio objeto oMenu se reflejará en todas las páginas sin 
necesidad de editar una a una.
*********************************************************************************/
function ponerBarra()
{
//Se crean los menús necesarios para nuestra página
//Se llama a los métodos dibujar de cada menú para colocarlos en la página
/*separ es la variable donde colocaremos la línea  de separación entre los itemes de 
  los menús. Es una cadena con:
 grosor de la línea: número o thin, medium, thick (O sea: delgado, medio, grueso)
 estilo: solid, ridge, inset, outset, double, groove, none
 color: nombre de color o código hexadecimal. (Ej: red o #FF0000)
 Esto sólo vale para MSIE y NS6. Netscape 4 no tiene en cuenta el estilo.
*/
var separ = '1px ridge grey';

menu1 = new oMenu('menu1','Inf. General','capatit','capadesp','itemactivo','itemactivo',separ);
menu1.agregar('Dirección y Secretaría','./direccion_y_secretaria.html', '');
menu1.agregar('Cómo llegar','./como_llegar.html', '');
menu1.agregar('Áreas','./areas.html', '');

menu2 = new oMenu('menu2','Profesorado','capatit','capadesp','itemactivo','itemactivo',separ);
menu2.agregar('Personal docente e investigador','./personal.html', '');

menu3 = new oMenu('menu3','Docencia','capatit','capadesp','itemactivo','itemactivo',separ);
menu3.agregar('Primer y Segundo ciclo','./primer_segundo_ciclo.html', '');
menu3.agregar('Tercer ciclo','./tercer_ciclo.html', '');

menu4 = new oMenu('menu4','Investigación','capatit','capadesp','itemactivo','itemactivo',separ);
menu4.agregar('Áreas de Interés','./areas_interes.html', '');
menu4.agregar('Publicaciones','./pag_construccion.html', '');
menu4.agregar('Documentos de trabajo','./documentos_trabajo.html', '');

menu5 = new oMenu('menu5','Inf. de Interés','capatit','capadesp','itemactivo','itemactivo',separ);
menu5.agregar('Licenciatura en Economía','./lic_economia.html', '');
menu5.agregar('Reuniones y Congresos','./reuniones_congresos.html', '');
menu5.agregar('Novedades','./pag_construccion.html', '');
menu5.agregar('Enlaces de Interés','./pag_construccion.html', '');

var px, py;
if (miNavegador.IE)
	//px = document.body.offsetWidth - 885;
	px=120;
else
	//px = window.innerWidth -885;
	px=120;
py =98;
/*
Sólo queda colocar los menus en la página, esto lo hace el objeto con el método dibujar.
Argumentos: posición horizontal y vertical en pixels.
*/
menu1.dibujar(px,py);
menu2.dibujar(px+112,py);
menu3.dibujar(px+224,py);
menu4.dibujar(px+336,py);
menu5.dibujar(px+448,py);
}