var Menu = Class.create();

Menu.prototype = {

	initialize: function() {	
		this.inicializar();
	},
	
	inicializar: function() {	
		
		var selector = $$(".selectorMenu")[0];
			
		selector.setOpacity(0);
		
		var menuItems = $$(".menuItem");
		
		// loop through all menuItems
		for (var i=0; i<menuItems.length; i++){
			var menuItem = menuItems[i];
			menuItem.num = i;
				
			menuItem.onmouseover = function() {
				this.setStyle({ backgroundColor: '#E8E8E8' });
				myMenu.moverSelector(this);
			}
			menuItem.onmouseout = function() {
				myMenu.ocultarSelector();
			}
			
			if (menuItem.getElementsByClassName("submenu").length > 0) {
				menuItem.getElementsByClassName("submenu")[0].hide();
				menuItem.getElementsByClassName("submenu")[0].setOpacity(0);
				menuItem.getElementsByClassName("submenu")[0].clonePosition(menuItem, {setWidth: false, setHeight: false});
				menuItem.onmouseover = function() {
					this.setStyle({ backgroundColor: '#E8E8E8' });
					myMenu.moverSelector(this);
					myMenu.mostrarSubmenu(this);
					
				}
				
				menuItem.onmouseout = function() {
					myMenu.ocultarSelector();
					myMenu.ocultarSubmenu(this);
				}
			}
		}
		
		var submenuItems = $$(".submenuItem");
		// loop through all submenuItems
		for (var i=0; i<submenuItems.length; i++){
			var submenuItem = submenuItems[i];
			//submenuItem.setStyle({background:"#000"});
		}
	},
	
	moverSelector: function( menuItem ) {
		//Selector del menu
		var selectorMenu = $$(".selectorMenu")[0];
		//Eliminar todos los efectos anteriores de movimiento de selector.
		var queue = Effect.Queues.get('movimientoSelector');
		queue.each(function(effect) { effect.cancel(); });
		
		//Si el selector es visible se mueve a la nueva ubicación con una animación.
		
		if (selectorMenu.getStyle("opacity")==1.0)
			new Effect.Move(selectorMenu, { x: menuItem.cumulativeOffset().left, y: menuItem.cumulativeOffset().top, mode: 'absolute', duration: 0.2, queue: { position: 'end', scope: 'movimientoSelector' } });
		else {
		//Si no se mueve instantaneamente a su nueva ubicación y se muestra.
			new Effect.Move(selectorMenu, { x: menuItem.cumulativeOffset().left, y: menuItem.cumulativeOffset().top, mode: 'absolute', duration: 0.0, queue: { position: 'end', scope: 'movimientoSelector' } });
			new Effect.Opacity(selectorMenu, { duration: 0.2, from: selectorMenu.getStyle("opacity"), to: 1.0, queue: { position: 'end', scope: 'movimientoSelector' } });
		}
	},
	
	ocultarSelector: function() {
		//Selector del menu
		var selectorMenu = $$(".selectorMenu")[0];
		//Eliminar todos los efectos anteriores de movimiento de selector.
		//var queue = Effect.Queues.get('movimientoSelector');
		//queue.each(function(effect) { effect.cancel(); });
		//Se oculta el selector.
		new Effect.Opacity(selectorMenu, { duration: 0.2, from: selectorMenu.getStyle("opacity"), to: 0.0, queue: { position: 'end', scope: 'movimientoSelector' } });
	},
	
	mostrarSubmenu: function( menuItem ) {
		//Este submenu.
		var submenu = menuItem.getElementsByClassName("submenu")[0];
		//Eliminar todos los efectos anteriores de mostrado de ESTE submenu.
		var queue = Effect.Queues.get('submenu' + this.num);
		queue.each(function(effect) { effect.cancel(); });
		//Se muestra el submenu.
		new Effect.Opacity(submenu, { duration: 0.4, from: submenu.getStyle("opacity"), to: 0.75, queue: { position: 'end', scope: 'submenu' + this.num }, beforeStart: function( effect ) { $( effect.element ).show(); } });
	},
	
	ocultarSubmenu: function( menuItem ) {
		//Este submenu.
		var submenu = menuItem.getElementsByClassName("submenu")[0];
		//Eliminar todos los efectos anteriores de mostrado de ESTE submenu.
		var queue = Effect.Queues.get('submenu' + this.num);
		queue.each(function(effect) { effect.cancel(); });
		//Se oculta el submenu.
		new Effect.Opacity(submenu, { duration: 0.6, from: submenu.getStyle("opacity"), to: 0.0, queue: { position: 'end', scope: 'submenu' + this.num }, afterFinish: function( effect ) { $( effect.element ).hide(); } });
	}
}
	
function initMenu() { myMenu = new Menu(); }
Event.observe(window, 'load', initMenu, false);