// JavaScript Document
window.onload = ajaxFunction;

var  xmldata;
var ajaxRequest;  // The variable that makes Ajax possible!

var container;		// Element in which to place the thumbnails with addChild
var path;			// Path to the gallery folder; this is set bellow
var thumbClicked;	// Keep track of which thumbnail was clicked so we can show the next big picture
var imgCurrentsrc;		// The big image being displayed. This var is set when clicked on thumbnail

function ajaxFunction(){
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser doesn't support XML requests");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = processReqChange;
	ajaxRequest.open("GET", "portfoliogallery/gallery.xml", true);
	ajaxRequest.send(null);
}

function processReqChange(){
		if(ajaxRequest.readyState == 4){
			//document.myForm.time.value = ajaxRequest.responseText;
			xmldata = ajaxRequest.responseXML;
			
			
			setGallery();												// If everything is loaded correctly, call the function to make the gallery
		}
	}


function setGallery() {
	thumbnails = xmldata.getElementsByTagName("thumbnail");
	
	// Set HTML element in which to place the gallery
	var _Container	= xmldata.getElementsByTagName("container")[0];
	container		= document.getElementById(_Container.getAttribute("id"));
	
	
	// Get the path to the image folder so I don't have to type it for each link
	var gallery = xmldata.getElementsByTagName("gallery")[0];
	path = gallery.getAttribute("path");
	
	// Build gallery of thumbnails
	for(i=0; i< thumbnails.length; i++) {
		
		// Create the building blocks [div[a[img]]]
		var newThumb = document.createElement("div");
		var thumbLink	= document.createElement("a");

			// Set the initial opacity for main browsers ( For Opacity animation bellow)
			newThumb.style.opacity = 0;
			newThumb.style.MozOpacity = 0; // Firefox 1.5 and earlier
			if(document.all) {
				newThumb.style.filter="Alpha(opacity=100)";
			};	

		// Assign a class to the DIV so it can be styled with CSS
		newThumb.setAttribute( "class", "thumbnail");
		newThumb.setAttribute( "className", "thumbnail"); // for EI
		
		// Assign an ID to the link so we can tracked which one was clicked to later swap to the next image
		thumbLink.setAttribute("id", i);
		
		// Get path to thumb's image
		thumbImgPath = path + (thumbnails[i].getAttribute("src"));
		newThumb.style.background = "url(" + thumbImgPath + ") top center no-repeat";
		thumbLink.style.padding ="45px 0 0 0";
		
		// Retrieve and set path to large image for each thumbnail
		var newLargeIMG = thumbnails[i].getElementsByTagName("img");
		var largeIMG = path + (newLargeIMG[0].getAttribute("src"));
		
		// Set onclick events
		thumbLink.href = largeIMG;
		thumbLink.target = "_blank";
		thumbLink.onclick = showPict;
		
		// Retrieve and set captions for the pictures
		var newcaption = thumbnails[i].getElementsByTagName("captions");
		var caption = document.createTextNode(newcaption[0].firstChild.data);
		
		// Let there be thumbnails
		thumbLink.appendChild(caption);
		newThumb.appendChild(thumbLink);
		container.appendChild(newThumb);
		
		// Transition using Tweening
		newThumb.setAttribute("id", "thumb" + i);
		var opacityTween = new OpacityTween(document.getElementById("thumb" + i),Tween.regularEaseOut, 0, 100, 2);
		opacityTween.start();

	}

}


function showPict() {
	// Get which thumbnail was clicked
	thumbClicked = this.getAttribute("id");
	
	// Get path to the large image
	var _src = this.getAttribute("href");
	var _caption =this.firstChild.data;
	
	// Create the holding DIV and give it an ID for CSS
	var imageDIV = document.createElement("div");
	imageDIV.setAttribute("id", "largeImage");
	
	// Create the Image element and set the path from above
	var imageIMG = document.createElement("img");
	imageIMG.src = _src;
	
	// Set this var to know which picture is displaying when the swap image function runs
	imgCurrentsrc = _src;
	
	// Create navigation at the bottom of the image
	var navBar = document.createElement("div");
		navBar.setAttribute("id", "navBar");
	var captionBar = document.createElement("h6");
		captionBar.setAttribute("id", "captionBar");
		captionBar.innerHTML = _caption;
			navBar.appendChild(captionBar);
/*	var nextPrev = document.createElement("h6");
		nextPrev.setAttribute("id", "nextPrev");
		nextPrev.innerHTML = "next";
		nextPrev.onclick = swapImg;
		navBar.appendChild(nextPrev);*/
	var closeBut = document.createElement("h6");
		closeBut.setAttribute("id", "closeBut");
		closeBut.innerHTML = "X";
		closeBut.onclick = hidePict;
		navBar.appendChild(closeBut); 

	// Style elements with ID navBar, captionBar, nextPrev, and closeBut
		
	// Append everything to the webpage
	container.appendChild(imageDIV);
	imageDIV.appendChild(imageIMG);
	imageDIV.appendChild(navBar);
	
	// Set the initial opacity for main browsers
	imageDIV.style.opacity = 0;
	imageDIV.style.MozOpacity = 0; // Firefox 1.5 and earlier
	if(document.all) {
		imageDIV.style.filter="Alpha(opacity=100)";
		};
	
	// Transition using Tweening
	var opacityTween = new OpacityTween(document.getElementById('largeImage'),Tween.regularEaseOut, 0, 100, 2);
	opacityTween.start();
	
	// When the transition finishes set the onclick event to hide the picture
	opacityTween.onMotionFinished = function() {imageIMG.onclick = hidePict;}

	return false;
}


function hidePict() {
	// Remove onclick event so things don't go crazy with a happy clicker ... like D.
	var imageIMG = document.getElementById("largeImage").firstChild;
	imageIMG.onclick = null;
	
	var opacityTween = new OpacityTween(document.getElementById('largeImage'),Tween.regularEaseOut, 100, 0, 2);
	opacityTween.start();

	opacityTween.onMotionFinished = function() {
		var imageDIV = document.getElementById("largeImage");
		imageDIV.parentNode.removeChild(imageDIV);
	}
}

function swapImg() {
		var img1src = path + (thumbnails[thumbClicked].getElementsByTagName("img")[0].getAttribute("src"));
		var img2src = path + (thumbnails[thumbClicked].getElementsByTagName("img")[1].getAttribute("src"));
		var imgCurrent = document.getElementById("largeImage").firstChild;
		//var imgCurrentsrc = imgCurrent.getAttribute("src");

		
		var text = document.getElementById("nextPrev");
						
		if(imgCurrentsrc == img1src) {
			imgCurrent.src = img2src;
			imgCurrentsrc = img2src;
			text.innerHTML = "previous";
		}
		else if(imgCurrentsrc == img2src) {
			imgCurrent.src = img1src;
			imgCurrentsrc = img1src;
			text.innerHTML = "next";
		}
}