// JavaScript Document
Acordeon = function(idEleCont, oTween, anchoCont, altoCont){
	//
	var oClase 	= this
	var cont 	= document.getElementById(idEleCont)
	var alto 	= cont.offsetHeight
	var ancho	= cont.offsetWidth
	//
	if(altoCont && alto<altoCont) alto = altoCont
	if(anchoCont && ancho<anchoCont) ancho = anchoCont
	//
	this.menus 			= new Array
	this.esperar		= false
	this.menuDesplegado = null
	this.altoDisponible = alto
	this.cssTitulosOff 	= ''
	this.cssTitulosOn 	= ''
	this.cssCapas 		= ''
	this.altoTitulos	= 0;
	//
	this.agregarMenu 	= function(idEle, tit){
		var elemento 			= document.getElementById(idEle)
		if(elemento==undefined || elemento==null) return alert("Error JS Acordeon.agregarMenu: Objeto a agregar inexistente.")
		
		var pos 			= this.menus.length;
		
		var titulo 			= document.createElement('div')
		titulo.innerHTML 	= tit
		titulo.className 	= this.cssTitulosOff
		cont.appendChild(titulo);
		
		var capa 			= document.createElement('div')
		capa.style.height 	= 0
		capa.style.overflow = 'hidden'
		if(titulo.offsetWidth<ancho) capa.style.width = ancho + 'px'
		else capa.style.width = titulo.offsetWidth + 'px'
		capa.className 		= this.cssCapas
		cont.appendChild(capa)
		capa.appendChild(elemento)
		
		var objMenu = {titulo:titulo, capa:capa, pos:pos}
		this.menus.push(objMenu)
		
		if(titulo.offsetHeight<this.altoTitulos) this.altoDisponible -= this.altoTitulos
		else this.altoDisponible -= titulo.offsetHeight
		
		titulo.onmouseover 	= function(){ if(titulo.className!=oClase.cssTitulosOn) titulo.className = oClase.cssTitulosOn }
		titulo.onmouseout 	= function(){ if(oClase.menuDesplegado && oClase.menuDesplegado.pos!=pos) titulo.className = oClase.cssTitulosOff }
		titulo.onclick 		= function(){ oClase.desplegarMenu(objMenu); elemento.style.display='block' }
	}
	this.desplegarMenu 	= function(objMenu){
		if(this.menuDesplegado==null) return alert("Error JS Acordeon.desplegarMenu: El objeto no fue inicializado correctamente.")
		//
		if(this.esperar || this.menuDesplegado.pos==objMenu.pos) return false
		else this.esperar = true
		//
		var t1 = new Tween(this.menuDesplegado.capa.style, 'height', oTween.movimiento, this.altoDisponible, 0, oTween.duracion, oTween.unidad)
		var t2 = new Tween(objMenu.capa.style, 'height', oTween.movimiento, 0, this.altoDisponible, oTween.duracion, oTween.unidad)
		var t1Fin = t2Fin = false
		//
		var tweenTerminados = function(){ 
			if(t1Fin && t2Fin){
				oClase.esperar 							= false
				if(objMenu.capa.firstChild.offsetHeight > oClase.altoDisponible) objMenu.capa.style.overflow = "auto"
			}
		}
		//
		t1.onMotionFinished = function(){ t1Fin = true; tweenTerminados() }
		t2.onMotionFinished = function(){ t2Fin = true; tweenTerminados() }
		//
		objMenu.titulo.className 				= this.cssTitulosOn
		this.menuDesplegado.titulo.className 	= this.cssTitulosOff
		this.menuDesplegado.capa.style.overflow = "hidden";
		this.menuDesplegado 					= objMenu
		//
		t1.start();
		t2.start();
	}
	this.init 			= function(){
		if(this.menus.length < 2) return alert("Error JS Acordeon.init: Debe agregar al menos dos menus al acordeon.")
		else if(this.altoDisponible < 50) return alert("Error JS Acordeon.init: No hay espacio suficiente para desplegar los menus.")
		
		this.menus[0].capa.style.height = this.altoDisponible + 'px'
		this.menus[0].titulo.className 	= this.cssTitulosOn
		this.menuDesplegado 			= this.menus[0]
	}
}