// ---------------------------------------------------------------------------
// Globals
// ---------------------------------------------------------------------------
var Globals = {};
Globals.photoList = null;
Globals.thumbnailWidth = 80;
Globals.thumbnailHeight = 60;
Globals.bigPhotoImage = null;
Globals.bigPhotoTitle = null;
Globals.photoIndex = 1;
Globals.majorVersion = 0;
Globals.minorVersion = 0;

// ---------------------------------------------------------------------------
// photos display
// ---------------------------------------------------------------------------
// Special handler for IE
function bodyKeydown(event) {
	if(!event) event = window.event; // IE fix
	bodyKeypress(event);
}
function bodyKeypress(event) {
	//log("keyCode="+event.keyCode+", charCode=<"+event.charCode+">, target="+event.target);
	var returnValue = true;
	var newIndex = Globals.photoIndex;
	if(event.keyCode==37 || event.keyCode==38 || event.keyCode==63234 || event.keyCode==63232) {
		// left arrow and up arrow
		if(newIndex>1) --newIndex;
		if(event.preventDefault) event.preventDefault();
		if(event.cancelBubble) event.cancelBubble = true;
		returnValue = false; // IE preventDefault
	} else if(event.keyCode==39 || event.keyCode==40 || event.keyCode==63233 || event.keyCode==63235) {
		// right arrow and down arrow
		if(newIndex<Globals.photoList.length-1) ++newIndex;
		if(event.preventDefault) event.preventDefault();
		if(event.cancelBubble) event.cancelBubble = true;
		returnValue = false; // IE preventDefault
	}
	selectPhotoIndex(newIndex);
	return returnValue;
}
function selectPhotoIndex(index) {
	Globals.photoList[Globals.photoIndex].img.className = "";
	Globals.photoIndex = index;
	var item = Globals.photoList[Globals.photoIndex];
	var selectedImg = item.img;
	selectedImg.className = "selected";
	
	Globals.bigPhotoImage.src = "Images/"+item.filename;
	Globals.bigPhotoImage.title = item.filename;
	selectedImg.scrollIntoView(false);
	var descriptionHTML = "";
	if(item.comments.length > 0)
		descriptionHTML += ": <span class=\"description\">"+item.comments+"</span>";
	Globals.bigPhotoTitle.innerHTML = "<span class=\"title\">" + item.title + descriptionHTML + "</span>";
}
function thumbMouseDown(event) {
	if(!event) event = window.event; // IE fix
	var target = event.target;
	if(!target) target = event.srcElement; // IE fix
	selectPhotoIndex(target.photoIndex);
	//document.body.focus();
}
function createPhotoPage() {
	Globals.bigPhotoImage = document.getElementById("bigphotoimage");
	Globals.bigPhotoTitle = document.getElementById("bigphototitle");

	// Fill the thumbnail div
	var thumbnails = document.getElementById("thumbnails");
	for(var i = 0; i<Globals.photoList.length; ++i) {
		var item = Globals.photoList[i];
		if(item.filename=="Header") {
			document.title = item.title.replace(/<[^>]*>/g, "");
			var html = "<span class=\"title\"><b>" + item.title+"</br></span>";
			if(item.comments.length > 0)
				html += ": <span class=\"description\">"+item.comments+"</span>";
			document.getElementById("overalltitle").innerHTML = html;
		} else {
			var thumb = document.createElement("img");
			item.img = thumb;
			thumb.style.height = Globals.thumbnailHeight.toString()+"px";
			thumb.style.width = Globals.thumbnailWidth.toString()+"px";
			thumb.src = "Thumbnails/"+item.filename;
			thumb.alt = item.title;
			thumb.title = item.title;
			thumb.photoIndex = i;
			addEventHandler(thumb, "mousedown", thumbMouseDown);
			thumbnails.appendChild(thumb);
		}
	}
	// This assumes that item 0 is the header. Fix this later.
	selectPhotoIndex(1);
}

// ---------------------------------------------------------------------------
// initialization: generate the basic page DIVs
// ---------------------------------------------------------------------------
addEventHandler(window, "load", initphotos);

function initphotos() {
	addToBody("div", "overalltitle", "title");
	addToBody("div", "thumbnails");
	setUpHelp();
	addToBody("span", "bigphototitle", "title");
	addToBody("img", "bigphotoimage");
	
	makeXMLHttpRequest("GET", "photoList", photoListReturned);
	// Use a different event in IE
	if(document.addEventListener)
		addEventHandler(document, "keypress", bodyKeypress);
	else
		addEventHandler(document, "keydown", bodyKeydown);
}

// ---------------------------------------------------------------------------
// help button
// ---------------------------------------------------------------------------
function setUpHelp() {
	Globals.helpDiv = addToBody("div", "help");
	addEventHandler(Globals.helpDiv, "mousedown", helpMouseDown);
	Globals.helpDiv.innerHTML = "<b>Help</b>";
	Globals.helpDiv.expanded = false;
}
function helpMouseDown(event) {
	var helpText;
	if(Globals.helpDiv.expanded) {
		Globals.helpDiv.style.width = "2.3em";
		helpText = "<b>Help</b>";
		Globals.helpDiv.expanded = false;
	} else {
		Globals.helpDiv.style.width = "70%";
		helpText =
"<b>Click inside this box to hide this help text</b>"+
"<ul>"+
"<li>Click on a thumbnail to see the big version of the picture.</li>"+
"<li>Use the arrow keys to move forward or backward through the big pictures. "+
"(Give the picture a little time to load.)</li>"+
"<li>Let us know if you have any problems.</li></ul>"
		Globals.helpDiv.expanded = true;
	}
	Globals.helpDiv.innerHTML = helpText;
}

// ---------------------------------------------------------------------------
// get and parse photo list
// ---------------------------------------------------------------------------
function photoListReturned(request) {
	if( request.status != 200) {
		log("ERROR: photoList fetch failed, "+request.status);
	}
		
	// Split up the returned string on "|"s and interpret the result
	Globals.photoList = [];
	var items = request.responseText.split("\n");
	
	// Get the version number
	var matches = items[0].match(/(\d+)\.(\d+)/);
	//log("items[0]=<"+items[0]+">");
	//log("matches=<"+matches+">");
	Globals.majorVersion = matches[1];
	Globals.minorVersion = matches[2];
	//log("Version "+Globals.majorVersion+"-"+Globals.minorVersion);
	var itemsIndex = 1;
	
	while(itemsIndex<items.length) {
		var filename = items[itemsIndex];
		if(filename.length==0) break;
		++itemsIndex;
		var title = items[itemsIndex];
		++itemsIndex;
		var comments = "";
		while(items[itemsIndex].length>0) {
			comments += items[itemsIndex];
			++itemsIndex;
		}
		++itemsIndex;
		var element = {"filename":filename, "title":title, "comments":comments, "img":null};
		Globals.photoList.push(element);
	}
	createPhotoPage();
}

// ---------------------------------------------------------------------------
// cross-browser compatibility and helper functions
// ---------------------------------------------------------------------------
function makeXMLHttpRequest(method, uri, returnFunction) {
	var request = getXMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4) { returnFunction(request); }
    }
    request.open(method, uri, true);
    request.send(null);
}
function getXMLHttpRequest() {
    var request = null;
	try { request = new XMLHttpRequest(); }
	catch (trymicrosoft) {
		try { request = new ActiveXObject("Msxml2.XMLHTTP"); }
		catch (othermicrosoft) {
			try { request = new ActiveXObject("Microsoft.XMLHTTP"); }
			catch (failed) { request = null; }
		}
	}
	return request;
}
function addEventHandler(element, eventType, handler) {
	if(document.addEventListener)
		element.addEventListener(eventType, handler, false);
	else
		element.attachEvent("on"+eventType, handler);
}
function addToBody(name, id, className) {
	var element = document.createElement(name);
	element.id = id;
	if(className) element.className = className;
	document.body.appendChild(element);
	return element;
}

// ---------------------------------------------------------------------------
// logging function
// ---------------------------------------------------------------------------
function log(logItem) {
	// Find the "log" div or create it.
	var logDiv = document.getElementById("log");
	if(!logDiv) {
		logDiv = document.createElement("div"); logDiv.id = "log";
		logDiv.style.border = "solid #666 1px"; logDiv.style.maxHeight = "300px";
		logDiv.style.overflow = "auto"; logDiv.style.font = "12px Courier";
		document.body.appendChild(logDiv);
	}
	var itemDiv = document.createElement("div");
	var now = new Date();
    itemDiv.appendChild(document.createTextNode("<"+now.getHours()+":"+
		now.getMinutes()+":"+now.getSeconds()+"."+now.getMilliseconds()+">"+logItem));
    logDiv.appendChild(itemDiv);
}