// Menu klasse -- Feitelijk een functie object.
var Menu = Class.create({
	
	// Constuctor functionaliteit.
	initialize: function(p_iMenuId) {
		this.m_iInitId = p_iMenuId;
		this.m_iMenuActiveId = p_iMenuId;
		this.menuItemTimeout = null;
		this.menuTimeout = null;
		this.addObservers();		
		this.initTab();
		//this.effect();
		//this.doAnimation();
	},
	
	/*
		Eventhandlers plaatsen.
		De bind fucnties zorgen ervoor dat we binnen de scope van het Menuobject blijven.
	*/
	addObservers: function() {		
		
		$$('li.select').each(function(n) {
			n.observe('click', function(event) {
				// Een eventueel onmouseout effect van een andere tab hoeft niet langer uitgevoerd te worden. 
				clearTimeout(this.menuTimeout);
				clearTimeout(this.menuItemTimeout);
				//new Effect.Move($($(''+this.m_iInitId+'').parentNode), { x: 1000, y: 0, mode: 'relative', duration: 0.40, transition: Effect.Transitions.reverse});
				//this.menuItemTimeout = setTimeout(this.onMouseOver.bind(this, n), 150);			
			}.bind(this));
			
			n.observe('mouseover', function(event) {
				// Een eventueel onmouseout effect van een andere tab hoeft niet langer uitgevoerd te worden. 
				clearTimeout(this.menuTimeout);
				clearTimeout(this.menuItemTimeout);
				this.menuItemTimeout = setTimeout(this.onMouseOver.bind(this, n), 150);			
			}.bind(this));
			
			n.observe('mouseout', function(event) {
				clearTimeout(this.menuTimeout);
				clearTimeout(this.menuItemTimeout);
				this.menuTimeout = setTimeout(this.onMouseOut.bind(this, n), 2000);
			}.bind(this));
			
		}.bind(this));				
		
	},
	
	/* 	
		De onMouseOver Eventhandler.
		Actieve tab deactiveren.
		Vervolgens de tab die de focus heeft activeren.
	*/ 	
	onMouseOver: function(i) {
		this.disableActiveTab();
		i.className = 'active';
		this.m_iMenuActiveId = i.id;
	},

	/* 	
		De onMouseOut Eventhandler moet de oude situatie herstellen.
		Indien we reeds op geinitialiseerde tab zitten doen we niets.
		Anders actieve tab deactiveren. En geinitialiseerde tab laden. 
	*/ 
	onMouseOut: function(i) {
		if (this.m_iMenuActiveId != this.m_iInitId) {
			$(''+this.m_iMenuActiveId+'').className = 'select';
			this.initTab();
		}		
	},
	
	/* 	
		Actieve tab deactiveren.
	*/
	disableActiveTab: function() {
		$(''+this.m_iMenuActiveId+'').removeClassName('active').addClassName('select');
	},
	
	/*
		De te initialiseren tab (actieve tab in beginsituatie).
		Tevens ff (voor de zekerheid) 
	*/ 
	initTab: function() {
		this.m_iMenuActiveId = this.m_iInitId;
		$(''+this.m_iMenuActiveId+'').removeClassName('select').addClassName('active');
	},
	
	/*
		Schuifeffect van links naar rechts.
	*/
	doAnimation: function() {
		new Effect.Move($($(''+this.m_iInitId+'').parentNode), { x: 1000, y: 0, mode: 'relative', duration: 0.40, transition: Effect.Transitions.sinoidal});
	},
	
	/*
		Evenntueel effect.
	*/
	effect: function() {
		new Effect.Pulsate($(''+this.m_iInitId+''));
	}
	
});