// JavaScript Document
// construct JavaScript verion of different divs for browsers with JavaScript enabled
// the base page does not have JavaScript-only features on it (such as navigation arrows)

//function for insertAfter

function insertAfter(newElement,targetElement) {
	var parent = targetElement.parentNode;
	if (parent.lastChild == targetElement) {
		parent.appendChild(newElement);
	} else {
		parent.insertBefore(newElement,targetElement.nextSibling);
	}
}

// create JavaScript version of the main div; this adds navigation arrows not
// used in the non-JavaScript version that is in the base html for the gallery pages.

function loadMainDiv() {
	var bigPicture = document.getElementById("big_image");
	var mainBackArrow = document.createElement("img");								// set up back arrow
	mainBackArrow.setAttribute("src","../images/navigation/btn_back_normal.jpg");
	mainBackArrow.setAttribute("id","back_button_main");
	bigPicture.parentNode.insertBefore(mainBackArrow,bigPicture);
	var mainForwardArrow = document.createElement("img");							// set up forward arrow
	mainForwardArrow.setAttribute("src","../images/navigation/btn_forward_normal.jpg");
	mainForwardArrow.setAttribute("id","forward_button_main");
	insertAfter(mainForwardArrow,bigPicture);
}
addLoadEvent(loadMainDiv);

// create JavaScript version of the image name div; this div does not exist in the non-JavaScript version

function loadImageNameDiv() {
	var body = document.getElementsByTagName("body")[0];
	var mainDiv = document.getElementById("maindiv");
	var imageNameDiv = document.createElement("div");
	imageNameDiv.setAttribute("id","imageNameDiv");
	var p = document.createElement("p");
	p.setAttribute("id","image_name");
	var imageName = document.createTextNode("image");
	p.appendChild(imageName);
	imageNameDiv.appendChild(p);
	insertAfter(imageNameDiv,mainDiv);
	showImageName();
}
addLoadEvent(loadImageNameDiv);

// create JavaScript version of the thumbdiv div; this adds navigation arrows not 
// used in the non-JavaScript version that is in the base html for the gallery pages.

function loadThumbDiv() {
	var thumbList = document.getElementById("thumblist");
	var thumbBackArrow = document.createElement("img");								// set up the back arrow
	thumbBackArrow.setAttribute("src", "../images/navigation/btn_back_normal.jpg");
	thumbBackArrow.setAttribute("id","back_button_thumbs");
	thumbList.parentNode.insertBefore(thumbBackArrow,thumbList);
	var thumbForwardArrow = document.createElement("img");							// set up the forward arrow
	thumbForwardArrow.setAttribute("src","../images/navigation/btn_forward_normal.jpg");
	thumbForwardArrow.setAttribute("id","forward_button_thumbs");
	insertAfter(thumbForwardArrow,thumbList);
}
addLoadEvent(loadThumbDiv);