/* 
 *
 * Title:		A Basic DOM-Based Photo Gallery Script
 * Version: 	v0.1
 * Author:		Trovster
 * URL:			www.trovster.com
 *
 *** The Purpose ***
 * Simple: To display a larger image of the clicked thumbnail.
 * The script uses the images which are within a element with ID "gallery".
 * The image is placed in a div with an ID of "large-image".
 *
 *** How To Use ***
 * Create images and thumbnails with the same name.
 * Place the thumbnails in a sub-directory of the main images
 * Sub-directory must be called either "thumbnails", "thumbs" or "small"
 * 
 *** Extras ***
 * You can add some default place-holder text. This is removed when the image is clicked.
 * You can also add generic title text for image tooltips.
 * Neither of these two variables are required for the script.
 *
*/

var theInstructions	= 'Click an image above to view a larger version.'; // the place-holder text
var imageTitle			= 'Click For a Larger View.' // the title popup on the image
var theGalleryName	= 'gallery1' // this is the ID of the ul. Make sure it's unique!
var theLargeImage		= 'large-image' // ID of the larger image div container.

function largerImagePath(imageURL) {
	imageURL = imageURL.replace(/(thumbnail|thumb|small)(s)?\//gi,''); // remove the thumbnails from the image path
	return imageURL;
}
function eventLoader(evt) {
	for(var i = 0; i < document.getElementById(theGalleryName).getElementsByTagName('img').length; i++) {
var clickedImage = document.getElementById(theGalleryName).getElementsByTagName('img')[i]; // get the image in the list
		clickedImage.style.cursor = 'pointer'; // pointer means clickable, but only if JS is enabled
		if(window.imageTitle) {
			clickedImage.title = imageTitle;
		}
		if(document.addEventListener) {
			clickedImage.addEventListener('click',kibworthGallery,false); // a click listener (DOM)
		} else {
			clickedImage.attachEvent("onclick",kibworthGallery); // a click listener (IE)
		}
	}
	
	if(window.theInstructions) {
		var Instructions = document.createElement('p'); // create a paragraph
		var textInstructions = document.createTextNode(theInstructions); // populate the paragraph with some text
		Instructions.appendChild(textInstructions); // add the text to the paragraph
		document.getElementById(theLargeImage).appendChild(Instructions); // add the paragraph into the div id #large-image
	}
}
function kibworthGallery(evt) {
	var newDiv = document.getElementById(theLargeImage); // set up the div where the image is going to be
	var newElement = document.createElement('img'); // create a new image, blank 
	 
	 if(evt.target) {
	 	newElement.src = largerImagePath(evt.target.src); // get the thumbnail image path and run a function (DOM compatible)
	 } else {
	 	newElement.src = largerImagePath(evt.srcElement.src); // get the thumbnail image path and run a function (IE compatible)
	 }
	 if(newDiv.getElementsByTagName('img')[0]) {
	 	newDiv.removeChild(newDiv.getElementsByTagName('img')[0]); // if the div has an image inside, then remove it!
	 }
	 newDiv.appendChild(newElement); // adds the generated element to the page, within the div#large-image
	 newDiv.removeChild(newDiv.getElementsByTagName('p')[0]); // removes the paragraph help text.
}
window.onload = eventLoader;