//  all code copyright by Phil Barnard; phil@perite.com
//  version 1.0 March 2010

/*  menu node structure

<TABLE>  id=menubar, menubar class
<TBODY> <ROW> id=menurow
<TD> onmouseover
	<div>  childNodes[1],  getElementsByTagName("DIV")[0],  children[0],  menuHeader class
	<ol>  childNodes[3],  getElementsByTagName("OL")[1],  children[1],  menuItems class, onmouseout
		<li>  cells[n].children[1].children[0]
		...
		<li>
	
*/

//-------------------------/  menu customisation

// menubar specs
var menuBarWidth = "800px";
var menuBarHeight = "20px";

// set these to match the CSS colours below
var menuHeaderRollover = "#DC143C"; // mouseover background color for menu headers
var menuitemRollover = "#DC143C";  // mouseover background color for menu items
var menuTextRollover = "white";  // mouseover text colour for headers and menu items


//-------------------------/  menu definition

// create our menus; the first menu is number 0
function insertMenubar(){

	// create a table with cells for each menu
	createTable(4);  // the number of menus
	
	// add the menus  (menunumber, text) starting with menu 0
	addMenu(0,'Home');
	addMenu(1,'Photos');
	addMenu(2,'Ham Radio');
	addMenu(3,'Contact');

	// add the menuitems (menunumber, text, url)
	addMenuItem(0,'Home page','../perite/index.html');

	addMenuItem(1,'Truck construction','../perite/truck.html');
	addMenuItem(1,'2005 Oz trip photos','../perite/2005-1.html');
	addMenuItem(1,'2007 Oz trip photos','../perite/2007-1.html');
	addMenuItem(1,'2009 Oz trip photos','../perite/2009-1.html');
	
	addMenuItem(2,'The shack','../vk7jj/index.html');
	addMenuItem(2,'Squid Poles','../vk7jj/squidpoles.html');
	addMenuItem(2,'Splat!','../vk7jj/splat.html');
	addMenuItem(2,'NextG Yagi','../vk7jj/nextgyagi.html');
	addMenuItem(2,'FC-40 tuner','../vk7jj/fc40.html');
	addMenuItem(2,'FT-857 notes','../vk7jj/ft857talk.html');
	addMenuItem(2,'APRS...','http://aprs.fi/?call=vk7jj-14&timerange=86400');
	addMenuItem(2,'NTARC club website...','http://www.ntarc.net');
	
	addMenuItem(3,'Contact info','../perite/contact.html');
	addMenuItem(3,'Home location','../perite/contact-map.html');
	addMenuItem(3,'Find the truck...','http://aprs.fi/?call=vk7jj-14&timerange=86400');

	// add the mouseover and click handlers
	addMenuActions();
}

//----------------------/ the rest

var curTDObj = "";  // captures a reference to the currently selected TD "menu" cell
var defaultHeaderColor = "";   // captures the default menu header background colour
var defaultMenuColor = "";   // captures the default menu background colour
var defaultMenuText = "";   // captures the default menu text color

function showMenu(tdObj){
	hideMenu();  // hide the currently open menu
	curTDObj = tdObj;
	defaultHeaderColor = tdObj.children[0].style.backgroundColor;  // save the current menu header background colour
	defaultMenuColor = tdObj.children[0].style.color; // save the current menu background colour
	tdObj.children[0].style.backgroundColor = menuHeaderRollover;  // change the header colour
	tdObj.children[0].style.color = menuTextRollover;  // change the header text colour
	tdObj.children[1].style.visibility = "visible";  // show the menuitems
}

function hideMenu(){
	if(!curTDObj) return;
	curTDObj.children[0].style.backgroundColor = defaultHeaderColor;  // reset the header colour
	curTDObj.children[0].style.color = defaultMenuColor;  // reset the header text colour
	curTDObj.children[1].style.visibility = "hidden";
}

function itemOver(my){
	defaultMenuText = my.style.color;  // save the original text colour
	my.style.backgroundColor = menuitemRollover;
	my.style.color = menuTextRollover;
}

function itemOut(my){
	my.style.backgroundColor = defaultMenuColor;
	my.style.color = defaultMenuText;
}

function addMenuActions(){
	// var menubar = document.getElementById("menubarID");
	var cellArray = document.getElementById("menurowID").getElementsByTagName('td');  // cellArray[0] = first <TD>
	var menuitems;
	for(i=0; i<cellArray.length; i++){

		// set the TD's onmouseover showMenu() handler
		cellArray[i].onmouseover = function(){showMenu(this);};
	
		// set the OL's onmouseout hideMenu() handler
		cellArray[i].children[1].onmouseout = function(){hideMenu();};
		
		// set the rollover handlers for each list item
		menuitems = cellArray[i].children[1].children;
		for (e in menuitems){
			menuitems[e].onmouseover = function(){itemOver(this);};
			menuitems[e].onmouseout = function(){itemOut(this);};
		}
	}
}

// menu item selction handler; invoked via menuitem.onclick
function go(url){
	hideMenu();
	if(url.match("http")){  // external links
		window.open(url);
	}
	else{
		document.location = url;	
	}

}



//------------------------------/ create a table dynamically


function createTable(colCount){
	var rowCount = 1;
	var menuTable = document.createElement("table");
	menuTable.height = menuBarHeight;
	menuTable.width = menuBarWidth;
	menuTable.cellPadding = 0;
	menuTable.cellSpacing = 0;
	menuTable.className = "menubar";
	menuTable.id = "menubarID";
	menuTable.onmouseout = function(){ hideMenu(); };
	var newRow = document.createElement("tr");
	newRow.id = "menurowID";
	for(i=0; i<colCount; i++){
		newRow.appendChild(document.createElement("td"));
	}
	var newTBody = document.createElement("tbody");
	newTBody.appendChild(newRow);
	menuTable.appendChild(newTBody);
	var menuWrapper = document.getElementById('menuWrapper');
	menuWrapper.innerHTML = "";
	menuWrapper.appendChild(menuTable);
}



//-------------------------/  menu constructors


// create and append a menu header div and a menuitems div
function addMenu(number,name){
	var menuDiv = document.createElement("div");
	menuDiv.className = "menuheader";
	var textnode = document.createTextNode(name);
	menuDiv.appendChild(textnode);
	
	var cellArray = document.getElementById("menurowID").getElementsByTagName('td');  // grab cell array
	cellArray[number].appendChild(menuDiv);
	
	var menuItemsOL = document.createElement("ol");
	menuItemsOL.className = "menu";
	cellArray[number].appendChild(menuItemsOL);
}

// create and append a menu item
function addMenuItem(number,text,url){
	var menuItem = document.createElement("li");
	var textnode = document.createTextNode(text);
	menuItem.className = "menuitem";
	menuItem.appendChild(textnode);
	menuItem.onclick = function(){ go(url); };
	var cellArray = document.getElementById("menurowID").getElementsByTagName('td');  // grab cell array
	cellArray[number].children[1].appendChild(menuItem);	// append each menuitem to the menu OL of the relevant cell
}