// ClassGamesDen.com menu.js v2.1.5, Wednesday january 07 2009
var Menu = Class.create({
	
	/**
	 * State to remember if the mouse is over a menu
	 */
	menuOver: false,
	
	/**
	 * State to remember if the mouse is over a sub menu
	 */
	subMenuOver: false,
	
	/**
	 * Initialize the menu
	 * @return void
	 */
	initialize: function()
	{
		// Load the top menu and make it interactive
		this.menuLoad();
		
		// Position active sub menu
		this.menuPositionSubMenu();
		
		// Detect a window resize
		window.onresize = function () {
			this.menuPositionSubMenu();
		}.bind(this);
	},
	
	/**
	 * Load the menu
	 * @return void
	 */
	menuLoad: function()
	{
		if($('topMenuMain'))
		{
			$('topMenuMain').observe('mouseover', this.menuSwitch.bind(this));
		}
		
		$('subMenuContainer').observe('mouseover', this.subMenuLoad.bind(this));		
		$('subMenuContainer').observe('mouseout', this.subMenuUnload.bind(this));		
		$('pageMenu').observe('mouseout', this.menuReset.bindAsEventListener(this));
	},
	
	/**
	 * If a mouse goes over the sub menu, flag the subMenuOver var
	 */
	subMenuLoad: function()
	{
		this.subMenuOver = true;
	},
	
	/**
	 * If a mouse moves away from the sub menu, flag the subMenuOver var
	 */
	subMenuUnload: function()
	{
		this.subMenuOver = false;
	},
	
	/**
	 * Switch menus
	 * @param {event} event The event we're watching - a menu element in this case
	 * @return void
	 */
	menuSwitch: function(event)
	{
		// Get the top menu element we've hovered over
		var topMenuElement = Event.element(event);
		
		$$('.topMenuItem').each(function(e){ 
			//e.addClassName('inactive');
			e.removeClassName('active');
		});
		
		$$('.topMenuItem.currentLink').each(function(e){ 
			e.addClassName('inactive');
		});
		
		if(topMenuElement.tagName != 'IMG')
		{
			$(topMenuElement).removeClassName('inactive');
			$(topMenuElement).addClassName('active');
		}
		
		
		// Hide all sub menu items
		$$('div.subMenuItem').each(function(e){ 
			e.hide();
			e.removeClassName('active');
		});
		
		this.menuPositionSubMenu(topMenuElement, true);
		
		// Set the mouse over state to be true
		this.menuOver = true;
	},
	
	/**
	 * Reset the menus to their default state - but only after a delay of 1 second
	 * @param {event} event The event we're watching - a menu element in this case
	 * @return void
	 */	
	menuReset: function(event)
	{
		this.menuOver = false;
		
		setTimeout( function (){
			var target = Event.element(event);
			
			// Only do the menu reset if we're leaving the pageMenu element
			if(event.relatedTarget && !event.relatedTarget.descendantOf(target) && !event.relatedTarget.descendantOf('pageMenu') && this.menuOver == false && this.subMenuOver == false)
			{
				// Get the top menu element we've hovered over
				var topMenuElement = $$('.topMenuItem.currentLink');
				
				// Reset all other top menu items
				$$('.topMenuItem').each(function(e){
					e.removeClassName('inactive');
					e.removeClassName('active');
				});
				
				// Hide all sub menu items
				$$('div.subMenuItem').each(function(e){ 
					e.hide();
					e.removeClassName('active');
				});
				
				this.menuPositionSubMenu(topMenuElement[0], true);
			}
		}.bind(this), 1000);
	},
	
	/**
	 * Position the sub menu correctly
	 * @param {element} topMenuElement The menu item we've moved over
	 * @param {element} passedInVal Have we passed in a value to position the menu (whether we're resizing or not)
	 * @return void
	 */	
	menuPositionSubMenu: function(topMenuElement, passedInVal)
	{
		if(!$(topMenuElement))
		{
			// Get active menu element
			var topMenuElement = $$('.topMenuItem.active');

			// Get the sub menu item
			if(topMenuElement[0])
			{
				var subMenu = topMenuElement[0].readAttribute('id').replace('topMenu', 'subMenuItem');
			}
		} else
		{
			if(topMenuElement.readAttribute('id'))
			{
				// Get the sub menu item
				var subMenu = topMenuElement.readAttribute('id').replace('topMenu', 'subMenuItem');
			 }
		}
		
		if($(subMenu))
		{
			// Temp hide so we can get the actual width
			$('subMenu').setStyle({'width': '100%'});
			$(subMenu).hide();
			$(subMenu).addClassName('active');
			
			// Get position of new menu and position the sub menu
			if(passedInVal == true)
			{
				var topMenuElementOffset = $(topMenuElement).cumulativeOffset();
				var subMenuPosition = Math.round(topMenuElementOffset[0] - (($(subMenu).getWidth() - $(topMenuElement).getWidth()) / 2));
			} else
			{
				var topMenuElementOffset = $(topMenuElement[0]).cumulativeOffset();
				var subMenuPosition = Math.round(topMenuElementOffset[0] - (($(subMenu).getWidth() - $(topMenuElement[0]).getWidth()) / 2));
			}
			
			var contentPosition = $('content').cumulativeOffset();
			if(subMenuPosition < contentPosition[0])
			{
				subMenuPosition = contentPosition[0];
			}
			
			
			var dimensions = $(subMenu).getDimensions();
			dimensions.width = (dimensions.width+9)+'px';
			$('subMenu').setStyle({left: subMenuPosition+'px', 'width': dimensions.width});
			
			// Show sub menu element
			$(subMenu).show();
		}
	}
});

 -->