//declare a variable as a persitant reference to the main script
var main = this;

//make an array to hold a list of all the images in the gallery
var images = Array();

//a variable to hold the total number of images in the gallery
var totalImages;

//keep track of which image is displayed now
var showingNow;

//keep track of the current image.
var currentImage = 0;

//variable to hold the id of the div that contains the gallery
var galleryID = "gallery";

//variable to hold the id of the list that holds the thumbnails
var listID = "thumbnails";

var preloaded = Array();

/*a nice function for inserting nodes into the doc tree after a given node*/
function insertAfter(newElement,targetElement) {
	var parent = targetElement.parentNode;
	if (parent.lastChild == targetElement) {
		parent.appendChild(newElement);
	} else {
		parent.insertBefore(newElement, targetElement.nextSibling);
	}
}

/*reusable function for adding function to the onload event of the document*/
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(prepareArrows);

//this function will prepare the thumbnails links
//to execute showPic() instead of directly linking to the images.
function prepareGallery (){
	//check to see if the dom functions we need are available
	if (!document.getElementsByTagName) { return false; }
	if (!document.getElementById) { return false; }
	
	
	//make sure the list of thumbnails exists
	if (!document.getElementById(main.listID)) { return false; }
	
	//store a local reference to the list of thumbnails in the function
	var thumbList = document.getElementById(main.listID);
	
	//store all the links in the list in an array
	var links = thumbList.getElementsByTagName("a");
	
	//set the total images
	main.totalImages = links.length;
	
	//loop through the links and prepare each one
	for (var i = 0; i < links.length; i++) {
		//set the value for each link to a number which we will use 
		//for displaying the number of the current image in the sequence
		links[i].setAttribute("value", i + 1);
		links[i].setAttribute("number", i);
		links[i].onclick = function () {
				main.showingNow.firstChild.nodeValue = this.getAttribute("value");
				main.currentImage = this.getAttribute("number");
				return showPic(this);				
		}
		main.images[i] = links[i];
		main.preloaded[i] = new Image;
		main.preloaded[i].src = links[i].getAttribute("href");
		
	}
}

function preparePlaceholder() {
	if (!document.createElement) return false;
	if (!document.createTextNode) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById(main.listID)) return false;
	var galleryOutput = document.createElement("div");
	galleryOutput.setAttribute("id","galleryOutput");
	var imgLink = document.createElement("a");
	imgLink.setAttribute("id", "imgLink");
	var placeholder = document.createElement("img");
	placeholder.setAttribute("id","placeholder");
	//var picture = getFirstPic();
	//placeholder.setAttribute("src", picture);
	var text = getFirstDesc();
	placeholder.setAttribute("alt",text);
	var description = document.createElement("p");
	description.setAttribute("id","description");
	var desText = document.createTextNode(text);
	description.appendChild(desText);
	var showing = document.createElement("span");
	showing.setAttribute("id", "showing");
	var showingNumber = document.createTextNode("1");
	showing.appendChild(showingNumber);
	var outOf = document.createTextNode(totalImages);
	var separator = document.createTextNode("/");
	var numOfNum = document.createElement("p");
	numOfNum.setAttribute("id","numOfNum");
	numOfNum.appendChild(showing);
	numOfNum.appendChild(separator);
	numOfNum.appendChild(outOf);
	var gallery = document.getElementById(main.listID);
	galleryOutput.appendChild(imgLink);
	imgLink.appendChild(placeholder);
	galleryOutput.appendChild(description);
	galleryOutput.appendChild(numOfNum);
	insertAfter(galleryOutput, gallery);
	main.showingNow = document.getElementById("showing");
	showFirstPic();
	var firstPic = document.getElementById("placeholder");
	//firstPic.height = 400;
	//firstPic.width = 290;
}

function showFirstPic() {
	var firstPic = getFirstPic();
	var firstHeight = firstPic.getAttribute("height");
	var firstWidth = firstPic.getAttribute("width");
	var adjustedWidth = 350;
	var adjustedHeight = (firstHeight * adjustedWidth)/firstWidth;
	showPic(getFirstPic());
	var placeholder = document.getElementById("placeholder");
	placeholder.setAttribute("height",adjustedHeight);
	placeholder.setAttribute("width",adjustedWidth);
	//document.getElementById("placeholder").src.onload = resizeImage(document.getElementById("placeholder"));
}

function resizeFirstImg() {
	do {
		if (document.getElementById("placeholder")) {
			var firstImage = document.getElementById("placeholder");
			resizeImage(firstImage);
		}
	} while (firstImage.height == 0);
}

function checkImageSize () {
	alert(document.getElementById("placeholder").height);
}
	

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");
	var leftArrow = document.createTextNode("< Previous");
	prevLink.appendChild(leftArrow);
	var nextLink = document.createElement("a");
	nextLink.setAttribute("href","#");
	nextLink.setAttribute("id","next");
	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 prev = document.getElementById("prev");
	prev.onclick = function () {
		main.currentImage = main.currentImage - 1;
		if (main.currentImage < 0) {
			main.currentImage = main.totalImages - 1;
		}
		main.showingNow.firstChild.nodeValue = currentImage + 1;
		return showPic(main.images[main.currentImage]);
	}
	var next = document.getElementById("next");
	next.onclick = function () {
		main.currentImage = parseInt(main.currentImage) + 1;
		if (main.currentImage >= main.totalImages){
			main.currentImage = 0;
		}
		main.showingNow.firstChild.nodeValue = currentImage + 1;
		return showPic(main.images[main.currentImage]);
	}
}

function showPic(whichPic) {
	if (!document.getElementById("placeholder")) { return true; }
	var source = whichPic.getAttribute("href");
	
	var imgLink = document.getElementById("imgLink");
	imgLink.setAttribute("href", source);
	
	var placeholder = document.getElementById("placeholder");
	placeholder.setAttribute("id","oldImage");
	var container = placeholder.parentNode;
	
	
	var newImage = document.createElement('img');
	newImage.setAttribute("alt",whichPic.getAttribute("title"));
	newImage.setAttribute("src",source);
	newImage.setAttribute("id","placeholder");
	
	
	container.replaceChild(newImage, placeholder);
	
	
	var text = whichPic.getAttribute("title") ? whichPic.getAttribute("title") : "";
	if (!document.getElementById("description")) return false;
	var description = document.getElementById("description");
	if (description.firstChild.nodeType == 3) {
		description.firstChild.nodeValue = text;
	}
	
	resizeImage(document.getElementById("placeholder"));
	return false;
	
}

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

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

function resizeImage (whichImg) {
	var origHeight = whichImg.height;
	var origWidth = whichImg.width;
	var maxHeight = window.innerHeight - 200;
	var maxWidth = 450;
	var resized= false;
	if (origHeight > maxHeight) {
		
		var newHeight = maxHeight;
		var newWidth = origWidth * newHeight / origHeight;
		whichImg.width = newWidth;
		whichImg.height = newHeight;
		resized = true;
	} else {
		resized = false;
	}
	origHeight = whichImg.height;
	origWidth = whichImg.width;
	if (origWidth > maxWidth) {
		var newWidth = maxWidth;
		var newHeight = origHeight * newWidth / origWidth;
		whichImg.height = newHeight;
		whichImg.width = newWidth;
		resized = true;
	}
	if (resized == true) {
		if (!document.getElementById("clickToEnlarge")) {
			var enlarge = document.createElement("p");
			var enlargeText = document.createTextNode("Click Image to Enlarge");
			enlarge.appendChild(enlargeText);
			enlarge.setAttribute("id","clickToEnlarge");
			insertAfter(enlarge, whichImg);
			whichImg.style.cursor = "url('assets/templates/mainTemplate/img/magnify.png') arrow";
		}
	} else {//if resized is not true:
		if (document.getElementById("clickToEnlarge")) {
			var enlarge = document.getElementById("clickToEnlarge");
			var container = enlarge.parentNode;
			container.removeChild(enlarge);
			whichImg.style.cursor = "default";
		}
	}
	return false;
}