// JavaScript Document

<!--
// INITIALIZE VARIABLES:
// width of each thumbnail:
var thumbWidth = 100;
// height of each thumbnail:
var thumbHeight = 100;
// how many thumbnails in a row?
var numThumbsInRow = 5;
// thumbnails' vertical space:
var thumbsVerticalSpace = 7;
// thumbnails' horizoncal space:
var thumbsHorizontalSpace = 7;

// END OF INITIALIZE VARIABLES

window.onload = initThumbs;
var xhr = false;

function initThumbs() {
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	}
	else {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) { }
		}
	}

	if (xhr) {
		xhr.onreadystatechange = showPictures;
		xhr.open("GET", "../xml/interactive_thumbs.xml", true);
		xhr.send();
	}
	else {
		alert("Sorry, but I couldn't create an XMLHttpRequest");
	}
}

function showPictures() {
	if (xhr.readyState == 4) {
		
		var pageDiv = document.getElementById("thumbs_area");
	var thumbsContainer = document.getElementById("thumbs_container");
		
	var xmlDoc = xhr.responseXML;
		
	var allImgs = xmlDoc.getElementsByTagName("thumbnail");
	var allURLs = xmlDoc.getElementsByTagName("url");
	
	var allHrefs = new Array();
	allHrefs.length = allImgs.length;
	
	var allThumbs = new Array();
	allThumbs.length = allImgs.length;
	
	var numThumbsRow = 1;
	
	var totalThumbsHeight = 0;
		
		if (xhr.status == 200) {
			for (var i=0; i<allImgs.length; i++) {
				allHrefs[i] = document.createElement("a");
				allThumbs[i] = document.createElement("img");
				
				var currURL = "http://www.seaserpent.com/images/portfolio/interactive/small/";
				var currCloseUp = "http://www.seaserpent.com/interactive/";
				
				if (window.ActiveXObject) {
					currURL = currURL + allImgs[i].text;
					currCloseUp = currCloseUp + allURLs[i].text;
				} else {
					currURL = currURL + allImgs[i].textContent;
					currCloseUp = currCloseUp + allURLs[i].textContent;
				}
				
				
				allThumbs[i].setAttribute('src', currURL);
				allThumbs[i].setAttribute('width', thumbWidth);
				allThumbs[i].setAttribute('height', thumbHeight);
				allThumbs[i].border = 0;
				allThumbs[i].vspace = thumbsVerticalSpace;
				allThumbs[i].hspace = thumbsHorizontalSpace;
												
				allHrefs[i].appendChild(allThumbs[i]);
				
				allHrefs[i].setAttribute('href', currCloseUp);
								
				thumbsContainer.appendChild(allHrefs[i]);
				
				if ((i + 1) % numThumbsInRow == 0) thumbsContainer.innerHTML = thumbsContainer.innerHTML + "<br />"; 
			}
			var thumbsWidth = numThumbsInRow * (thumbWidth + (thumbsHorizontalSpace * 2));
			thumbsContainer.style.width = thumbsWidth + "px";
			
			var numRows = allImgs.length/numThumbsInRow;
			
			numThumbsRow = parseInt(numRows);
			
			if (allImgs.length % numThumbsInRow == 0) {
				totalThumbsHeight = numThumbsRow * (thumbsVerticalSpace + thumbHeight + thumbsVerticalSpace);
			} else {
				totalThumbsHeight = (numThumbsRow + 1) * (thumbsVerticalSpace + thumbHeight + thumbsVerticalSpace);
			}
			
			thumbsContainer.style.height = totalThumbsHeight + "px";
			
			var pageDivHeight = parseInt(pageDiv.style.height);
						
			if (totalThumbsHeight >= pageDivHeight) {
				thumbsContainer.style.marginTop = 0 + "px";
			} else {
				var thumbsTopMargin = (pageDivHeight/2) - (totalThumbsHeight/2);
				thumbsContainer.style.marginTop = thumbsTopMargin + "px";
			}
			
			var pageDivWidth = parseInt(pageDiv.style.width);
						
			var thumbsLeftMargin = 0;
			
			if (window.ActiveXObject) {
				void(0);
			} else {
				thumbsLeftMargin = (pageDivWidth/2) - (thumbsWidth/2);
				thumbsContainer.style.marginLeft = thumbsLeftMargin + "px";
			}
			
			if (navigator.appName.indexOf("Opera") != -1) {
				var operaWidth = 15;
				var operaHeight = 10;
				
				thumbsContainer.style.width = thumbsWidth + operaWidth + "px";
				thumbsContainer.style.height = totalThumbsHeight + operaHeight + "px";
			} else {
				void(0);
			}
		}
		else {
			alert("There was a problem with the request " + xhr.status);
		}
	}
}