window.onload = function() {
	var images = document.getElementsByTagName("img");
	var thumbnails = new Array();
	var n=0;
	for (var i=0; i<images.length; i++) {
		if (images[i].className == "thumbnail") {
			thumbnails[n] = images[i];
			n++;
		}
	}
	for (var i=0; i<thumbnails.length; i++) {
		thumbnails[i].onclick = loadImage;
	}
}
function loadImage() {
	var imageId = this.id;
	var pageRequest = false;
	if (window.XMLHttpRequest) {
		pageRequest = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		pageRequest = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		return false;
	}
	pageRequest.onreadystatechange = function() {
		filterImage(pageRequest);
	}
	if (imageId) {
		var sendId = 'id=' + imageId;
		pageRequest.open('POST','inc/loadimage.php',true);
		pageRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		pageRequest.send(sendId);
	}
}
function filterImage(pageRequest) {
	if (pageRequest.readyState < 4) {
		document.getElementById("imageinfo").innerHTML = '<p class="loading">Loading...</p>';
	} else if (pageRequest.readyState == 4) {
		if (pageRequest.status == 200) {
			var responseString = pageRequest.responseText;
			var responseArray = responseString.split('||||');
			var imagePath = responseArray[0];
			var imageTitle = responseArray[1];
			var imageYear = responseArray[2];
			var imageCaption = responseArray[3];
			document.getElementById("mainimage").src = imagePath;
			var imageInfo = '<p>' + imageTitle + ' (' + imageYear + ')</p><p>' + imageCaption + '</p>';
			document.getElementById("imageinfo").innerHTML = imageInfo;
		} else {
			document.getElementById("imageinfo").innerHTML = '<p class="errormessage">The image you requested is not available.</p>';
		}
	} else {
		return;
	}
}