var MenuPrincipal = Class.create();

MenuPrincipal.prototype = {

	initialize: function() {	
		this.inicializar();
	},
	
	inicializar: function() {
		
		var menuItems = $$("#menu .menuItem");
		
		// loop through all menuItems
		for (var i=0; i<menuItems.length; i++){
			var menuItem = menuItems[i];
			menuItem.num = i;
				
			menuItem.onmouseover = function() {
			}
			menuItem.onmouseout = function() {
			}
			
			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() {
					myMenu.mostrarSubmenu(this);	
				}
				
				menuItem.onmouseout = function() {
					myMenu.ocultarSubmenu(this);
				}
			}
		}
	},
	
	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.5, from: submenu.getStyle("opacity"), to: 1, 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 MenuPrincipal(); }
Event.observe(window, 'load', initMenu, false);