// Name Parts
var MENU_TEXT_CSS_CLASS_BASE_NAME="DLCMenuText";

// Misc.
var NO_ACTIVE_MENU_ITEM=-1;
var NO_ROLLOVER_MENU_ITEM=-1;
var BORDER_OFF=0;
var BORDER_ON=1;
var SUB_MENU_RIGHT_OFFSET=10;

// MENU UI MODES
var HIGHLIGHT_STYLE_BORDER="Border";
var HIGHLIGHT_STYLE_BACKGROUND="Background";
var MAIN_MENU_FIXED_BORDERS_SIZE=1;

// Colors
var COLOR_SELECTED_MENU_BORDER='#FDC200';	// Bright orange
var COLOR_UNSELECTED_MENU_BORDER='#FFFFFF'; //'#FFFFFF';
var COLOR_SUB_MENU_BORDER='#330066';		// Deep blue
var COLOR_SUB_MENU_HOVER='#FDC200';			// Bright orange
var COLOR_SUB_MENU_BACKGROUND='#FFFFFF';		// #FFFCE1 - Light orange
var COLOR_MENU_HOVER_BORDER='#330066';		// Deep Blue


// ELEMENT IDS and ID NAME PARTS
var MAIN_MENU_DIV_ID='divMenu';
var SUB_MENU_DIV_PREFIX='divMenuL';
var MAIN_MENU_BORDER_DIV_ID='divMenuBorder';
var MENU_ITEM_TABLE_PREFIX='menu_item_table_';

d = document;

// Create HTML for the main menu, with a table as the principal organizing element.
// Choose the up state for the menu item at the given index
// Build a border div area that surrounds the main menu for detecting certain events.
// Set the new HTML for the div menu as inner HTML
function createMainMenu(currentItemIndex)
{
	var strImageSrc;
	var colorTop;
	var colorBottom;
	var colorLeft;
	var colorRight;
	
	// Table that surrounds this menu level
	var strTable = "<table style=\"Z-INDEX: 100; border: 0px; border-left: " + MAIN_MENU_FIXED_BORDERS_SIZE + "; border-right: " + MAIN_MENU_FIXED_BORDERS_SIZE + "; border-style: solid; border-color: " + COLOR_UNSELECTED_MENU_BORDER + "; width: 100%\" cellspacing=\"0\" cellpadding=\"0\"><tr>";

	// For each main main menu item, create a <td> element along a single row
	for(i=0; i<d.mainMenu.menuItems.length; i++)
	{
	    colorLeft = COLOR_UNSELECTED_MENU_BORDER;
	    colorRight = COLOR_UNSELECTED_MENU_BORDER;

		if (i != currentItemIndex)
		{
			strClassName = d.mainMenu.menuItems[i].classDeselectedState;
			colorTop = COLOR_UNSELECTED_MENU_BORDER;
	        colorBottom = COLOR_UNSELECTED_MENU_BORDER;
		}
		else
		{
			strClassName = d.mainMenu.menuItems[i].classSelectedState;
			colorTop = COLOR_SELECTED_MENU_BORDER;
	        colorBottom = COLOR_SELECTED_MENU_BORDER;
		}
		
		// Construct the cell to hold 1 menu item
		// For the onMouseOver event, set showHighlight() & RemoveHighlight() 
		// function calls to pass the menu item name and index.  For example: showHighlight("home", 0)
		// Make the image id and name attributes equal to the name of the menu item.
		// STYLE='text-decoration:none; font-weight: bold'
		strTable+= "<td><table id=\"" + MENU_ITEM_TABLE_PREFIX + d.mainMenu.menuItems[i].name + "\" style=\"width: 100%; border: 0;";
		strTable+= "border-width: " + MAIN_MENU_FIXED_BORDERS_SIZE + "; border-style: solid;"
		strTable+= "border-left-color: " + colorLeft  + ";";
		strTable+= "border-right-color: " + colorRight + ";";
		strTable+= "border-top-color: " + colorTop + ";";
		strTable+= "border-bottom-color: " + colorBottom + "\"";
		strTable+= " cellspacing=\"0\" cellpadding=\"0\"><tr>";
		strTable+= "<td align='center'>";
		if (d.mainMenu.menuItems[i].target != '')
		{
			strTable+= "<a class='" + strClassName + "' href=\"/" + d.mainMenu.menuItems[i].target + "\" onMouseOver=\"showHighlight('" + MENU_ITEM_TABLE_PREFIX + d.mainMenu.menuItems[i].name + "', " + i + ")\" onMouseOut=\"removeHighlight('" + MENU_ITEM_TABLE_PREFIX + d.mainMenu.menuItems[i].name + "', " + i + ")\">";
			strTable+= d.mainMenu.menuItems[i].displayValue; 
			strTable+= "</a>"
		}
		else
		{	
			strTable+= "<span class='" + strClassName + "' onMouseOver=\"showHighlight('" + MENU_ITEM_TABLE_PREFIX + d.mainMenu.menuItems[i].name + "', " + i + ")\" onMouseOut=\"removeHighlight('" + MENU_ITEM_TABLE_PREFIX + d.mainMenu.menuItems[i].name + "', " + i + ")\">";
			strTable+= d.mainMenu.menuItems[i].displayValue;
			strTable+="</span>"; 
		}
		strTable+= "</td>";
		strTable+= "</tr></table></td>";
	}

	strTable = strTable + "</tr></table>";	// Table is fully constructed at this point.

	var divMenu = d.getElementById(MAIN_MENU_DIV_ID);
	var divMenuStyle = getStyleObject(divMenu);

	configureMenuBorder(divMenu,d.getElementById(MAIN_MENU_BORDER_DIV_ID));

	divMenu.innerHTML = strTable;

	d.mainMenu.activeItemIndex = currentItemIndex;
}

// Creates the table HTML that will represent the sub-menu and returns the html as a string
// Only called from submenuVisibility when making a sub-menu visible.
// Undeclared parameters:
// 		index 1
//		..
//		index N
function createSubMenu()
{
	var menu = d.mainMenu;
	var activeIndexList = "";
	var strTable = "<table style='Z-INDEX: 100; border: 0px; border-left: 2px; border-right: 2px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: " + COLOR_SUB_MENU_BORDER + "; width: 100%' cellspacing=0 cellpadding=0>";

	for(i=0; i<=createSubMenu.arguments.length-1 && menu != null; i++)
	{
		menu = menu.menuItems[createSubMenu.arguments[i]].subMenu;
		strClassName = menu.menuItems[i].classDeselectedState;
		activeIndexList = activeIndexList + ", " + createSubMenu.arguments[i];
	}

	for(i=0; i<menu.menuItems.length; i++)
	{
		strTable+= "<tr><td>";
		strTable+= "<table id='" + MENU_ITEM_TABLE_PREFIX + menu.menuItems[i].name + "' style='width: 100%; background-color: " + COLOR_SUB_MENU_BACKGROUND + "; border: 0px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: " + COLOR_SUB_MENU_BORDER + "' cellspacing=0 cellpadding=0>";
		strTable+= "<tr><td style='text-align: left; cursor: hand' onclick=\"location.href='"+menu.menuItems[i].target+"'\" onMouseOver=\"showHighlight('" + MENU_ITEM_TABLE_PREFIX + menu.menuItems[i].name + "'" + activeIndexList + "," + i + ")\" onMouseOut=\"removeHighlight('" + MENU_ITEM_TABLE_PREFIX + menu.menuItems[i].name + "'" + activeIndexList + ", " + i + ")\">";
		strTable+= "<a class='" + strClassName + "'>";
		strTable+= "&nbsp;&nbsp;" + menu.menuItems[i].displayValue; 
		strTable+= "</a></td></tr></table></td></tr>";
	}

	strTable+= "</table>";

	return strTable;
}

/*
 * The Menu Border serves to catch mouse over events in order to hide sub-menus.
 * Style for the Menu Border div is set to reflect a width and height of twice that of the div menu
 * and overlaps the div menu on each side.  The purpose of this border is to detect when the user rolls 
 * off of the associated menu/submenu.  This methodology was used because no other (easier) method 
 * proved reliable when the mousing quickly.  The border div must always be "under" its associated menu div
 */
function configureMenuBorder(divMenu, divMenuBorder)
{
	var styleObjDivMenu = getStyleObject(divMenu);

	// Menu border div and its associated image share the same name part
	var styleMenuBorderDiv = getStyleObject(divMenuBorder);	
	var styleMenuBorderImage = getStyleObject(d.getElementById(divMenuBorder.id.replace('div','img')));

	styleMenuBorderDiv.zIndex = styleObjDivMenu.zIndex - 1;

	styleMenuBorderDiv.left = (getPixelNumber(styleObjDivMenu.left) - 40) + 'px';
	styleMenuBorderDiv.top = (getPixelNumber(styleObjDivMenu.top) - 40) + 'px';
	styleMenuBorderDiv.width = (getPixelNumber(styleObjDivMenu.width) + 80) + 'px';
	styleMenuBorderDiv.height = (getPixelNumber(styleObjDivMenu.height) + 80) + 'px';
	styleMenuBorderImage.width = styleMenuBorderDiv.width;
	styleMenuBorderImage.height = styleMenuBorderDiv.height;
}

// Menu at the bottom of the page
function createFooterMenu()
{
	var strTable = "";

	for(i=0; i<d.mainMenu.menuItems.length; i++)
	{
		strTable = strTable + "<a href=/" + d.mainMenu.menuItems[i].target + ">" + d.mainMenu.menuItems[i].displayValue + "</a>";

		if(i != d.mainMenu.menuItems.length - 1)
			strTable = strTable + " | ";
		else
			strTable = strTable + "<br>";
	}

	var tdFooterMenu = d.getElementById('tdFooterMenu');

	tdFooterMenu.innerHTML = strTable;
}

// Show a menu item as highlighted (i.e. on mouse over event).  When this new menu
// item is highlighted, previous highlighted or "on" states of other menu items must
// be reversed.
//
// There will always be at least 2 arguments passed to this function, despite the fact
// that they are undeclared here:
// 		menuItemTableId 
//		index_to_highlight1
//    	..
//		index_to_higlight
//
// In the case of main menu events, this function is always called with only 1 index
function showHighlight()
{
	var menu = d.mainMenu;
	var menuItemTableId = showHighlight.arguments[0];
	var itemIndex = showHighlight.arguments[showHighlight.arguments.length-1];	// item to highlight

	// Hide the sub-menu of the last main menu item that had been in an "on" state
	hideLastSubmenu(showHighlight.arguments.length-1);

	// Cycle through all of the given menu item indexes
	var activeIndexList = "";
	for(i=1; i<showHighlight.arguments.length-1; i++)
	{
		activeIndexList = activeIndexList + ", " + menu.rolloverItemIndex;
		menu = menu.menuItems[showHighlight.arguments[i]].subMenu;
	}
	activeIndexList = activeIndexList + ", " + itemIndex;

	// Only put the menu item that is being rolled over in a rollover image state if it is not active / on already
	if((menu.activeItemIndex != itemIndex) || (showHighlight.arguments.length > 2))
	{
		elem = d.getElementById(menuItemTableId);
		
		if (menu.highlightStyle==HIGHLIGHT_STYLE_BORDER)
		{
			elem.style.borderTop="1px solid " + COLOR_MENU_HOVER_BORDER;
			elem.style.borderBottom="1px solid " + COLOR_MENU_HOVER_BORDER;
			elem.style.borderLeft="1px solid " + COLOR_MENU_HOVER_BORDER;
			elem.style.borderRight="1px solid " + COLOR_MENU_HOVER_BORDER;
		}
		else	// HIGHLIGHT_STYLE_BACKGROUND
		{
			elem.style.backgroundColor=COLOR_SUB_MENU_HOVER;
		}
	}
	
	// Set the rollover item, indicating that there is an item in the menu in a rollover state
	menu.rolloverItemIndex = itemIndex;

	// In the case of events related to main menu items, 
	// the call will be as such: submenuVisibility('visible', main_menu_on_index);
	eval("submenuVisibility('visible'" + activeIndexList + ");");
}

// Remove the highlighted state of a menu item
//
// There will always be at least 2 arguments passed to this function, despite the fact
// that they are undeclared here:
// 		menu_item_table_name
//		index_to_highlight1
//    	..
//		index_to_higlight
//
// In the case of main menu events, this function is always called with only 1 index
function removeHighlight()
{

	var menu = d.mainMenu;
	var menuItemTableName = removeHighlight.arguments[0];
	var itemIndex = removeHighlight.arguments[removeHighlight.arguments.length-1];

	for(i=1; i<removeHighlight.arguments.length-1; i++)
		menu = menu.menuItems[removeHighlight.arguments[i]].subMenu;

	// Only remove highlighting if active item is not the selected menu item
	if((menu.activeItemIndex != itemIndex) || (removeHighlight.arguments.length > 2))
	{
		elem = d.getElementById(menuItemTableName);
		if (menu.highlightStyle==HIGHLIGHT_STYLE_BORDER)
		{
			elem.style.borderTop="1px solid " + COLOR_UNSELECTED_MENU_BORDER;
			elem.style.borderBottom="1px solid " + COLOR_UNSELECTED_MENU_BORDER;
			elem.style.borderLeft="1px solid " + COLOR_UNSELECTED_MENU_BORDER;
			elem.style.borderRight="1px solid " + COLOR_UNSELECTED_MENU_BORDER;
		}
		else	// HIGHLIGHT_STYLE_BACKGROUND
			elem.style.backgroundColor=COLOR_SUB_MENU_BACKGROUND; 
	}
}

// Hide the sub-menu of the last menu item that was "on"
function hideLastSubmenu(menuLevel)
{
	var menu = d.mainMenu;
	var activeIndexList = ", " + menu.rolloverItemIndex;

	for(i=1; i<menuLevel && menu != null; i++)
	{
		menu = menu.menuItems[menu.rolloverItemIndex].subMenu;
		activeIndexList = activeIndexList + ", " + menu.rolloverItemIndex;
	}

	if(menu != null)
		if(menu.rolloverItemIndex > NO_ROLLOVER_MENU_ITEM)
			eval("submenuVisibility('hidden'" + activeIndexList + ");");
}

// If visible is indicated, this function will create a sub-menu and display it.
// if hidden is indicated, the sub menu is made invisible by making its sub-menu border invisible
// Called during rollovers.  Undeclared Arguments:
// 		visibility		hidden or visible state
//  	itemIndex 1		menu item index list
//  	..
// 		itemIndex N
//
// In the case of the rollover of a main menu item, there will only be 1 itemIndex passed (the itemIndex
// of the menu item that has been rolled over
function submenuVisibility()
{
	var menu = d.mainMenu;
	
	// The active index list includes the menu item that has just been rolled over.  This index is assumed
	// to have been set in a calling function in response to the rollover event.
	var activeIndexList = ", " + menu.rolloverItemIndex;
	var visibility = submenuVisibility.arguments[0];	// visible or hidden?
		
	// In the case of a main menu item rollover and we are trying to highlight the rolled over item, 
	// this item index and the rollover index will always be the same.
	var itemIndex = submenuVisibility.arguments[submenuVisibility.arguments.length-1];

	// Dont enter this loop if we have only 1 active index passed
	for(i=1; i<submenuVisibility.arguments.length-1 && menu != null; i++)
	{
		menu = menu.menuItems[submenuVisibility.arguments[i]].subMenu;
		activeIndexList = activeIndexList + ", " + menu.rolloverItemIndex;
	}

	// If we have a sub-menu...
	if(menu != null && menu.menuItems[itemIndex].subMenu != null && menu.menuItems[itemIndex].subMenu != '')
	{
		// Sub menu div ids follow the nomenclature: SUB_MENU_DIV_PREFIX[X], where X=the index of the parent-menu.  Each of these
		// divs are expected to have been declared in the aspx or html page.
		var divSubMenu = d.getElementById(SUB_MENU_DIV_PREFIX + (submenuVisibility.arguments.length-1));

		// if visible, create the sub menu and add it to the sub-menu's div, otherwise reset the rollover item index
		if(visibility == 'visible')
			divSubMenu.innerHTML = eval("createSubMenu(" + activeIndexList.substring(2) + ");");	// strip the leading ", " via substring
		else
			menu.rolloverItemIndex = NO_ROLLOVER_MENU_ITEM;	// ZZZZZ: ????

		// Sub menu border div ids follow the nomenclature: divMenuBorderLX, where X=the index of the sub-menu.  Each of these
		// divs are expected to have been declared in the aspx or html page.
		var divMenuBorderLX = d.getElementById('divMenuBorderL'+(submenuVisibility.arguments.length-1));
		var divSubmenuStyle = getStyleObject(divSubMenu);

		// Display or hide the sub-menu border
		divSubmenuStyle.visibility = visibility;
		getStyleObject(divMenuBorderLX).visibility = visibility;	// zzzzz: ????

		if (visibility == 'visible')
		{
			var divParentMenu 		= d.getElementById(menu.elementId);
			var divParentMenuStyle 	= getStyleObject(divMenu);

			divSubmenuStyle.top  = getPixelNumber(divParentMenuStyle.top) + getPixelNumber(divParentMenuStyle.height) - 4;

			var menuItemWidth = getApproxMenuItemWidth(menu);			
			divSubmenuStyle.left = getPixelNumber(divParentMenuStyle.left) + (menuItemWidth * itemIndex);

			configureMenuBorder(divSubMenu,divMenuBorderLX);
		}
	}
}

// Approximate the width of each menu item
// Assume: Each menu item is the same size and their aggregate width is the same
// 		   as the div element that surrounds the menu's table
// ZZZZZ: Problem: Our menu items are not the same size, therefore this function will not work in many cases.  Not sure
// how to get actual width for each, possibly walk dom to the TD element
// 
function getApproxMenuItemWidth(menu)
{
	var divMenu 		= d.getElementById(menu.elementId);
	var divMenuStyle 	= getStyleObject(divMenu);
	var menuWidth 		= getPixelNumber(divMenuStyle.width);
	var menuItemWidth 	= Math.round(menuWidth / menu.menuItems.length);
	return menuItemWidth;
}


// Returns the style of the given element
function getStyleObject(object)
{
	// if document.layers exists, then must be Netscape version 4
	return (document.layers)?object:object.style;
}

function getPixelNumber(value)
{
	if(value.indexOf('%') > -1)
	{
		return;
	}

	var intUnitStart = value.indexOf('px');

	if(intUnitStart > 0)
		return parseInt(value.substring(0,intUnitStart));
	else
		return parseInt(value);
}

/* Create a menu item object, given up, down and over images, target url, plus zzzzz */
function createMenuItem(menuItemIndex, name, displayValue, target, subMenu, classSelectedState, classOverState, classDeselectedState)
{
	menuItem = new Object();

	menuItem.name = name;
	menuItem.menuItemIndex = menuItemIndex;
	menuItem.displayValue = displayValue;

	menuItem.classDeselectedState= classDeselectedState;
	menuItem.classOverState = classOverState;
	menuItem.classSelectedState = classSelectedState;

	/* Target URL */
	menuItem.target = target;

	menuItem.subMenu = subMenu;

	return menuItem;
}

/****************************************************************************
 * Metadata Definition Section
 ****************************************************************************/
 
// Create the menu object and sub-menu objects. This method only sets values in the metadata store.
// It does not create HTML or otherwise affect UI behavior
function createMenuObjects()
{
	if(!d.mainMenu)
	{
		d.mainMenu = new Object();
		d.mainMenu.menuItems=new Array();
	}

	/* Define the menu location */
	d.mainMenu.name="Main";
	d.mainMenu.elementId=MAIN_MENU_DIV_ID;
	d.mainMenu.highlightStyle=HIGHLIGHT_STYLE_BORDER;

	d.mainMenu.menuItems[0] = createMenuItem(0, 'home','Home','default.aspx','','DLCMenuTextSelected','DLCMenuTextOver','DLCMenuTextDeselected');
	d.mainMenu.menuItems[1] = createMenuItem(1, 'services','Services','',createSolSubMenuObject(d.mainMenu, 1),'DLCMenuTextSelected','DLCMenuTextOver','DLCMenuTextDeselected');
	d.mainMenu.menuItems[2] = createMenuItem(2, 'research','Research','', createSolSubMenuObject(d.mainMenu, 2),'DLCMenuTextSelected','DLCMenuTextOver','DLCMenuTextDeselected');
	d.mainMenu.menuItems[3] = createMenuItem(3, 'site map','Site Map','web%20page%20library/site_map.aspx','','DLCMenuTextSelected','DLCMenuTextOver','DLCMenuTextDeselected');
	d.mainMenu.menuItems[4] = createMenuItem(4, 'about','About','',createSolSubMenuObject(d.mainMenu, 4),'DLCMenuTextSelected','DLCMenuTextOver','DLCMenuTextDeselected');
	d.mainMenu.menuItems[5] = createMenuItem(5, 'contactus','Contact','web%20page%20library/contact.aspx','','DLCMenuTextSelected','DLCMenuTextOver','DLCMenuTextDeselected');

	d.mainMenu.activeItemIndex = NO_ACTIVE_MENU_ITEM;
	d.mainMenu.rolloverItemIndex = NO_ROLLOVER_MENU_ITEM;
}

// Create the Solution Sub Menu
function createSolSubMenuObject(parentMenu, parentMenuItemIndex)
{
	var menu = new Object();
	
	menu.menuItems=new Array();
	
	menu.elementId=SUB_MENU_DIV_PREFIX + parentMenuItemIndex;
	menu.parentMenu=parentMenu;
	menu.highlightStyle=HIGHLIGHT_STYLE_BACKGROUND;

	switch (parentMenuItemIndex)
	{
		case 1:
			menu.name="sub-services";
			menu.menuItems[0] = createMenuItem(0, 'plan',  'QuickLaunch','/web%20page%20library/services_quicklaunch.aspx','','DLCSubMenuTextSelected','DLCSubMenuTextOver','DLCSubMenuTextDeselected');
			menu.menuItems[1] = createMenuItem(1, 'migrate', 'Migration','/web%20page%20library/services_migration.aspx','','DLCSubMenuTextSelected','DLCSubMenuTextOver','DLCSubMenuTextDeselected');
			menu.menuItems[2] = createMenuItem(2, 'onsitetrain', 'On-Site Training','/web%20page%20library/services_onsite_training.aspx','','DLCSubMenuTextSelected','DLCSubMenuTextOver','DLCSubMenuTextDeselected');
			menu.menuItems[3] = createMenuItem(3, 'archdev', 'Architecture & Custom Development','/web%20page%20library/services_architecture_implementation.aspx','','DLCSubMenuTextSelected','DLCSubMenuTextOver','DLCSubMenuTextDeselected');
			menu.menuItems[4] = createMenuItem(3, 'bussol', 'Solutions for Business Needs','/web%20page%20library/services_business_solutions.aspx','','DLCSubMenuTextSelected','DLCSubMenuTextOver','DLCSubMenuTextDeselected');
		break;
		case 2:
			menu.name="sub-research";
			menu.menuItems[0] = createMenuItem(0, 'links', 'Links to Resources','/web%20page%20library/research_center.aspx','','DLCSubMenuTextSelected','DLCSubMenuTextOver','DLCSubMenuTextDeselected');
			menu.menuItems[1] = createMenuItem(1, 'blog', 'SharePoint 2007 Blog','/teamblog','','DLCSubMenuTextSelected','DLCSubMenuTextOver','DLCSubMenuTextDeselected');
		break;
		case 4:
			menu.name="sub-about";
			menu.menuItems[0] = createMenuItem(0, 'aboutus',  'About Us','/web%20page%20library/about.aspx','','DLCSubMenuTextSelected','DLCSubMenuTextOver','DLCSubMenuTextDeselected');
			menu.menuItems[1] = createMenuItem(1, 'careers', 'Careers','/web%20page%20library/careers.aspx','','DLCSubMenuTextSelected','DLCSubMenuTextOver','DLCSubMenuTextDeselected');
			menu.menuItems[2] = createMenuItem(2, 'partners', 'Our Partners','/web%20page%20library/partners.aspx','','DLCSubMenuTextSelected','DLCSubMenuTextOver','DLCSubMenuTextDeselected');
		break;
		default:
			alert('Undefined sub-menu');			
	}
	
	
	menu.rolloverItemIndex = NO_ROLLOVER_MENU_ITEM;

	return menu;
}