ONEHAT.widget.Navigation = {};

ONEHAT.widget.Navigation.mainMenus = function() {
	var obj = {
	 	init: function(){
			var oThis = this;
			var n, id, submenu, ul;
			
			// Get elements to work with
			this.navContainer = Ext.get('navContainer'); // the outside container DIV
			this.nav = Ext.get('nav'); // the top level UL
			this.menuItems = []; // menu names
			this.buttons = [] // Top level buttons which trigger submenus (LI)
			this.subMenus = []; // to hold container DIVs
			
			// Loop through top-level LI elements
			var top = Ext.select('#nav .top').elements;
			for (n = 0; n < top.length; n++) {
				id = top[n].id.replace(/Menu/, '');
				this.menuItems[this.menuItems.length] = id;
				this.buttons[id] = Ext.get(top[n]); // save a reference to the top-level element (Ext object)
				
				// find the associated submenu
				ul = Ext.select('#' + id + 'Menu ul').elements[0];
				
				// move its position in the DOM to the outer container
				if (ul) {
					submenu = this._wrap(ul);
					this.navContainer.dom.appendChild(submenu);
					this.subMenus[id] = Ext.get(submenu);
					this.subMenus[id].addClass(id);
				}
			}
			
			
			// Assign event handlers
			for (n = 0; n < this.menuItems.length; n++) {
				this.buttons[this.menuItems[n]].on('mouseover', function(e) {
					oThis.handleMouseOver(e);
				});
				this.buttons[this.menuItems[n]].on('mouseout', function(e) {
					oThis.handleMouseOut(e);
				});
			}
			for (n = 0; n < this.menuItems.length; n++) {
				if (this.subMenus[this.menuItems[n]]) {
					this.subMenus[this.menuItems[n]].on('mouseout', function(e) {
						oThis.handleMouseOut(e);
					});
				}
			}
						
		},
		
		// used only during initialization. Wraps supplied ul element with menu HTML
		_wrap: function(ul) {
			ul.parentNode.removeChild(ul);
			
			var subMenuContainer = document.createElement('div');
			subMenuContainer.className = 'subMenuContainer';
			
			var hd = document.createElement('div');
			hd.className = 'hd';

			var ft = document.createElement('div');
			ft.className = 'ft';
		
			subMenuContainer.appendChild(hd);
			subMenuContainer.appendChild(ul);
			subMenuContainer.appendChild(ft);
			
			return subMenuContainer;
		},
		
		handleMouseOver: function(e) {
			var target = Ext.get(e.getTarget()).findParent('li');
			var id = target.id.replace(/Menu/, '');
			this.show(id);
		},
		
		handleMouseOut: function(e) {
			var target, related, top, sub, mode, id, rel;

			// figure out if we're on the button or the submenu
			target = Ext.get(e.getTarget());
			related = Ext.get(e.getRelatedTarget());
			
			if (target) {
				top = target.findParent('.top');
				sub = target.findParent('.subMenuContainer');
			}

			if (top) {
				mode = 'button';
			} else if (sub) {
				mode = 'sub';
			}
	
			try {
				switch(mode) {
					case 'button':
						id = top.id.replace(/Menu/, '');
						sub = Ext.get(related.findParent('div.subMenuContainer'));
						if (!sub || (id !== '' && !sub.hasClass(id))) {
							this.hide(id);
						}
	
						break;
					case 'sub':
						id = sub.className.replace(/subMenuContainer /, '');
						rel = Ext.get(related.findParent('.subMenuContainer')) || Ext.get(related.findParent('.top'));
	
						if (id !== '' && !rel) {
							this.hide(id);
						}
	
						break;
				}
			} catch (e) {}
		},
		
		show: function(id) {
			var menu, n, otherID;
			
			// Show the hover status
			this.buttons[id].addClass('hover');
			
			// Show the menu
			menu = this.subMenus[id];
			if (menu && !menu.isShown) {
				menu.isShown = true;
				menu.animate({ height: { to: 180 } });

				// hide all other menus
				for (n = 0; n < this.menuItems.length; n++) {
					otherID = this.menuItems[n];
					if (this.subMenus[otherID] && this.subMenus[otherID].isShown && otherID !== id) {
						this.hide(otherID);
					}
				}
			}
		},
		
		hide: function(id) {
			var menu, n, id;
			var oThis = this;
			
			// Clear the hover status
			this.buttons[id].removeClass('hover');
			
			// Hide the menu
			menu = this.subMenus[id];
			if (menu && menu.isShown) {
				menu.isShown = false;
				if (Ext.isIE7) {
					menu.animate({ height: { to: 0 } });
				} else {
					menu.animate(
						{ opacity: { to: 0 } },
						0.35,
						function() {
							menu.setStyle({ height: 0, opacity: 1 });
						}
					);
				}
			}
		}
		
	};
	obj.init();
	return obj;
}();