//  *****************SUBROUTINES SECTION***********************
//
// Implement a user's changed slideshow delay, this is called when the value in the
// select box is changed
function changedelay()
{
	timeout = document.delayform.delay.options[document.delayform.delay.selectedIndex].value
}

// This function simply pops up the instructions window
function instruct()
{
	instructions=window.open('../instructions.html','instructions','width=600,height=450,location=no,menubar=no,scrollbars=yes,resizable=yes,status=no,toolbar=no')
}

// This routine traps any kestrokes, and tests for whether the navigation keys have been used.
// The left, right and up arrows go back, forwards and up.
function checkKeycode(e) {
	var keycode;
	if (window.event) keycode = window.event.keyCode;
	else if (e) keycode = e.which;
	// alert("keycode: " + keycode);
	if (keycode == "37") {
		nextPrevious(-1)
	}
	else if (keycode == "38") {
		window.location = indexpage
	}
	else if ((keycode == "39") || (keycode == "32")) {
		nextPrevious(1)
	}
	else if (keycode == "80") {
		toggleSlideshow()
	}
}
document.onkeydown = checkKeycode


// Function to move to next/previous image, and pause the slideshow if it is running. 
// Called when the user manually clicks on NEXT or PREV.
// This assumes that the slide show should be paused if next/previous is clicked.
// Also used if a different image resolution is selected (direction = 0).
// If the slide show is paused, or is to be paused, then a + is added the url to signify this.
// If the slideshow is not running, a ~ is added to the url, so that the next page will not 
// show the timeout dropdown for the slideshow.
function nextPrevious(direction, newres)
{
	if (direction > 0)
	{
		if (nextUrl.indexOf("?") > 0)   
		{
			k = nextUrl.indexOf("?")
			selectedUrl = nextUrl.substring(0, k) + "?" + res + timeout
		}
		else
		{
			selectedUrl = nextUrl + "?" + res + timeout
		}
		pause = 1
	}
	if (direction < 0)
	{
		if (prevUrl.indexOf("?") > 0)   
		{
			k = prevUrl.indexOf("?")
			selectedUrl = prevUrl.substring(0, k) + "?" + res + timeout
		}
		else
		{
			selectedUrl = prevUrl + "?" + res + timeout
		}
		pause = 1
	}
	if (direction == 0)
	{
		if (thispage.indexOf("?") > 0)   
		{
			k = thispage.indexOf("?")
			selectedUrl = thispage.substring(0, k) + "?" + newres + timeout
		}
		else
		{
			selectedUrl = thispage + "?" + newres + timeout
		}
	}
	if (slideshow == 0)
	{
		selectedUrl += "~"
	}
	if ((slideshow == 1) && (pause == 1))
	{
		selectedUrl += "+"
	}
	window.location = selectedUrl
}

// Used to commence slide show when it hasn't been running, and no delay controls are present.
function commenceSlideshow()
{
	//  This simulates a paused slide show, so that the next routine call will start it
	pause = 1
	toggleSlideshow()
}

// Function start/stop the slideshow
function toggleSlideshow()
{
	if (pause)
	{
		// If the slideshow is paused, start it and change the displayed slideshow controls
		pause = 0;
		document.getElementById('both_startt').style.display = 'none';
		document.getElementById('both_stopp').style.display = 'block';
		setTimeout("next()", 1000)
	}
	else
	{
		// Otherwise pause the slideshow and change the displayed slideshow controls
		pause = 1;
		document.getElementById('both_stopp').style.display = 'none';
		document.getElementById('both_startt').style.display = 'block';
	}
}

// Function to go to the next page, used ONLY by the slideshow.  Don't know why it needs to be
// in a separate function, but that's the way it came to me.
function next()
{
	// Only move to next page if slideshow is running
	if (nextUrl.indexOf("?") > 0)   
	{
	nextUrl = nextUrl.substring(0, nextUrl.indexOf("?")) + "?" + res + timeout
	}
	else
	{
	nextUrl += "?" + res + timeout
	}
	if (!pause) window.location = nextUrl;
}

// Function to reload the page with a new size if one of the resize links is clicked on
function resize(newsize)
{
	resizeurl = thispage + "?" + newsize + timeout
	if (slideshow == 0)
	{
		resizeurl += "~"
	}
	if ((slideshow == 1) && (pause) == 1)
	{
		resizeurl += "+"
	}
	window.location = resizeurl
}


// cross-browser code for getting the ID of the DIV containing the image, this is to ensure
// that the dhtml is as cross-browser as possible, even if the styles aren't.  This is used
// in the init function for locating the image.
function getObj(name)
{
  if (document.getElementById)
  {
  	this.obj = document.getElementById(name);
	this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
	this.obj = document.all[name];
	this.style = document.all[name].style;
  }
  else if (document.layers)
  {
   	this.obj = document.layers[name];
   	this.style = document.layers[name];
  }
}


// This convoluted routine is merely to get the start/stop slideshow text to blink
// because IE does not support the blink property
blinke = ""
function blinking()
{
	if (blinke == "")
	{
		blinke = "colour"
		for (var li_item=0;li_item<document.getElementsByTagName("SPAN").length;li_item++)
		{
			if (document.getElementsByTagName("SPAN")[li_item].id=="start1")
			{
				document.getElementsByTagName("SPAN")[li_item].className="full_start"
			}
			else if (document.getElementsByTagName("SPAN")[li_item].id=="start2")
			{
				document.getElementsByTagName("SPAN")[li_item].className="full_start"
			}
//			else if (document.getElementsByTagName("SPAN")[li_item].id=="pause1")
//			{
//				document.getElementsByTagName("SPAN")[li_item].className="full_stop"
//			}
//			else if (document.getElementsByTagName("SPAN")[li_item].id=="pause2")
//			{
//				document.getElementsByTagName("SPAN")[li_item].className="full_stop"
//			}
		}
	}
	else	
	{
		blinke = ""
		for (var li_item=0;li_item<document.getElementsByTagName("SPAN").length;li_item++)
		{
			if (document.getElementsByTagName("SPAN")[li_item].id=="start1")
			{
				document.getElementsByTagName("SPAN")[li_item].className="full_whyte"
			}
			else if (document.getElementsByTagName("SPAN")[li_item].id=="start2")
			{
				document.getElementsByTagName("SPAN")[li_item].className="full_whyte"
			}
//			else if (document.getElementsByTagName("SPAN")[li_item].id=="pause1")
//			{
//				document.getElementsByTagName("SPAN")[li_item].className="full_whyte"
//			}
//			else if (document.getElementsByTagName("SPAN")[li_item].id=="pause2")
//			{
//				document.getElementsByTagName("SPAN")[li_item].className="full_whyte"
//			}
		}
	}
}
//window.setInterval("blinking()", 900)


//  This function is intended to vertically size the thin vertical margin that runs along the 
//  right hand edge of the left hand menu bar.
function resize_window() 
{
	// This block of lines is a workaround because I can't get FF to shorten the height of the 
	// category tree simply by measuring the available space and adjusting it accordingly, in 
	// the case of panoramas, where the image is too wide but not too high.  It seems that the 
	// measurement is not taking into account the horizontal scroll bar.
	divwidth = document.getElementById('full_photoouter').offsetWidth
	divheight = document.getElementById('full_photoouter').offsetHeight
	toowide = divwidth + left_margin + 5 - windowwidth // how far does the image hang to the right of the document window 
	toohigh = divheight + top_margin + 5 - windowheight // how far does the image hang below the document window 
	scroll_height_fudge=0
	if ((toowide > 0) && (toohigh < 0) && (self.innerWidth)) scroll_height_fudge = 21;
	
	document.getElementById('full_left_margin').style.height = totalheight - top_margin - scroll_height_fudge - 4 + 'px'
	document.getElementById('full_banner').style.width = totalwidth - scroll_width_fudge - 20 + 'px'
	document.getElementById('nav_frame').style.height = totalheight - document.getElementById('full_caption').offsetHeight - 80 - 190 - 5 + 'px'  // New inclusion for events version

	setTimeout("resize_window()", 10);
}


function position_image()
{
	// Now calculate the centre of the image accordingly in the space reserved for it
	imagelocation = left_margin + 0.5*(windowwidth - left_margin - divwidth - scroll_width_fudge - 0)
	imagelocatiom = top_margin + 0.5*(windowheight - top_margin - divheight - 0)

	// Make an exception for images that are too large
	if (toowide > 0)
	{
    		imagelocation = left_margin + 15
	}
	if (toohigh > 0)
	{
		imagelocatiom = top_margin + 2
	}

	// Set the location
	photoout.style.left = imagelocation + 'px';
	photoout.style.top = imagelocatiom + 'px';
	setTimeout("position_image()", 10);
}

function display_image()
{
	if (image_display != 1)
	{
		// DHTML fixes for centering the images. 
		// The source for this idea from www.xs4all.nl/~ppk/js/fixedmenu.html
		// See also www.mark.ac/help/sticky.html for some ideas
		image_display = 1
	
		// The screen and image width were measured at the outset, but need to be remeasured
		// for NS/FF, because this is the first place that they can be guaranteed to do it.
		// Of course, if the image was preloaded, NS/FF could have done it at the start 
		// of the page load, but preload is only guaranteed if traversing the images in sequence.
	 	imagewidth = thePhoto.width
		imageheight = thePhoto.height;

		// Unhide the image as a last step, otherwise it may jump around
		// If the image was preloaded, this won't really be needed
		// But if it wasn't preloaded, i.e. a thumbnail other than the first on was clicked
		// on, then we need to hide it until it has beed fully loaded and positioned.
		// Size the height of the left margin and the width of the banner.
		photoout = new getObj('full_photoouter');
	 	set_dimensions()
		resize_window();
		position_image()
		photoout.style.visibility = 'visible';

	}
}

// This function is called from the "body tag onload action" to do a range of things that need
// to be done last, after the page has fully loaded
function init()
{
	//resize the nav frame so that it doens't have scroll bars
	//document.getElementById('nav_frame').style.height = totalheight - top_margin - scroll_height_fudge - 210 - 100 - 5 + 'px'
	//document.getElementById('nav_frame').style.height = document.getElementById('nav_frame').contentWindow.document.documentElement.scrollHeight + 10 + 'px';
	
	// If this hasn't been triggered already, then we need to do it here at the last gasp
	display_image()
	
	// Ensure the correct slideshow control text is shown if we came to this image
	// because the NEXT or PREV button was been pressed.  In this situation, the slideshow
	// should have been paused and the controls need to be consistent with this.  Not sure 
	// if this is still needed in the Imatch version.
	if (pause)
	{
		document.getElementById('both_stopp').style.display = 'none';
		document.getElementById('both_startt').style.display = 'block';
		pause = 1;
	}

	//preload next image, previously defined
	if ((loadNext.length > 0) && (loadNext.indexOf('<#') == -1))
	{
		nextimage.src = loadNexxt;
	}

	// For debugging purposes only
	// document.write('timeout = ' + timeout + ';  slideshow = ' + slideshow + ';  pause = ' + pause + ';  i = ' + i + ';  j = ' + j + ';  m = ' + m)

}
