//JavaScript menu implementation
//
//coded by and copyright simon[at]simonhaywood.com
//
//copying and re-use is permitted. go ahead and be my guest!
//I ask only that if it works for you, and you use it
//in whole or part, that you drop me a line and let me know-
//but please note that the code is "as-is". There's no warranty.
//
//If you find a problem with or improve this code - please let me know about that too!
//
//This is version 1.1 July 2008
//
//To make this work, you'll need 4 files, in the same webserver folder:
//
//the html file				java_menus.html
//the JavaScript file (this file) 	java_menus.js
//the css style sheet			java_menus.css
//the menu content data file		java_menus.dat
//
//the menu content data file can be used to specify up to 10 menus,
//each with up to 10 items. check further notes in this file for syntax
//
//tested with mozilla and safari on Mac OSX and IE on WindowsXP
//
//----------------------------------------------------
//

//window.document.title="JavaScript Menus";

//text selection really mucks up the way the menus work
//so these two dummy functions prevent it happening

document.onselectstart = function() {return false;} // internet explorer
document.onmousedown = function() {return false;} // mozilla

var http_request=false				//used when reading the .dat file

var box_height=28				//the height of all the boxes.
var box_top_start=5				//the topmost pixel of the menu title row of boxes
var box_width=250				//the width of the menu boxes.
var menubar_width=818				//the width of the menubar. used only to determine if menus fall "off the page"

var box_left_start=10				//the leftmost pixel of the first menu box
var box_left_position				//will store the leftmost pixel of each column of menu boxes
var box_list_left_position			//will store the leftmost pixel of each column of list boxes

var last_item="10"				//the <div id> of the last list item to be selected. this one's just for starters
var last_marker="m0"
var last_abstract="a0"

var list_visible=false				//flag used to determine if the lists are visible. they start out not being.
var mouse_over_menu=false

var marker=""


var list_item_count = new Array();		//1 dimensional array to hold the number of list items per menu
var menu_title = new Array();			//1 dimensional array to hold the title for each menu
var menu_abstract = new Array();		//1 dimensional array to hold the abstract for each menu

var list_item = new Array();			//set up a 3 dimensional array where:
 for (var i=0;i<10;i++)				//list_item[-]       will hold the menu index number
 {						//list_item   [-]    will hold the list index number (max size=10)
 list_item[i] = new Array();			//list_item      [0] will hold the list item text
 for (var j=0;j<10;j++)				//list_item      [1] will hold the list item link
 {
 list_item[i][j] = new Array();
 }
 }


//populate the 3 dimensional array with the parsed data file
//note, this parser, is designed only to work with a specific
//type of data. It won't work if you get the data format wrong.
//
//the data should be a text file in the format:
//
//MenuTitle1?Item1Text=Item1Link;Item2Text=Item2Link;ItemNText=ItemNLink+
//MenuTitle2?Item1Text=Item1Link;Item2Text=Item2Link;ItemNText=ItemNLink+
//MenuTitle3?Item1Text=Item1Link;Item2Text=Item2Link;ItemNText=ItemNLink+
//
//you can have up to 10 menu columns, each with up to 10 items.

var menu_data=loadDatFile("/site_data/MenuList.dat");	//load the .dat file
var menu_total=menu_data.split("+"); 		//menu_total as now an array with each element holding an entire menu/item list
var menu_count=menu_total.length-1; 		//menu_count is now the number of menus
for (var i=0;i<menu_count;i++) 			//loop through each menu title
{
var temp_title=menu_total[i].split("?"); 	//temp title is always a two element array. [0]=menu title + abstract and [1]=entire item list

var temp_abstract_title=temp_title[0].split("[");

menu_title[i]=temp_abstract_title[0];           //menu_title is now an array of the menu titles.
menu_abstract[i]=temp_abstract_title[1];        //menu_abstract is now an array of the menu menu abstracts.

var temp_items=temp_title[1].split(";");      	//temp_items holds an array of the list items including link for this menu title
list_item_count[i]=temp_items.length          	//list_item_count[] is the number of items for this menu title
for (var j=0;j<list_item_count[i];j++)        	//loop through each list item
{
temp_link=temp_items[j].split("=")		//temp_link holds the list item text and list item link
list_item[i][j][0]=temp_link[0]			//temp_link[0] holds the text
list_item[i][j][1]=temp_link[1]			//temp_link[1] holds the link
}
}



function menus_top(marker)
{


box_left_position=box_left_start
title_box_width=0

for (var i=0;i<menu_count;i++)			//loop through all the available menus
{
box_left_position=box_left_position+title_box_width	//set the leftmost pixel for each column according to the width of the previous menu
box_top_position=box_top_start			//set the topmost pixel for this row
title_box_width=(menu_title[i].length*8)+32		//set the width of the menu according to the number of characters * character width (approximate but ok)

//draw the menu heading row of boxes
//each box gets a <div id> of a single digit - set by the counter i

eval(document.write("<div id="+ i +" style=\"height:"+box_height+"px; left:"+box_left_position+"px; position: absolute; top:"+box_top_position+"px; width:"+title_box_width+"px; visibility:visible; z-index:10; cursor:pointer; \"class=\"box_01\"; onmouseup=\"change_menu(this.id, location.pathname)\" onmousedown=\"mouse_down_on_menu(this.id, location.pathname)\"onmouseout=\"off_menu()\"onmouseover=\"change_menu(this.id, location.pathname)\""+"\"> "+menu_title[i]+"</div>"));


//draw the little "marker" boxes that sit above the menus
//each one gets a <div id> of "m"+ a single digit, set by the counter i

if (location.pathname.substr(location.pathname.length-10)=="home.shtml")
{

if (i==0)
{
marker_left_position=0
marker_width=title_box_width+box_left_start
}
else
{
marker_left_position=box_left_position
marker_width=title_box_width
}
if (i==menu_count-1)
{
marker_left_position=box_left_position
marker_width=(menubar_width+17)-marker_left_position
}
eval(document.write("<div id=m"+ i +" style=\"height:5px; left:"+marker_left_position+"px; position: absolute; top:0px; width:"+marker_width+"px; visibility:hidden; z-index:9; cursor:pointer;  \"class=\"box_01\""+"\">"+"</div>"));

eval(document.write("<div id=a"+ i +" style=\"height: 146px; width: 347px; left: 0px; position: absolute; top: -146px; z-index: 1; visibility:hidden\">"+"<img src=\"/site_files/oblong_black_01.jpg\" alt=\"\" style=\"height: 146px; left: 0px; position: absolute; top: 0px; width: 347px; \" /><div style=\" left: 20px; width: 307px;  top: 5px; height: 116px;  position: absolute; \" class=\"text_style_01\">"+menu_abstract[i]+"</div></div>"));

update_marker("m0")

}


//we need to go through all the items in the list, to check their length.
//if the text is longer than the menu title text, then we'll need to make
//the list item boxes wider.

list_box_width=title_box_width				//set the starting point (minimum width)
for (var j=1;j<=list_item_count[i];j++)			//loop through all the items in this list
{
if (list_item[i][j-1][0].length*8>list_box_width)	//check if this item is longer than the current width
{
list_box_width=(list_item[i][j-1][0].length*8)+10	//and if so, increase the current width.
}

if (list_box_width+box_left_position>menubar_width)
{
box_list_left_position=menubar_width-list_box_width
}
else
{
box_list_left_position=box_left_position
}

}

for (var j=1;j<=list_item_count[i];j++)		//for each menu heading, loop through all the available list items
{
box_top_position=box_top_position+box_height	//set the topmost pixel for each list item box, incrementing for each row

//draw the list item boxes, one column at a time
//each box gets a <div id> of a two digit string, created by joining together the counters i and j as strings
//for the first menu column, each successive list item box has a <div id> of 10, 20, 30 etc...
//for the second menu column, each successive list item box has a <div id> of 11, 21, 31 etc...
//for the third menu column, each successive list item box has a <div id> of 12, 22, 32, etc...
//and so it goes on...

eval(document.write("<div id="+j+i+" style=\"height:"+box_height+"px; left:"+box_list_left_position+"px; position: absolute; top:"+box_top_position+"px; width:"+list_box_width+"px; visibility:hidden; z-index:10; cursor:pointer; \"class=\"box_02\"onmouseout=\"unhighlight_listelement(last_item)\"onmouseover=\"highlight_listelement(this.id)\"onmouseup=\"select_item(this.id)\""+"\"> "+list_item[i][j-1][0]+"</div>"));
}
}

//draw a nice big text-free background div element.
//partly to look pretty, but mostly to catch mouse-up events that don't occur over any other div element

//eval(document.write("<div id=\"100\" style=\"height:1500px; left:10px; position: absolute; top:0px; width:800px; visibility:visible; z-index:1;\" class=\"box_00\" onmouseup=\"hide_list(last_item.slice(1,2))\"></div>"));

//draw a nice black line box thing to sit behind the menu, to highlight it.
//eval(document.write("<div id=\"204\" style=\"height:25px; left:10px; position: absolute; top:0px; width:800px; visibility:visible; z-index:7;\" class=\"black_line\" onmouseup=\"hide_list(last_item.slice(1,2))\">"+""+"</div>"));


}

//----------------------------------------------------
function hide_from_container()
{
if (mouse_over_menu==false)
{
hide_list(last_item.slice(1,2))
}
}

function off_menu()
{
mouse_over_menu=false
}

//----------------------------------------------------

function hide_list(element_id)
//
//gets called when a list needs to be hidden
//this can happen when:
//called by function select_element - when the user has chosen a list item
//called by function change_menu - when the user moves from one menu list to another
//called by function mouse_down_on_menu - when the user clicks on a menu, when a list is already visible
//
//element_id is converted from a string to a numeric value, and then used as the index of array list_item_count
//variable k then uses this value to loop through all the items in that list
//each element in that list is then set to be hidden
 
{
{
 list_visible=false				//set the flag to show that there is no list visible
 for (var k=1;k<=list_item_count[parseFloat(element_id)];k++)
 {
  window.document.getElementById(k+element_id).style.visibility="hidden";
 }
 window.document.getElementById(element_id).style.background="#b2b2b2"
}
}

//----------------------------------------------------



function change_menu(element_id, pathname)
//
//gets called from an onmouseover event of the menu title div elements
//if any list is already visible, then we should hide that list
//and then show the new list
//
//if there is no list already visible, then we should do nothing.
//
//last_item holds the <div id> of the last highlighted list item div element
//it will be a 2 digit string. the 2nd digit of which will be the <div id> of
//the corresponding menu div element.



{

mouse_over_menu=true

 if (list_visible==true)
 {
  hide_list(last_item.slice(1,2))
  show_list(element_id)


if (pathname.substr(pathname.length-10)=="home.shtml")
{
update_marker("m"+element_id)
update_abstract("a"+element_id)
}

}

}

//----------------------------------------------------

function show_list(element_id)
//
//gets called to show (unhide) a whole list of items for a given menu
//element_id is the <div id> of the menu title div element
//the last_item is set to be the first item in this list by adding the string "1" and the string element_id
//
//element_id is converted from a string to a numeric value, and then used as the index of array list_item_count
//variable k then uses this value to loop through all the items in that list
//each element in that list is then set to be visible

{
 list_visible=true		//set the flag to indicate that a list of items is now visible
 last_item="1"+element_id	//the last_item is set to be the top item in this list by adding strings "1" and element_id
 for (var k=1;k<=list_item_count[parseFloat(element_id)];k++)
 {
  window.document.getElementById(k+element_id).style.visibility="visible";
 }
  window.document.getElementById(element_id).style.background="#909090"
}

//----------------------------------------------------

function highlight_listelement(element_id)
//
//called by onmouseover event of the list item div elements
//element_id is the <div id> of the current list item
//change the background colour of the current list item

{
 window.document.getElementById(element_id).style.background="#bb1111";
 last_item=element_id
}

//----------------------------------------------------

function unhighlight_listelement(element_id)
//
//called by onmouseout event of the list item div elements
//element_id is the <div id> of the current list item
//change the background colour of the current list item
{
 window.document.getElementById(element_id).style.background="#dddddd"
}

//----------------------------------------------------

function select_item(element_id)
//
//gets called when a mouseup event occurs over a list element.
//element_id holds the <div id> of the element
//the element_id will be a 2 digit string
//the first digit will be the item number
//the second digit will be the menu number
//the array list_item[menu number][item number][1] holds the link for that menu item

{
 hide_list(last_item.slice(1,2))					//hide the menu items//
// alert(list_item[element_id.slice(1,2)][element_id.slice(0,1)-1][1])	//do something with the link
location.href=list_item[element_id.slice(1,2)][element_id.slice(0,1)-1][1]
}

//----------------------------------------------------

function mouse_down_on_menu(element_id, pathname)
//
//gets called on a mounsedown event over a menu title.
//if any list is visible, then this event should hide all the lists
//if there are no lists visible, then this event should show the correct list
//element_id hold the <div id> of the menu title
//element_id will be a single digit string


{

 if (list_visible==true)
 {
 hide_list(element_id)
 }
 else
 {
 if (list_visible==false)
 show_list(element_id)
 }
if (pathname.substr(pathname.length-10)=="home.shtml")
{
update_marker("m"+element_id)
update_abstract("a"+element_id)
}

}

//----------------------------------------------------

function update_marker(element_id)
{
window.document.getElementById(last_marker).style.visibility="hidden";
window.document.getElementById(element_id).style.visibility="visible";
last_marker=element_id
}

//----------------------------------------------------

function update_abstract(element_id)
{
window.document.getElementById(last_abstract).style.visibility="hidden";
window.document.getElementById(element_id).style.visibility="visible";
last_abstract=element_id
}

//----------------------------------------------------

function halo_show(element_id)
{
window.document.getElementById(element_id).style.visibility="visible";
window.document.body.style.cursor="pointer";
}

//----------------------------------------------------

function halo_hide(element_id)
{
window.document.getElementById(element_id).style.visibility="hidden";
window.document.body.style.cursor="auto";
}

//----------------------------------------------------
function loadDatFile(filename)

{
 if (window.XMLHttpRequest) 			//IE7, Mozilla
 {
  http_request=new XMLHttpRequest();
  http_request.open("GET",filename,false); 	//false, because this file needs to load sychronously
  http_request.send(null);
 }
 else if (window.ActiveXObject) 		//IE6
 {
  http_request=new ActiveXObject("Microsoft.XMLHTTP");
  http_request.open("GET",filename,false); 	//false, because this file needs to load sychronously
  http_request.send(null);
 }
 else return false;				//oh dear. it doesn't work with this browser.

return http_request.responseText;

}

function nothing()
{
alert("")
}