var navs = new Array();
function loadNav() {
	var lat_steps = 9;
	var lon_steps = 36;
	for (var i=0; i<=lat_steps; i++) {
		navs[i] = new Array();
		for (var j=0; j<=lon_steps; j++) {
			navs[i][j] = new Image();
			var str = 
				"img/nav/view_"
				+ sprintf("%03.1",lon)
				+ "_"
				+ sprintf("%02.1", lat)
				+ ".jpg";
			;
			navs[i][j].src = "img/nav/view";
		}
	}
}
function init() {
	contentobj = getElement("navcontents");
	selectView();
	document.onkeydown = keystart;
	document.onkeyup = keydone;
	compute_img();
}
function display(text) { 
	getElement("display").innerHTML = text; 
}
function selectView() {		// pick a piece out of the monster image
	x = 100*Math.floor(az/10);
	y = 75*Math.floor(el/10);
	setElementPosition(contentobj, -x, -y);
}
function setView(x,y,obj) {		// set out viewing vector (az,el)
	az = az + x;
	if (az < 0) { az += 360; }
	if (az > 355) az = az % 360;
	el = el +y;
	if (el < 0) { el = 0; }
	if (el > 90) el = 90;
	selectView();
}
function getPos(e) {
	return(new Point(e.clientX, e.clientY)); 
}
function anchor(event) { 
	last = (last == null ? getPos(event) : null); 
}
function move(event) {
	if (last == null) return(false);

	// compute new position in az,el coordinates 
	// (0-360 wrapping, 0-90)
	current = getPos(event);
	el = Math.min(Math.max(el + (current.y - last.y), 0), 90);
	az = Math.max(az + (current.x - last.x), 0);
	if (az > 355) az = az % 360;

	last = current;
	selectView();
}

function dragDone() { compute_img(); }

// Key input handling
function keyhandle() {
	switch(repeatkey) {
		case 37: setView(-10,0,null); break;	// left
		case 38: setView(0,-10,null); break;	// up
		case 39: setView(10,0,null); break;	// right
		case 40: setView(0,10,null); break;	// down
	}
	if (repeatkey) keytimer = setTimeout(keyhandle, 100);
}
function keystart(e) {
	if (keytimer == 0) {
		repeatkey = (window.event) ? event.keyCode : e.keyCode;
		keyhandle();
	}
}
    function keydone(e)  {
	if (keytimer) clearTimeout(keytimer);
	keytimer = 0;
	repeatkey = 0;
	compute_img();
}


function makeImagePath() {
	var step_size = 10
	var n1 = "000" + (az - az % step_size);
	n1 = n1.substr(n1.length-3,3);
	var n2 = "000" + (el - el % step_size);
	n2 = n2.substr(n2.length-2,2);

	var path =  
		zoom_vals[zoom_level] 
		+ "view_" 
		+ n1 
		+ ".0_" 
		+ n2 
		+ ".0." 
		+ img_types[zoom_level]
	;

	return(path);
}

function compute_img() {
	var timeout = (arguments.length == 1 ? arguments[0] : 100);
	var img = new Image();
	img.src = makeImagePath();

	var d3 = getElement("d3");
	var f = function() { d3.src = img.src; };
	waitforimage(img, f, timeout);
}

// Figure out where we are, where we want to go, and how to get there.
// note, x and y are in normalized coordinates
function zoomTo(x,y,doneCallback) {
	var d3 = getElement("d3");
	// Compute change in size
	var cursize = getElementSize(d3);
	var size = image_sizes[zoom_level];		// hardcoded size of next image
	var sizeDelta = Point.subtract(size,cursize);

	// compute change in position
	var view = new Point(600,450);
	var pos = getElementPosition(d3);
	var center = Point.subtract(view,size).scale(0.5);
	var dst = Point.add(center, size.scale(0.5-x, 0.5-y));
	var posDelta = Point.subtract(dst, pos);

	glide(1200, function(p) {
		var newpos = Point.add(pos,posDelta.scale(p));
		var newsize = Point.add(cursize,sizeDelta.scale(p));
		setElementPosition(d3, Math.round(newpos.x), Math.round(newpos.y));
		setElementSize(d3, Math.round(newsize.x), Math.round(newsize.y));
		var obj = getElementPosition(d3);
	});
	if (doneCallback) doneCallback();
}

//-
// functions for drag/click to pan/zoom
//-
function zoomStart(event) {
	mouseDragStart(zoomDrag, zoomDone);
	zoomAnchor = getPos(event);
	stopEvent(event);
	zoomDragged = 0;
}
function zoomDrag(event) {
	interruptGlide();		// If there's a glide going on, stop it.
	var cpos = getPos(event);
	var delta = Point.subtract(zoomAnchor, cpos);
	moveElement(getElement("d3"), delta.x, delta.y)

	zoomAnchor = cpos;
	zoomDragged = 1;
	stopEvent(event);
}
function zoomDone(event) {
	if (zoomDragged == 0) {
		// This indicates no dragging happened.
		// Treat it like a click.
		var pt = getRelativePos(event);
		var size = getElementSize(getElement("d3"));
		pt.normalize(size.x,size.y);

		zoom_level += (zoom_level == zoom_vals.length-1 ? 0 : 1);
		compute_img(1200);		// Start loading the next image 
		zoomTo(pt.x, pt.y, null);
	} 
	zoomDragged = 0;
	mouseDragStop(zoomDrag, zoomDone);
	stopEvent(event);
}

//-
// Button callback for zooming in+out
//-
function onZoom(event,dir) {
	// Assume "container" center is where we want
	// to zoom, and the actual point is given by
	// offset(d3) + (container.size / 2)
	var pt = new Point(300,225);
	pt.scale( zoom_scales[zoom_level] );
	var pos = getElementPosition(getElement("d3"));
	pt = Point.subtract(pt,pos)
	if (dir == 'in') {
		zoom_level += (zoom_level == zoom_vals.length-1 ? 0 : 1);
	}
	else {
		zoom_level -= (zoom_level == 0 ? 0 : 1);
	}
	var size = getElementSize(getElement("d3"));
	pt.normalize(size.x,size.y);
	compute_img(1200);		// Start loading the next image 
	zoomTo(pt.x, pt.y, null);
}

function attachBorderEvents() {
	var borderIDs = new Array (
		"thumbcontainer",
		"zoomin",
		"zoomout",
		"d3container"
	);
	var borderOn = function() {this.style.borderColor="#FA5"};
	var borderOff = function() {this.style.borderColor="gray"};
	for (var i in borderIDs) {
		var obj = getElement(borderIDs[i]);
		addEvent( obj, 'mouseover', borderOn );
		addEvent( obj, 'mouseout', borderOff );
	}
}