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];
	
	//Since menus is an object, it doesn't have a length. 
	//TODO: consider making menus an array -jlb
	var menuLength = 0, i = 0;
	for (var menuName in menus) { menuLength++; }
	
	for (var menuName in menus) {
		var menu = menus[menuName];
		
		//If there is a sub menu
		if (menu && menu.length > 0) {
			var mainItem = dojo.byId(menu.id+'_dropdown');
			
			// These menu items need to work in various places (main site, blog, forums) so we can't have 
			// relative paths.  If we find one, convert it to a fully qualified path.  Assume that the 
			// link goes to a page on the main site and that it's not a secure page.
			if (menu.uri.indexOf("http") !== 0) {
				menu.uri = g_unsecureWebServerUrl + menu.uri;
			}
			
			//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){
				if(typeof(item.breaker) != 'undefined' && item.breaker) {
					var menuItem = dojo.create("li", {className: "breaker"}, drop);
					var itemLink = dojo.create("hr", null, menuItem);
				} else {
					var menuItem = dojo.create("li", null, drop);
					// These menu items need to work in various places (main site, blog, forums) so we can't have 
					// relative paths.  If we find one, convert it to a fully qualified path.  Assume that the 
					// link goes to a page on the main site and that it's not a secure page.
					if (item.uri.indexOf("http") !== 0) {
						item.uri = g_unsecureWebServerUrl + item.uri;
					}
					var itemLink = dojo.create("a", {href: item.uri, innerHTML: item.label}, menuItem);
				}
			});
			
			//connect the events
			dojo.connect(mainItem, "onmouseover", dojo.hitch(mainItem, redfin.common.header.menuHover));
	        dojo.connect(mainItem, "onmouseout", dojo.hitch(mainItem, redfin.common.header.menuBlur));
		} else {
			dojo.addClass(menu.id+'_dropdown', 'standAlone');
		}
        
        //add the spacer
        if( i++ < menuLength - 1 ) {
        	dojo.create("span", {className: 'spacer', innerHTML: "|"}, nav);
        }
	}
}


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(){
	 /* "menus" and "loadMainMenuItems" are both defined in CMS and pulled into the page via a <script> tag */
	if (typeof(menus) != "undefined") {
		// Protecting against situations where people have *stale* copy of nav-top-menu-content in which 
		// "menus" is defined but "loadMainMenuItems" isn't.  This is us being extra nice to other devs.
		if (typeof(loadMainMenuItems) != "undefined") {
			loadMainMenuItems();
		}
		redfin.common.header.createDropdowns();
	}
});