/*
 * Photo Gallery Functionality
 * 
 * This script set powers the Photo Galleries.
 * It includes switching out thumbnails for larger photos and allows
 * people to view the photos without a page refresh.
 *
 */

function showPic(whichpic) {
	// Look for the img-lg <div> that is created by preparePlaceholder(). If it
	// isn't here, something's wrong so don't do anything.
	var theImg = document.getElementById("img-lg");
	if (!theImg) return true;

	// Find the image's orientation.
	var orientation = whichpic.className;
	theImg.className = orientation;

	// If we don't have the placeholder <img>, can't do anything so leave.
	if (!document.getElementById("placeholder")) return true;
	
	var fullsource = whichpic.getAttribute("href");
	var splitsource = fullsource.split("imgSrc=");
	var source = splitsource[1];
	
	// Set the placeholder <img> width and height based upon the orientation.
	var placeholder = document.getElementById("placeholder");
	placeholder.src = source;
	if(orientation == 'portrait') {
		placeholder.height = '400';
		placeholder.width = '300';
	}
	if(orientation == 'landscape') {
		placeholder.height = '300';
		placeholder.width = '400';
	}

	// If we have a caption then show it.
	if (document.getElementById("caption"))
	{
		// Grab the caption text from the thumbnail's title attribute.
		if (whichpic.getAttribute("title")) {
			var text = whichpic.getAttribute("title");
		} else {
			var text = "";
		}

		// Put the text in the caption <p>.
		var description = document.getElementById("caption");
		if (description.firstChild.nodeType == 3) {
			description.firstChild.nodeValue = text;
		}
	}

/* Tri playing around with adding left/right buttons. 
	// Update the left/right buttons.
	
	// Look for the thumbnails <table> that contains all the thumbnail photos in the gallery.
	if (!document.getElementById("thumbnails")) return false;
	var gallery = document.getElementById("thumbnails");	
	
	// Go through all the <a> links in the table to find which one was used to show the current picture.
	var links = gallery.getElementsByTagName("a");
	var found = false;
	var i;
	for (i=0; i < links.length; i++) {
		if (links[i] == whichpic)
		{
			found = true;
			break;
		}
	}
	
	// After we get that one, get the previous and next ones.
	if (found)
	{
		var prevIndex = i - 1;
		var nextIndex = i + 1;
		
		var prevLink = document.getElementById("previmage");
		if (prevLink)
		{
			if (prevIndex >= 0)
			{
				prevLink.onclick =  function() { return showPic(links[prevIndex]) };
				prevLink.style.display = "block";
			}
			else
			{
				prevLink.onclick = null;
				prevLink.style.display = "none";
			}
		}
		
		var nextLink = document.getElementById("nextimage");
		if (nextLink)
		{
			if (nextIndex < links.length)
			{
				nextLink.onclick = function() { return showPic(links[nextIndex]) };
				nextLink.style.display = "block";
			}
			else
			{
				nextLink.onclick = null;
				nextLink.style.display = "none";
			}
		}
	}
/* */
	return false;
}

// Setup the placeholder image by creating new elements and placing them inside the
// exisiting but empty photos <div> as such:
//
//  <div id="photos">
//     <div id="img-lg" class="landscape">
//         <img id="placeholder" src="/img/galleries/placeholder.gif" alt="my image gallery">
//         <p id="caption">Select a thumbnail to view the larger photo.</p>
//     </div>
//  </div>
function preparePlaceholder() {
	// Make sure we have DOM support for what we need to do.
	if (!document.createElement) return false;
	if (!document.createTextNode) return false;
	if (!document.getElementById) return false;
	
	// Look for the empty <div id="photos">. If it doesn't exist, don't go on.
	var photoarea = document.getElementById("photos");
	if (!photoarea) return false;

/* Tri playing around here to add left/right buttons to the gallery.
   10-06-2008 Works fine with FireFox and Safari. Won't show up with IE 7. Need to debug.

	// Create a new <table> to hold the left and right buttons with the image placeholder
	// in the middle.
	var table = document.createElement("table");
	var row = document.createElement("tr");
	var tdLeft = document.createElement("td");
	tdLeft.width = 50;
	var tdCenter = document.createElement("td");
	tdCenter.align = "center";
	tdCenter.width = 410;
	var tdRight = document.createElement("td");
	tdRight.width = 50;
	
	row.appendChild(tdLeft);
	row.appendChild(tdCenter);
	row.appendChild(tdRight);
	
	table.appendChild(row);

	// Create a link for the left.
	var linkLeft = document.createElement("a");
	linkLeft.setAttribute("id", "previmage");
	var imgLeft = document.createElement("img");
	imgLeft.src = "/img/galleries/prev.gif";
	linkLeft.appendChild(imgLeft);
	tdLeft.appendChild(linkLeft);

	// Create a link for the right.
	var linkRight = document.createElement("a");
	linkRight.setAttribute("id", "nextimage");
	var imgRight = document.createElement("img");
	imgRight.src = "/img/galleries/next.gif";
	linkRight.appendChild(imgRight);
	tdRight.appendChild(linkRight);
/ * */

	// Create a new <img> tag as the placeholder.
	var placeholder = document.createElement("img");
	placeholder.setAttribute("id","placeholder");
	placeholder.setAttribute("src","/img/galleries/placeholder.gif");
	placeholder.setAttribute("alt","my image gallery");
	
	// Create a new <p> tag for the image description.
	var description = document.createElement("p");
	description.setAttribute("id","caption");

	// Add default text into the description.
	var desctext = document.createTextNode("Select a thumbnail to view the larger photo.");
	description.appendChild(desctext);

	// Create a new <div> with the id "img-lg" and with the class "landscape" to setup its initial dimensions.
	var imgLarge = document.createElement("div");
	imgLarge.setAttribute("id","img-lg");
	imgLarge.setAttribute("class", "landscape");
	
	// Add the placeholder <img> and the description <p> into the img-lg <div>.
	imgLarge.appendChild(placeholder);
	imgLarge.appendChild(description);

	// Add that img-lg <div> into the empty photos <div>.
	photoarea.style.align = "center";
	photoarea.appendChild(imgLarge);

/* Tri playing around to add left/right buttons to the gallery. 
	tdCenter.appendChild(imgLarge);
	photoarea.appendChild(table);	
/* */
}

// This function finds all the thumbnail links in the gallery and tells them to
// call the showPic() function when clicked.
function prepareGallery() {
	// Make sure the DOM supports what we want to do.
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;

	// Look for the thumbnails <table> that contains all the thumbnail photos in the gallery.
	if (!document.getElementById("thumbnails")) return false;
	var gallery = document.getElementById("thumbnails");

	// Go through all the <a> links in the table and update them to run showPic() when clicked.
	var links = gallery.getElementsByTagName("a");
	for ( var i=0; i < links.length; i++) {
		links[i].onclick = function() {
			return showPic(this);
		}
	}
	
	// Show the first photo in the gallery automatically.
	if (links.length > 0)
	{
		showPic(links[0]);
	}
}

// Make sure the preparation functions are run when the gallery is loaded.
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);