%{
	<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 nextURLNav="";
	var nextURLPlayback="";
	var speed=getUrlVars()["speed"];
	mode(getUrlVars()["smode"]);
	function getUrlVars() {
		var vars = {};
		var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; });
		return vars;
	}
	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";
		if(!smode || !speed) {
			// If we did not get params for constant play, set some defaults
			mode('stop');
			speed=1000;
		} else {
			// If we are here we are in constant play mode
			document.getElementById("speed").value=speed/1000;
			startSlideshow();
		}
	}
	function speedUp() {
		if(speed<=62.5) {
			speed=62.5;
		} else {
			speed=speed/2;
		}
		document.getElementById("speed").value=speed/1000;
	}
	function slowDown() {
		if(speed>=4000) {
			speed=4000;
		} else {
			speed=speed*2;
		}
		document.getElementById("speed").value=speed/1000;
	}
	function mode(param) {
		smode=param;
	}
	function startSlideshow() {
		if(smode=="play") {
			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";
			nextURLNav="/camerahistory?cameraName="+cameraName+"&index="+imageIndex+"&navigation=1&basicView=0";
			nextURLPlayback="/camerahistory?cameraName="+cameraName+"&index="+imageIndex+"&navigation=1&basicView=3&smode=play&speed="+speed;
			setTimeout("startSlideshow()",speed);
			i++;
			if(i==myImages.length){
				// Move navigation and playback forward
				window.open(nextURLNav, "shownav");
				window.open(nextURLPlayback, "showframe");
			}
		} else if(smode=="playRev") {
			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";
			setTimeout("startSlideshow()",speed);
			if(i==0) {
				// Stop at the first image when playback backward
				mode('stop');
			}
			i--;
		} else if(smode=="pause") {
			document.getElementById("pause").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("stop").disabled="disabled";
			document.getElementById("slideshow").src=myImages[0];
			i=0;
			speed=1000;
			document.getElementById("speed").value=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="--" onclick="slowDown();">
		<input id="speed" type="text" name="speed" value="1" size="4" readonly>
		<input id="speedUp" type="button" value="++" 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>
}
