var currentlyDisplaying = 3;	// The right hand page in the spread that's currently showing up.
var instructionsDisplayed = true;

function connectUI(){
	// Assign events to the Previous & Next elements instead of specifying it in the markup:  onMouseOver="hover(document.getElementById('next'),true);" onMouseOut="hover(document.getElementById('next'),false);"
	var Prev = document.getElementById("prev");
	var Next = document.getElementById("next");
	Prev.onmouseover = function() {hover(Next, true);}
	Prev.onmouseout = function() {hover(Next, false);}
	Prev.onclick = function() {prevPage();}

	Next.onmouseover = function() {hover(Prev, true);}
	Next.onmouseout = function() {hover(Prev, false);}
	Next.onclick = function() {nextPage();}
	
	$(".instrPrev").click(function() {
	  prevPage();
	});
	$(".instrNext").click(function() {
	  nextPage();
	});
}

$(document).ready(function() {
  connectUI();
});

// hide currently viewed pages
function hideCurrent() {
	var elem = document.getElementById('A'+(currentlyDisplaying-1));
	elem.className = 'hide';
	currentlyDisplaying++;
	elem = document.getElementById('A'+(currentlyDisplaying-1));
	elem.className = 'hide';
	currentlyDisplaying++;
}
function revealCurrent() {
	var elem = document.getElementById('A'+(currentlyDisplaying-1));
	elem.className = 'page left';
	elem = document.getElementById('A'+(currentlyDisplaying));
	elem.className = 'page right';
}
function prevPage() {
	if(document.getElementById('A'+(currentlyDisplaying-3)) != null){
		hideCurrent();
		currentlyDisplaying -= 4;
		revealCurrent();
	}
}
function nextPage() {
	if(instructionsDisplayed){
		document.getElementById('instructions').className = 'hide';
		instructionsDisplayed = false;
		return;
	}
	if(document.getElementById('A'+(currentlyDisplaying+2)) != null){
		hideCurrent();
		revealCurrent();
	}	
}
function hover(elem, yes){
	if(yes)	elem.className = 'hover';
	else elem.className = '';
}
document.onkeydown = checkKeycode; // Thanks Ryan Cooper for this simple and very easy to understand example of how to use the keyboard as part of the UI. http://www.ryancooper.com/resources/keycode.asp
function checkKeycode(e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;

if(keycode == 37) prevPage();
else if(keycode == 39) nextPage();
//alert("keycode: " + keycode);
}