var FlyoutMenu = new Class({
	options:{
		expandable: 'expandable'
	},
	
	initialize: function(navBar, subNav, options){
		this.setOptions(options);
		var mainNav = $E('ul', navBar);
		var navItems = $E('ul', navBar).getChildren();
		
		navItems.each(
			function(e, i){
				var sub_nav = $E('.' + subNav, e);
				if(sub_nav){
					e.subnavContainer = sub_nav; // the DIV containing the sub nav UL
					e.subnav = $E('ul', sub_nav); // the UL containing the subnav elements
					e.subnavHeight = sub_nav.offsetHeight;
					
					e.subnav.$parent = e.subnavContainer.$parent = e;
					
					$E('a', e).addClass('expandable');
					
					sub_nav.setStyle('height', 0);
					$E('ul', sub_nav).setStyle('margin-top', -e.subnavHeight + 'px');
					
					
					e.addEvent('mouseenter', 
						function(){
							//this.subnavContainer.setStyle('height', 'auto');
							//this.subnav.setStyle('margin-top', 0);
							
							$clear(this.startHide);
							
							show = function(d){
								this.subnavContainer.setStyle('height', 'auto');
								this.subnav.setStyle('margin-top', d);
							}
							this.startShow = show.delay(150, this, 0);
						}
					)
				
					e.addEvent('mouseleave',  // 1
						function(){
							
							hide = function(){
								this.subnav.setStyle('margin-top', -this.subnavHeight);
								this.subnavContainer.setStyle('height', 0);
							}
							this.startHide = hide.delay(500, this);
						}
					)
					
					e.subnavContainer.addEvent('mouseenter',  // 2
						function(){
							$clear(this.$parent.startHide);
							this.$parent.subnavContainer.setStyle('height', 'auto');
							this.$parent.subnav.setStyle('margin-top', 0);
						}
					)
				}
			}
		);
		
		//var subNav = $ES('ul', $E('ul', navBar));
	}
	
});
FlyoutMenu.implement(new Events, new Options);