/*
	Javascript for Phil R. Harris
	Author:	David Correll 
			http://www.davidcorrell.net/
*/


/* 	

	*** PORTFOLIO JAVASCRIPT ***
	---------------------------------------------------------------------
	This javascript provides behavior for the portfolio.
	
	What it Does: When the page loads, it creates <div id="showcase">. When the user clicks
	on a thumbnail, the script will pull the href attribute out of the thumbnail's anchor,
	displays the image from the href in <div id="showcase">, and stops the normal anchor behavior.
	
	Usage:
	 	a) If directory structure has changed, set the path to images/portfolio/ at the beginning 
			 of the scripts
		b) prepareShowcase must run on body.onload
	
	Requires: 
		1. The desired image must be in the href attribute of the thumbnail's anchor element.
		2. support for getElementById and getElemementsByTagName. 
		3. Markup must have <ul id="thumbnails">.

		The script is designed for progressive enhancement. This means that if a) the browser has javascript
		disabled, or b) something goes wrong with the script, the script will stop its self, and the 
		thumbnail will simply link to the image in the href.

*/


// Set the generic image path here!
var pathStart = "/images/portfolio/";

// ---------------------------------------
// *** Do not edit below this line! ***
// ---------------------------------------


/* 	if the user has javascript enabled, I want to discourace clicking on the links. So I'm gonna set the cursor.
		This way, people without javascript will see the hand as usual (indicating a click), but users without
		Javascript will not see the hand, discouraging them from clicking. */
function hideHand() {
	// check browser compatability
	if (!document.getElementById) return false;
	if (!document.getElementsByTagName) return false;
	
	var thumbnails = document.getElementById("thumbnails");
	var listItems = thumbnails.getElementsByTagName("a");
	for (var i=0; i < listItems.length; i++) {
		listItems[i].style.cursor = "default";
	}
}
// addLoadEvent(hideHand);

// This is the meat of the rollover
function prepareShowcase() {
	// check browser compatability
	if (!document.getElementById) return false;
	if (!document.getElementsByTagName) return false;
	
	// Set up variables and create elements
	var thumbWrap = document.getElementById("thumbWrap");
	var showcase = document.createElement("div");
	// prepare and insert div "showcase"
	showcase.setAttribute("id","showcase");
	showcase.style.display = "none";
	insertAfter(showcase,thumbWrap);
	
	// get the the anchors, load the new images, and set behavior
	var listItem = thumbWrap.getElementsByTagName("li");
	var links = thumbWrap.getElementsByTagName("a");
	loadImages(links); // don't forget to fix this
	for (var i=0; i < listItem.length; i++) {
		listItem[i].onclick = function() {
			// alert("mouseover");
			var showcase = document.getElementById("showcase");
			// toggle the display of "showcase"
			checkDisplay(showcase);
			// get the anchor
			var theAnchor = this.getElementsByTagName("a");
			// the link is only there for people without javascript, so kill it in case they click
			for (var i=0; i < theAnchor.length; i++) {
				theAnchor[i].onclick = function() {
					return false;
				}
			}
			// get the href out of the anchor and reconstruct it as an image path
			var theImage = theAnchor[0].href;
			temp = theImage.split("/");
			// the last item in the array is the filename:
			theFile = temp.length - 1;
			// the second-to-last is the directory:
			whichDirectory = theFile - 1;
			var path_b = temp[whichDirectory] + "/" + temp[theFile];
			fullPath = pathStart + path_b;

			// Hide the previous textblock
			var textBlocks = getElementsByClassName("art-info");
			for (var i=0; i < textBlocks.length; i++) {
				textBlocks[i].style.display = "none";
			};

			// Show the image
			showImage(showcase,fullPath);
			
			// get the text name
			var theTrigger = theAnchor[0].getAttribute("trigger");
			var theTextDiv = document.getElementById(theTrigger);
			theTextDiv.style.display = "block";

			return false;
		}
	}
	// hide the div when done
	// thumbWrap.onmouseout = function() {
	// 	showcase = document.getElementById("showcase");
	// 	showcase.style.display = "none";
	// 	
	// 	var textBlocks = getElementsByClassName("art-info");
	// 	for (var i=0; i < textBlocks.length; i++) {
	// 		textBlocks[i].style.display = "none";
	// 	};
	// }
}
addLoadEvent(prepareShowcase);


function showImage(showcase,theImage) {
	var imageTest = showcase.getElementsByTagName("img");
	var newImage = document.createElement("img");
	var obscure = document.createElement("img");

	newImage.setAttribute("id","hero");
	newImage.setAttribute("src",theImage);
	targetWidth = newImage.width;
	targetHeight = newImage.height;

	obscure.setAttribute("src","/images/portfolio/obscure.gif");
	obscure.className = "obscure";
	// obscure.setAttribute("width",targetWidth);
	// obscure.setAttribute("height",targetHeight);
	obscure.width = targetWidth;
	obscure.height = targetHeight;
	
	// alert("obscure.height = " + obscure.height);
	
	if (imageTest.length < 1) {
		showcase.appendChild(newImage);
		showcase.appendChild(obscure);
	} else {
		var currentImage = document.getElementById("hero");
		showcase.innerHTML = "";
		showcase.appendChild(newImage);
		showcase.appendChild(obscure);
	}
	
}


function loadImages(links) {
	var newImage = new Array;
	var a = 0;
	for (var i=0; i < links.length; i++) {
		var newImage = "newImage[" + a + "]";
		newImage = document.createElement("img");
		theHref = links[i].href;
		newImage.src = theHref;
		a++;
	}
}

function checkDisplay(theElement) {
	if (theElement.style.display == "none") {
		theElement.style.display = "inline";
	} 
}

function toggleDisplay(theElement) {
	alert("toggleDisplay running");
	if (theElement.style.display == "none") {
		theElement.style.display = "inline";
	} else {
		theElement.style.display = "none";
	}
}

function hideDisplay() {
	if (!document.getElementById("showcase")) return false;
	var showcase = document.getElementById("showcase");
	alert("passed");
	showcase.style.display = "none";
}