<!doctype html>
<head>
    <meta charset="utf-8">
    <title>Image Comparison Viewer</title>
    <style>
        #testrundetails {
          height: 200px;
        }

        #thumbnails {
          top: 250px;
          left: 10px;
          width: 260px;
          margin: 0px;
          padding: 0px;
          position: absolute;
        }

        .thumb {
          width: 200px;
          height: auto;
          cursor: pointer;
          border: 3px solid black;
        }

        .thumb:hover {
          border: 3px solid blue;
        }

        #content {
          margin-left: 260px;
        }

        .tagname {
          font-weight: bold;
        }

        .hidden {
          display: none;
        }

        #glitchimage {
          max-width: 800px;
        }
    </style>
    <script type="text/javascript">
        var paths = $images
        var size = paths.length;
        var curr = 0;

        function setup() {
            if (paths.length > 0)  {
                document.getElementById("glitchimage").src = paths[0];
            }
            document.getElementById("total").innerHTML = size;
        }

        function setCounter() {
            document.getElementById("counter").innerHTML = curr + 1;
        }

        function setImageSource() {
            document.getElementById("glitchimage").src = paths[curr];
        }

        function next() {
            curr = (curr + 1) % size;
            setImageSource();
            setCounter();
        }

        function prev() {
            curr = ((curr - 1) + size) % size;
            setImageSource();
            setCounter();
        }
    </script>
</head>
<body onload="setup()">
    <div id="testrundetails">
        <h1> Test Run Details </h1>
        <ul>
            <li><span class="tagname"> Test Name: </span>$testname</li>
            <li><span class="tagname"> ChromeOS Build Number: </span>$chromeos_version</li>
            <li><span class="tagname"> Chrome Build Number: </span>$chrome_version</li>
            <li><span class="tagname"> Device: </span>$board</li>
            <li><span class="tagname"> Date of run: </span>$date</li>
        </ul>
    </div>
    <hr />
    <div id="images">
        <button id="prev" onclick="prev()">Previous</button>
        <span id="counter">1</span> / <span id="total"></span>
        <button id="next" onclick="next()">Next</button><br />
        <img id="glitchimage" src="" />
    </div>
</body>
</html>