// JavaScript Document

var Menu = new Class({

	initialize: function(selector)
	{
		this.selector = selector;
		this.items = [];
		
		$$(this.selector + ' > li').each(function(item) {
			this.items.extend([ new MenuItem(this, item) ]);
		}.bind(this));
		
	},
	
	collapseAll: function()
	{
		this.items.each(function(item) {
			item.collapse({'tween': true});
		});
		
	}
	
});

var MenuItem = new Class({
	
	initialize: function(parent, item)
	{
		this.parent = parent;
		// thisMenuItem entspricht einem li-Element der Menü-Liste
		this.menuItem = item;
		// subMenuItem entspricht einem ul-Element in thisMenuItem (sofern vorhanden)
		this.subMenuItem = this.menuItem.getElement('ul');
		
		if (this.subMenuItem != null)
		{
			this.subMenuHeight = this.subMenuItem.offsetHeight;
			this.subMenuItem.setStyle('overflow', 'hidden');
			this.subItemTween = new Fx.Style(this.subMenuItem, 'height');

			if (!this.menuItem.hasClass('active'))
			{
				this.collapse({'tween': false});
			}
		}
		
		this.menuItem.addEvents({
			mouseover: this.onmouseover.bind(this),
			mouseout: this.onmouseout.bind(this)
		});
		
		this.menuItem.getElement('div').addEvent('click', this.onclick.bind(this));

	},
	
	collapse: function(options)
	{
		if (this.subMenuItem == null)
			return;

		if (!options['tween'])
		{
			this.subMenuItem.setStyle('height', 0);
		}
		else
		{
			this.subItemTween.clearTimer();
			this.subItemTween.custom(0);
		}
		this.menuItem.removeClass('active');
	},
	
	expand: function(options)
	{
		if (this.subMenuItem == null)
			return;
			
		if (!options['tween'])
		{
			this.subMenuItem.setStyle('height', this.subMenuHeight + 'px');
		}
		else
		{
			this.subItemTween.clearTimer();
			this.subItemTween.custom(this.subMenuHeight);
		}
		this.menuItem.addClass('active');
	},
	
	onmouseover: function()
	{
		this.menuItem.addClass('hover');
	},
	
	onmouseout: function()
	{
		this.menuItem.removeClass('hover');
	},
	
	onclick: function()
	{
		if (this.menuItem.hasClass('active'))
		{
			this.collapse({'tween': true});
		}
		else if (this.menuItem.getParent().getParent().getTag() == 'li')
		{
			return;
		}
		else
		{
			this.parent.collapseAll();
			this.expand({'tween': true});
		}
	}
		
});

var menu_init = function()
{	
	new Menu('#menu');
}