// JavaScript Document

var imageFolder, fileName, lastImage, slideDescription, slideWidth, slideHeight;
var arrImages = new Array();
var arrImageNames = new Array();
var arrDescriptions = new Array();
var arrWidths = new Array();
var arrHeights = new Array();
var arrCounter = 0;
var currentImage=0;
var standardSlideWidth=600;
var standardSlideHeight=450;
var imagePadding=10;

function importXML(galleryPage){
	page=galleryPage;
	if (document.implementation && document.implementation.createDocument){
		xmlDoc = document.implementation.createDocument("", "", null);
		xmlDoc.onload = getInfo;
	}
	else if (window.ActiveXObject){
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.onreadystatechange = function () {
			if (xmlDoc.readyState == 4) getInfo()
		};
	}else{
		alert('Your browser is unable to display this script.');
		return;
		}
	xmlDoc.load("data/slideshow.xml");
	}


function getInfo(){

	//clean whitespace on the whole document first (because Mozilla and IE interpret white space differently)
	cleanWhitespace(xmlDoc);

	categories = xmlDoc.getElementsByTagName("category");

	for (var i = 0; i <= categories.length-1; i++){
		category = xmlDoc.getElementsByTagName("category")[i];
		folder = category.childNodes[0].lastChild.nodeValue;
		info = "i: "+i+" length: "+categories.length+"folder: "+folder;
		if (folder == page){
			images = category.getElementsByTagName("image");
			for (var j = 0; j <= images.length-1; j++){
				image = category.getElementsByTagName("image")[j];
				fileName = image.childNodes[0].lastChild.nodeValue;
				if (image.childNodes[1]){
					slideDescription = image.childNodes[1].lastChild.nodeValue;
					}
				if (image.childNodes[2]){
					slideWidth=image.childNodes[2].lastChild.nodeValue;
					}
				else{
					slideWidth=standardSlideWidth;
					slideMarginLeft="0";
					}
				if (image.childNodes[3]){
					slideHeight=image.childNodes[3].lastChild.nodeValue;
					slideMarginTop=standardSlideHeight/2-slideHeight/2;
					slideMarginTop="0";
					}
				else{
					slideHeight=standardSlideHeight;
					}
				imageFolder = "images/"+folder+"/";
				loadThumbnails();
				}
//			loadSlide(0);  //this used to be used when the image was on the same page as the thumbnails
			}
		}
		lastImage = images.length-1;
	}

//clean whitespace method by Alex Vincent 
var notWhitespace = /\S/;
function cleanWhitespace(node) {
  for (var x = 0; x < node.childNodes.length; x++) {
    var childNode = node.childNodes[x]
    if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) {
// that is, if it's a whitespace text node
      node.removeChild(node.childNodes[x])
      x--
    }
    if (childNode.nodeType == 1) {
// elements can have text child nodes of their own
      cleanWhitespace(childNode)
    }
  }
}

function loadSlide(imageNumber){

	removeElementChildren("slideImage");

	var divSlideImage = document.getElementById("slideImage");
	var divSlideDescription=document.getElementById("slideDescription");		
	
	//create image objects
	var newImage = document.createElement("IMG");

	//display images
	newImage.setAttribute("src",arrImages[imageNumber].src);
	newImage.setAttribute("alt",imageNumber);
	newImage.setAttribute("title",imageNumber);
	newImage.setAttribute("width",arrWidths[imageNumber]);
	newImage.setAttribute("height",arrHeights[imageNumber]);

	divSlideImage.style.display="block";

	slideMarginTop = standardSlideHeight/2-arrHeights[imageNumber]/2-imagePadding*2;
	slideMarginBottom = standardSlideHeight/2-arrHeights[imageNumber]/2-imagePadding*2;
	newImage.style.marginTop=slideMarginTop;  //CHANGE THIS TO BE PROPORTIONAL TO THE IMAGE SIZE
	newImage.style.marginBottom=slideMarginBottom;  //CHANGE THIS TO BE PROPORTIONAL TO THE IMAGE SIZE

	divSlideImage.appendChild(newImage);

	divSlideDescription.innerHTML=arrDescriptions[imageNumber];
	
	currentImage = imageNumber;  // this is a workaround that shouldn't need to happen, but I couldn't figure a way to do this; I just need to have the currentImage number be set to this image number

	}

function loadThumbnails(){

	var divThumbnails=document.getElementById("thumbnails");

	//create image objects
	var newPhotoColumn = document.createElement("DIV");
	var newAnchor = document.createElement("A");
	var newImage = document.createElement("IMG");
	var newDescription = document.createElement("DIV");


	divThumbnails.style.textAlign="left";

	//display images
	newPhotoColumn.setAttribute("class","photo_col");
	newPhotoColumn.style.margin="0 auto 0 auto";
	newPhotoColumn.style.width="220px";
	newPhotoColumn.style.textAlign="center";
	newPhotoColumn.style.styleFloat="left";  //needed for IE (note that it is "styleFloat", not "float", for IE, because "float" is a reserved word in Javascript

	newAnchor.setAttribute("href","javascript:;");
	newImage.setAttribute("src",imageFolder + fileName);
	newImage.setAttribute("alt",slideDescription);
	newImage.setAttribute("title",slideDescription);
	newImage.setAttribute("name",arrCounter); // this is a workaround that shouldn't need to happen, but I couldn't figure a way to do this; I just need to have the currentImage number be set to this image number onClick
	newImage.setAttribute("longdesc",slideWidth);  // this is a workaround that shouldn't need to happen, but I couldn't figure a way to do this; I just need to have the width be set to this number onClick
	newImage.setAttribute("id",slideHeight); // this is a workaround that shouldn't need to happen, but I couldn't figure a way to do this; I just need to have the height be set to this number onClick
	newImage.setAttribute("width",slideWidth);
	newImage.setAttribute("height",slideHeight);

	newDescription.setAttribute("class","description");
	newDescription.style.height="60px";  //needed for IE
	
	var theText = document.createTextNode(slideDescription);
	newDescription.appendChild(theText);
	
	newAnchor.appendChild(newImage);
	newPhotoColumn.appendChild(newAnchor);		
	newPhotoColumn.appendChild(newDescription);
	divThumbnails.appendChild(newPhotoColumn);

	// preload images for next/previous and clicking on thumbnail
	arrImageNames[arrCounter] = [imageFolder+fileName,fileName]; 
	arrImages[arrCounter] = new Image()
	arrImages[arrCounter].src  = arrImageNames[arrCounter][0];
	arrDescriptions[arrCounter] = slideDescription;
	arrWidths[arrCounter] = slideWidth;
	arrHeights[arrCounter] = slideHeight;
	
	newImage.onclick = function(){  //this should have just been a call to loadImageSlideshow, but it wasn't working in IE

		var photoWidth = this.longdesc; // this is a workaround that shouldn't need to happen, but I couldn't figure a way to do this; I just need to have the width be set to this number onClick
		var photoHeight= this.id; // this is a workaround that shouldn't need to happen, but I couldn't figure a way to do this; I just need to have the height be set to this number onClick

		removeElementChildren("thumbnails");
	
		var divReturnControl=document.getElementById("returnControl");		
		var divSlideImage=document.getElementById("slideImage");		
		var divSlideDescription=document.getElementById("slideDescription");		
		var divSlideControls=document.getElementById("slideControls");		

		//create image objects
		var theImage = document.createElement("IMG");
		var theDescription = document.createElement("DIV");
	
		//display images
		theImage.setAttribute("src",this.src);
		theImage.setAttribute("alt",this.alt);
		theImage.setAttribute("title",this.title);
		theImage.setAttribute("width",photoWidth);
		theImage.setAttribute("height",photoHeight);

		//set margins
		slideMarginTop = standardSlideHeight/2-photoHeight/2-imagePadding*2;
		slideMarginBottom = standardSlideHeight/2-photoHeight/2-imagePadding*2;
		theImage.style.marginTop=slideMarginTop;
		theImage.style.marginBottom=slideMarginBottom;

		divSlideImage.style.display="block";
		divSlideImage.appendChild(theImage);

		var theText = document.createTextNode(this.title);
		divSlideDescription.appendChild(theText);
		
		divSlideControls.style.display="block";
		divReturnControl.style.display="block";

		currentImage = this.name;  // this is a workaround that shouldn't need to happen, but I couldn't figure a way to do this; I just need to have the currentImage number be set to this image number

		var imgPrevArrow = document.getElementById("prevArrow");
		var imgNextArrow = document.getElementById("nextArrow");
		
		if(currentImage >= arrImages.length-1){ // if we're on the last slide
			imgNextArrow.src="images/arrow_next_inactive.gif";
		}
		if(currentImage <= 0){ // if we're on the first slide
			imgPrevArrow.src="images/arrow_prev_inactive.gif";
		}
			
	}
	
	arrCounter +=1;
}

function removeElementChildren(elementName){

	// remove all children from element
	var element = document.getElementById(elementName);
	while (element.firstChild) {
	  element.removeChild(element.firstChild);
	}
}
	
function nextImage(){
	var imgPrevArrow = document.getElementById("prevArrow");
	var imgNextArrow = document.getElementById("nextArrow");
	currentImage++;  //increment currentImage to the next slide

	if(currentImage >= arrImages.length-1){ // if we're at the last slide
		currentImage = arrImages.length-1;  // then don't go any further
		imgNextArrow.src="images/arrow_next_inactive.gif";
		}
	if(imgPrevArrow.src="images/arrow_prev_inactive.gif"){  //if the previous arrow is inactive, because we're on the first slide
		imgPrevArrow.src="images/arrow_prev.gif";  //then make it active again
		}
	loadSlide(currentImage);  //make the image source be the image source for the new number currentImage in the array
}

function prevImage(){
	var imgPrevArrow = document.getElementById("prevArrow");
	var imgNextArrow = document.getElementById("nextArrow");
	currentImage--;  //increment currentImage to the next slide

	if(currentImage <= 0){  // if we're at the first slide
		currentImage = 0;  // then don't go any earlier
		imgPrevArrow.src="images/arrow_prev_inactive.gif";
		}
	if(imgNextArrow.src="images/arrow_next_inactive.gif"){  //if the next arrow is inactive, because we're on the last slide
		imgNextArrow.src="images/arrow_next.gif"; //then make it active again
		}
	loadSlide(currentImage);  //make the image source be the image source for the new number currentImage in the array
}