// --------------------------------------- Menus
//
// Written by Brian Davies
// May 2002
//
// --------------

// 8/12/02 - added tabindex
// 6/19/03 - revised to be object-oriented

// --------------------------------------- Instructions

/*

The menu launcher divs and menu item divs are class controls.
The menu launcher divs have an id specified with the glyph argument.
The menu panel divs are class menu with id glyph + "menu".

The sizes specified in the variables are meant to look good with these in the stylesheet:

div.controls { font-family: Verdana, sans-serif; }
div.controls a, div.menutext p { font-size: 7pt; }

div.controls { background-color: #909522; }
div.controls a { color: #E1E4AA; }

div.controls a {
	padding: 4px 8px;
	position: absolute;
	top: 0px; left: 0px; height: 12px;
}

div#search  { top:  64px; left: 327px; height:  20px; width:  62px; }
div#help    { top:  64px; left: 388px; height:  20px; width:  54px; }

div#searchmenu { top: 84px; left: 325px; }
div#helpmenu { top: 84px; left: 387px; }

The padding and position of the div.controls a is crucial for functioning.

*/

// --------------------------------------- Variables

var BORDERWIDTH = 1;
var MENUWIDTH = 140;
var MENUHEIGHT = 20;

var MENUZINDEX = 9999;

var HILITEBGCOLOR = "#5C81B7"; //"#6286BA"
var HILITECOLOR = "white";

// --------------------------------------- Popup Menu Objects

// Class

function menu (label, glyph, link)
{
	this.label = label;
	this.glyph = glyph;

	if (link == null)  // link is optional - usually, clicking on a launcher does nothing
		this.link = "javascript:void (0);";
	else
		this.link = link;

	this.borderwidth = BORDERWIDTH;
	this.menuwidth = MENUWIDTH;
	this.menuheight = MENUHEIGHT;

	this.menuitemlabels = new Array ();
	this.menuitemlinks = new Array ();

	this.additem = addmenuitem;

	this.write = writemenu;
}

// Add Menu Item Method

function addmenuitem (label, link)
{
	this.menuitemlabels [this.menuitemlabels.length] = label;
	this.menuitemlinks [this.menuitemlinks.length] = link;
}

// Write Menu Method

var tabindex = 1;

function writemenu ()
{
	var html = "";

	html += '<div class="controls" id="' + this.glyph + '">'
		+ '<a tabindex="' + tabindex + '" id="' + this.glyph + 'link" '
		+ 'href="' + this.link + '" '
		+ 'onmouseover="linkFocus (\'' + this.glyph + '\', \'' + this.glyph + 'link\', \'' + this.glyph + 'menu\');" '
		+ 'onmouseout="linkBlur ();" '
		+ 'onfocus="linkFocus (\'' + this.glyph + '\', \'' + this.glyph + 'link\', \'' + this.glyph + 'menu\');" '
		+ '>'
		+ this.label + '</a></div>';

	tabindex ++;

	if (this.menuitemlabels.length > 0)
	{
		html += '<div class="menu" id="' + this.glyph + 'menu" style="height: ' + (this.borderwidth + (this.menuitemlabels.length * (this.borderwidth + this.menuheight))) + 'px; width: ' + (this.menuwidth + (2 * this.borderwidth)) + 'px; visibility: hidden; z-index: ' + MENUZINDEX + ';" '
			+ 'onmouseover="linkFocus (\'' + this.glyph + '\', \'' + this.glyph + 'link\', \'' + this.glyph + 'menu\');" onmouseout="linkBlur ();">';

		for (var i = 0; i < this.menuitemlabels.length; i++)
		{
			html += '<div class="controls" '
			+ 'style="top: ' + (this.borderwidth + (i * (this.borderwidth + this.menuheight))) + 'px; left: ' + this.borderwidth + 'px; '
			+ 'height: ' + this.menuheight + 'px; width: ' + this.menuwidth + 'px;">'
			+ '<a tabindex="' + tabindex + '" href="' + this.menuitemlinks [i] + '"'
			+ ' onmouseover="menuItemMouseOver (this);" onmouseout="unhiliteMenuItem (this);" '
			+ 'onfocus="hiliteMenuItem (this);" onblur="unhiliteMenuItem (this);" '
			+ 'style="width: ' + (this.menuwidth - 16) + 'px;">'
			+ this.menuitemlabels [i]
			+ '</a></div>';

			tabindex ++;
		}

		html += '</div>';
	}

	document.write (html);
}

/*
function writemenuitems ()
{
}
*/

// --------------------------------------- Popup Menu Functions

// Variables

var currentDiv = null;
var currentText = null;
var currentMenu = null;

// Public Functions

function linkFocus (divid, textid, menuid) {
	deactivateMenu (currentDiv, currentText, currentMenu);
	activateMenu (divid, textid, menuid);
}

function linkBlur () {
	deactivateMenu (currentDiv, currentText, currentMenu);
}

// Menu Functions

function activateMenu (divid, textid, menuid) {
	hiliteTitle (divid, textid);
	openMenu (menuid);
}

function deactivateMenu (divid, textid, menuid) {
	closeMenu (menuid);
	unhiliteTitle (divid, textid);
}

function hiliteTitle (divid, textid) {
	if (divid && textid) {
		//document.getElementById (textid).style.backgroundColor = "black";
		document.getElementById (textid).style.color = "white";

		currentDiv = divid;
		currentText = textid;
	}
}

function unhiliteTitle (divid, textid) {
	if (divid && textid) {
		//document.getElementById (textid).style.backgroundColor = "";
		document.getElementById (textid).style.color = "";

		currentDiv = null;
		currentText = null;
	}
}

function openMenu (menuid) {
	if (menuid && document.getElementById (menuid)) {
		show (menuid);
		currentMenu = menuid;
	}
}

function closeMenu (menuid) {
	if (menuid && document.getElementById (menuid)) {
		hide (menuid);
		currentMenu = null;
	}
}

// Menu Item Functions

function menuItemMouseOver (item) {
	hiliteMenuItem (item);
	// document.getElementById (textid).focus ();
}

function hiliteMenuItem (item) {
	item.style.backgroundColor = HILITEBGCOLOR;
	item.style.color = HILITECOLOR;
}

function unhiliteMenuItem (item) {
	item.style.backgroundColor = "";
	item.style.color = "";
}

// Utilities

function show (id) {
	document.getElementById (id).style.visibility = "visible";
}

function hide (id) {
	document.getElementById (id).style.visibility = "hidden";
}

// --------------------------------------- Write Menus

function writeTopbar (prefix)
{
	if (document.getElementById)
	{
		if (prefix == null)
			prefix = "./";

		var menu1 = new menu ("&#187;&nbsp;Home", "home", prefix + "index.html");
		var menu2 = new menu ("&#187;&nbsp;Search", "search");
		var menu3 = new menu ("&#187;&nbsp;Help", "help");
		var menu4 = new menu ("&#187;&nbsp;About&nbsp;Us", "about", prefix + "about.html");
		var menu5 = new menu ("&#187;&nbsp;Contact&nbsp;Us", "contact", prefix + "contact.html");

		menu2.additem ("&#187;&nbsp;Search&nbsp;By&nbsp;Title", prefix + "titles.html");
		menu2.additem ("&#187;&nbsp;Search&nbsp;By&nbsp;Phrase", prefix + "search.html");
		menu2.additem ("&#187;&nbsp;Search&nbsp;By&nbsp;Album", prefix + "discography.html");

		menu3.additem ("&#187;&nbsp;Finding&nbsp;Lyrics", prefix + "help.html");
		menu3.additem ("&#187;&nbsp;Clapton&nbsp;Resources", prefix + "resources.html");

		menu1.write ();
		menu2.write ();
		menu3.write ();
		menu4.write ();
		menu5.write ();
	}
	else
		document.write ('<a style="top: 61px; left: 268px; height: 20px; width: 58px;">menus require more recent javascript</a>');
}



// --------------------------------------- Other Menus

function writeIndexLowbar ()
{
	if (document.getElementById)
		document.write (cominglink () + comingmenu ());
}

function cominglink ()
{
	return '<div class="controls" id="coming" style="top: 342px; left: 22px; height: 20px; width: 120px;">'
		+ '<a tabindex="11" id="cominglink" href="javascript:void (0);" '
		+ 'onmouseover="linkFocus (\'coming\', \'cominglink\', \'comingmenu\');" '
		+ 'onmouseout="linkBlur ();" '
		+ 'onfocus="linkFocus (\'coming\', \'cominglink\', \'comingmenu\');" onblur="linkBlur ();" '
		+ '>&#187;&nbsp;Coming&nbsp;Attractions</a></div>';
}

function comingmenu ()
{
	return '<div class="menu" id="comingmenu" style="top: 362px; left: 20px; height: 86px; width: 248px;" onmouseover="linkFocus (\'coming\', \'cominglink\', \'comingmenu\');" onmouseout="linkBlur ();">'
		+ '<div class="menutext" style="top: 1px; left: 1px; height: 84px; width: 246px;">'
		+ '<p>We are currently working on Me And Mr. Johnson. Other tracks in progress are the last 3 songs from the Delaney &amp; Bonnie album and some of the early Yardbirds material.'
		+ '</p>'
		+ '</div></div>';
}

function writeTitlesLowbar ()
{
	if (document.getElementById)
		document.write (randomlink ());
}

function randomlink ()
{
	return '<div class="controls" id="random" style="top: 342px; left: 22px; height: 20px; width: 70px;">'
		+ '<a tabindex="11" id="randlink" href="javascript:clickme ();" '
		+ 'onmouseover="linkFocus (\'random\', \'randlink\');" onmouseout="linkBlur ();" '
		+ 'onfocus="linkFocus (\'random\', \'randlink\');" onblur="linkBlur ();" '
		+ '>&raquo;&nbsp;Click&nbsp;Me</a></div>';
}

function writeHelpLowbar ()
{
	if (document.getElementById)
		document.write (trivialink () + triviamenu ());
}

function trivialink ()
{
	return '<div class="controls" id="trivia" style="top: 342px; left: 22px; height: 20px; width: 54px;">'
		+ '<a tabindex="11" id="trivialink" href="javascript:void (0);" '
		+ 'onmouseover="linkFocus (\'trivia\', \'trivialink\', \'triviamenu\');" '
		+ 'onmouseout="linkBlur ();" '
		+ 'onfocus="linkFocus (\'trivia\', \'trivialink\', \'triviamenu\');" '
		+ '>&#187;&nbsp;Trivia</a></div>';
}

function triviamenu ()
{
	return '<div class="menu" id="triviamenu" style="top: 362px; left: 20px; height: 86px; width: 248px;" onmouseover="linkFocus (\'trivia\', \'trivialink\', \'triviamenu\');" onmouseout="linkBlur ();">'
		+ '<div class="menutext" style="top: 1px; left: 1px; height: 84px; width: 246px;">'
		+ '<p>There are two Clapton songs in the archive that were never officially released. Can you name them?</p>'
		+ '<p>Check the <a href="javascript:void (0);" onclick="triviaanswer ();" onblur="linkBlur ();">answer</a>.</p>'
		+ '</div></div>';
}

function triviaanswer ()
{
	alert ('Lady Of Verona and One Jump Ahead Of The Storm.');
}

// .44 ?

function writeDiscographyLowbar ()
{
	if (document.getElementById)
		document.write (reviewslink ());
}

function reviewslink ()
{
	return '<div class="controls" id="reviews" style="top: 342px; left: 22px; height: 20px; width: 100px;">'
		+ '<a tabindex="11" id="reviewslink" href="reviews.html" '
		+ 'onmouseover="linkFocus (\'reviews\', \'reviewslink\');" onmouseout="linkBlur ();" '
		+ 'onfocus="linkFocus (\'reviews\', \'reviewslink\');" onblur="linkBlur ();" '
		+ '>&raquo;&nbsp;Album&nbsp;Reviews</a></div>';
}

function writeLyricsLowbar ()
{
	if (document.getElementById)
		if (writeLyricsLowbar.arguments.length > 0)
			document.write (releaseslink () + releasesmenu (writeLyricsLowbar.arguments));
}

function releaseslink ()
{
	return '<div class="controls" id="releases" style="top: 342px; left: 22px; height: 20px; width: 80px;">'
		+ '<a tabindex="11" id="releaseslink" href="javascript:void (0);" '
		+ 'onmouseover="linkFocus (\'releases\', \'releaseslink\', \'releasesmenu\');" '
		+ 'onmouseout="linkBlur ();" '
		+ 'onfocus="linkFocus (\'releases\', \'releaseslink\', \'releasesmenu\');" '
		+ '>&raquo;&nbsp;Find&nbsp;Albums</a></div>';
}

function releasesmenu (links)
{
	var height = (20 * links.length/2) + (links.length/2) + 1;

	var result = '<div class="menu" id="releasesmenu" style="top: 362px; left: 20px; height: ' + height + 'px; width: 248px;" onmouseover="linkFocus (\'releases\', \'releaseslink\', \'releasesmenu\');" onmouseout="linkBlur ();">';

	for (var i = 0; i < links.length; i = i + 2)
	{
		var name = links [i];
		var href = links [i + 1];
		var top = (20 * i/2) + (i/2) + 1;

		result += '<div class="controls" style="top: ' + top + 'px; left: 1px; height: 20px; width: 246px;">'
		+ '<a tabindex="' + (11 + i) + '" href="../discography.html#' + href + '" '
		+ 'onmouseover="menuItemMouseOver (this);" onmouseout="unhiliteMenuItem (this);" '
		+ 'onfocus="hiliteMenuItem (this);" onblur="unhiliteMenuItem (this);" '
		+ 'style="width: 230px;">&#187;&nbsp;' + name + '</a></div>'
	}

	result += '</div>';

	return result;
}

// --------------------------------------- End Of File