<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>New Session - Web Platform Test Runner</title>
    <link rel="stylesheet" href="css/bulma-0.7.5/bulma.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="lib/davidshimjs/qrcode.js"></script>
    <script src="lib/keycodes.js"></script>
    <script src="lib/wave-service.js"></script>
  </head>
  <body>
    <section class="section">
      <div class="container site-header">
        <img src="res/wavelogo_2016.jpg" alt="WAVE Logo" class="site-logo" />
        <h1 class="title is-spaced">New Session</h1>
      </div>

      <div class="container">
        <div id="content">
          <div id="qr-code"></div>
          <br />
          <p>
            Scan QR Code OR visit
            <a
              id="results-page-url"
              style="font-weight: bold; color: #23d160;"
              target="_blank"
            ></a>
            and follow instructions
          </p>
          <div id="button-wrapper">
            <button
              id="start-button"
              class="button is-large is-success tabbable"
            >
              Start
            </button>
            <button
              id="results-button"
              class="button is-large is-light tabbable"
            >
              View Result Page
            </button>
          </div>

          <div>(Alternatively to start the test you can just press Return)</div>

          <div id="details-wrapper">
            <h3 class="title is-5 is-spaced">Details</h3>
            <div class="detail">
              <div>Token:</div>
              <div id="token"></div>
            </div>
            <div class="detail">
              <div>User Agent:</div>
              <div id="user-agent"></div>
            </div>
            <div class="detail">
              <div>Test Types:</div>
              <div id="test-types"></div>
            </div>
            <div class="detail">
              <div>Total Test Files:</div>
              <div id="total-tests"></div>
            </div>
            <div class="detail">
              <div>Reference Tokens:</div>
              <div id="reference-tokens"></div>
            </div>
            <div class="detail">
              <div>Test Timeouts:</div>
              <div id="test-timeout"></div>
            </div>
            <div class="detail">
              <div>Test Paths:</div>
              <div id="test-path"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <script>
      var HOSTNAME = location.hostname;
      var PORT = location.port;
      var PROTOCOL = location.protocol.replace(/:/, "");
      var QUERY = location.search.replace(/\?/, "");
      var match = QUERY.match(/token=([^&]+)/);
      var TOKEN = match ? match[1] : null;
      var RESUME = /[\?&]resume=/.test(location.search);
      if (TOKEN)
        document.cookie = "resume_token=" + TOKEN + "; expires=Fri, 31 Dec 9999 23:59:59 GMT";
      var selectedTabbable = -1;

      document.onload = function() {
        if (RESUME) {
          document.getElementById("start-button").innerHTML = "Resume";
          document.getElementById("new-button").style.display = "block";
        }
        document.getElementById("results-page-url").innerHTML =
          "http://" + location.host + WEB_ROOT + "overview.html";
        document.getElementById("results-page-url").href =
          "http://" + location.host + WEB_ROOT + "overview.html";
      };

      function displaySessionConfiguration(configuration) {
        var userAgent = document.getElementById("user-agent");
        userAgent.innerText = configuration.userAgent;
        var testPath = document.getElementById("test-path");
        for (var i = 0; i < configuration.tests.include.length; i++) {
          var path = configuration.tests.include[i];
          testPath.innerText += path + "\n";
        }
        var testTypes = document.getElementById("test-types");
        testTypes.innerText = configuration.types.join(", ");
        var testTimeout = document.getElementById("test-timeout");
        for (var timeout in configuration.timeouts) {
          testTimeout.innerText +=
            timeout + ": " + configuration.timeouts[timeout] / 1000 + "s\n";
        }
        var referenceTokens = document.getElementById("reference-tokens");
        if (configuration.referenceTokens.length === 0) {
          referenceTokens.innerText = "none";
        } else {
          for (var i = 0; i < configuration.referenceTokens.length; i++) {
            var token = configuration.referenceTokens[i];
            referenceTokens.innerText += token + "\n";
          }
        }
      }

      function displaySessionStatus(status) {
        var testTypes = document.getElementById("total-tests");
        var count = 0;
        for (var api in status.testFilesCount) {
          count += status.testFilesCount[api];
        }
        testTypes.innerText = count;
      }

      function startTests() {
        WaveService.startSession(token, function() {
          WaveService.readNextTest(token, function(url) {
            location.href = url;
          });
        });
      }

      var resultsUrl =
        "http://" + location.host + WEB_ROOT + "results.html" + location.search;
      new QRCode(document.getElementById("qr-code"), resultsUrl);

      var resultsButton = document.getElementById("results-button");
      resultsButton.onclick = function() {
        window.open(resultsUrl, "_blank");
      };

      var startButton = document.getElementById("start-button");
      startButton.onclick = startTests;

      function removeClass(element, className) {
        var elementClass = element.className;
        var index = elementClass.indexOf(className);
        if (index !== -1) {
          element.className = elementClass.replace(className, "");
        }
      }

      function addClass(element, className) {
        element.className += " " + className;
      }

      function skipFocus(steps) {
        var tabbables = document.getElementsByClassName("tabbable");
        if (selectedTabbable === -1) {
          selectedTabbable = 0;
        } else {
          removeClass(tabbables[selectedTabbable], "focused");
          selectedTabbable += steps;
        }

        if (selectedTabbable >= tabbables.length) {
          selectedTabbable = 0;
        }

        if (selectedTabbable < 0) {
          selectedTabbable = tabbables.length - 1;
        }

        tabbables[selectedTabbable].focus();
        addClass(tabbables[selectedTabbable], "focused");
      }

      function focusNext() {
        skipFocus(1);
      }

      function focusPrevious() {
        skipFocus(-1);
      }

      document.onkeydown = function(event) {
        event = event || window.event;
        var charCode =
          typeof event.which === "number" ? event.which : event.keyCode;

        if (ACTION_KEYS.indexOf(charCode) !== -1) {
          event.preventDefault();
          if (selectedTabbable === -1) {
            startTests();
            return;
          }
          var tabbables = document.getElementsByClassName("tabbable");
          var element = tabbables[selectedTabbable];
          if (element.type === "checkbox") {
            element.checked = !element.checked;
          } else {
            element.click();
          }
        }

        if (PREV_KEYS.indexOf(charCode) !== -1) {
          focusPrevious();
        }

        if (NEXT_KEYS.indexOf(charCode) !== -1) {
          focusNext();
        }
      };

      var match = location.search.match(/token=([^&]+)/);
      var token = match[1];
      var tokenView = document.getElementById("token");
      tokenView.innerText = token;

      WaveService.readSession(token, displaySessionConfiguration);
      WaveService.readSessionStatus(token, displaySessionStatus);

      if (window.localStorage) {
        var storage = window.localStorage;
        var state = JSON.parse(storage.getItem("wave"));
        if (!state) {
          state = {};
        }
        if (!state.recent_sessions) {
          state.recent_sessions = [];
        }
        if (state.recent_sessions.indexOf(token) === -1) {
          state.recent_sessions.unshift(token);
        }
        storage.setItem("wave", JSON.stringify(state));
      }
    </script>
  </body>
</html>
