// JavaScript Document

window.onload = function(){
	this.curr_page = 1;
	this.backArrow = document.getElementById("back");
	this.forwardArrow = document.getElementById("forward");
	backArrow.style.visibility = "hidden";
	
	var panel = document.getElementById("nav");
	this.buttons = panel.getElementsByTagName("img");
	if(buttons){
		for(i=0; i<buttons.length; i++){
			var button = buttons[i];
			button.className = "t_out";
			button.onclick = openPage;
			button.onmouseover = thumbOver;
			button.onmouseout = thumbOut;
		}
	}
	
	document.getElementById(curr_page).className = "t_over";

}

function thumbOver(event){
	this.className = "t_over";
}

function thumbOut(event){
	if(curr_page != this.id)
		this.className = "t_out";
}

function openPage(event){
	curr_page = this.id;
	showCurrPage();
}

function backPage(){
	if(curr_page>1){
		curr_page--;
		showCurrPage();
	}
}

function forwardPage(){
	if(curr_page<11){
		curr_page++;
		showCurrPage();
	}
}

function showCurrPage(){
	forwardArrow.style.visibility = "visible";
	backArrow.style.visibility = "visible";

	if(curr_page==1){
		backArrow.style.visibility = "hidden";
	}
	else if(curr_page==11){
		forwardArrow.style.visibility = "hidden";
	}

	document.getElementById("page").innerHTML = "";
	document.getElementById("page").innerHTML = '<img src="images/pages/'+curr_page+'.jpg" />';
	
	for(i=0; i<buttons.length; i++){
			var button = buttons[i];
			button.className = "t_out";
	}
	document.getElementById(curr_page).className = "t_over";

}