// JavaScript Document
//Menu class using Prototype framework and effects library from Script.aculo.us
//to display a submenu on the right side of the main menu
var Submenu = Class.create({
	opciones:[],
	
	initialize: function(){		
		//Calcula la posicion horizontal del menu
		var mainmenu = $$('.cont_btn_lateral')[0];
		var menupos = mainmenu.positionedOffset(); //menupos[0] contiene la posicion left
		var menudims = mainmenu.getDimensions();
		var posLeft = menupos[0]+menudims.width;
		var efecto = [];
		var mouseIn = [];
		//Identifica los submenus
		$$('.submenu').each(function(menu){
			//Calcula la posicion top			
			var opcion = $$('.'+menu.id)[0];			
			var opcionPos = opcion.positionedOffset();
			var posTop = parseInt(opcionPos[1] + 19);
			menu.setStyle({'left':posLeft+'px','top':posTop+'px','display':'none'});
			
			opcion.onmouseover = function(e){
					//console.log('click en la opcion ' + this.className);					
					var element = $(this.className);
					
					//Cierra todos los demas menus
					$$('.submenu').each(function(elemento){
						$$('.'+elemento.id)[0].onmouseout();
					});
					mouseIn[this.className] = 1;
					if(efecto[this.className]) efecto[this.className].cancel();
		
					efecto[this.className] = Effect.Appear(element,{
						duration:.5  
					});
			}
			
			opcion.onmouseout = function(e){
					//console.log('click en la opcion ' + this.className);													
					var element = $(this.className);
					mouseIn[this.className] = 0; //Si entra al submenu se cambia a 1 nuevamente
					
					setTimeout(function(){					
						//verifica si no ha entrado al submenu						
						if(!mouseIn[this.className])
						{
							if(efecto[this.className]) efecto[this.className].cancel();
							efecto[this.className] = Effect.Fade(element,{
								duration:.3  
							});
						}
					}.bind(this),500);
			}
			

			menu.onmouseover = function(e){
				//Calcula si el mouse esta dentro o fuera del cuadro hacia los 4 lados
				//console.log('dentro');	
				mouseIn[this.id] = 1;
			}
			
			menu.onmouseout = function(e){
				//Calcula si el mouse esta dentro o fuera del cuadro hacia los 4 lados
				var fueraX = 0;
				var fueraY = 0;				
				var menuPos = this.viewportOffset();
				var menuDims = this.getDimensions();	
				try{
				if( e.clientX < menuPos[0] || e.clientX > (menuPos[0] + menuDims.width))
					fueraX = 1;
				if( e.clientY < menuPos[1] || e.clientY > (menuPos[1] + menuDims.height))
					fueraY = 1;
				} catch(e){}			
				if(fueraX || fueraY)
				{
					mouseIn[this.id] = 0;
					setTimeout(function(){					
						//verifica si no ha entrado al submenu							
						if(!mouseIn[this.id])
						{
							if(efecto[this.id]) efecto[this.id].cancel();
							efecto[this.id] = Effect.Fade(this.id,{
								duration:.3  
							});
						}
					}.bind(this),500);	
				}
				
			}
			
			
		});
		
		
	}
	
});

//Inicializa la instancia del objeto
var submenu;
function init(){
	submenu = new Submenu();
}

Event.observe(document,'dom:loaded',init);

Event.observe(window,'resize',function(){
	submenu.initialize();									   
});