// JavaScript Document
var oldIndex = 0;
var imgPreload = new Image ();
var thumbs = new Array ();
var archiveList = new Array(new pdc ("AfternoonTea", "Afternoon Tea"),
							new pdc ("AtTheLake", "At the Lake"),
							new pdc ("AutumnGlow", "Autumn Glow"),
							new pdc ("BluebellWoods", "Bluebell Woods"),
							new pdc ("ChallengeFlower", "Challenge Flower"),
							new pdc ("Clematis", "Clematis"),
							new pdc ("DappledSunlight", "Dappled Sunlight"),
							new pdc ("DayLily", "Day Lily"),
							new pdc ("DifferentGenerations", "Different Generations"),
							new pdc ("EarlyMorningYarmouth", "Early Morning Mist - Yarmouth, N.S."),
							new pdc ("GardensHamptonCourtPalace", "Gardens - Hampton Court Palace"),
							new pdc ("HappyAnniversary", "Happy Anniversary"),
							new pdc ("Hayes", "Hartshill Hayes"),
							new pdc ("HouseCommission", "House - Commission"),
							new pdc ("KeepersCottage", "Keepers Cottage"),
							new pdc ("Magnolia", "Marylou´s Magnolia"),
							new pdc ("MarketVendor", "Market Vendor"),
							new pdc ("PotsAndPlants", "Pots ´n´ Plants"),
							new pdc ("RockGlenFalls", "Rock Glen Falls"),
							new pdc ("SaltspringIsland", "Saltspring Island Yupo"),
							new pdc ("SecondCareer", "Second Career"),
							new pdc ("StormClouds", "Storm Clouds"),
							new pdc ("SunlitGlade", "Sunlit Glade"),
							new pdc ("TheTwoBrewers", "The Two Brewers"),
							new pdc ("UpTheLazyRiver", "Up the Lazy River"));
var yupoList = new Array(	new pdc ("FilteredSunlight", "Filtered Sunlight"),
							new pdc ("FilteredSunlight2", "Filtered Sunlight 2"),
							new pdc ("IntoTheWoods", "Into the Woods"),
							new pdc ("QuietCove", "Quiet Cove"));
var acrylicList = new Array(new pdc ("AfterTheRecital", "After the Recital"),
							new pdc ("EveningCalm", "Evening Calm"),
							new pdc ("FirstSnow", "First Snow"),
							new pdc ("Foxglove", "Foxglove"),
							new pdc ("NatureStudy", "Nature Study"));
var wColorList = new Array (new pdc ("Daisies", "Daisies"),
							new pdc ("HiMom", "Hi Mom"),
							new pdc ("IfAnyoneFindsThis", "If Anyone Finds This"),
							new pdc ("IHaveADream", "I Have a Dream (watercolor/acrylic)"),
							new pdc ("IndianHarbourNS", "Indian Harbour, NS"),
							new pdc ("LastSnowCanatara", "Last Snow - Canatara Park"),
							new pdc ("LastTimeRound", "Last Time 'round the Buoy"),
							new pdc ("LateFallOakLeaves", "Late Fall Oakleaves"),
							new pdc ("LawrenceHouseSarnia", "Lawrence House, Sarnia"),
							new pdc ("LesleyAtIpperwash", "Lesley at Ipperwash"),
							new pdc ("Mallards", "Mallards"),
							new pdc ("NaturesWrath", "Natures Wrath - Canatara"),
							new pdc ("NewquayBayUK", "Newquay Bay, UK"),
							new pdc ("PeaceTranquility", "Peace and Tranquility"),
							new pdc ("PendingStorm", "Pending Storm - Lake Chipican"),
							new pdc ("PotentialTenant", "Potential Tenant"),
							new pdc ("RacingHome", "Racing Home"),
							new pdc ("RainyDayInVenice", "Rainy Day in Venice"),
							new pdc ("RockGlenPond", "Rock Glen Pond"),
							new pdc ("SoulsCommemorative", "Souls Commemorative"),
							new pdc ("StPetersBasilica", "St. Peter´s Basilica"),
							new pdc ("StrandTopshamUK", "Strand-Topsham, UK"),
							new pdc ("SummerPastime", "Summer Pastime"),
							new pdc ("Tulips", "Tulips"),
							new pdc ("WarwickGenStore", "Warwick General Store"),
							new pdc ("Waterlilies", "Waterlilies"),
							new pdc ("WindsorCastle", "Windsor Castle"));

function pdc (pFilename, pTitle) { /* width, height, medium */
	this.filename = pFilename;
	this.title = pTitle;
}
function transfer (index) {
	var filename = thumbs[index].filename;
	var title = thumbs[index].title;
	var prevIndex = getPrevIndex (eval(index));
	var nextIndex = getNextIndex (eval(index));
	
	// display the larger version of the image
	var src = "images/full/" + filename + ".jpg"
	imgPreload = new Image ();
	
	// Once the image is loaded to an invisible space, transfer it and it's info to the page.
	imgPreload.onload = function () {
		var upperHtml = "<img src=\"" + src + "\" alt='" + title + "' title='" + title + "'/> <br />" + title;
		
		// update the serial navigation buttons to reflect the change of index
		var serialHtml = "<a onclick=\"transfer('" + prevIndex + "')\" href=\"#image\">Previous</a>&nbsp;|&nbsp;<a onclick=\"transfer('" + nextIndex + "')\" href=\"#image\">Next</a>";
		document.getElementById("upper").innerHTML = upperHtml;
		document.getElementById("serialNav").innerHTML = serialHtml;
		document.getElementById("thumb"+oldIndex).className = "imgCon";		// restore the highlighted thumb to normal
		document.getElementById("thumb"+index).className = "imgConHL";		// assign the highlighted attribs to the thumb
	
		// save the old index value so that we can restore it to it's other class.
		oldIndex = index;
		return false;
	}
	imgPreload.src = src;
}
function getNextIndex (i) {
	var retVal;
	if ((i+1) > (thumbs.length-1)) {
		retVal = 0;	
	} else {
		retVal = i + 1;
	}
	return retVal;
}
function getPrevIndex (i) {
	var retVal;
	if ((i-1) < 0) {
		retVal = thumbs.length - 1;	
	} else {
		retVal = i - 1;
	}
	
	return retVal;
}
function buildImageString (pdcObj, index) {
	/***
	 * IMPORTANT NOTE:
	 *
	 * 		I learned here that it is crucial that the string passed
	 *		as a parameter MUST be enclosed in single-quotes!
	 *
	 *		i.e. onclick=transfer ('images/file1.jpg');
	 *
	 *
	 *	
	 ***/
	var str = new String ();
	/**
		FORMAT:
		<div id="imgCon">
			<a onclick=transfer ('images/full/[source_filename].jpg')>
				<img src="images/thumbs/[source_filename].jpg" width=50px height=50px />
			</a>
		</div>	
	**/
	var idName = "thumb" + index;
	str = "<div class=\"imgCon\" id=\"" + idName + "\">";
	str = str + "<a onclick=\"transfer('" + index + "')\" href=\"#image\">";
	str = str + "<img src=\"images/thumbs/" + pdcObj.filename + "_thumb.jpg\" alt='" + pdcObj.title + "' title='" + pdcObj.title + "' />";
	str = str + "</a>";
	str = str + "</div>";
	return str
}
function loadThumbs () {
	/*
		Parse the URL parameters
	*/
	// BEGIN -- build regular expression and parse URL for section
	var regExp = new RegExp ("\\?section=([^&#\\s]*)");
	var results = regExp.exec (window.location.href);
	var section;

	if (results == null) {
		section = "";
	} else {
		section = results[1];
	}
	// END
	// BEGIN -- respond to section choice
	switch (section) {
		case 'archive':	thumbs = archiveList; break;
		case 'yupo':	thumbs = yupoList; break;
		case 'acrylic': thumbs = acrylicList; break;
		case 'wColor':	thumbs = wColorList; break;
		default:		thumbs = archiveList; break;
	}
	// END
	// BEGIN -- preload the images for quick switching
	preload (thumbs);
	// END
	var str = new String ();
	// BEGIN -- building a string representing all of the thumbnails and the 'onclick' actions
	for (var i in thumbs) {
		//str = str + buildImageString (thumbs[i]) +"\n";
		str = str + buildImageString (thumbs[i], i) +"\n";
	}
	// END
	// write the html compiled above to display thumbnail images
	document.getElementById("thumbs").innerHTML = str;

	// Change the section header.
	switch (section) {
		case 'archive': var src = "archiveSect.gif"; break;
		case 'yupo': var src = "yupoSect.gif"; break;
		case 'acrylic': var src = "acrylicSect.gif"; break;
		case 'wColor': var src = "wColorSect.gif"; break;
		default: var src = "archiveSect.gif"; break;
	}
	
	document.getElementById ("thumbHeader").innerHTML = "<img src=\'images/" + src + "\' />";
	
	// load the first images
	transfer (0);	
}


function preload (pdcArray) {
	imgPtr = new Image ();
	for (var i=0; i<pdcArray.length; i++) {		
		imgPtr.src = "images/" + pdcArray[i].filename + ".jpg";
	}
}