// This function should be reconsidered - consider trailing elements?
Object.extend(String.prototype, {
  urlify: function(object) {
//		return ( (this.startsWith('/')) ? this.substring(1, this.length) : this );
		url = this;
		url = (url.startsWith('/')) ? url.substring(1, url.length) : url ;
		url = (url.endsWith('/')) ? url.substring(0, url.length-1) : url ;
		return url;
  }
});

var dropDown = Class.create({
	initialize: function (data, parent) {
		this.lastMenu = null;			// Remember last menu
		this.activeMenu = null;		// Track active menu
		this.menuitems = [];			// Encapsulate DOM Elements as objects of this array.
				
		// Rename this to something ?
		this.timeout = null;
		this.timertimeout = 700;
		
		this.ul = new Element('ul', {className: 'drop-down'});
		
		if (parent) {
			this.parent = parent;
			this.parent.appendChild(this.ul);
		}
	
		if (data)
			this.data = data.navigation;
	// rename to something logical?
		if (this.data)
			this.createStructure(this.data);
	},
	createStructure: function (data)
	{
			data.menu.each ( function (menu, index) {		
					this.menuitems[index] = {};
					this.menuitems[index].li = new Element('li').update(menu.name.toUpperCase());
					this.ul.appendChild(this.menuitems[index].li);
					
					menusection = menu.url.urlify().split('/')[0];
					cursection = window.location.pathname.urlify().split('/')[0];
					
//					this.menuitems[index].li.style.color = (menusection == cursection) ? 'black' : '';
										
					this.menuitems[index].dropdown = new Element('ul', {className: 'dropMenu'}).hide();
					this.menuitems[index].droptrans = new Element('div', {className: 'dropTrans'}).hide();
		

					
					this.menuitems[index].li.observe('mouseover', function (event) {																			
						if (this.timeout)
							clearTimeout(this.timeout);
						if (this.lastMenu) {
							this.lastMenu.li.removeClassName('hover');
							$(this.lastMenu.dropdown, this.lastMenu.droptrans).invoke('hide');
						}
						this.activeMenu = this.menuitems[index];
						this.activeMenu.li.addClassName('hover');
						
						if (menu.menuitem) // again like line 73 added to prevent creating drop if no menu						
						$(this.activeMenu.dropdown, this.activeMenu.droptrans).invoke('show');
					}.bind(this) );
					
					this.menuitems[index].li.observe('mouseout', function (event) { 
						this.lastMenu = this.activeMenu;
						this.activeMenu = null;
						this.timeout = setTimeout(this.closeTimeout.bind(this), this.timertimeout );
					}.bind(this) );

					this.menuitems[index].li.observe('click', function (event) { 
							window.location = menu.url;
					}.bind(this) );
				
				if (menu.menuitem) // added to fix home
				menu.menuitem.each ( function (menuitem) {
						if (menuitem.name != "Overview")
						{
							var obj = new Element('li').update(menuitem.name);
							obj.observe('mouseover', function (event) { hm = Event.element(event); hm.addClassName('hover');  } );
							obj.observe('mouseout', function (event) { hm = Event.element(event); hm.removeClassName('hover');  } );
							obj.observe('click', function (e) { window.location = menuitem.url; } );
							this.menuitems[index].dropdown.appendChild(obj);
						}
				}.bind(this) );		
				
				
					this.menuitems[index].dropdown.observe("mouseover", function (event) {  
						 clearTimeout(this.timeout);
						this.activeMenu = this.menuitems[index];
			  }.bind(this), true);
				
				this.menuitems[index].dropdown.observe("mouseout", function (event) {  		
						this.activeMenu = null;
						this.timeout = setTimeout(this.closeTimeout.bind(this), this.timertimeout );
			  }.bind(this), true);
	
				this.parent.appendChild(this.menuitems[index].droptrans);
				this.parent.appendChild(this.menuitems[index].dropdown);
//				 this.menuitems[index].li.observe('click', function (event) { pos = this.offsetLeft; alert(pos); } );
				this.menuitems[index].dropdown.style.left = this.menuitems[index].droptrans.style.left =  this.menuitems[index].li.offsetLeft + 'px';
				this.menuitems[index].droptrans.style.height = this.menuitems[index].dropdown.getHeight() + 8 + 'px'; // Set to height of dropdown and equalize margins ( uses static, convert to dyanmic css)
				this.menuitems[index].dropdown.style.top = this.menuitems[index].droptrans.style.top = this.menuitems[index].li.getHeight() + 'px';			
		}.bind(this) );	
	},
	closeTimeout: function (event) {
		if (this.activeMenu == null)
		{
			if (this.lastMenu)
			{
				this.lastMenu.li.removeClassName('hover');
				this.lastMenu.dropdown.hide();
				this.lastMenu.droptrans.hide();
			}
		}
	}
});