var img_array = new Array();
var button_array = new Array();
var current_img = 0;

var tl_div;
var tr_div;
var bl_div;
var br_div;



// Add the stylesheet
var head = document.getElementsByTagName("head")[0];
var images_css = document.createElement("link");
images_css.setAttribute("type", "text/css");
images_css.setAttribute("rel", "stylesheet");
images_css.setAttribute("href", "/styles/images.css");
head.appendChild(images_css);



// Set up links
function setupImages() {
	var images_div = document.getElementById("page-images");
	img_array = images_div.getElementsByTagName("img");
	
	var img_div = document.createElement("div");
	img_div.setAttribute("id", "images-list");
	var txt = document.createTextNode("Photos ");
	img_div.appendChild(txt);
	//img_div.textContent = "Photos ";
	
	for (var i = 0; i < img_array.length; i++) {
		
		var img_a = document.createElement("a");
		var txt = document.createTextNode(String(i + 1));
		img_a.appendChild(txt);
		img_a.setAttribute("href", "");
		img_a.img_num = i;
		/*img_a.addEventListener("click", function(e_ev) {
													showImage(this.img_num);
													e_ev.preventDefault();
													}, false);*/
		img_a.onclick = function() {
			showImage(this.img_num);
			return false;
		}
		img_div.appendChild(img_a);
		button_array.push(img_a);
		
	}
	
	var content_div = document.getElementById("content");
	content_div.insertBefore(img_div, content_div.getElementsByTagName("p")[0]);
	
	tl_div = document.createElement("div");
	tr_div = document.createElement("div");
	bl_div = document.createElement("div");
	br_div = document.createElement("div");
	
	tl_div.className = "image-corner image-corner-tl";
	tr_div.className = "image-corner image-corner-tr";
	bl_div.className = "image-corner image-corner-bl";
	br_div.className = "image-corner image-corner-br";
	
	images_div.appendChild(tl_div);
	images_div.appendChild(tr_div);
	images_div.appendChild(bl_div);
	images_div.appendChild(br_div);
	
	showImage(0);
}



// Show an image
function showImage(i) {
	try {
		//img_array[current_img].setAttribute("class", "");
		//button_array[current_img].setAttribute("class", "");
		img_array[current_img].className = "";
		button_array[current_img].className = "";
	} catch (e) {
	}
	current_img = i;
	//img_array[current_img].setAttribute("class", "selected-image");
	//button_array[current_img].setAttribute("class", "selected-image-button");
	img_array[current_img].className = "selected-image";
	button_array[current_img].className = "selected-image-button";
	
	var img = img_array[current_img];
	
	tl_div.style.top = "0";
	tl_div.style.left = "-40px";
	
	tr_div.style.top = "0";
	tr_div.style.left = String((img.width - 52) + "px");
	
	bl_div.style.top = String((img.height - 12) + "px");
	bl_div.style.left = "-40px";
	
	br_div.style.top = String((img.height - 12) + "px");
	br_div.style.left = String((img.width - 52) + "px");
}

addLoadEvent(setupImages);