<html>
    <head>{% block head %}{% endblock %}
    </head>
    
    <body>
        <input type="button" value="Play/Pause" onclick="pause(false);" /> 
        <input type="button" value="Restart" onclick="restart(1);" /> 
        <span id="beforeScrubberText"></span>
        <input id="scrubber" type="range" value="0" min=0 max=100
               onmousedown="pause(true);" onmouseup="scrub();" />
        <span id="afterScrubberText"></span>
        -5x <input id="speed" type="range" value="0" min=-5 max=5
               onmouseup="setSpeed();" /> +5x
        <script>
            var data = {{ json }};
            var toggle = true;
            var totalTime = 0;
            var TICK = 33;
            var TIMESTEP = 33;
            var time = 33;
            var pos = 0;
            var timer;

            // Thanks http://stackoverflow.com/a/2998822
            function zeroPad(num, size) {
                var s = "0" + num;
                return s.substr(s.length-size);
            }

            function scrub() {
               setPercent = document.getElementById('scrubber').value;
               time = (setPercent / 100) * totalTime;
               restart(time); 
            }

            function buildTimeString(millis) {
                hours   = zeroPad(Math.floor(millis / (1000 * 60 * 60)), 2);
                millis -= hours * (1000 * 60 * 60)
                minutes = zeroPad(Math.floor(millis / (1000 * 60)), 2);
                millis -= minutes * (1000 * 60);
                seconds = zeroPad(Math.floor(millis / 1000), 2);
                return hours + ':' + minutes + ':' + seconds;
            }

            function advance() {
                document.getElementById('scrubber').value =
                                           Math.ceil((time / totalTime) * 100);
                timestr = buildTimeString(time);
                document.getElementById("beforeScrubberText").innerHTML = 
                                                                       timestr;
                for (; pos < data.length; pos++) {
                    if (data[pos][1] <= time) {
                        term.write(eval(data[pos][0]));
                    } else {
                        break;
                    }
                }

                if (pos >= data.length) {
                    clearInterval(timer);
                }

                time += TIMESTEP;
            }

            function pause(test) {
                if (!toggle && test) {
                    return;
                }
                if (toggle) {
                    clearInterval(timer);
                    toggle = !toggle;
                } else {
                   timer = setInterval(advance, TICK);
                   toggle = !toggle; 
                }
            }

            function setSpeed() {
                speed = document.getElementById('speed').value;
                if (speed == 0) {
                    TIMESTEP = TICK;
                } else if (speed < 0) {
                    TIMESTEP = TICK / -speed;
                } else {
                    TIMESTEP = TICK * speed;
                }
            }

            function restart(millis) {
                    clearInterval(timer);
                    term.reset();
                    time = millis;
                    pos = 0;
                    toggle = true;
                    timer = setInterval(advance, TICK);
            }

            var term = new Terminal({
                                        cols: {{ dimensions[1] }},
                                        rows: {{ dimensions[0] }},
                                        screenKeys: true
                                    });
            totalTime = data[data.length - 1][1];
            timestr = buildTimeString(totalTime);
            document.getElementById("afterScrubberText").innerHTML = timestr;
            term.open(document.body);
            timer = setInterval(advance, TICK);
            </script>
        </body>
    </html>