/**
 * Afhandeling uitklapmenu
 * menuAlign opties == waar het menu weergeven tov parentobject?
 * - bottom
 * - left
 * - right (default)
 */

var toerkoopMenu =
{
	'openTimer': 0,
	'closeTimer': 0,
	'openItem': null,

	'openDelay': 300,
	'closeDelay': 500,
	'types': {
		'kop_tab': { 'subType': 'sub_tab', 'start': 3 },
		'block_buttons': { 'subType': 'uitklap_menu', 'start': 1 },
		'block_imagebuttons': { 'subType': 'uitklap_menu', 'start': 1 },
		'main_menu': { 'subType': 'submenu', 'start': 1 },
		'mro_main_menu': { 'subType': 'mro_submenu', 'start': 1 },
		'tk_main': { 'subType': 'toerkoop_main', 'start': 1 }
	}
};

(function()
{
	toerkoopMenu.init = function toerkoopMenu_init()
	{
		function toerkoopMenu_eventHandler_timeOpen(element) { toerkoopMenu.timeOpen(element); return false; }
		function toerkoopMenu_eventHandler_timeClose(element) { toerkoopMenu.timeClose(element); return false; }
		function toerkoopMenu_eventHandler_stopCloseTimer(element) { toerkoopMenu.stopCloseTimer(element); return false; }

		for (var type in this.types)
		{
			var koptype = type+'_';
			var subtype = this.types[type].subType+'_';
			var start = this.types[type].start;

			var i = start;
			var kopElement = document.getElementById(koptype+i);
			var subElement = document.getElementById(subtype+i);
			while (kopElement)
			{
				if (subElement)
				{
					eventHandler.add(kopElement, 'mouseover', null, toerkoopMenu_eventHandler_timeOpen);
					eventHandler.add(kopElement, 'mouseout', null, toerkoopMenu_eventHandler_timeClose);
					eventHandler.add(subElement, 'mouseover', null, toerkoopMenu_eventHandler_stopCloseTimer);
					eventHandler.add(subElement, 'mouseout', null, toerkoopMenu_eventHandler_timeClose);
				}

				i++;
				kopElement = document.getElementById(koptype+i);
				subElement = document.getElementById(subtype+i);
			}
		}
	};

	toerkoopMenu.timeOpen = function toerkoopMenu_timeOpen(kopElement)
	{
		if (this.openTimer)
			clearTimeout(this.openTimer);

		if (this.closeTimer)
		{
			clearTimeout(this.closeTimer);
			this.closeTimer = 0;
		}

		this.openTimer = setTimeout(function toerkoopMenu_timeoutHandler_open() { toerkoopMenu.openTimer = 0; toerkoopMenu.open(kopElement); return true; }, this.openDelay);
	};

	toerkoopMenu.timeClose = function toerkoopMenu_timeClose(element)
	{
		if (this.closeTimer)
			clearTimeout(this.closeTimer);

		if (this.openTimer)
		{
			clearTimeout(this.openTimer);
			this.openTimer = 0;
		}

		this.closeTimer = setTimeout(function toerkoopMenu_timeoutHandler_close() { toerkoopMenu.closeTimer = 0; toerkoopMenu.close(); return true; }, this.closeDelay);
	};

	toerkoopMenu.stopCloseTimer = function toerkoopMenu_stopCloseTimer(subElement)
	{
		if (this.closeTimer && this.openItem && this.openItem.subId == subElement.id)
		{
			clearTimeout(this.closeTimer);
			this.closeTimer = 0;
		}

		return true;
	};

	toerkoopMenu.open = function toerkoopMenu_open(kopElement)
	{
		if (this.openTimer)
		{
			clearTimeout(this.openTimer);
			this.openTimer = 0;
		}

		if (kopElement.id.match(/^block_imagebuttons_[0-9]+$/))
			kopElement = document.getElementById(kopElement.id.replace(/image/, ''));

		var kopType = kopElement.id.replace(/_[0-9]+$/, '');
		var nummer = kopElement.id.replace(/^.+_([0-9]+)$/, '$1');
		var subId = this.types[kopType].subType+'_'+nummer;
		var subElement = document.getElementById(subId);

		if (this.openItem)
		{
			if (this.openItem.subId != subId)
				this.close();

			else if (this.closeTimer)
			{
				clearTimeout(this.closeTimer);
				this.closeTimer = 0;
			}
		}

		if (kopElement.className.indexOf(' active') < 0)
			kopElement.className += ' active';

		if (!subElement)
			return true;

		if (subElement.className.indexOf(' hidden') < 0)
			return true;

		// Voor IE6 alle selectboxen verbergen, omdat die over het uitklapmenu heen
		// vallen. De functie 'showHideSelects' staat in framework.js
		if (isIE6)
			showHideSelects('hide');

		this.openItem = { 'kopId': kopElement.id, 'subId': subId };

		var kopElementPos = this.getObjectPosition(kopElement);
		var align = 'right';
		if (kopElement.className && kopElement.className.match(/\balign_(left|right|bottom)\b/))
			align = kopElement.className.replace(/^.*\balign_(left|right|bottom)\b.*$/, '$1');

		// positioneer adhv align
		switch (align)
		{
			case 'bottom':
				subElement.style.left = kopElementPos.x + 'px';
				subElement.style.top = (kopElementPos.y + kopElement.offsetHeight) + 'px';
			break;

			case 'left':
				subElement.style.left = (kopElementPos.x - kopElement.offsetWidth) + 'px';
				subElement.style.top = kopElementPos.y + 'px';
			break;

			case 'right':
				subElement.style.left = (kopElementPos.x + kopElement.offsetWidth) + 'px';
				subElement.style.top = kopElementPos.y + 'px';
			break;
		}

		subElement.style.width = kopElement.offsetWidth +'px';
		subElement.className = subElement.className.replace(/ hidden\b/, '');

		return true;
	};

	toerkoopMenu.close = function toerkoopMenu_close()
	{
		if (!this.openItem)
			return true;

		if (this.closeTimer)
		{
			clearTimeout(this.closeTimer);
			this.closeTimer = 0;
		}

		var kopElement = document.getElementById(this.openItem.kopId);
		var subElement = document.getElementById(this.openItem.subId);

		kopElement.className = kopElement.className.replace(/ active\b/, '');
		if (subElement.className.indexOf(' hidden') < 0)
			subElement.className += ' hidden';

		// Voor IE6 alle verborgen selectboxen weer zichtbaar maken.
		if (isIE6)
			showHideSelects('show');

		this.openItem = null;
		return true;
	};

	toerkoopMenu.getObjectPosition = function toerkoopMenu_getObjectPosition(obj)
	{
		if(obj.getBoundingClientRect)
		{
			var objRect = obj.getBoundingClientRect();
			var scrollOffset = getScrollOffset();

			var x = objRect.left;
			var y = objRect.top;

			if (isIE6 || isIE7)
			{
				x-=2;
				y-=2;
			}
			x+=scrollOffset.x;
			y+=scrollOffset.y;

			return { 'x': x, 'y': y };
		}
		else
		{
			var x = 0;
			var y = 0;

			if (obj.offsetParent)
			{
				while (obj.offsetParent)
				{
					x += obj.offsetLeft;
					y += obj.offsetTop;
					obj = obj.offsetParent;
				}
			}
			else if (obj.x && obj.y)
			{
				x += obj.x;
				y += obj.y;
			}

			return { 'x': x, 'y': y };
		}
	};
})();

eventHandler.add(window, 'load', toerkoopMenu, 'init');