Menus = new Class({
	type: 'Menus',
	Implements: Options,
	options: {
		offsetX: 0,
		offsetY: 0,
		subAlign: 'left',
		subOffsetX: 0,
		subOffsetY: 0,
		opacity: 0.85,
		delay: 1000,
		showSpeed: 150,
		hideSpeed: 75
	},

	initialize: function(el, options) {
		this.setOptions(options);
		this.el = $(el);
		if(!el) return;

		this.menus = [];
		this.timer = null;

		this.el.getElements('.menuitem').each(function(m) {
			this.menus.push( new this.Menu(this, m) );
		}.bind(this));
	},

	setTimer: function() {
		this.clearTimer();
		this.timer = setTimeout(function() {
			this.hideMenus();
		}.bind(this), this.options.delay);
	},

	clearTimer: function() {
		clearTimeout(this.timer);
	},

	hideMenus: function(curMenuId) {
		this.clearTimer();
		for(var i=0; i<this.menus.length; ++i) {
			if(this.menus[i].id != curMenuId) this.menus[i].hide();
		}
	},

	Menu: new Class({
		type: 'Menus.Menu',
		shown: false,

		initialize: function(parent, trigger) {
			this.trigger = $(trigger);
			this.id = this.trigger.getAttribute('menuid');
			if(!this.id) {
				this.id = Math.round( Math.random() * 1000000 ) + 100000;
				this.trigger.setAttribute('menuid', this.id);
			}

			this.menus = [];

			switch(parent.type) {
				case 'Menus':
					this.parent = parent;
					this.root = parent;
					break;
				case 'Menus.Menu':
					this.parent = parent;
					this.root = this.parent.root;
					break;
				default: return;
			}

			this.trigger.addEvent('mouseenter', function() {
				this.show();
			}.bind(this));

			this.trigger.addEvent('mouseleave', function() {
				this.root.setTimer();
			}.bind(this));

			this.el = $('submenu-'+this.id);
			if(this.el) {
				this.el.addEvent('mouseenter', function() {
					//this.root.clearTimer();
				}.bind(this));
		
				this.el.addEvent('mouseleave', function() {
					//this.root.setTimer();
				}.bind(this));

				this.el.getElements('.menuitem').each(function(m) {
					this.menus.push( new this.root.Menu(this, m) );
				}.bind(this));
			}
		},


		show: function() {
			this.root.clearTimer();

			if(this.shown) return;
			else this.shown = true;

			var thisMenuId = this.id;
			p = this.parent;
			while(p.type == 'Menus.Menu') {
				thisMenuId = p.id;
				p = p.parent;
			}
			this.root.hideMenus(thisMenuId);
			if(this.parent.type == 'Menus.Menu') this.parent.hideMenus(this.id);


			this.trigger.addClass('hover');

			if(this.el) {

				this.el.setStyles({
					display: 'block',
					opacity: 0
				});

				var to = { };
				if(this.parent.type == 'Menus') {
					// this is a root submenu

					switch(this.parent.options.subAlign) {
						case 'center':
							to.left = this.trigger.getLeft() - (this.el.getWidth() / 2) + (this.trigger.getWidth() / 2) + this.root.options.offsetX;
							to.top = this.trigger.getTop() + this.trigger.getHeight()  + this.root.options.offsetY;
							break;

						default:
							to.left = this.trigger.getLeft() + this.root.options.offsetX;
							to.top = this.trigger.getTop() + this.trigger.getHeight()  + this.root.options.offsetY;

					}
				}
				else {
					// this is a sub-submenu
					to.left = this.trigger.getLeft() + this.trigger.getWidth() + this.root.options.subOffsetX;
					to.top = this.trigger.getTop() + this.root.options.subOffsetY;
				}

				this.el.setStyles({
					left: to.left,
					top: to.top
				});

				new Fx.Tween(this.el, {
					duration: this.root.options.showSpeed
				}).start('opacity', this.root.options.opacity);
			}
		},

		hide: function() {
			this.root.clearTimer();

			if(!this.shown) return;
			else this.shown = false;

			setTimeout(function() {
				this.trigger.removeClass('hover');
			}.bind(this), this.root.options.hideSpeed);

			if(this.el) {
				new Fx.Tween(this.el, {
					duration: this.root.options.hideSpeed,
					onComplete: function() {
						this.element.setStyle('display', 'none');
					}
				}).start('opacity', 0);
			}

			this.hideMenus();

		},

		hideMenus: function(curMenuId) {
			this.root.clearTimer();
			for(var i=0; i<this.menus.length; ++i) {
				if(this.menus[i].id != curMenuId) this.menus[i].hide();
			}
		}

	})


});