var pos, mousePos;
var zoomBoxWidth;
var zoomBoxHeight;
var normalWidth;
var normalHeight;		
var zoomAmount;
var zoomImage = [];
var zoomMode = false;
var rl,rt,zl,zt;

//This is called only after a user clicks 'zoom'.  It starts loading the image, and sets events for when it loads.
function zoom() {
	did('rolloverBox').style.visibility = "visible";
	zoomIsLoading();
	images[currentlyLoadedImage].status = "loading";
	zoomImage[currentlyLoadedImage] = new Image();
	zoomImage[currentlyLoadedImage].src = getLargeImageLocation(currentlyLoadedImage);
	var retain = currentlyLoadedImage;
	zoomImage[currentlyLoadedImage].onload = function() {
		images[retain].status = "loaded";
		if (currentlyLoadedImage!=retain) {
			if (confirm('Zooming for "' + images[retain].name + '" has now loaded.  Would you like to view it now?')) {
				switchImages(retain);
			}
		} else {
			zoomLoaded();
		}
	};
}

//Called after a user goes to a different image, it resets the zoom events to null.
function cancelZoom() {
	if (images[currentlyLoadedImage].status=="loaded") {
		mousestop();
		did('container').onmouseover="";
		did('container').onmouseout="";
		did('container').onmousemove="";	
	}
	zoomMode = false;
}


//When an image is first chosen, this determines if an image has already been opened for zoom, or if it's currently loading etc, so the user can be informed.
function currentZoomStatus() {
	var status = images[currentlyLoadedImage].status;
	switch (status) {
		case "loaded":
			zoomLoaded();
			return true;
		case "loading":
			zoomIsLoading();
			break;
		default:
			zoomNotLoaded();
	}
	return false;
}

var instructionsOnceOnly = true;
//This sets up the zoom space with the new zoom image and initialises all variables etc.
function zoomLoaded() {
	zoomBoxWidth = 324;
	zoomBoxHeight = 240;
	zoomAmount = 3;
	initShortcutVars();
	normalWidth = images[currentlyLoadedImage].width;
	normalHeight = images[currentlyLoadedImage].height;
	did('zoomInfo').innerHTML = "Zoom Loaded";
	did('zoomInfo2').innerHTML = "Zoom Loaded";
	did('zoomImage').src = zoomImage[currentlyLoadedImage].src;
	did('zoomImage').style.width = (normalWidth*zoomAmount) + "px";
	did('zoomImage').style.height = (normalHeight*zoomAmount) + "px";
	did('container').onmouseover = mousestart;
	did('container').onmouseout = mousestop;
	did('container').onmousemove = function(event) {mousemove(event)};
	if (instructionsOnceOnly) {
		instructionsOnceOnly = false;
		did('instructions').innerHTML = "For additional zoom, please use the arrow keys";
	}
}

//Informs the user that the zoom is currently loading.
function zoomIsLoading() {
	did('zoomInfo').innerHTML = "<div style='float:right;margin-top:-11px;margin-right:-5px'><img src='images/loader.gif'></div><div style='float:right'>Loading Zoom</div>";
	did('zoomInfo2').innerHTML = "<div style='float:right;margin-top:-8px;margin-right:-5px'><img src='images/loader.gif'></div><div style='float:right'>Loading Zoom</div>";
}

//Informs user that the zoom has not started loading for this image.
function zoomNotLoaded() {
	did('zoomInfo').innerHTML = '<span onclick="zoom()" style="cursor:pointer">Zoom Picture</span>';
	did('zoomInfo2').innerHTML = '<span onclick="zoom()" style="cursor:pointer">Zoom Picture</span>';
}

//This initalises some variables, to make calculation quicker for mousemove in zoom mode.
function initShortcutVars() {
	pos = getPosition(did('container'));
	rl = -pos.x - zoomBoxWidth/2;
	rt = -pos.y - zoomBoxHeight/2;
	zl = (zoomBoxWidth/2) + zoomAmount*pos.x - 1;
	zt = (zoomBoxHeight/2) + zoomAmount*pos.y - 1;
}

//Shortcuts for zooming in/out, and making the box bigger/smaller.
document.onkeydown = function(e) {
	var key = getKeyPressed(e);
	if (zoomMode) {
		if (key == 38 || key==104 || key==63232) { //Up Arrow, Zoom in	
			zoomAmount*=1.2;
			if (zoomAmount>12) zoomAmount = 12
			resizeZoomPicture();
		} else if (key == 40 || key==98 || key==63233) { //Down Arrow, Zoom out
			zoomAmount/=1.2;
			if (zoomAmount<1) zoomAmount = 1;
			resizeZoomPicture();
		} else if (key == 37 || key == 39 || key=="63234" || key=="63235") {
			if (key==37 || key=="63234") {
				zoomBoxWidth /= 1.2;
				zoomBoxHeight /= 1.2;
			} else {
				zoomBoxWidth *= 1.2;
				zoomBoxHeight *= 1.2;
			}
			initShortcutVars();
			mousestart();
			setZoomLocation();
		}
		e.preventDefault();
		return false;
	}
	
}
//Shortcut for getting the URL for postcard mode.
document.onkeyup = function(e) {
	var key = getKeyPressed(e);
	if (key==80 || key==112) { //The 'p' key was pressed, i.e. give postcard-mode URL.
		showPostcardURL();
	}
}

function getKeyPressed(e) {
	var evt = (e) ? e : ((window.event) ? window.event : null); 
	var key = (evt.charCode) ? evt.charCode: ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
	return key;
}

//When a user zooms in/out this makes sure all vars are correct.
function resizeZoomPicture() {
	initShortcutVars();
	did('zoomImage').style.width = (normalWidth*zoomAmount) + "px";
	did('zoomImage').style.height = (normalHeight*zoomAmount) + "px";
	did('zoomImage').style.marginLeft = (zl-(mousePos.x*zoomAmount)) + "px";
	did('zoomImage').style.marginTop = (zt-(mousePos.y*zoomAmount)) + "px";
}

//Shortcut func for finding an element.
function did( id ) {
	return document.getElementById(id);
}

//User has moved into the zoom area.
function mousestart() {
	if (canZoom) {
		zoomMode = true;
		did('rolloverBox').style.width = zoomBoxWidth + "px";
		did('rolloverBox').style.height = zoomBoxHeight + "px";
	}
}

//When user moves over a zoom image.
function mousemove(event) {
	if (canZoom) {
		if (!zoomMode) mousestart();
		mousePos = mouseCoords(event);
		setZoomLocation();
	}
}

//User has moved out of zoom area.
function mousestop() {
	did('rolloverBox').style.width = "0px";
	did('rolloverBox').style.height = "0px";
}

//Move the zoom box.
function setZoomLocation() {
	did('rolloverBox').style.left = (mousePos.x+rl)+"px";
	did('rolloverBox').style.top = (mousePos.y+rt)+"px";
	did('zoomImage').style.marginLeft = (zl-(mousePos.x*zoomAmount)) + "px";
	did('zoomImage').style.marginTop = (zt-(mousePos.y*zoomAmount)) + "px";
}

//What are the current coords of the mouse?
function mouseCoords(ev) {
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

//What is the position of a given element?
function getPosition(e){
	var left = 0;
	var top  = 0;

	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}

	left += e.offsetLeft;
	top  += e.offsetTop;

	return {x:left, y:top};
}