// JavaScript Document



var numOpciones=7;
var objetoMenu=null;
var objetoDesplegable=null;

var objetoMenuPrevio=null;
var objetoDesplegablePrevio=null;


//determina el margen que se debe dejar para firefox en el ejey, dado que 
//los margenes son diferentes para mabos exploradores
var margenExplorer=24;
var margenFirefox=34;

//necesitamos saber si es IExplore para modificar algunos parámetros
var nav = null;
nav=(navigator.appName.indexOf('Explorer')); 




////// estilos para los links
var bgLinkColor = '#990000';
var bgLinkHover = '#fff';
var bgLinkActive = '#990000';

var linkColor = '#990000';
var linkHover = '#fff';
var linkActive = '#990000';




function inicializar() {
	//llamada para que al pulsar fuera se desactive el menu
	//document.onclick=ocultarMenu;
	
	
	//el bucle funciona hasta número de opciones-1 porque aquí tenemos una opción menos
	for (i=1; i<=numOpciones; i++) {
	
		//construimos el nombre del menu usando la "i" + la palabra opción o la palabra desplegable
		menuNombre = 'opcion' + i;
		desplegable= 'desplegable' + i;
		
		

		//buscamos los objetos en la página
		objetoMenu =document.getElementById(menuNombre);
		objetoDesplegable=document.getElementById(desplegable);

		//ocultamos el desplegable
		objetoDesplegable.style.visibility="hidden";
		//definimos las funciones que deben llamarse en cada caso
		objetoMenu.onmouseover= mostrarMenu;
		//objetoMenu.onclick = mostrarMenu;
		//en el caso de "onmouseout" damos valor a la variable "menuOut"
		objetoMenu.onmouseout = menuOut;
	}
	
	
	//En el código que viene a continuación vamos a hacer que la opción 
	
	//construimos el nombre del menu usando la "i" + la palabra opción o la palabra desplegable
		menuNombre = 'opcionSeleccionada';
		desplegable= 'desplegableSeleccionado';

		//buscamos los objetos en la página
		objetoMenu =document.getElementById(menuNombre);
		objetoDesplegable=document.getElementById(desplegable);
		
		//definimos las funciones que deben llamarse en cada caso
		objetoMenu.onmouseover= mostrarMenu;
		//objetoMenu.onclick = mostrarMenu;
		//en el caso de "onmouseout" damos valor a la variable "menuOut"
		objetoMenu.onmouseout = menuOut;

	
	if(objetoDesplegable){			
			
			if(nav>-1){
				//código para el explorer
				xPos=objetoMenu.offsetParent.offsetLeft;
				yPos=objetoMenu.offsetParent.offsetTop+margenExplorer;
			}
			else{
				//código para firefox
				xPos=objetoMenu.offsetParent.offsetLeft;
				yPos=objetoMenu.offsetParent.offsetTop+margenFirefox;
			}
			
			
			objetoDesplegable.style.left=xPos+'px';
			objetoDesplegable.style.top=yPos+'px';
			//lo hacemos visible
			objetoDesplegable.style.visibility='visible';
			//nos guardamos los dos objetos, en las variables de 'previo'
			objetoMenuPrevio=objetoMenu;
			objetoDesplegablePrevio=objetoDesplegable;
	}
	
	objetoMenu=null;
	return;
}


function menuOut (e) {
	
	//document.onclick =ocultarMenu;
	outObjNavMenu = document.getElementById(this.id);
	if (outObjNavMenu != objetoMenu) {
		outObjNavMenu.style.color = linkColor;
		outObjNavMenu.style.backgroundColor = bgLinkColor;
		//this.className="itemMenuDesplegableSobre";
		
		outObjNavMenustyle.className="itemMenuDesplegableSobre";	
	}
}





function mostrarMenu(e){
	
	
				//sacamos el valor del número del menu que ha llamado, para eso tomamos del campo id su número con una función
				//que extrae de una cadena un valor (substring)
				desplegableNombre='desplegable'+ this.id.substring(6, this.id.length);
				//buscamos el desplegable
				objetoDesplegable=document.getElementById(desplegableNombre);
			
				//si el objeto que se va a desplegar ya está desplegado se oculta
				/*if(objetoDesplegablePrevio==objetoDesplegable){
					ocultarMenu();
					//y salimos de la función
					return;
				}*/
				
				//si antes había un objeto desplegado (no estamos en el caso inicial), ocultamos el menu
				if(objetoDesplegablePrevio!=null) {
					
					ocultarMenu(); 
				}
				//tomamos referencia el objeto de menu
				objetoMenu=document.getElementById(this.id);
				//si no tenemos guardado "objetoDesplegablePrevio"
				//y no teníamos ya marcado el botón de opcion de menu, lo marcamos
				
				if(  ((objetoMenuPrevio!=objetoMenu)||(objetoDesplegablePrevio==null)) ){
					/*objetoMenu.style.color=linkActive;*/
					//objetoMenu.style.className="itemMenuDesplegableSobre";	
					//objetoMenu.style.backgroundColor=bgLinkActive;	
					
					/*objetoMenu.style.backgroundImage="url(../imagenes/encabezadoSobre.gif)";*/
					this.className="itemMenuDesplegableSobre";
				
				
					
				}
				
				
				if(objetoDesplegable){
					
						if(nav>-1){
							//código para el explorer
							xPos=objetoMenu.offsetParent.offsetLeft;
							yPos=objetoMenu.offsetParent.offsetTop+margenExplorer;
						}
						else{
							//código para firefox
							xPos=objetoMenu.offsetParent.offsetLeft;
							yPos=objetoMenu.offsetParent.offsetTop+margenFirefox;
						}
						
						
						
						
						
						
						objetoDesplegable.style.left=xPos+'px';
						objetoDesplegable.style.top=yPos+'px';
						//lo hacemos visible
						objetoDesplegable.style.visibility='visible';
						//nos guardamos los dos objetos, en las variables de 'previo'
						objetoMenuPrevio=objetoMenu;
						objetoDesplegablePrevio=objetoDesplegable;
				}
		
	
	
}

function ocultarMenu(e){
	
	document.onclick= null;
	if(objetoDesplegablePrevio){
	//sacamos el valor del número del menu que ha llamado
	objetoDesplegablePrevio.style.visibility="hidden";
	objetoDesplegablePrevio= null;
	/*objetoMenuPrevio.style.color=linkColor;*/
	/*objetoMenuPrevio.style.backgroundColor='';*/

	objetoMenuPrevio.className="itemMenuDesplegable";	
	
	}
	objetoMenu= null;
}


//recoloco la barra cuando se realiza un cambio en el tamaño de la barra
//ya que la barra se posiciona en terminso absolutos

function resizer(){
			
			
			if(nav>-1){
				//código para el explorer
				xPos=objetoMenu.offsetParent.offsetLeft;
				yPos=objetoMenu.offsetParent.offsetTop+margenExplorer;
			}
			else{
				//código para firefox
				xPos=objetoMenu.offsetParent.offsetLeft;
				yPos=objetoMenu.offsetParent.offsetTop+margenFirefox;
			}
			
			
			
			
			
			objetoDesplegablePrevio.style.left=xPos+'px';
			objetoDesplegablePrevio.style.top=yPos+'px';
			//lo hacemos visible
			//objetoDesplegablePrevio.style.visibility='visible';

}





window.onload=inicializar;

window.onresize=resizer;