/* *****************************************************************************
 * MenuScriptsVancouver.js
 * DHTML and client-side scripts for dynamic menus on Vancouver Parks and
 *   Recreation Site
 * Version: 1.0
 * Date: 1.31.2001
 * Author: Stephen Kratowicz, OakTree.com
 * ****************************************************************************/


/* *****************************************************************************
 * Global Variables
 * ****************************************************************************/

// Document load boolean
var blnLoaded = false;

// Browser detect
var blnMac = (navigator.userAgent.indexOf('Mac') != -1);
var blnDOM = (document.getElementById) ? true : false;
var blnIE = (document.all) ? true : false;
var blnNS6 = (navigator.vendor == 'Netscape6' || navigator.product == 'Gecko')
	? true : false;
if (window.parent)
	var blnNS4 = (parent.document.layers) ? true : false;

// Container and Layer Objects
var objTopContainer = null;

// High-level Object Arrays
var aryMenuObjects = new Array();
var aryImageObjects = new Array();

// Currently Selected Menu
var objMenuOn = null;

// Timer ID
var intTimerID = 0;

// Positioning Factors
var intTopAdjust = 0;
var intLeftStart;

// Layer that contains the map mark
var objMark;

/* *****************************************************************************
 * Event Handlers
 * ****************************************************************************/

// Call to onload and onresize initialization
window.onload = init;

// Call to NS4 resize bug fix
window.onresize = (blnNS4) ? reDraw : reInit;

/* *****************************************************************************
 * Initialization Functions
 * ****************************************************************************/
function init()
{
	// Local vars
	var aryTemp, strTemp, intIndex;

	// Set the top level container object
	objTopContainer = (blnNS4) ? window : document.body;
	
	// Set the left pixel position based on screen width
	intLeftStart = getLeftStart();

	// Build Menus - setTimeout is to pause for IE Mac
	setTimeout('buildMenus(0);', 10);

	// Create the Map Mark Layer
	objMark = createLayer(
		objTopContainer,
		'layer_mark',
		0, 0,
		20);

	// Insert content into Map Mark Layer	
	insertContent(objMark, '<img src = "/parks-recreation/parks_trails/images/map_marker.gif">');

	// If function moreInit exists, call it for page specific initializations
	if (window.moreInit)
		moreInit();
}

// Reposition on page resize
function reInit()
{
	// Set the left pixel position based on screen width
	intLeftStart = getLeftStart();

	// Reset the left position of all layers
	for (i in aryMenuObjects) {
		aryMenuObjects[i].Layer.style.left = (intLeftStart + aryContent[i][0][0]);
	}
	
	// If function moreInit exists, call it for page specific initializations
	if (window.moreInit)
		moreInit();
}

// Menu-building function
function buildMenus(i)
{
	var aryTemp = aryContent[i];
	var strTemp = '';
		
	// First add the top line of taupe
	strTemp += '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td class="taupe"><img src="/parks-recreation/images/spacer.gif" alt="spacer" width="1" height="1" border="0"></td></tr></table>';

	// Now add all items
	for (var j=0; j<aryTemp[1].length; j+=2) {
		strTemp += ('<table class="gold" cellpadding="0" cellspacing="0" border="0" width="100%"><tr>'
			
			+ '<td width="1" class="taupe"><img src="/parks-recreation/images/spacer.gif" alt="spacer" width="1" height="23" border="0"></td>'
			
			+ '<td width="99%" align="center"><a class="dhtmlnav" href="' + aryTemp[1][j+1] + '">'
			
			+ aryTemp[1][j] + '</a></td>'
			
			+ '<td width="1" class="taupe"><img src="/parks-recreation/images/spacer.gif" alt="spacer" width="1" height="23" border="0"></td>'
			
			+ '</tr></table>'
			
			+ '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td class="taupe"><img src="/parks-recreation/images/spacer.gif" alt="spacer" width="1" height="1" border="0"></td></tr></table>');
	}
	
	if (blnIE && blnMac)
		strTemp += '<br>';
	
	aryMenuObjects[i] = new Menu(
		i,
		strTemp,
		intLeftStart + aryTemp[0][0],
		intTopAdjust + aryTemp[0][1],
		aryTemp[0][2]
	);

	// Iterate through aryContent
	i++;
	
	// Next Menu
	if (i < aryContent.length) {
		setTimeout('buildMenus(' + i + ');', 10);
	}
	else
		blnLoaded = true;
}

function getLeftStart()
{
	// Set the left pixel position based on screen width
	var intLeftStart = (getWidth() / 2) - 374;
	
	if (intLeftStart < 0)
		intLeftStart = 0;
	else if (blnNS4)
		intLeftStart -= 8;
	else if (blnNS6)
		intLeftStart -= 7;
	
	
	return intLeftStart;
}

/* *****************************************************************************
 * Main Functions
 * ****************************************************************************/

// Menu Class - Primary class of objects, holds layer info and reference to
// the layer object.
function Menu (intID, strContent, intLeft, intTop, intWidth)
{
	this.ID = intID;
	this.Selected = false;
	this.ImageOnID = -1
	this.Layer = createLayer(
		objTopContainer,
		'layer_' + intID,
		intLeft, intTop,
		intWidth);
	insertContent(this.Layer, strContent);
	this.Layer.onmouseover = stopTimer;
	this.Layer.onmouseout = startTimer;
}

// showMenu() function - Sets visibility on for a Menu layer and registers it
// as the currently selected menu.
function showMenu (intMenuID)
{
	if (!blnLoaded) return;
	if (objMenuOn != null) hideMenu();
	objMenuOn = aryMenuObjects[intMenuID];
	showOrHide (objMenuOn.Layer, 'visible');
}

// hideMenu() function - Sets visibility off for the currently selected menu.
function hideMenu ()
{
	if (objMenuOn != null)
		showOrHide(objMenuOn.Layer, 'hidden');
	objMenuOn = null;
	stopTimer();
}

// startTimer() function - begins timer to hide menu
function startTimer () {
	intTimerID = setTimeout('hideMenu();', 500);
}

// stopTimer() function - stops timer for menu hide
function stopTimer () {
	if (intTimerID) { clearTimeout(intTimerID); clearTimeout(intTimerID - 1); }
}

// arrowOn() function - swaps highlight arrow, registers currently swapped image
function arrowOn(intMenu, intItem) {
	var strImageName = 'arrow_' + intMenu + '_' + intItem;
	var objTemp;
	if (document.images) {
    if (blnNS4)
			objTemp = objMenuOn.Layer.document.images[strImageName];
		else
			objTemp = document.images[strImageName];
		objTemp.src = objArrowOn.src;
		objSwapImage = objTemp;
  }
}

// arrowOff() function - swaps off arrow into currently swapped image
function arrowOff() {
	if (objSwapImage != null)
		objSwapImage.src = objArrowOff.src;
	objSwapImage = null;
}

// markMap() - Marks the map in the "Maps and Trails" section
function markMap(blnVis)
{
	var objTemp, intMapX, intMapY;
	if (blnVis) {
		intMapX = intLeftStart + 555;
		intMapY = 348;
		objTemp = (blnNS4) ? objMark : objMark.style;
		objTemp.left = intMapX + arguments[1];
		objTemp.top = intMapY + arguments[2];
		showOrHide(objMark, 'visible');
	}
	else {
		showOrHide(objMark, 'hidden');
		return;
	}
}

/* *****************************************************************************
 * DHTML Utility Functions
 * ****************************************************************************/

// getWidth() - returns the width of the window
function getWidth()
{
	if (blnNS4 || blnNS6) return window.innerWidth;
	else return document.body.clientWidth;
}

// showOrHide() - sets visibility on or off for a layer object
function showOrHide (obj,vis)
{
	if (blnIE || blnDOM) obj.style.visibility = vis;
	else if (blnNS4) obj.visibility = ((vis == "visible") ? "show" : "hide");
}

// insertContent() - puts content into an existing HTML DIV/Layer
function insertContent(objLayer, strContent)
{
	if (blnIE || blnDOM) objLayer.innerHTML = strContent;
	else if (blnNS4)
	{
		objLayer.document.write(strContent);
		objLayer.document.close();
	}
}

// createLayer() - creates an HTML DIV/Layer on the fly
function createLayer (objContainer, strId, intLeft, intTop, intWidth)
{
	var objLayer = null;

	if (blnDOM)
	{
		objLayer = document.createElement("div");
		with(objLayer)
		{
			id = strId;
			with(style)
			{
				position = 'absolute';
				visibility = 'hidden';
				left = intLeft + 'px';
				top = intTop + 'px';
				width = intWidth + 'px';
			}
		}
		objContainer.appendChild(objLayer);
	}
	
	else if (blnIE)
	{
		var strHTML = '<div id="' + strID
			+ '" style="position:absolute; visibility:hidden;"></div>';
		objContainer.insertAdjacentHTML('BeforeEnd', strHTML);
		objLayer = document.all[strId];
		with(objLayer.style)
		{
			left = intLeft + 'px';
			top = intTop + 'px';
			width = intWidth + 'px';
		}
	}
	
	else if (blnNS4)
	{
		objLayer = new Layer (intWidth, objContainer);
		with(objLayer)
		{
			id = strId;
			visibility = 'hide';
			top = intTop;
			left = intLeft;
			width = intWidth;
		}
	}
	return objLayer;
}

/* *****************************************************************************
 * Browser-specific bug fixes
 * ****************************************************************************/

// Netscape 4 Resize Fix
if (blnNS4)
{      
	origWidth = innerWidth;
	origHeight = innerHeight;   	
}

function reDraw()
{
	if (innerWidth != origWidth || innerHeight != origHeight) location.reload();
}

function openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
  }