var mainDoc = this;
var images = Array();
var totalImages;//number of images in gallery
var showingNow;
var currentImage = 0;

function insertAfter(newElement,targetElement) {
	var parent = targetElement.parentNode;
	if (parent.lastChild == targetElement) {
		parent.appendChild(newElement);
	} else {
		parent.insertBefore(newElement, targetElement.nextSibling);
	}
}

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

addLoadEvent(prepareGallery);
addLoadEvent(preparePlaceholder);
addLoadEvent(setGalleryWidth);
addLoadEvent(prepareArrows);

/*function prepareGallery() {
	if (!document.getElementsByTagName) {
		return false;
	}
	if (!document.getElementById) {
		return false;
	}
	if (!document.getElementById("galleryThumbs")) {
		return false;
	}
	var gallery = document.getElementById("galleryThumbs");
	var links = gallery.getElementsByTagName("a");
	for (var i = 0; i < links.length; i++) {
		links[i].onclick = function () {
			return showPic(this);
		}
	}
}*/

function prepareGallery() {
	if (!document.getElementsByTagName) {
		return false;
	}
	if (!document.getElementById) {
		return false;
	}
	if (!document.getElementById("galleryThumbs")) {
		return false;
	}
	var gallery = document.getElementById("galleryThumbs");
	var links = gallery.getElementsByTagName("a");
	totalImages = links.length;
	for (var i = 0; i < links.length; i++) {
		links[i].setAttribute("value", i + 1);
		links[i].setAttribute("number", i);
		links[i].onclick = function () {
			/*mainDoc.showingNow.firstChild.nodeValue = this.getAttribute("value");*/
			mainDoc.currentImage = this.getAttribute("number");
			return showPic(this);
		}
		mainDoc.images[i] = links[i];
		
	}
}

function prepareArrows() {
	if (!document.createElement) return false;
	if (!document.createTextNode) return false;
	if (!document.getElementById) return false;
	/*if (!document.getElementById("numOfNum")) return false;*/
	/*var arrowControls = document.createElement("p");
	arrowControls.setAttribute("id","arrowControls");*/
	var prevLink = document.createElement("a");
	prevLink.setAttribute("href","#");
	prevLink.setAttribute("id","prev");
	prevLink.setAttribute("class","hideOver");
	/*var leftArrow = document.createTextNode("< Previous");*/
	var leftArrow = document.createElement("img");
	leftArrow.setAttribute("src", "assets/images/button_prev.gif");
	leftArrow.setAttribute("alt", "previous image");
	prevLink.appendChild(leftArrow);
	
	var nextLink = document.createElement("a");
	nextLink.setAttribute("href","#");
	nextLink.setAttribute("id","next");
	nextLink.setAttribute("class","hideOver");
	var rightArrow = document.createElement("img");
	rightArrow.setAttribute("src", "assets/images/button_next.gif");
	rightArrow.setAttribute("alt", "next image");
	/*var rightArrow = document.createTextNode("Next >");*/
	nextLink.appendChild(rightArrow);
	/*var separator = document.createTextNode(" || ");
	arrowControls.appendChild(prevLink);
	arrowControls.appendChild(separator);
	arrowControls.appendChild(nextLink);
	var numOfNum = document.getElementById("numOfNum");
	insertAfter(arrowControls, numOfNum);*/
	var galleryNavCont = document.getElementById("galleryThumbs");
	var galleryLists = galleryNavCont.getElementsByTagName("ul");
	var galleryList = galleryLists[0];
	
	insertAfter(nextLink, galleryList);
	galleryNavCont.insertBefore(prevLink, galleryList);
	
	var prev = document.getElementById("prev");
	prev.onclick = function () {
		
		mainDoc.currentImage--;
		if (mainDoc.currentImage < 0) {
			mainDoc.currentImage = mainDoc.totalImages - 1;
		}
		return showPic(mainDoc.images[mainDoc.currentImage]);
	}
	var next = document.getElementById("next");
	next.onclick = function () {
		mainDoc.currentImage = parseInt(mainDoc.currentImage) + 1;
		if (mainDoc.currentImage >= mainDoc.totalImages){
			mainDoc.currentImage = 0;
		}
		return showPic(mainDoc.images[mainDoc.currentImage]);
	}
}	


function preparePlaceholder() {
	if (!document.createElement) return false;
	if (!document.createTextNode) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById("galleryThumbs")) return false;
	var galleryContainer = document.getElementById("galleryContent");
	var placeholder = document.createElement("img");
	placeholder.setAttribute("id","placeholder");
	var picture = getFirstPic();
	placeholder.setAttribute("src", picture);
	galleryContainer.appendChild(placeholder);
}

function showPic(whichPic) {
	if (!document.getElementById("placeholder")) return true;
	var source = whichPic.getAttribute("title");
	
	var placeholder = document.getElementById("placeholder");
	placeholder.setAttribute("id","oldImage");
	var container = placeholder.parentNode;
	//chnaged to replace image with another one so that the new image doesn't get stretched to fit the original image dimensions.
	/*if (placeholder.nodeName != "IMG") return true;
	placeholder.setAttribute("src",source);*/
	
	var newImage = document.createElement('img');
	newImage.setAttribute("alt",whichPic.getAttribute("title"));
	newImage.setAttribute("src",source);
	newImage.setAttribute("id","placeholder");
	
	container.replaceChild(newImage, placeholder);
	return false;
}

function getFirstPic() {
	var gallery = document.getElementById("galleryThumbs");
	var images = gallery.getElementsByTagName("a");
	var picture = images[0];
	var firstPic = picture.getAttribute("title");
	return firstPic;
}

function getFirstDesc() {
	var gallery = document.getElementById("galleryThumbs");
	var images = gallery.getElementsByTagName("a");
	var firstPic = images[0];
	var desc = firstPic.getAttribute("title");
	return desc;
}

function setGalleryWidth() {
	var gallery = document.getElementById("galleryThumbs");
	var images = gallery.getElementsByTagName("a");
	var imageListC = gallery.getElementsByTagName("ul");
	var imageList = imageListC[0];
	var numberOf = images.length;
	var individualWidth = 116;
	var listWidth = numberOf * individualWidth;
	imageList.style.width = listWidth  + "px";
	gallery.style.width = listWidth + 120 + "px";
	
}