// ADDITIONS TO A_illustrationInfo OBJECT ARRAY

/* A_illustrationInfo is defined in separate js documents. Specific A_illustrationInfo arrays are 
required for digital images, pen and ink images, and kids' illustrations. The arrays contain all the 
file, size, position, and caption information for the illustrations.*/


for(i=0; i<A_illustrationInfo.length; i++)
{
A_illustrationInfo[i].caption = A_illustrationInfo[i].name + "Cap";
A_illustrationInfo[i].thumbnail = A_illustrationInfo[i].name + "Sm";
}

//---------------------------------------------------------------------------------------
// WRITE THUMBNAIL IMAGE MAP COORDINATES AND CAPTIONS USING A_illustrationInfo

function defineThumbnailHotzones()
{
document.write("<map name=\"menuMap\">");
	for(i=0; i<A_illustrationInfo.length; i++)
	{
document.write("<area shape=\"rect\" coords=\"" + A_illustrationInfo[i].thumbnailCoordinates + "\" href=\"javascript:choosePic(" + i + ");\" />");
	}
document.write("</map>");
}


function writeCaptions()
{
	for(i=0; i<A_illustrationInfo.length; i++)
	{
document.write("<p id=\"" + A_illustrationInfo[i].caption + "\" class=\"capStyle\">" + A_illustrationInfo[i].captionText + "</p>");
	}
}

//---------------------------------------------------------------------------------------
// BUTTON OBJECT PROTOTYPE AND INSTANCES
//---------------------------------------------------------------------------------------

/* NavButton is an object with a few properties and a few methods defined for it. */

function NavButton(pId, pButton, pAction, pExt)
{
this.id = pId;
this.buttonName = pButton;
this.action = pAction;
this.extension = pExt;
}

var manCycle = new NavButton("littleMan", "littleMan", "mainCycle", ".jpg");
var snowCycle = new NavButton("subCycleButton", "snowButton", "subCycle", ".jpg");
var walkCycle = new NavButton("walkMe", "walkMe", "mainCycle", ".jpg");
var homeEye = new NavButton("home", "home", "changePage", ".jpg");
var contactEye = new NavButton("contact", "contact", "changePage", ".jpg");
var bioEye = new NavButton("bio", "bio", "changePage", ".jpg");
var digitalEye = new NavButton("digital", "digital", "changePage", ".jpg");
var penInkEye = new NavButton("penInk", "digital", "changePage", ".jpg");
var kidsEye = new NavButton("kids", "kids", "changePage", ".jpg");
//var lightPortEye = new NavButton("lightPort", "lightPort", "changePage", ".jpg");
//var darkPortEye = new NavButton("darkPort", "darkPort", "changePage", ".jpg");
var darkTog = new NavButton("toggleButton", "darkToggle", "togglePage", ".jpg");
var lightTog = new NavButton("toggleButton", "lightToggle", "togglePage", ".jpg");
var dontLick = new NavButton("dontLick", "dontLick", "mainCycle", ".jpg");
var newEye = new NavButton("whatsnew", "whatsNewEye", "changePage", ".jpg");
var whatsNew = new NavButton("whatsNewBig", "whatsNew", "changePage", ".jpg");
var whatsNewHome = new NavButton("whatsNewFlashHome", "whatsNewWWHome", "changePage", ".gif");
var activitiesPage = new NavButton("activities", "activities", "changePage", ".png");
var posterPage = new NavButton("posters", "posterDog", "changePage", ".jpg");
var visitsMouth = new NavButton("schoolVisits", "schoolVisits", "changePage", ".jpg");
var eventsMouth = new NavButton("upcomingEvents", "upcomingEvents", "changePage", ".jpg");

//Methods:

NavButton.prototype.switchButton = switchButton;
NavButton.prototype.cycleIllos = cycleIllos;
NavButton.prototype.showMainView = showMainView;

//---------------------------------------------------------------------------------------
// DECLARE AND INITIALIZE VARIABLES
//---------------------------------------------------------------------------------------

//Global variables begin with G_.

var G_mainCounter = 0;
var G_subCounter = 0;
var G_bigIllo = null;

//Constants begin with C_. Global variables are subject to change; constants are not.
//But doesn't this change?

var C_currentIllustration = A_illustrationInfo[G_mainCounter];
var C_floatingDivMinHeight = 700;
var C_floatingDivMinWidth = 900;

//---------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------
// PRELOAD ALL NAVIGATION IMAGES

// Fix the jpg/gif problem by making the NavButtons above an array.
// Rewrite code below to iterate through that array and find the buttonNames, adding On or Off or OnOff.
// That would involve finding where they are called and changing the call.

var navImageNames = new Array("darkToggleOn","darkToggleOff","homeOn","homeOff","contactOn","contactOff","bioOn","bioOff","illustrationOn","illustrationOff","kidsOn","kidsOff","lightPortOn","lightPortOff","lightPortOnOff","darkPortOn","darkPortOff","darkPortOnOff","littleManRight","littleManLeft","littleManFront","snowButtonRight","snowButtonLeft","snowButtonFront","walkMeLeft","walkMeRight","walkMeFront","lightToggleOn","lightToggleOff","whatsNewEyeOn","whatsNewEyeOff","whatsNewOn","whatsNewOff");

for(i=0; i<navImageNames.length; i++)
{
imageObject = navImageNames[i] + "Object";
imageObject = new Image();
imageObject.src = "../media/navButtons/" + navImageNames[i] + ".jpg";
}

imageObject = "whatsNewWWHomeOn";
imageObject = new Image();
imageObject.src = "../media/navButtons/" + imageObject + ".gif";

imageObject = "whatsNewWWHomeOff";
imageObject = new Image();
imageObject.src = "../media/navButtons/" + imageObject + ".gif";

//---------------------------------------------------------------------------------------
// INTERNAL FUNCTIONS--FOR USE IN OTHER FUNCTIONS OR METHODS
//---------------------------------------------------------------------------------------

function hideElement(elementName)
{
	if(document.getElementById(elementName))
document.getElementById(elementName).style.display = "none";
}

function showElement(elementName)
{
	if(document.getElementById(elementName))
	{
document.getElementById(elementName).style.display = "block";
		if(G_pageName == "kids")
document.getElementById("floatingDiv").style.height = "auto";
	}
}


// Kills the annoying outlines around links in IE Windows. Used in cycleIllos() method and toggleLayout().

function killOutline(id)
{
	if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.indexOf("Windows")!=-1) 
	{
		if(document.getElementById(id))
document.getElementById(id).blur();
	}
}


//---------------------------------------------------------------------------------------
// RETURN TO MAIN VIEW
//---------------------------------------------------------------------------------------

//METHOD of NavButton class----------------------------------------

function showMainView() 
{
G_subCounter=0;
G_bigIllo.src = "../media/white.jpg";
hideElement("detailViewDiv");
hideElement("toggleButton");
hideElement("subCycleButton");
showElement("menuViewDiv");
this.switchButton("On")
window.scrollTo(0,0);
}

//---------------------------------------------------------------------------------------
// CYCLE THROUGH TEXT AND IMAGES
//---------------------------------------------------------------------------------------

function incrementCounter(cLength, cNumber, cDirection)
{
var indexCounter = cNumber;
		if(cDirection == "forward")
indexCounter++;
		else
indexCounter--;
		if(indexCounter >= cLength)
indexCounter = 0;
		else if(indexCounter < 0)
indexCounter = cLength - 1;
return indexCounter;
}

//METHOD of NavButton class----------------------------------------

function cycleIllos(direction)
{
var incrementDirection = direction;
	if(this.action =="mainCycle")
	{
var cycleLength = A_illustrationInfo.length;
G_subCounter=0;
G_mainCounter = incrementCounter(cycleLength,G_mainCounter,incrementDirection);
hideElement("toggleButton");
hideElement("subCycleButton");
	}
	else if(this.action == "subCycle")
	{
cycleLength = A_illustrationInfo[G_mainCounter].A_subCollectionInfo.length;
G_subCounter = incrementCounter(cycleLength,G_subCounter,incrementDirection);
	}
loadImage("illo");
window.scrollTo(0,0);
killOutline(this.id);
}



//---------------------------------------------------------------------------------------
// SELECT SPECIFIC ILLUSTRATION FROM MAIN MENU
//---------------------------------------------------------------------------------------


function choosePic(divNum) 
{
G_bigIllo = document.getElementById("bigIllo");
hideElement("menuViewDiv");
showElement("detailViewDiv");
G_mainCounter = divNum;
loadImage("illo");
window.scrollTo(0,0);
var thisId = eval(G_pageName + "Eye");
thisId.switchButton("Off");
}


//---------------------------------------------------------------------------------------
// LOAD SPECIFIC ILLUSTRATION
//---------------------------------------------------------------------------------------

function setIllustration(whichIllo)
{
var imageFolder = "../media/" + G_pageName + "/";
	if(whichIllo == "illo")
	{
		if(A_illustrationInfo[G_mainCounter].A_subCollectionInfo)
		{
showElement("subCycleButton");
var illustration = A_illustrationInfo[G_mainCounter].A_subCollectionInfo[G_subCounter];
		}
		else
		{
var illustration = A_illustrationInfo[G_mainCounter];
			if(A_layoutInfo && A_layoutInfo[G_mainCounter].name)
			{
showElement("toggleButton");
			}
		}
	}
	else if(whichIllo == "layout")
	{
var illustration = A_layoutInfo[G_mainCounter];
	}
G_bigIllo.src = imageFolder + illustration.name + ".jpg";
G_bigIllo.style.left = illustration.left;
G_bigIllo.style.top = illustration.top;
G_bigIllo.style.width = illustration.width;
G_bigIllo.style.height = illustration.height;
setTimeout("G_bigIllo.style.display = 'block'", 500);
}



function loadImage(illoOrLayout)
{
var whichIllo = illoOrLayout;
G_bigIllo.style.display = "none";
G_bigIllo.src = "../media/white.jpg";
	if(A_illustrationInfo[G_mainCounter].captionText)
	{
var capTxt = A_illustrationInfo[G_mainCounter].caption;
capsOff();
showElement(capTxt);
	}
setIllustration(whichIllo);
adjustFloatingDivHeight();
}


function capsOff()
{
		for(i=0; i<A_illustrationInfo.length; i++)
		{
var capTxt = A_illustrationInfo[i].caption;
hideElement(capTxt);
		}
}


//---------------------------------------------------------------------------------------
// ADJUST HEIGHT OF FLOATINGDIV DEPENDING ON ILLUSTRATION HEIGHT
//---------------------------------------------------------------------------------------

function adjustFloatingDivHeight()
{
var illoHeight = parseInt(G_bigIllo.style.height);
var illoVertOffset = parseInt(G_bigIllo.style.top);
var requiredHeight = illoHeight + illoVertOffset + 30;
	if(requiredHeight < C_floatingDivMinHeight)
	{
var divHeight = C_floatingDivMinHeight;
	}
	else
	{
divHeight = requiredHeight;
	}
var illoWidth = parseInt(G_bigIllo.style.width);
var illoHorzOffset = parseInt(G_bigIllo.style.left);
var requiredWidth = illoWidth + illoHorzOffset + 30;
	if(requiredWidth < C_floatingDivMinWidth)
	{
var divWidth = C_floatingDivMinWidth;
	}
	else
	{
divWidth = requiredWidth;
	}
divWidth = divWidth.toString();
divWidth = divWidth + "px";
divHeight = divHeight.toString();
divHeight = divHeight + "px";
var floatingDiv = document.getElementById("floatingDiv");
floatingDiv.style.width = divWidth;
floatingDiv.style.height = divHeight;
}


//---------------------------------------------------------------------------------------
// TOGGLE BETWEEN DETAIL AND LAYOUT ON CLICK
//---------------------------------------------------------------------------------------


function toggleLayout(id)
{
	if(G_bigIllo.src.indexOf("Layout")<0)
	{
loadImage("layout");
	} 
	else
	{
loadImage("illo");
	}
killOutline(id);
}

//---------------------------------------------------------------------------------------
// TOGGLE TEXT ON ROLLOVER


function toggle(action, state)
{
	if(action == "togglePage")
	{
		if(state=="On")
		{
capsOff();
showElement("toggleTxt");
		}
		else
		{
hideElement("toggleTxt");
var capTxt = A_illustrationInfo[G_mainCounter].caption;
showElement(capTxt);
		}
	}
}

//---------------------------------------------------------------------------------------
// MOUSEOVER NAV BUTTONS
//---------------------------------------------------------------------------------------

//METHOD of NavButton class----------------------------------------

/* There is a line in switchButton() that tests a condition and sets the variable accordingly. 
It is of the form:
var detailViewDivIsOn = 2 == 3;		In this example, detailViewDivIsOn has the value "false." This is a 
shortcut way of avoiding an if—else conditional statement.*/


function switchButton(imageState)
{
var detailViewDivIsOn = document.getElementById("detailViewDiv") && document.getElementById("detailViewDiv").style.display != "none";
var imageFolderAndFile = "../media/navButtons/" + 	this.buttonName;
var imageOn = imageFolderAndFile + "On" + this.extension;
var imageAtState = imageFolderAndFile + imageState + this.extension;
var imageOnOff = imageFolderAndFile + "OnOff" + this.extension;
	if(G_pageName == this.id)
	{
		if(imageState == "Off" && detailViewDivIsOn)
		{
document.getElementById(this.id).src = imageOnOff;
		}
		else
		{
document.getElementById(this.id).src = imageOn;
		}
	}
	else
	{
document.getElementById(this.id).src = imageAtState;
toggle(this.action, imageState);
	}
}


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

//BEGIN SCRIPT TO MOUSEOVER EMAIL ADDRESS

emailAddressOn= new Image();
emailAddressOn.src= '../media/contact/emailAddressOn.jpg';
emailAddressOff= new Image();
emailAddressOff.src= '../media/contact/emailAddressOff.jpg';

function mouseOn(divName)
{
document.images[divName].src = "../media/contact/" + 	divName + "On.jpg";
}

function mouseOff(divName)
{
document.images[divName].src = "../media/contact/" + 	divName + "Off.jpg";
}

//END SCRIPT TO MOUSEOVER EMAIL ADDRESS

/********************************************************************/