// Part I: Create Gallery Navigation
var gallery = document.getElementById("gallery");
var galleryImages = document.getElementById("galleryImages").getElementsByTagName("li");
var galleryNavigation = document.createElement("div");
galleryNavigation.setAttribute("id", "galleryNavigation");
galleryNavigation.className = "inactive";
var galleryNavigationHeader = document.createElement("h1");
galleryNavigationHeader.appendChild(document.createTextNode("Gallery Navigation"));
var galleryNavigationRequirements = document.createElement("p"); // This informs the user that the gallery navigation is useless if they disable CSS, but not ECMAScript.
galleryNavigationRequirements.setAttribute("id", "galleryRequirements");
galleryNavigationRequirements.appendChild(document.createTextNode("You must enable "));
var CSS = document.createElement("abbr");
CSS.setAttribute("title", "Cascading Style Sheets");
CSS.appendChild(document.createTextNode("CSS"));
galleryNavigationRequirements.appendChild(CSS);
galleryNavigationRequirements.appendChild(document.createTextNode(" for the gallery navigation to function properly."));
var galleryNavigationList = document.createElement("ul");
// Specify galleryNavigationListItems within the document or declare it here.
for (var i = 0; i < galleryNavigationListItems.length; i++) {
	var galleryNavigationListItem = document.createElement("li");
	if (galleryNavigationListItems[i][1]) {
		galleryNavigationListItem.setAttribute("id", galleryNavigationListItems[i][1]);
	}
	if (galleryNavigationListItems[i][2]) {
		galleryNavigationListItem.setAttribute("class", galleryNavigationListItems[i][2]);
	}
	galleryNavigationListItem.appendChild(document.createTextNode(galleryNavigationListItems[i][0]));
	galleryNavigationList.appendChild(galleryNavigationListItem);
}
galleryNavigation.appendChild(galleryNavigationHeader);
galleryNavigation.appendChild(galleryNavigationRequirements);
galleryNavigation.appendChild(galleryNavigationList);
gallery.appendChild(galleryNavigation);
// Part II: Assign Event Listeners
galleryNavigation = document.getElementById("galleryNavigation");
galleryNavigationListItems = galleryNavigation.getElementsByTagName("li");
for (var i = 0; i < galleryNavigationListItems.length; i++) {
	galleryNavigationListItems[i].attachEvent("onclick", (function (i) {
		return function () {
			resetGallery();
			galleryImages[i].className = galleryImages[i].className.replace(/inactive/, "active");
			if (galleryNavigationListItems[i].className) {
				galleryNavigationListItems[i].className += " active";
			}
			else {
				galleryNavigationListItems[i].className = "active";
			}
		};
	})(i));
}
// Part III: Initialize Gallery
function resetGallery() {
	for (var j = 0; j < galleryImages.length; j++) {
		if (!galleryImages[j].className) {
			galleryImages[j].className = "inactive";
		}
		else if (galleryImages[j].className.match(/(in)?active/)) {
			galleryImages[j].className = galleryImages[j].className.replace(/(in)?active/, "inactive");
		}
		else {
			galleryImages[j].className += " inactive";
		}
	}
	for (var j = 0; j < galleryNavigationListItems.length; j++) {
		if (galleryNavigationListItems[j].className == "active") {
			galleryNavigationListItems[j].className = "";
		}
		else if (galleryNavigationListItems[j].className) {
			galleryNavigationListItems[j].className = galleryNavigationListItems[j].className.replace(/ ?active ?/, "");
		}
	}
}
resetGallery();
galleryImages[0].className = galleryImages[0].className.replace(/inactive/, "active");
if (galleryNavigationListItems[0].className) {
	galleryNavigationListItems[0].className += " active";
}
else {
	galleryNavigationListItems[0].className = "active";
}
if (galleryNavigation.className == "inactive") {
	galleryNavigation.className = "";
}
else {
	galleryNavigation.className = galleryNavigation.className.replace(/ ?inactive ?/, "");
}