%{
	<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>

	<BODY onload="setImg();" >
	<SCRIPT type="text/javascript">
	// The following code should be stored in the HTML head section
	function disp_text() {
		var w = document.myform.mylist.selectedIndex;
		var selected_value = document.myform.mylist.options[w].value;
		var selected_text = document.myform.mylist.options[w].text;
		var fRet;
		fRet = confirm('Jump to '+selected_text+'?');
		// alert(fRet);
		if (fRet==true) {
			this.location.href = selected_value;
			//alert('Jumping to '+selected_text);
		} else {
			alert('No Jump.');
		}
	}
	</SCRIPT>

	<!--    Made by Erik Terwan    -->
	<!--   24th of November 2015   -->
	<!--        MIT License        -->
	<nav role="navigation">
		<div id="menuToggle">
			<!--
			A fake / hidden checkbox is used as click reciever,
			so you can use the :checked selector on it.
			-->
			<input type="checkbox" onclick="mode('stop');startSlideshow();" />

			<!--
			Some spans to act as a hamburger.

			They are acting like a real hamburger,
			not that McDonalds stuff.
			-->
			<span></span>
			<span></span>
			<span></span>

			<!--
			Too bad the menu has to be inside of the button
			but hey, it's pure CSS magic.
			-->
			<ul id="menu">
				<div id="floatMenu">
					<!-- Start - put your content here --->
					#{myNavigation}
					<!-- End   - put your content here --->
				</div>
				<div id="navMenu">
					#{myTempRespond}
				</div>
			</ul>
		</div>
	</nav>

	<SCRIPT type="text/javascript">
	var cameraName = #{cameraName};
	var myImages = #{imgPlaybackList};
	var totalImageCount = #{imgSortedLength};
	var i=0;
	var index=getUrlVars()["index"];
	var nextURLPlayback="";
	var prevURLPlayback="";
	var speed=getUrlVars()["speed"];
	mode(getUrlVars()["smode"]);
	function sanityCheck() {
		if(!smode || !speed) {
			// If we did not get params for smode or speed, set some defaults
			mode('stop');
			speed=1000;
		}
	}
	function getUrlVars() {
		var vars = {};
		var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; });
		return vars;
	}
	function setImg(param) {
		if(smode=="playRev") {
			// Set the counter to the last image on playRev
			i=myImages.length-1;
		}
		var imageIndex = myImages[i].split("_")[1].split(".")[0];
		document.getElementById("slideDate").innerHTML=myImages[i].split('=')[1];
		document.getElementById("slideshow").src=myImages[i];
		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";
		sanityCheck();
		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() {
		sanityCheck();
		if(smode=="play") {
			document.getElementById("play").disabled="disabled";
			document.getElementById("playRev").disabled="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("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);
			i++;
			if(i==myImages.length) {
				// Move forward one page
				nextURLPlayback="/camerahistory?cameraName="+cameraName+"&index="+imageIndex+"&navigation=1&basicView=3&smode=play&speed="+speed;
				window.location.replace(nextURLPlayback);
			}
		} else if(smode=="playRev") {
			document.getElementById("play").disabled="disabled";
			document.getElementById("playRev").disabled="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("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) {
				// Back up one page
				var prevImageIndex=imageIndex-myImages.length;
				if(prevImageIndex<0) {
					prevImageIndex=totalImageCount-myImages.length;
				}
				prevURLPlayback="/camerahistory?cameraName="+cameraName+"&index="+prevImageIndex+"&navigation=1&basicView=3&smode=playRev&speed="+speed;
				window.location.replace(prevURLPlayback);
			}
			i--;
		} 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("stop").disabled="disabled";
		}
	}
	</SCRIPT>
	<div id="cameraHistory">
	<CENTER>
		<p id="slideDate">ifetch-tools</p>
		<div id="updateNav"><img height="80%" onclick="mode('stop');startSlideshow();" id="slideshow" src="/data/images/ifetch.png"></div>
		<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="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></div>
	</BODY>
	</HTML>
}
