Interface.Nav = function() {
		this.currentElement = null;
		this.nav            = $('#nav');
		this.elements       = $(this.nav).find('> ul > li');
		this.selected       = $(this.nav).find('li.selected');
		this.selectedCount  = this.selected.size();
		
		this.nav.css('visibility', 'hidden');
		
		this.prepareNav();
		
		this.child  = $(this.selected).find('ul');
		//if (this.selectedCount >= 1 && this.child.size() > 0)
		//	this.drawSecondLevelNav();
		
		$(this.nav).css('visibility', '');
		
		var _self = this;
		if (!$.browser.safari)
			$(window).load(function() { _self.addEvents(); });
		else
			this.addEvents();
};
Interface.Nav.prototype = {
	/**
	 * Adds the necessary markup to make the
	 * the drop downs work. The end result
	 * should be markup like this:
	 *
	 * 	<li><div class="bg"></div><a.../a></li>
	 * 	<li><div class="bg"></div><a.../a> 
	 * 		<div class="subNavWrapper">
	 * 			<div class="spacer"></div>
	 * 			<div class="subNav">
	 * 				<div class="bg"></div>
	 * 				<div class="shadowRight"></div>
	 * 				<div class="shadowCorner"></div>
	 * 				<div class="shadowBottom"></div>
	 * 				<ul>
	 * 					<li class="first"><a.../a></li>
	 * 					<li><a.../a></li>
	 * 					<li class="last"><a.../a></li>
	 * 				</ul>
	 * 			</div>
	 * 		</div>
	 * 	</li>
	 */
	prepareNav: function() {
		var _self = this;
		
		var bg            = '<div class="bg"></div>';
		var subNavWrapper = '<div class="subNavWrapper"></div>';
		var spacer        = '<div class="spacer"></div>';
		var subNav        = '<div class="subNav"></div>';
		var shadowRight   = '<div class="shadowRight"></div>';
		var shadowCorner  = '<div class="shadowCorner"></div>';
 		var shadowBottom  = '<div class="shadowBottom"></div>';

		this.elements.each(function() {
			var li = $(this);
			    li.prepend(bg);
			
			var ul = $(li).find('ul');
			if (ul.size() > 0) // has a child menu 
				li.get(0).ul = ul.wrap(subNav).parent('div')
												 .prepend(shadowBottom).prepend(shadowCorner).prepend(shadowRight).prepend(bg)
												 .wrap(subNavWrapper).parent('div')
												 .prepend(spacer).find('ul').get(0);
		});
	},
	
	addEvents: function() {
		var _self = this;
		this.elements.hover(
			function(event) { // mouseover
				_self.mouseOver($(this));
			},
			
			function(event) { // mouseout
				_self.mouseOut($(this));
			}
		);
	},
	
	mouseOver: function(li) {
		if (this.timeout) clearTimeout(this.timeout);
		if (this.currentElement && this.currentElement != li.get(0).id)
			this.hideDropDown();
		
		if (li.is('.selected')) {
		li.removeClass ('selected')
		li.addClass ('selected2')
		//	if (this.subNav) this.subNav.fg.style.display = 'none';
		//	return;
		}
			
		li.addClass('hover');
		
		if (li.get(0).ul)
			this.showDropDown(li.get(0).id);
		
		if (this.subNav) this.subNav.fg.style.display = 'block';
	},
	
	mouseOut: function(li) {
		if (li.is('.selected')) return;
		
		var _self = this;
		if (li.get(0).ul)
			this.timeout = setTimeout(function() { _self.hideDropDown(); }, Config.Nav.delay);
		else {
			li.removeClass('hover');
			if (this.subNav) this.subNav.fg.style.display = 'none';
		}
	},
	
	showDropDown: function(id) {
		var li = $('#' + id);
		this.currentElement = id;
		if (!li.get(0)._setup) this._setupElement(li);
	},
	
	hideDropDown: function() {
		var li = $('#' + this.currentElement);
		if (this.timeout) clearTimeout(this.timeout);
		li.removeClass('hover');
		if (this.subNav) this.subNav.fg.style.display = 'none';
		this.currentElement = null;
	},
	
	drawSecondLevelNav: function() {
		this.subNav = $.DIV({ id: 'subNav' },
			$.DIV({ className: 'fg' })
		).insertAfter('#header').prepend(this.child.clone()).get(0);
		this.subNav.fg = $(this.subNav).find('div.fg').get(0);
	},
	
	_setupElement: function(li) {
		if (li.get(0)._setup && !$.browser.msie) return;
		
		var subNavWrapper = $(li).find('.subNavWrapper');
		var subNav        = $(li).find('.subNav');
		var shadowRight   = $(li).find('.shadowRight');
		var bg            = $(li).find('div div.bg');
		var spacer        = $(li).find('.spacer');
		
		subNavWrapper.css('width', subNav.outerWidth() + 'px');
		
		if ($.browser.msie) {
			bg.css('height', subNav.outerHeight() + 'px');
			//shadowRight.css('height', subNav.outerHeight() + 'px');
			subNavWrapper.bgIframe();
		} 
		
		spacer.css('width', li.outerWidth() + 'px');
		
		li.get(0)._setup = true;
	}
};