/*########################################################################################
Menu desplegable.  Al hacer click en una entrada del menú, cada item baja por separado
uno a la vez.

por Eddy Angel Castillo Suriano.  -calchayedd@hotmail.com-
Todos los derechos reservados. 2003.

Este script puede ser utilizado libremente siempre que este mensaje de copyright
permanezca intacto.

Las capas que componen los encabezados del menu, asi como cada Item en los encabezados
deberan ser definidas en el codigo de la pagina HTML. Los estilos aplicables
al menu se definen por separado.

ESTA ES LA PRIMERA VERSIÓN DE ESTE MENU (AL MENOS LA PRIMERA ESCRITA POR MI. SEGURAMENTE
POR AHI HABRÁ ALGUNO QUE FUNCIONE SIMILARMENTE), Y TODAVIA LE QUEDA MUCHO POR OPTIMIZAR
ADEMAS COMO SOLO TENGO LOS NAVEGADORES IE5,N6. PUES SOLO LO HE PROBADO EN ELLOS, SI NO 
FUNCIONA EN TU NAVEGADOR, PUES NI MODO, TENDRAS QUE ESPERAR A QUE TENGA TIEMPO Y LO
ARREGLE  :-(.

########################################################################################*/


//### DETECTAMOS EL DOM PARA NUESTRO MENU...¡¡¡NO EDITAR ESTA PARTE!! ###//
function domDet(){
	if(document.layers){  this.middleUno = "layers['";  this.middleDos = "']";  }
	else if(document.all && !document.getElementById){  this.middleUno = "all['";  this.middleDos = "'].style";  }
	else if(document.getElementById){  this.middleUno = "getElementById('";  this.middleDos = "').style";  }
	else{  this.middleUno = "";  this.middleDos = "";  }
	return this;
}

	var objPath = new domDet();

//### AQUI SON CREADOS LOS OBJETOS...¡¡NO EDITAR ESTA PARTE!! ###//

function setCapa(cpId,cpTp,cpLf,cpVi,cpIdx){
		this.cp				=  eval("document." + objPath.middleUno + cpId + objPath.middleDos);
		this.cp.position	=  'absolute';
		this.cp.top			=  cpTp;
		this.cp.left		=  cpLf;
		this.cp.visibility	=  cpVi;
		this.cp.zIndex		=  cpIdx;
		this.cp.color		=  '';
		this.cp.backgroundColor = '';
		
		return this;
}

var base		= new Array;								//  Array de contenedores

/* #################################################################################
 AQUI DEFINIMOS LOS OBJETOS QUE HABRAN DE COMPONER NUESTRO MENU
 PONER ATENCION A LA FORMA DE DECLARAR LOS OBJETOS
 EDITAR ESTA PARTE SEGUN EL NÚMERO DE ENTRADAS (CONTENEDORES) DEL MENU Y SEGUN
 EL NUMERO DE ITEMS (ELEMENTOS) POR CADA ENTRADA
 
 NOTA QUE EL VALOR DEL SEGUNDO ARGUMENTO DE LA FUNCION setCapa UTILIZADA AQUI ABAJO
 DEBERA SER IGUAL AL VALOR DE LA VARIABLE baseTp DEFINIDA MAS ABAJO PARA QUE EL
 MENU FUNCIONE CORRECTAMENTE
################################################################################# */

function menuSetUp(){
base[base.length]	= new setCapa(10,85,280,'visible',3);					//primer contenedor.
	base[base.length -1]		= new Array;
	base[base.length -1][base[base.length -1].length]	= new setCapa(11,85,280,'visible',2);
	base[base.length -1][base[base.length -1].length]	= new setCapa(12,85,280,'visible',2);
	base[base.length -1][base[base.length -1].length]	= new setCapa(13,85,280,'visible',2);
	base[base.length -1][base[base.length -1].length]	= new setCapa(14,85,280,'visible',2);

	return true;
}

//### DEBERAS EDITAR LAS SIGUIENTES VARIABLES SEGUN TU CONVENIENCIA.
var itemHeight	=  20;					// Altura de cada Item en las entradas
var baseTp		=  85;					// La distancia en pixeles del borde superior de la página al menu

//### ¡¡¡¡¡NO CAMBIES NADA DESDE ESTE PUNTO HASTA FINALIZAR EL SCRIPT!!!!! ###//

var timer1		=  null;
var i			=  1;
var tpNow;								// Contiene la propiedad top actual del Item mientras es desplazado
var menuOpened	= false;				// Me dice si está abierta alguna entrada del menu
var baseOpened;							// ¿cual entrada esta abierta? si hay alguna
var menuOpening	= false;				// Me dice si alguna entrada está abriendose
var baseOpening;						// ¿cual entrada esta abriéndose? si hay alguna


/*
si todas las entradas estan cerradas -> Abrimos la correspondiente.
si hacemos click sobre una entrada que ya está abierta, solo la cerramos.
si hacemos click sobre una entrada y ya existe otra abierta, primero cerramos
la que esta abierta y luego abrimos la correspondiente.
si hacemos click sobre una entrada que esta apenas abriendose la cerramos
si hacemos click sobre una entrada mientras otra diferente está apenas
abriendose, primero cerramos la otra y luego abrimos la correspondiente.
*/

function selectAction(baseId){
	
	if ( menuOpened == false && menuOpening == false ) {	// MENU COMPLETAMENTE CERRADO
		
		this.baseId		= baseId;
		animaMenu(baseId);
		
	}
	
	else if ( menuOpened == true && menuOpening == false ) {		// UNA ENTRADA ABIERTA
	
		if( baseOpened == baseId ){			// ¿LA MISMA?  =>  CIERRALA!!
			this.baseOpened	= baseId;
			var same		= true;
			closeBase(baseOpened,same)
		}
		
		else{								// ¿OTRA? => PRIMERO CERRAMOS LA QUE ESTA ABIERTA Y LUEGO ABRIMOS LA QUE NOS INTERESA
			this.baseOpened = baseOpened;
			this.baseId		= baseId;
			var same		= false;
			closeBase(baseOpened,same,baseId);
		}	
	
	}
	
	else if ( menuOpened == false && menuOpening == true ) {		// UNA ENTRADA ESTA ABRIENDOSE
		
		if( baseOpening == baseId ){		// 	¿LA MISMA?  => CIERRALA!!
			
			clearTimeout(timer1);
			this.baseOpening	= baseId;
			var same			= true;
			closeBase(baseOpening,same);
		
		}
		
		else {								//  ¿OTRA? => PRIMERO CERRAMOS UNA Y LUEGO ABRIMOS ESTA
			
			clearTimeout(timer1);
			this.baseOpening	= baseOpening;
			this.baseId			= baseId;
			var same			= false;
			closeBase(baseOpening,same,baseId);
		}
		
	}
	
}


function animaMenu(baseId){				// entramos a esta solo si todas las entradas del menu estan cerradas
	
	if( i <= base[baseId].length) {		// si no han bajado todos los items entra

		var j = i-1;					// contiene el elemento de la matriz de items
		
		this.baseId						=  baseId;			// ¿QUIEN SE ESTÁ ABRIENDO?
		
		menuOpening = true;									// ALGUIEN SE ESTA ABRIENDO
		baseOpening = baseId;								// ¿PERO QUE ENTRADA ES LA QUE SE ESTA ABRIENDO?
	
		if( parseInt( base[baseId][j].cp.top ) <= ( baseTp + i*itemHeight ) ){
			
			tpNow						=  parseInt( base[baseId][j].cp.top );	// DONDE ESTAMOS AHORA
			tpNow += 10;														// ¿CUANTO QUEREMOS MOVERNOS?
			base[baseId][j].cp.top		=  tpNow;								// BUENO, NOS MOVEMOS
			clearTimeout(timer1);
			timer1 						=  setTimeout('animaMenu(baseId)',1);	// Y DE NUEZ (OTRA VEZ PUES...)
			
		}
		else {
			
			i++;																// EL ITEM QUE SIGUE
			clearTimeout(timer1);
			timer1						=  setTimeout('animaMenu(baseId)',1);	// A MOVERSE!!
			
		}
	}
/*	
si ya bajaron todos los items detenemos el contados y regresamos i a uno.
para que el siguiente item que baje tome su posicion correcta i*(altura inicial)
además establecemos la variable que nos dice que el menu está abierto a verdadero
y la variable que nos dice que el menu esta abriendose a falso
*/									
	else {
				
		clearTimeout(timer1);
		i						=  1;
		menuOpened				=  true;
		baseOpened				=  baseId;
		menuOpening				=  false;
		
	}

}


function closeBase(closeWho,closeSame,openWho){				//  Cerramos cualquier entrada abierta o abriendose y
															//  mandamos a abrir otra si es necesario
	
	for ( j = 0 ; j <= base[closeWho].length-1 ; j++ ){		//  Regresamos todos los items a su posicion original
		
		base[closeWho][j].cp.top	=  baseTp;
		
	}
	
	menuOpened	= false;					//  No hay entradas abiertas
	menuOpening	= false;					//  No hay entradas abriendose
	i  = 1;									//  Le corresponde bajar al primer item de la entrada seleccionada
			
	if( closeSame == false )  {				//  Si queremos abrir otra entrada
		
		this.openWho  =  openWho;
		animaMenu(openWho);					//  ¿cual entrada?
		
	}
	
}






