/*
window.addEvent('domready', function() {
	new MooMenu({
		dockTo: 'bi',
		menuItemsClass : '.item.level0',
		submenuIdPrefix : 'submenu',
		offsetHeight: 5
	});
});
*/

var MooMenu = new Class({
	Implements: [Options],

	options : {
		dockTo: 'bl',
		/* 
		'tr' top right lined, 
		'tl' top left lined, 
		'tc' top centered,
		'ti' top heading to center
		'r' right, 
		'br' bottom right lined, 
		'bl' bottom left lined, 
		'bc' bottom centered,
		'bi' bottom heading to center
		'l' left, 
		'a' absolute,
		 */

		offsetHeight : 0,
		offsetWidth : 0,
		mouseOutHideDelay : 250,

		menuItemsClass : '.moo-menu-item',
		submenuIdPrefix: 'moomenu_submenu_'
	},

	menuItems : null,
	
	initialize : function(options) {
		this.setOptions(options);
		document.menuHandler = this;
		this.getMenuItems().each(function(menuItem, index, items) {
			menuItem.submenuLayer = $(this.options.submenuIdPrefix + /(\d.*)$/.exec(menuItem.id)[0]);
			if (!menuItem.submenuLayer) {
				return;
			}

			// muss bei jedem show neu gesetzt werden, wegen evtl. größenänderung des fensters
			//this.setLayerPosition(menuItem, menuItem.submenuLayer, index, items.length);
			
			menuItem.submenuLayer.menuIndex = index;
			menuItem.submenuLayer.setStyles({top: '0px', left: '0px'});
			menuItem.setStyles({visibility: null});
			
			this.hideMenuLayer(menuItem.submenuLayer);
			menuItem.addEvents({
				'mouseenter' : function() {
					document.menuHandler.hideAllMenuLayers();
					document.menuHandler.showMenuLayer(this.submenuLayer);
				},
				'mouseleave' : function() {
					document.menuHandler.deferHideMenuLayer(this.submenuLayer);
				}
			});
			menuItem.submenuLayer.addEvents({
				'mouseenter' : function() {
					document.menuHandler.showMenuLayer(this);
				},
				'mouseleave' : function() {
					document.menuHandler.deferHideMenuLayer(this);
				}
			});
		}, this);
	},
	
	getMenuItems : function() {
		if (!this.menuItems) {
			this.menuItems = $$(this.options.menuItemsClass);
		}
		return this.menuItems;
	},

	setLayerPosition: function(menuItem, layer, index, count) {
		var icoords = menuItem.getCoordinates(menuItem.getOffsetParent());
		var lcoords = layer.getCoordinates(layer.getOffsetParent());
		var top = 0;
		var left = 0;

		var overrideDockTo;
		if (this.options.dockTo == 'ti' || this.options.dockTo == 'bi') {
			if (index === undefined || count === undefined) {
				overrideDockTo = (this.options.dockTo == 'ti' ? 'tl' : 'bl');
			} else {
				overrideDockTo = (this.options.dockTo == 'ti' ? 't' : 'b')+(index >= (count / 2) ? 'r' : 'l');
			}
		}

		switch (overrideDockTo||this.options.dockTo) {
			case 'a': 
				top = this.options.offsetHeight;
				left = this.options.offsetWidth;
				break;
			case 'bl':
				top = icoords.top + icoords.height + this.options.offsetHeight;
				left = icoords.left + this.options.offsetWidth;
				break;
			case 'br':
				top = icoords.top + icoords.height + this.options.offsetHeight;
				left = icoords.left - lcoords.width + icoords.width - this.options.offsetWidth;
				break;
			case 'bc':
				top = icoords.top + icoords.height + this.options.offsetHeight;
				left = icoords.left - (lcoords.width - icoords.width) / 2;
				break;
			case 'tl':
				top = icoords.top  - lcoords.height - this.options.offsetHeight;
				left = this.options.offsetWidth + icoords.left;
				break;
			case 'tr':
				top = icoords.top  - lcoords.height - this.options.offsetHeight;
				left = icoords.left - lcoords.width + icoords.width - this.options.offsetWidth;
				break;
			case 'tc':
				top = icoords.top  - lcoords.height - this.options.offsetHeight;
				left = icoords.left - (lcoords.width - icoords.width) / 2;
				break;
			case 'r':
				top = icoords.top + this.options.offsetHeight;
				left = icoords.left + icoords.width + this.options.offsetWidth;
				break;
			case 'l':
				top = icoords.top + this.options.offsetHeight;
				left = icoords.left - lcoords.width - this.options.offsetWidth;
				break;
		}
		layer.setStyles({top: top+'px',	left: left+'px'	});
	},
	
	showMenuLayer : function(layer) {
		if (!layer) {
			return;
		}
		this.cancelHideMenuLayer(layer);
		this.setLayerPosition(this.menuItems[layer.menuIndex], layer, layer.menuIndex, this.menuItems.length);
		layer.setStyle('visibility', null);
	},
	
	hideMenuLayer: function(layer) {
		if (!layer || !this.isVisible(layer)) {
			return;
		}
		this.cancelHideMenuLayer(layer);
		layer.setStyles({
			visibility:'hidden'
		});
	},

	cancelHideMenuLayer: function(layer) {
		if (!layer) {
			return;
		}
		if (layer.hideTimeout) {
			$clear(layer.hideTimeout);
			layer.hideTimeout = null;
		}
	},

	deferHideMenuLayer: function(layer) {
		if (!layer || !this.isVisible(layer)) {
			return;
		}
		this.cancelHideMenuLayer(layer);
		layer.hideTimeout = this.hideMenuLayer.delay(this.options.mouseOutHideDelay, this, [layer]);
	},

	hideAllMenuLayers: function() {
		this.getMenuItems().each(function(menuItem) {
			if (menuItem.submenuLayer) {
				this.hideMenuLayer(menuItem.submenuLayer);
			}
		}, this);
	},

	isVisible: function(layer) {
		return (layer.getStyle('visibility') != 'hidden');
	}

});