// 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')); 




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

var linkColor = '#fff'
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-1; 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 mostrarMenu(e){
	
	
	if(this.id=='opcionSeleccionada'){
		
	
				objetoDesplegable=document.getElementById('desplegableSeleccionado');
			
				//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(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;
				}
		
		
		
		
	}
	else{
		
				//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 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.backgroundColor=bgLinkActive;	
					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;
				}
				
				
		}//cierra el else de if(this.id=='seleccionado')
	
}

function ocultarMenu(e){
	
	if(objetoMenuPrevio.id!='opcionSeleccionada'){
			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';
			
			//recolocamos también el cuadro del desplegableSeleccionado
			
			
			objetoDesplegableSeleccionado=document.getElementById('desplegableSeleccionado');
			
			
			
			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;
			}
			
			objetoDesplegableSeleccionado.style.left=xPos+'px';
			objetoDesplegableSeleccionado.style.top=yPos+'px';
			
			
			//lo hacemos visible
			//objetoDesplegablePrevio.style.visibility='visible';

}


window.onload=inicializar;

window.onresize=resizer;