%{
	<HTML> <HEAD> <!-- This HTML file has been created by a ruby servlet -->
	<TITLE>Camera #{cameraName} History Interface</TITLE>
	<link rel="stylesheet" type="text/css" href="/style.css">
	</HEAD><CENTER>
	<BODY onload="setImg();" >
	<SCRIPT type="text/javascript">
	var cameraName = #{cameraName};
	var myImages = #{imgPlaybackList};
	var i=0;
	var speed=1000;
	function setImg(param) {
		var imageIndex = myImages[i].split("_")[1].split(".")[0];
		document.getElementById("slideDate").innerHTML=myImages[i].split('=')[1];
		document.getElementById("slideshow").src=myImages[i];
		document.getElementById("updateNav").href = "/camerahistory?cameraName="+cameraName+"&index="+imageIndex+"&navigation=1&basicView=0";
		document.getElementById("slideLinkVideo").href = "/camerahistory?cameraName="+cameraName+"&index="+imageIndex+"&navigation=1&basicView=2";
		document.getElementById("slideLinkArchive").href = "/camerahistory?cameraName="+cameraName+"&index="+imageIndex+"&navigation=1&basicView=1";
	}
	function speedUp() {
		speed=speed/2;
		document.getElementById("speed").value=speed/1000;
	}
	function slowDown() {
		speed=speed*2;
		document.getElementById("speed").value=speed/1000;
	}
	function mode(param) {
		smode=param;
	}
	function startSlideshow() {
		if(smode=="play") {
			document.getElementById("slowDown").disabled="";
			document.getElementById("speedUp").disabled="";
			document.getElementById("play").disabled="disabled";
			document.getElementById("playRev").disabled="disabled";
			document.getElementById("pause").disabled="";
			document.getElementById("stop").disabled="";
			var imageIndex = myImages[i].split("_")[1].split(".")[0];
			document.getElementById("slideDate").innerHTML=myImages[i].split('=')[1];
			document.getElementById("slideshow").src=myImages[i];
			document.getElementById("updateNav").href = "/camerahistory?cameraName="+cameraName+"&index="+imageIndex+"&navigation=1&basicView=0";
			document.getElementById("slideLinkVideo").href = "/camerahistory?cameraName="+cameraName+"&index="+imageIndex+"&navigation=1&basicView=2";
			document.getElementById("slideLinkArchive").href = "/camerahistory?cameraName="+cameraName+"&index="+imageIndex+"&navigation=1&basicView=1";
			i++;
			setTimeout("startSlideshow()",speed);
		} else if(smode=="playRev") {
			document.getElementById("slowDown").disabled="";
			document.getElementById("speedUp").disabled="";
			document.getElementById("play").disabled="disabled";
			document.getElementById("playRev").disabled="disabled";
			document.getElementById("pause").disabled="";
			document.getElementById("stop").disabled="";
			var imageIndex = myImages[i].split("_")[1].split(".")[0];
			document.getElementById("slideDate").innerHTML=myImages[i].split('=')[1];
			document.getElementById("slideshow").src=myImages[i];
			document.getElementById("updateNav").href = "/camerahistory?cameraName="+cameraName+"&index="+imageIndex+"&navigation=1&basicView=0";
			document.getElementById("slideLinkVideo").href = "/camerahistory?cameraName="+cameraName+"&index="+imageIndex+"&navigation=1&basicView=2";
			document.getElementById("slideLinkArchive").href = "/camerahistory?cameraName="+cameraName+"&index="+imageIndex+"&navigation=1&basicView=1";
			i--;
			setTimeout("startSlideshow()",speed);
		} else if(smode=="pause") {
			document.getElementById("pause").disabled="disabled";
			document.getElementById("slowDown").disabled="disabled";
			document.getElementById("speedUp").disabled="disabled";
			document.getElementById("play").disabled="";
			document.getElementById("play").value="Resume Forward";
			document.getElementById("playRev").disabled="";
			document.getElementById("playRev").value="Resume Backward";
		} else if(smode=="stop") {
			document.getElementById("play").disabled="";
			document.getElementById("play").value="Play";
			document.getElementById("playRev").disabled="";
			document.getElementById("playRev").value="Play Backward";
			document.getElementById("pause").disabled="disabled";
			document.getElementById("slowDown").disabled="disabled";
			document.getElementById("speedUp").disabled="disabled";
			document.getElementById("stop").disabled="disabled";
			document.getElementById("slideshow").src=myImages[0];
			i=0;
			speed=1000;
			document.getElementById("speed").value=1;
		}
		if(i==myImages.length){
			// Loop if counting forward
			i=0;
		} else if(i==0) {
			// Loop if counting backward
			i=myImages.length-1;
		}
	}
	</SCRIPT>
		<p id="slideDate">Date Error</p>
		<a href="" id="updateNav" target="shownav"><img id="slideshow" src=""></a>
		<br>
		<input id="playRev" type="button" value="Play Backward" onclick="mode('playRev');startSlideshow();">
		<input id="play" type="button" value="Play" onclick="mode('play');startSlideshow();">
		<input id="slowDown" type="button" value="--" disabled="disabled" onclick="slowDown();">
		<input id="speed" type="text" name="speed" value="1" size="4" readonly>
		<input id="speedUp" type="button" value="++" disabled="disabled" onclick="speedUp();">
		<input id="pause" type="button" value="Pause" disabled="disabled" onclick="mode('pause');startSlideshow();">
		<input id="stop" type="button" value="Stop" disabled="disabled" onclick="mode('stop');startSlideshow();">
	<BR><BR>
	<A HREF="/" target="_top">Home</A> | <A HREF="/archive" target="_top">Archive</A> | <A HREF="/live" target="_top">Live</A> | <A HREF="/monitor" target="_top">Monitor</A> | <A HREF="images/ifetch.png" id="slideLinkArchive" target="_blank">HTML Export</A> | <A HREF="images/ifetch.png" id="slideLinkVideo" target="_blank">Video Export</A>
	<P>ifetch-tools version: #{VER}</P>
	</CENTER>
	</BODY>
	</HTML>
}
