var SubMenuHandler = new Class({
	initialize: function(subMenuTrigger) {
		subMenuTrigger.each(function(li) {
			if (!(li.hasClass('excludeFromHover'))) {
		        li.addEvent('mouseenter', function() {		        			    		
		    		styler = new SubMenuStyler(li);
		    		styler.show(false);
		    		//switch css-classes
		    		li.removeClass('inactiveSubMenu');
		    		li.addClass('visibleActiveSubMenu');
		        });    
		        li.addEvent('mouseleave', function() {
		        	//switch css-classes		        	
		        	li.removeClass('visibleActiveSubMenu');
		    		li.addClass('inactiveSubMenu');
		            styler = new SubMenuStyler(li);
		            styler.hide();		            
		        });	        
			}
		});
	}	
});

var SubMenuStyler = new Class({
	initialize: function(subMenuContainer) {		
		//get elements
		this.subMenuContainer = subMenuContainer;		
		this.activeMenuElement = this.subMenuContainer.getElement('a');
		this.activeSubMenu = this.subMenuContainer.getElement('ul');		
		this.subMenuHeader = this.subMenuContainer.getElement('div.header');
		this.subMenuShadow = this.subMenuContainer.getElement('div.shadow');		
		//get style-data
		this.subMenuContainerHeight = this.subMenuContainer.getStyle('height').toString().toInt(); //why getStyle() returns an object? only the js-god knows...
		this.subMenuContainerWidth = this.subMenuContainer.getStyle('width').toString().toInt();
		this.activeMenuElementHeight = this.activeMenuElement.getStyle('height').toString().toInt();		
		this.activeSubMenuHeight = this.activeSubMenu.getStyle('height').toString().toInt();
		this.activeSubMenuMarginTop = this.activeSubMenu.getStyle('margin-top').toString().toInt();
		this.activeSubMenuMarginBottom = this.activeSubMenu.getStyle('margin-bottom').toString().toInt();
		this.heightCorrectionFactor = this.activeMenuElement.getStyle('margin-bottom').toString().toInt();
		this.subMenuHeaderHeight = this.subMenuHeader.getStyle('height').toString().toInt();
		//preset styles
		this.subMenuShadow.setStyle('bottom', -5);		
	},
	show: function(onLoad) {   		
    	//variable css-styles
		this.activeMenuElement.setStyle('top', this.activeSubMenuHeight + this.activeSubMenuMarginTop + this.activeSubMenuMarginBottom);
		this.activeMenuElement.setStyle('height', this.activeMenuElementHeight + this.heightCorrectionFactor);
		this.activeSubMenu.setStyle('bottom', this.activeMenuElementHeight + this.heightCorrectionFactor);
		this.subMenuContainer.setStyle('bottom', this.activeSubMenuHeight + this.activeSubMenuMarginTop + this.activeSubMenuMarginBottom);		
		this.subMenuContainer.setStyle('height', this.subMenuContainerHeight + this.heightCorrectionFactor);		
		this.subMenuContainerHeight = this.subMenuContainer.getStyle('height').toString().toInt(); //get height again because it has changed
		this.subMenuHeader.setStyle('bottom', this.subMenuContainerHeight - this.subMenuHeaderHeight);
		//because IE is too slow, we have to show the subsubmenu after setting all styles on load (activeSubMenu --> visibleActiveSubMenu)		
		if (onLoad) {
			this.subMenuContainer.addClass('visibleActiveSubMenu');
		}	
	},
	hide: function() {   	
		//variable css-styles
		this.activeMenuElement.setStyle('top', 0);
		this.activeMenuElement.setStyle('height', this.activeMenuElementHeight - this.heightCorrectionFactor);
		this.subMenuContainer.setStyle('height', this.subMenuContainerHeight - this.heightCorrectionFactor);
		this.activeSubMenu.setStyle('bottom', 0);
		this.subMenuContainer.setStyle('bottom', 0);
		this.subMenuHeader.setStyle('bottom', 0);		
	}
});

window.addEvent('domready', function() {
	new SubMenuHandler($$('li.subMenuParent'));
	//if a sub-sub-menu is active, we have to show it	
	styler = new SubMenuStyler($$('li.activeSubMenu'));
    styler.show(true);
});