var Menu = Class.create({
	
	initialize: function(menu)
	{
		this.menu = menu;
		this.active = null;
		this.initializeHandlers();
	},
	
	show: function(li)
	{
		var sub = $(li.getAttribute('rel'));

		if (this.active == sub)
			return;
			
		if (this.active)
			this.hide(this.active);
		
		li.addClassName('hover');
		li.setStyle({ zIndex: 5, paddingBottom: '5px' });
					
		if (li.next('li'))
			li.next('li').setStyle({paddingBottom: '5px'});
		
		sub.setStyle({
			position: 'absolute',
			left: li.cumulativeOffset().left + 'px',
			top: li.cumulativeOffset().top + 18 + 'px',
			width: '200px'
		});

		sub.show();
		
		this.active = li;
	},
	
	hide: function(li, event)
	{
		if (! this.active)
			return;
			
		var sub = $(li.getAttribute('rel'));
	
		if (event && this.contains(sub, event))
			return;
		
		li.removeClassName('hover');
		li.setStyle({paddingBottom: 0, zIndex: 3});
		
		if (li.next('li'))
			li.next('li').setStyle({paddingBottom: 0});
		
		sub.hide();
		
		this.active = null;
	},
	
	contains: function(sub, event)
	{
		var dim = sub.getDimensions();
		var offset = sub.cumulativeOffset();
		
		var x = event.pointerX();
		var y = event.pointerY();
		
		return x >= offset.left 
			&& x <= offset.left + dim.width
			&& y >= offset.top
			&& y <= offset.top + dim.height;
	},
	
	initializeHandlers: function()
	{
		var self = this;
		
		this.menu.select('UL.level-1 LI').each(function(li) {
			
			// do we have a sub menu
			if (! $(li.getAttribute('rel')))
			{
				li.observe('mouseover', function() {
					self.hide(self.active);
				});
			}
			else
			{
					
				var sub = $(li.getAttribute('rel'));
				
				li.observe('mouseover', function() { self.show(this); });
				sub.observe('mouseout', function(event) { self.hide(li, event)});
			}
		});
		
		Event.observe(window, 'click', function(event) {
			if (this.active)
				this.hide(this.active, event);
		}.bind(this));
	}
});