</div>

    </div>

    <div class="commands">

      <button id="cmd-stop" class="playMode">Stop<div class="key">s</div></button>

      <button id="cmd-play" class="playMode">Play <div class="key">p</div></button>

      <button id="cmd-intro">Skip intro <div class="key">i</div></button>

      <button id="cmd-post">Skip to Post <div class="key">t</div></button>

      <button id="cmd-go">Go  <div class="key">space</div></button>

      <button id="cmd-out0">Output 0</button>

      <button id="cmd-out1">Output 1</button>

    </div>

    <p>Running on <span id="nav"/></p>

    todo: display next action

    <p><button onclick="window.open('/', '_blank', 'scrollbars=1,resizable=1,titlebar=0,location=0')">reopen this in a simpler window</button></p>

    <p><a href="">reload</a></p>

<script type="text/javascript">

// <![CDATA[

$(function () {

    $("#nav").text(navigator.userAgent);

    var updateFreq = (navigator.userAgent.indexOf("Linux") != -1) ? 10 : 2;

    $("#updateReq").text(updateFreq);

    var times = { // need to get these from server

	intro: 4,

	post: 4

    };

    var currentDuration = 0;

    var currentHighlightedSong = "";

    var lastPlaying;

    function updateCurrent(doneCallback) {

	$.getJSON("time", {}, function (data, status) {

	    $("#currentSong").text(data.song);

	    if (data.song != currentHighlightedSong) {

		showCurrentSong(data.song);

	    }

	    $("#currentTime").text(data.t.toFixed(1));

	    $("#leftTime").text((data.duration - data.t).toFixed(1));

	    $("#leftAutoStopTime").text(

		Math.max(0, data.duration - times.post - data.t).toFixed(1));

	    $("#states").text(JSON.stringify(data.state));

	    currentDuration = data.duration;

	    $("#timeSlider").slider({value: data.t,

				     max: data.duration});