<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {
          background-color: black;
      }
      #word {
          font-size: 80px;
          font-family: sans-serif;
          font-weight: bold;
          width: 100%;
          text-align: center;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          color: red;
      }

      #word img {
          height: 100px;
          width: 75px;
      }

      #controls {
          position: absolute;
          bottom: 10px;
          left: 10px;
      }
      #controls img {
          width: 40px;
          height: 40px;
      }
    </style>
  </head>
  <body>
    <div id="word"><img src="../play.svg"></div>
    <script type="text/javascript">
      var started = false;
      var showControls = false;

      var colorWords = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
      var hypnoWords = ["sleep", "relax", "fall", "deeper", "trance"];
      var colors = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
      var wordEl = document.getElementById("word");

      function randomChoice(a) {
	  return a[Math.floor(Math.random()*a.length)];
      }

      var hypnoFrequency = 0;
      var hypnoIncrements = 10;
      function changeWord() {
	  var wordList = (Math.random()*hypnoIncrements < hypnoFrequency) ? hypnoWords : colorWords;
	  var newWord;
	  do {
	      newWord = randomChoice(wordList);
	  } while (newWord === wordEl.innerText);

	  var newColor;
	  do {
	      newColor = randomChoice(colors);
	  } while (newColor === wordEl.style.color);

	  wordEl.innerText = newWord;
	  wordEl.style.color = newColor;
      }

      window.onclick = function () {
          if (!started) {
              started = true;
              document.getElementById("controls").style.display = "none";
              changeWord();
              setInterval(changeWord, 1000);
              setInterval(function() { if (hypnoFrequency < hypnoIncrements) { hypnoFrequency++; } }, 5000);
          } else {
              document.getElementById("controls").style.display = showControls ? "none" : "block";
              showControls = !showControls;
          }
      }
    </script>

    <div id="controls"><a href=".."><img src="../back.svg"></a> <a href="."><img src="../reload.svg"></a></div>

  </body>
</html>