View from Burnsville, MN, looking north at the Minneapolis skyline:
(<a href="/">Click here for normal image</a>)<br>
<table border=0 width=100%>
<tr><td colspan=4><img id='imageid' src="nocache/burnsville.jpg" style="width:100%"></td></tr>
<tr><td colspan=4 id='status'></td>
<tr>
<td>
Animation:<br>
<input type=radio name=speed         onChange="javascript:interval=16"> Fastest (60fps)<br>
<input type=radio name=speed         onChange="javascript:interval=33"> Fast (30fps)<br>
<input type=radio name=speed checked onChange="javascript:interval=100"> Medium (10fps)<br>
<input type=radio name=speed         onChange="javascript:interval=500"> Slow (2fps)<br>
</td>
<td>
Time:<br>
<input type=radio name=time checked onChange="javascript:total=540;preload()">Last hour <br>
<input type=radio name=time         onChange="javascript:total=1080;preload()"> Last 2 hours<br>
<input type=radio name=time         onChange="javascript:total=4320;preload()"> Last 8 hours <br>
<input type=radio name=time         onChange="javascript:total=12960;preload()"> Last Day <br>
</td>
<td>
Rate:<br>
<input type=radio name=rate         onChange="javascript:skip=720;preload()">Every 1 hour <br>
<input type=radio name=rate         onChange="javascript:skip=360;preload()">Every 30 minutes <br>
<input type=radio name=rate         onChange="javascript:skip=120;preload()">Every 10 minutes <br>
<input type=radio name=rate         onChange="javascript:skip=120;preload()">Every 5 minutes <br>
<input type=radio name=rate checked  onChange="javascript:skip=12;preload()">Every minute <br>
<input type=radio name=rate         onChange="javascript:skip=6;preload()">Every 30 seconds <br>
<input type=radio name=rate         onChange="javascript:skip=1;preload()">Every 5 seconds <br>
</td>
<td>
Direction:<br>
<input type=radio name=dir checked onChange="javascript:direction=1">Forward <br>
<input type=radio name=dir         onChange="javascript:direction=0">Stop <br>
<input type=radio name=dir         onChange="javascript:direction=-1">Backward <br>
</td>

</table>
<p>
<img src=static/feedback.png>

<script>
request = new XMLHttpRequest()
request.open("GET", "list.php", false)
request.send()
response=request.responseText
var filelist=JSON.parse(response)

var theimage=document.getElementById("imageid")
var thestatus=document.getElementById("status")

var i=filelist.length-1
var x=0
var interval=100
var skip=12
var total=720
var direction=1
var preloaded=new Array()

preload()

setTimeout(function() {drawimage()},50)


function preload() {
 for(x=filelist.length-1-total;x<filelist.length;x+=skip) {
  preloaded[x]=new Image()
  preloaded[x].src="pics/" + filelist[x]
 }
 i=filelist.length-1-total
}



function drawimage() {
  if (preloaded[i].complete) { 
  thestatus.innerHTML= "Image #" + i
  theimage.src="pics/" + filelist[i]
  i+=skip*direction
  if (i>filelist.length-1) i=filelist.length-1-total
  if (i<filelist.length-1-total) i=filelist.length-1
  }
  else thestatus.innerHTML= "Image #" + i + " (Please wait... loading images)"
  setTimeout(function() {drawimage()},interval)
}
</script>