/**
 * @author nico
 */
var NavMenu = Class.create( {
	trigger		:null,
	menu		:null,
	timer		:null,
	initialize:function(trigger,menu){
		this.trigger = $(trigger);
		this.menu = $(menu);
		var clone = this.menu.cloneNode(true);	
		this.menu.remove();	//take out original
		// add the dropdown to the body
		var b = document.getElementsByTagName("body").item(0);
		b.appendChild(clone);
		Position.absolutize($(clone));
		this.position();
		this.menu = clone;	//reassign
		// event handling
		Event.observe(this.trigger,"mouseover",this.showDrop.bindAsEventListener(this));
		Event.observe(this.trigger,"mouseout",this.hideDrop.bindAsEventListener(this));
		Event.observe(this.menu,"mouseover",this.showDrop.bindAsEventListener(this));
		Event.observe(this.menu,"mouseout",this.hideDrop.bindAsEventListener(this));
	},
	position:function()
	{
		var pos 	= Position.cumulativeOffset($(this.trigger));
		var dim 	= $(this.trigger).getDimensions();
		var left	= pos[0] - 7;
		var top	 	= pos[1] + dim.height - 30;
		$(this.menu).setStyle({left:left+'px',top:top+'px'});
	},
	showDrop:function(e)
	{
		if (Event.element(e).id != this.menu.id) {	//don't fire on the parent menu, just kids.
			window.clearTimeout(this.timer);
			this.position();
			$(this.menu).setStyle({visibility:'visible'}); 
		}
	},
	hideDrop:function(e)
	{
		this.timer = Element.setStyle.delay(0.1, this.menu, {visibility:'hidden'});	//solves hanging menu problems
	}
});;