// DropMenu.js by Matt Fritz
// July 1, 2007
// Code for the drop-down menu system

// 7/16/2007: Added findMenuOffset() function to calculate what the offset for the menu should be based upon screen resolution for 800, 1024, 1280, and 1600

var menuID = "MenuDrop"; // HTML DIV element name
var menuWidth = 92; // width of the desired menu
var menuBorders = 1; // 1 - only outline border 2 - only inline border 3 - outline and inline borders
var menuBorderColor = "white"; // color of the menu border(s)
var menuBorderSize = 1; // size of the border(s) on the menu

var menuOffsetLeft = 0; // offset to calculate for the menu's LEFT based upon screen res

var theMenu = new Array(); // the array for the general menu (individual menus copied in)
var theMenuLinks = new Array(); // the array for the general menu's links

var eventsMenu = new Array(); // array for the events menu
var eventsMenuLinks = new Array(); // array for the events menu's links

var newsMenu = new Array(); // array for the news menu
var newsMenuLinks = new Array(); // array for the news menu's links

var exclusivesMenu = new Array(); // array for the exclusives menu
var exclusivesMenuLinks = new Array(); // array for the exclusives menu's links

var mediaMenu = new Array(); // array for the media menu
var mediaMenuLinks = new Array(); // array for the media menu's links

var blogsMenu = new Array(); // array for the blogs menu
var blogsMenuLinks = new Array(); // array for the blogs menu's links

var galleryMenu = new Array(); // array for the gallery menu
var galleryMenuLinks = new Array(); // array for the gallery menu's links


function fillMenu()
{
	// if both an entry in the "Menu" array and its corresponding entry in the "MenuLinks"
	// array are "---", a horizontal line (horizontal rule: <hr>) will be inserted

	// EVENTS
	eventsMenu = new Array("Upcoming Events");
	eventsMenuLinks = new Array("http://www.whedonopolis.com/events/index.html");

	// NEWS
	newsMenu = new Array("Main News Page");
	newsMenuLinks = new Array("http://www.whedonopolis.com/news/index.html");

	// EXCLUSIVES
	exclusivesMenu = new Array("Main Articles Page", "---", "Interviews", "---", "Reviews");
	exclusivesMenuLinks = new Array("http://www.whedonopolis.com/articles/index.html", "---", "http://www.whedonopolis.com/articles/interviews.html", "---", "http://www.whedonopolis.com/articles/reviews.html");

	// MEDIA
	mediaMenu = new Array("Audio", "Video");
	mediaMenuLinks = new Array("http://www.whedonopolis.com/media/audio.html", "http://www.whedonopolis.com/media/video.html");

	// BLOGS
	blogsMenu = new Array("Main Blog Page");
	blogsMenuLinks = new Array("http://www.whedonopolis.com/articles/blogs.html");

	// GALLERY
	galleryMenu = new Array("Main Gallery Page");
	galleryMenuLinks = new Array("http://www.whedonopolis.com/photos/main.php");
	
	// VERSE
	verseMenu = new Array("Coming Soon");
	verseMenuLinks = new Array("#");

	findMenuOffset();
}

// calculate additional offset for the menu based on screen res
function findMenuOffset()
{
	// 800 resolution, subtract 90 from each menu's LEFT coord
	if(screen.width == 800) {menuOffsetLeft = -90;}

	// menu system built for a 1024 resolution, so don't worry
	if(screen.width == 1024) {menuOffsetLeft = 0;}

	// 1280 resolution, add 134 to each menu's LEFT coord
	if(screen.width == 1280) {menuOffsetLeft = 134;}

	// 1600 resolution... 134 (not sure about this one)
	if(screen.width == 1600) {menuOffsetLeft = 134;}
}

function buildMenu(menuNum)
{
	var theElement = document.getElementById(menuID);
	var menuTableHead; // main <TABLE> tag for the menu
	var menuHTML; // HTML code generated from the array for the menu

	if(menuBorders == 1) // only outline border
	{
		theElement.style.border = menuBorderSize + "px solid " + menuBorderColor;
		//theElement.style.border-color = menuBorderColor;
		//theElement.style.border-style = "solid";

		menuTableHead = "<table width='" + menuWidth + "' border='0'>";
	}
	if(menuBorders == 2) // only inline border
	{
		theElement.style.border = "0px";

		menuTableHead = "<table width='" + menuWidth + "' border='" + menuBorderSize + "' border-color='" + menuBorderColor + "'>";
	}
	if(menuBorders == 3) // both outline and inline borders
	{
		theElement.style.border = menuBorderSize + "px solid " + menuBorderColor;
		//theElement.style.border-color = menuBorderColor;
		//theElement.style.border-style = "solid";

		menuTableHead = "<table width='" + menuWidth + "' border='" + menuBorderSize + "' border-color='" + menuBorderColor + "'>";
	}


	if(menuNum == 1) 
	{
		theMenu = eventsMenu;
		theMenuLinks = eventsMenuLinks;
	}
	if(menuNum == 2)
	{
		theMenu = newsMenu;
		theMenuLinks = newsMenuLinks;
	}
	if(menuNum == 3)
	{
		theMenu = exclusivesMenu;
		theMenuLinks = exclusivesMenuLinks;
	}
	if(menuNum == 4)
	{
		theMenu = mediaMenu;
		theMenuLinks = mediaMenuLinks;
	}
	if(menuNum == 5)
	{
		theMenu = blogsMenu;
		theMenuLinks = blogsMenuLinks;
	}
	if(menuNum == 6)
	{
		theMenu = galleryMenu;
		theMenuLinks = galleryMenuLinks;
	}


	theElement.style.width = menuWidth; // assign the width from this script

	var x; // accessor to each array item

	menuHTML = menuTableHead;

	for(x in theMenu) // access each array item and write to the menu's HTML variable
	{
		// insert a horizontal line?
		if(theMenuLinks[x] == "---" && theMenu[x] == "---")
		{
			menuHTML = menuHTML + "<tr><td align='center'><hr></td></tr>";
		}
		else
		{
			menuHTML = menuHTML + "<tr><td align='center'><a href='" + theMenuLinks[x] + "' class='menuLink'>" + theMenu[x] + "</a></td></tr>";
		}
	}

	// write the HTML generated to theElement (menu DIV item)

	theElement.innerHTML = menuHTML + "</table>";

	showMenu();
}

// this function called from HTML page to display the menu
function makeMenu(menuNum, posX, posY)
{
	var theElement = document.getElementById(menuID);

	// make sure the menu isn't already visible
	if(theElement.style.visibility == "visible") {theElement.style.visibility = "hidden";}

	theElement.style.left = posX + menuOffsetLeft;
	theElement.style.top = posY;

	buildMenu(menuNum);
}

// show the menu
function showMenu()
{
	var theElement = document.getElementById(menuID);

	theElement.style.visibility = "visible";
}

// hide the menu
function hideMenu()
{
	var theElement = document.getElementById(menuID);

	theElement.style.visibility = "hidden";
}