// File: menu.js
// Purpose: Provide menus
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && (!isDOM || navigator.appVersion.indexOf('Macintosh')!=-1)) ? true : false);
var isNS4 = (document.layers ? true : false);

function getRef(id) {
	if (isDOM) return document.getElementById(id);
	if (isIE4) return document.all[id];
	if (isNS4) return document.layers[id]; }

function getSty(id) { return (isNS4 ? getRef(id) : getRef(id).style); }

var popTimer=0; // Hide timeout.
var litNow=new Array(); // Array showing highlighted menu items.

function popOver(menuNum,itemNum) {
	clearTimeout(popTimer);
	hideAllBut(menuNum);
	litNow=getTree(menuNum,itemNum);
	changeCol(litNow,true);
	targetNum=menu[menuNum][itemNum].target;
	if (targetNum>0) {
		thisX=parseInt(menu[menuNum][0].ref.left)+parseInt(menu[menuNum][itemNum].ref.left);
		thisY=parseInt(menu[menuNum][0].ref.top)+parseInt(menu[menuNum][itemNum].ref.top);
		with (menu[targetNum][0].ref) {
			left=parseInt(thisX+menu[targetNum][0].x);
			top=parseInt(thisY+menu[targetNum][0].y);
			visibility='visible'; }}}

function popOut(menuNum,itemNum) {
	if ((menuNum==0) && !menu[menuNum][itemNum].target) hideAllBut(0)
	else popTimer=setTimeout('hideAllBut(0)',500); }

function getTree(menuNum,itemNum) {
	// Array index is the menu number. The contents are null (if that menu is not a parent)
	// or the item number in that menu that is an ancestor (to light it up).
	itemArray=new Array(menu.length);
	while(1) {
		itemArray[menuNum]=itemNum;
		if (menuNum==0) return itemArray; // If we've reached the top of the hierarchy, return.
		itemNum=menu[menuNum][0].parentItem;
		menuNum=menu[menuNum][0].parentMenu; }}

// Pass an array and a boolean to specify color change, true=over color.
function changeCol(changeArray,isOver) {
	for (menuCount=0;menuCount<changeArray.length;menuCount++) {
		if (ColorActivePageBG && ((menuCount==ThisMenu && changeArray[menuCount]==ThisItem) || (menuCount==0 && changeArray[menuCount]==ThisMainMenuItem))) continue;
		if (changeArray[menuCount]) {
			newCol=isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;
			// Change the colors of the div/layer background.
			with (menu[menuCount][changeArray[menuCount]].ref) {
				if (isNS4) bgColor=newCol;
				else backgroundColor=newCol; }}}}

function hideAllBut(menuNum) {
	var keepMenus=getTree(menuNum,1);
	for (count=0; count<menu.length; count++)
		if (!keepMenus[count])
			menu[count][0].ref.visibility='hidden';
	changeCol(litNow,false); }

// MENU CONSTRUCTION FUNCTIONS

function Menu(isVert,popInd,x,y,width,overCol,backCol,borderClass,textClass) {
	this.isVert=isVert; // True or false - a vertical menu?
	this.popInd=popInd; // The popout indicator used (if any) for this menu.
	this.x=x; // Position and size settings.
	this.y=y;
	this.width=width;
	// Colors of menu and items.
	this.overCol=overCol;
	this.backCol=backCol;
	// The stylesheet class used for item borders and the text within items.
	this.borderClass=borderClass;
	this.textClass=textClass;
	// Parent menu and item numbers, indexed later.
	this.parentMenu=null;
	this.parentItem=null;
	this.ref=null; } // Reference to the object's style properties (set later).

function Item(text,href,frame,length,spacing,target) {
	this.text=text;
	this.href=href;
	this.frame=frame;
	this.length=length;
	this.spacing=spacing;
	this.target=target;
	this.ref=null; } // Reference to the object's style properties (set later).

function RepositionMenus() {
	if (!isDOM && !isIE4) return;
	for (currMenu=0;currMenu<menu.length;currMenu++) with (menu[currMenu][0]) {
		var itemX=0,itemY=0;
		for (currItem=1;currItem<menu[currMenu].length;currItem++) with (menu[currMenu][currItem]) {
			var itemID='menu'+currMenu+'item'+currItem;
			if (isDOM || isIE4) {
				document.getElementById(itemID).style.left=itemX;
				document.getElementById(itemID).style.top=itemY; }
			if (isVert) itemY += length+spacing;
			else itemX += length+spacing; }}
	with(menu[0][0]) {
		ref.left=x+CalculateHorizontalIndent();
		ref.top=y;
		ref.visibility='visible'; }}

// Since some browsers (not IE) don't support onResize in the body tag, use another way to reload the page if resized.
function CheckForResize() {
	if (window.innerWidth)
		if (window.innerWidth!=ResizeFlag) {
			RepositionMenus();
			ResizeFlag=window.innerWidth; }}
if (window.innerWidth) {
	var ResizeFlag=window.innerWidth;
	setTimeout('CheckForResize()',1000); }

// If a table is used to center the page, defined as id="MainTable", then calculate an indent
// to adjust for the centering.
function CalculateHorizontalIndent() {
	if (document.getElementById('MainTable') && window.innerWidth) {
		if (window.innerWidth<document.getElementById('MainTable').width) return 0;
		return (window.innerWidth-document.getElementById('MainTable').width)/2; }
	else if (document.getElementById('MainTable') && document.getElementById('MainTable').offsetLeft)
		return document.getElementById('MainTable').offsetLeft;
	else return 0; }

function writeMenus() {
	if (!isDOM && !isIE4 && !isNS4) return;
	var FontThis,uselink;
	if (ColorActivePageBG && ThisMainMenuItem) menu[0][ThisMainMenuItem].backCol=ActivePageBGCol;
	for (currMenu=0;currMenu<menu.length;currMenu++) with (menu[currMenu][0]) {
		var str='',itemX=0,itemY=0; // Variable for holding HTML for items and positions of next item.
		// Remember, items start from 1 in the array (0 is menu object itself, above).
		// Also use properties of each item nested in the other with() for construction.
		for (currItem=1;currItem<menu[currMenu].length;currItem++) with (menu[currMenu][currItem]) {
			var itemID='menu'+currMenu+'item'+currItem;
			// The width and height of the menu item - dependent on orientation!
			var w=(isVert ? width : length);
			var h=(isVert ? length : width);

			// Create a div or layer text string with appropriate styles/properties.
			if (ColorActivePageBG && currItem==ThisItem && currMenu==ThisMenu) menu[currMenu][currItem].backCol=ActivePageBGCol;
			if (isDOM || isIE4) {
				if (document.getElementById(itemID)) document.getElementById(itemID).innerHTML="";
				str += '<div id="'+itemID+'" style="position: absolute; left: '+itemX+'; top: '+itemY+'; width: '+w+'; height: '+h+'; visibility: inherit; ';
				if (backCol) str += 'background: '+backCol+'; ';
				str += '" '; }
			if (isNS4) {
				str += '<layer id="'+itemID+'" left="'+itemX+'" top="'+itemY+'" width="'+ w+'" height="'+h+'" visibility="inherit" ';
				if (backCol) str += 'bgcolor="'+backCol+'" '; }
			if (borderClass) str += 'class="'+borderClass+'" ';

			// Add mouseover handlers and finish div/layer.
			str += 'onMouseOver="popOver('+currMenu+','+currItem+')" onMouseOut="popOut('+currMenu+','+currItem+')">';

			// Flag whether to change the color on the menu text item.
			if (ColorActivePageFG && ThisMainMenuItem && ((currMenu==0 && currItem==ThisMainMenuItem) || (currMenu==ThisMenu && currItem==ThisItem))) FontThis=1;
			else FontThis=0;

			// Add contents of item (default: table with link inside).
			// In IE/NS6+, add padding if there's a border to emulate NS4's layer padding.
			// If a target frame is specified, also add that to the <a> tag.
			if (href.length)
				uselink='<a class="'+textClass+'" href="'+href+'"'+(frame ? ' target="'+frame+'">' : '>')+
(FontThis ? '<font color='+ActivePageFGCol+'>' : '')+text+(FontThis ? '</font>' : '')+'</a>';
			else uselink=(FontThis ? '<font color='+ActivePageFGCol+'>' : '')+text+(FontThis ? '</font>' : '');
			str+='<table width="'+(w - 8)+'" border="0" cellspacing="0" cellpadding="'+(!isNS4 && borderClass ? 3 : 0)+
'"><tr><td align="left" height="'+(h - 7)+'">'+uselink+'</td>';
			if (target>0) {
				// Set target's parents to this menu item.
				menu[target][0].parentMenu=currMenu;
				menu[target][0].parentItem=currItem;
				// Add a popout indicator.
				if (popInd) str += '<td class="'+textClass+'" align="right">'+popInd+'</td>'; }
			str += '</tr></table>'+(isNS4 ? '</layer>' : '</div>');
			if (isVert) itemY += length+spacing;
			else itemX += length+spacing; }
		if (isDOM) {
			var newDiv=document.createElement('div');
			document.getElementsByTagName('body').item(0).appendChild(newDiv);
			newDiv.innerHTML=str;
			ref=newDiv.style;
			ref.position='absolute';
			ref.left=x; ref.top=y;
			ref.visibility='hidden'; }

		// Insert a div tag to the end of the BODY with menu HTML in place for IE4.
		if (isIE4) {
			document.body.insertAdjacentHTML('beforeEnd','<div id="menu'+currMenu+'div" '+'style="position: absolute; visibility: hidden">'+str+'</div>');
			ref=getSty('menu'+currMenu+'div'); }

		// In NS4, create a reference to a new layer and write the items to it.
		if (isNS4) {
			ref=new Layer(0);
			ref.document.write(str);
			ref.document.close(); }

		for (currItem=1;currItem<menu[currMenu].length;currItem++) {
			itemName='menu'+currMenu+'item'+currItem;
			if (isDOM || isIE4) menu[currMenu][currItem].ref=getSty(itemName);
			if (isNS4) menu[currMenu][currItem].ref=ref.document[itemName]; }}
	with(menu[0][0]) {
		ref.left=x+CalculateHorizontalIndent();
		ref.top=y;
		ref.visibility='visible'; }}

// Syntaxes: START EDITING HERE, READ THIS SECTION CAREFULLY!
// 
// menu[menuNumber][0]=new Menu(Vertical menu? (true/false), 'popout indicator', left, top,
// width, 'mouseover color', 'background color', 'border stylesheet', 'text stylesheet');
// 
// Left and Top are measured on-the-fly relative to the top-left corner of its trigger, or
// for the root menu, the top-left corner of the page.
// 
// menu[menuNumber][itemNumber]=new Item('Text', 'URL', 'target frame', length of menu item,
//	additional spacing to next menu item, number of target menu to popout);
//
// If no target menu (popout) is desired, set it to 0. Likewise, if your site does not use
// frames, pass an empty string as a frame target.
// 
// Something that needs explaining - the Vertical Menu setup. You can see most menus below
// are 'true', that is they are vertical, except for the first root menu. The 'length' and
// 'width' of an item depends on its orientation -- length is how long the item runs for in
// the direction of the menu, and width is the lateral dimension of the menu. Just look at
// the examples and tweak the numbers, they'll make sense eventually :).
// 
// In order to allow this same code file to work with different web pages, the following
// variables need to be set (not defined) in the web page that uses this Javascript files
// if menu item highlighting for the current web page is desired.
// - ThisMainMenuItem : This is the item on the main menu that was used to access any submenus to access this page.
// - ThisMenu : This is the menu number of the menu used to access this page.
// - ThisItem : This is the item number on the menu used to access this page.
// These variables are used by the code to set the foreground or background color on the main menu item
// and in the lower-most popup item.  Note that items in middle menus will not be highlighted.
// If no highlighting is desired, then simply don't set any of these (they are definined and initialized
// to zero below) .

var menu=new Array();

// Default colors passed to most menu constructors (just passed to functions, not
// a global variable - makes things easier to change later in bulk).
var defOver='#434141',defBack='#000000';

// Items used to determine the highlighting of the menu choices that resolve to the active page.
var ActivePageFGCol='#A9A9A9'; // foreground color
var ActivePageBGCol='#777769'; // background color
var ColorActivePageFG=1; // Flag that determines if the text on the menu items corresponding to the active page is highlighted.
var ColorActivePageBG=0; // Flag that determines if the bacground on the menu items corresponding to the active page is highlighted.
// Change these values to actual values in the HTML page AFTER this JS file is called if you want
// to use menu highlighting to flag the current page menu choices.	These must be defined somewhere
// to avoid JavaScript errors, so they are initialized here.
var ThisMainMenuItem=ThisMenu=ThisItem=0;

// Default 'length' of menu items - item height if menu is vertical, width if horizontal.
var defLength = 22;

// Menu 0 is the special, 'root' menu from which everything else arises.
menu[0] = new Array();
// MOVE ROOT MENU AROUND HERE  it's positioned at (310 across and 70 down) and is 17px high now.
menu[0][0] = new Menu(false, '', 163, 250, 25, '' , '', '', 'itemText');
// Notice how the targets are all set to nonzero values...
// The 'length' of each of these items is the first number, and the spacing is identified next. The last number relates to the menu or submenu that this item calls.
menu[0][1] = new Item('  <b>Home</b>', 'http://www.pentecostalsofangleton.com/home.html', '', 67, 10, 1);
menu[0][2] = new Item('  <b>About Us</b>', 'http://www.pentecostalsofangleton.com/About/index.html', '', 84, 15, 2);
menu[0][3] = new Item('  <b>Ministries</b>', 'http://www.pentecostalsofangleton.com/Ministries/index.html', '', 84, 20, 3);
menu[0][4] = new Item('  <b>IGNITE</b>', 'http://www.pentecostalsofangleton.com/Youth/index.html', '', 67, 12, 4);
menu[0][5] = new Item('  <b>Calendar of Events</b>', 'http://www.pentecostalsofangleton.com/Calendar/index.html', '', 160, 39, 0);


// Home menu.
menu[1] = new Array();
// The Home menu is positioned -4px across and 19 down from its trigger, and is 132 wide.
// All text in this menu has the stylesheet class 'item' -- see the <style> section above.
// Non-zero target means this will trigger a popout
menu[1][0] = new Menu(true, '<b>::</b>', -4, 20, 147, defOver, defBack, 'itemBorder', 'itemText');
//menu[1][1] = new Item('Church Photos', 'http://www.pentecostalsofangleton.com/photos.html', '', defLength, 0, 0);
menu[1][1] = new Item('Prayer Request', 'http://www.pentecostalsofangleton.com/prayer.html', '', defLength, 0, 0);
menu[1][2] = new Item('Our Soldiers', 'http://www.pentecostalsofangleton.com/service.html', '', defLength, 0, 0);
menu[1][3] = new Item('Church Photos', 'http://www.pentecostalsofangleton.com/photo.html', '', defLength, 0, 0);

// About Us menu.
menu[2] = new Array();
menu[2][0] = new Menu(true, '<b>::</b>', -4, 20, 170, defOver, defBack, 'itemBorder', 'itemText');
menu[2][1] = new Item('What We Believe', 'http://www.pentecostalsofangleton.com/About/beliefs.html', '', defLength, 0, 0);
menu[2][2] = new Item('Meet Our Pastor', 'http://www.pentecostalsofangleton.com/About/pastor.html', '', defLength, 0, 0);
menu[2][3] = new Item('Meet the Staff', 'http://www.pentecostalsofangleton.com/About/staff.html', '', defLength, 0, 0);
menu[2][4] = new Item('Watch Weekly Sermons', 'http://www.pentecostalsofangleton.com/About/Sermons/index.html', '', defLength, 0, 0);
menu[2][5] = new Item('Tour the Facilities', 'http://www.pentecostalsofangleton.com/About/tour.html', '', defLength, 0, 0);
menu[2][6] = new Item('Our History', 'http://www.pentecostalsofangleton.com/About/history.html', '', defLength, 0, 0);

// Ministries menu.
menu[3] = new Array();
menu[3][0] = new Menu(true, '<b>::</b>', -4, 20, 147, defOver, defBack, 'itemBorder',  'itemText');
menu[3][1] = new Item('Sunday School', 'http://www.pentecostalsofangleton.com/Ministries/Suns.html', '', defLength, 0, 0);
menu[3][2] = new Item('IGNITE', 'http://www.pentecostalsofangleton.com/Youth/index.html', '', defLength, 0, 0);
//menu[3][3] = new Item('Young Marrieds', 'http://www.pentecostalsofangleton.com/Ministries/youngmarrieds.html', '', defLength, 0, 0);
menu[3][3] = new Item('Drama Team', 'http://www.pentecostalsofangleton.com/Ministries/drama.html', '', defLength, 0, 0);
menu[3][4] = new Item('Spanish Ministry', 'http://www.pentecostalsofangleton.com/Ministries/spanish.html', '', defLength, 0, 0);
//menu[3][4] = new Item('Bible Quizzing', 'http://www.pentecostalsofangleton.com/Ministries/quiz.html', '', defLength, 0, 0);
menu[3][5] = new Item('Kidz Depot', 'http://www.pentecostalsofangleton.com/Ministries/kidzd.html', '', defLength, 0, 0);
menu[3][6] = new Item('Ladies Ministry', 'http://www.pentecostalsofangleton.com/Ministries/women.html', '', defLength, 0, 0);
menu[3][7] = new Item('A.C.T.S. Program', 'http://www.pentecostalsofangleton.com/Ministries/acts.html', '', defLength, 0, 0);
menu[3][8] = new Item('Songs', 'http://www.pentecostalsofangleton.com/Ministries/songs.html', '', defLength, 0, 0);
menu[3][9] = new Item('CT Fire Department', 'http://www.pentecostalsofangleton.com/Ministries/firedept.html', '', defLength, 0, 0)
menu[3][10] = new Item('Our Music', 'http://www.pentecostalsofangleton.com/Ministries/music.html', '', defLength, 0, 5);

// IGNITE menu.
menu[4] = new Array();
menu[4][0] = new Menu(true, '<b>::</b>', -4, 20, 147, defOver, defBack, 'itemBorder',  'itemText');
//menu[4][1] = new Item('Youth Newsletter', 'http://www.pentecostalsofangleton.com/Youth/news.html', '', defLength, 0, 0);
menu[4][1] = new Item('Youth Photos', 'http://www.pentecostalsofangleton.com/Youth/photos.html', '', defLength, 0, 0);
menu[4][2] = new Item('Youth Leaders', 'http://www.pentecostalsofangleton.com/Youth/leaders.html', '', defLength, 0, 0);
//menu[4][4] = new Item('Youth Calendar', 'http://www.pentecostalsofangleton.com/Youth/calendar.html', '', defLength, 0, 0);
//menu[4][5] = new Item('Internal Youth Site', 'http://www.pentecostalsofangleton.com/Youth/Internal/index.html', '', defLength, 0, 0);

// Our Music Submenu.
menu[5] = new Array();
menu[5][0] = new Menu(true, '<b>::</b>', 146, 0, 147, defOver, defBack, 'itemBorder', 'itemText');
menu[5][1] = new Item('Weekly Specials', 'http://www.pentecostalsofangleton.com/Ministries/specials.html', '', defLength, 0, 0);
menu[5][2] = new Item('Internal Music Site', 'http://www.pentecostalsofangleton.com/Ministries/Music/index.html', '', defLength, 0, 0);

// OPTIONAL CODE FROM HERE DOWN

// This is a quick snippet that captures all clicks on the document and hides the menus
// every time you click.

if (isNS4) document.captureEvents(Event.CLICK);
document.onclick = clickHandle;

function clickHandle(evt) {
	if (isNS4) document.routeEvent(evt);
	hideAllBut(0); }