// JavaScript Document

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 setGallery() {
	thumbnails = xmldata.getElementsByTagName("gallery")[0].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 ="110px 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();
		}

	document.getElementById('left-img').style.background = 'url(' + path + (thumbnails[0].getElementsByTagName('img')[0].getAttribute("src")) + ') no-repeat';
}


function showPict() {
	// Get which thumbnail was clicked
	thumbClicked = this.getAttribute("id");
	
	// Get path to the large image
	var _src = this.getAttribute("href");
	
	// Get image element and change its source with the path from above
	var imageIMG = document.getElementById('left-img').firstChild;
	imageIMG.src = _src;
	
	// Set this var to know which picture is displaying when the swap image function runs
	imgCurrentsrc = _src;
	
	// Transition using Tweening
	var opacityTween = new OpacityTween(imageIMG,Tween.regularEaseOut, 0, 100, 0.5);
	opacityTween.start();
	opacityTween.onMotionFinished = function(){
			document.getElementById('left-img').style.background = 'url(' + imgCurrentsrc + ') no-repeat';
			return false;
	}

	return false;
}