/**
 * Author: Timothy Beutels <timothy.beutels@wkb.be>
 *
 * Requirements: Mootools v1.11+
 *
 **/

var wkbDropDownCls = new Class({
	initialize: function()
	{
		this.arrItems = new Array();
		this.objAttachedTo = null;
		this.objMenu = null;
	},
	
	isShowing: function()
	{
		return (this.objMenu != null);	
	},
	
	addItem: function(strLabel, strUrl)
	{
		this.arrItems[this.arrItems.length] = {'label':strLabel, 'url':strUrl};
	},
	
	attachTo: function(objTarget)
	{
		this.objAttachedTo = objTarget;
		objTarget.wkbDropDown = this;
		objTarget.addEvent("mouseenter", function(event) { this.wkbDropDown.show(event); }.bindWithEvent(objTarget));
		objTarget.addEvent("mouseleave", function(event) { this.wkbDropDown.hide(event); }.bindWithEvent(objTarget));
	},
	
	show: function(event)
	{
			
			if (!this.isShowing() && this.objAttachedTo!=null)
			{
				var objAttachedDim = this.objAttachedTo.getCoordinates();
				// Setup menu
				var menu = new Element('div', { 'styles': {
									   		'position': 'absolute',
											'z-index': '100',
											'left': objAttachedDim.left,
											'top': objAttachedDim.top + objAttachedDim.height,
											'font-family': 'Verdana,Arial,Helvetica,sans-serif;',
											'font-size': 11,
											'background': '#555555',
											'border': '1px solid black',
											'width': 'auto'
									   }});
				
				// Inject it into the DOM
				menu.injectInside($E('body'));
				
				// Generate contents
				var strContents = "";
				
				for (var i=0; i<this.arrItems.length; i++)
				{
					strContents += "<div style='background:white; margin-bottom: 1px; padding: 3px; padding-right: 5px; color:#0768a9; cursor:pointer;' onMouseOver=\"this.style.background='#0768a9'; this.style.color='white';\" onMouseOut=\"this.style.background='white'; this.style.color='#0768a9';\" onClick=\"document.location.href='"+ this.arrItems[i].url +"'\">" + this.arrItems[i].label + "</div>"
				}
				menu.setHTML(strContents);
				
				
				
				// Attach this to element
				menu.wkbDropDown = this;
				
				// Add necessary event to hide
				menu.addEvent("mouseleave", function(event) { this.wkbDropDown.hide(event); }.bindWithEvent(menu));
				
				// Store for future ref.
				this.objMenu = menu;
				
			}
	},
	
	_domHasParent: function(objChild, objParent)
	{
			
			if (objChild == null || objParent == null) { return false; }
			var objDirectParent = $(objChild);
			if (objDirectParent == null) { return false; }
			if (objDirectParent.classid == "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000") { return false; }
			while(objDirectParent.getTag() != 'body' && objDirectParent.getTag() != 'html')
			{
				// Debug:
				// console.log("-- parent: " + objDirectParent);
				if (objDirectParent == objParent) 
				{ 
					return true; 
				}
				objDirectParent = objDirectParent.getParent();
				if (objDirectParent == null) { return false; }
			}
			return false;
			
	},
	
	hide: function(event)
	{
			/* Debug: 
			console.log("relatedtarget:" + event.relatedTarget);
			console.log("target:" + event.target);
			console.log("target =?= attached: " + (event.target == this.objAttachedTo));
			console.log("relatedtarget =?= menu: " + (this._domHasParent(event.relatedTarget,this.menu)));
			*/
			if (this.isShowing())
			{
				if ((this._domHasParent(event.relatedTarget,this.objAttachedTo) && this._domHasParent(event.target,this.objMenu)) || 
					 (this._domHasParent(event.relatedTarget,this.objMenu) && this._domHasParent(event.target,this.objAttachedTo) ) 
					 )
				{
					
				} else {
					this.objMenu.remove();
					this.objMenu = null;
				}
			}
	}
							   
							   });