dojo.provide("redfin.common.header");


/*
 * We are creating a structure that looks like this for each main menu item
 * 
 * <span id="nnn_dropdown" class="menu"> <-- mainItem
 *   <a href="" class="item">
 *     Text
 *   </a>
 *   <a href="" class="itemHover">
 *     Text
 *   </a>
 *   <span class="drop">
 *     <ul>
 *        <li><a href="">...</a>
 *     </ul>
 *   </span>
 * 
 */
redfin.common.header.createDropdowns = function() {
	var nav = dojo.query('div#header div.nav')[0];
	for (var menuName in menus) {
		var menu = menus[menuName];
		
		var gotMenuItems = (menu && menu.length > 0);
		
		if (!gotMenuItems) {
			continue;
		}
		var mainItem = dojo.byId(menu.id+'_dropdown');
		
		//Create the main menu item if it's not present
		if(!mainItem) {
			mainItem = dojo.create("span", {id: menu.id+'_dropdown', className: 'menu'}, nav);
			dojo.create("a", {href: menu.uri, className: 'item', innerHTML: menu.label}, mainItem);
		}
		

		
		//Item Hover is a duplicate of the main item, but positioned absolutely and with a rounded corner
		var itemHover = dojo.create("a", {href: menu.uri, className: 'itemHover', innerHTML: "<span>" +menu.label+"</span><b></b>"}, mainItem);
		
		//create the dropdown
		var dropContainer = dojo.create("span", {className: 'drop'}, mainItem);
		var drop = dojo.create("ul", null, dropContainer);
		
		//create the dropdown list items
		dojo.forEach(menu, function(item){
			var menuItem = dojo.create("li", null, drop);
			var itemLink = dojo.create("a", {href: item.uri, innerHTML: item.label}, menuItem);
		});
		
		
		dojo.connect(mainItem, "onmouseover", dojo.hitch(mainItem, redfin.common.header.menuHover));
        dojo.connect(mainItem, "onmouseout", dojo.hitch(mainItem, redfin.common.header.menuBlur));
	}
}


redfin.common.header.menuHover = function(event) {
	
	var itemHover = dojo.query('.itemHover', this)[0];
	var drop = dojo.query('.drop', this)[0];
	
	dojo.style(itemHover, 'display', 'inline-block');
	dojo.style(drop, 'display', 'block');
}

redfin.common.header.menuBlur = function(event) { 
	var itemHover = dojo.query('.itemHover', this)[0];
	var drop = dojo.query('.drop', this)[0];
	
	dojo.style(itemHover, 'display', 'none');
	dojo.style(drop, 'display', 'none');
	
}
	

dojo.addOnLoad(function(){
	try {
		 /*Menus is array that is defined in CMS and embedded in page head (or somewhere else, AJAX for forums header to be written */
		if (menus != undefined || menus != null) {
			loadMainMenuItems();
			redfin.common.header.createDropdowns();
		}
	} catch (e) {
		console.error("Main Menu data not found", menus);
	}

});