var FadeMenu = new Class({
	Implements: [Events, Options],
	
	options: {
		fadeInSpeed: 150,
		fadeOutSpeed: 100
	},
	
	initialize: function(elem, options) {
		this.parentElem = $(elem);
		if($type(this.parentElem) != 'element') { throw new Error('invalid element or id passed as first argument to menu'); }
		
		this.setOptions(options);
		
		this.menuItems = this.parentElem.getChildren().filterBy('li');
		for(var i=0; i<this.menuItems.length; i++) {
			var subMenu = this.menuItems[i].getElement('ul');
			if($type(subMenu) == 'element') {
				this.menuItems[i].subMenu = subMenu;
				this.setupSubMenu(subMenu);
				subMenu.create(this.options);
			}
		}
	},
	// shouldn't be called externally
	setupSubMenu: function(subMenu) {
		$extend(subMenu, {
			create: function(options) {
				this.options = options;
				this.parentElem = this.getParent();
				this.fade = new Fx.Morph(subMenu, { duration: options.fadeInSpeed, wait: false });
				this.fade.set({ 'opacity': 0 });
				this.fade.set({ 'left': (/*this.parentElem.getLeft() +*/ (this.parentElem.getWidth() - subMenu.getWidth())/2) + 'px' });
				this.addEvent('fadein', this.fadeIn);
				this.addEvent('fadeout', this.fadeOut);
				
				var thisSM = this;
				this.parentElem.addEvent('mouseenter', function(evt) {
					thisSM.latestEvent = 'mouseenter';
					thisSM.fireEvent('fadein', evt);
				});
				this.parentElem.addEvent('mouseleave', function(evt) {
					thisSM.latestEvent = 'mouseenter';
					thisSM.fireEvent('fadeout', evt);
				});
			},
			menuItems: function() { return this.getChildren().filterBy('li'); },
			fadeIn: function() {
				$clear(this.timer);
				this.timer = this.fade.start.delay(100, this.fade, { 'opacity': 1 });
			},
			fadeOut: function() {
				$clear(this.timer);
				this.timer = this.fade.start.delay(75, this.fade, { 'opacity': 0 });
			}
		});
	}
});