<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  {{#if maxViewTime}}
  <meta http-equiv="refresh" content="{{maxViewTime}}; url=/">
  {{/if}}
  <title>srf</title>
  <link rel="icon" type="image/png" href="/img/logo.png">
  <link rel="stylesheet" href="/css/{{theme}}.css">
  <style>
    {{{template.css}}}
  </style>
</head>
<body>
  <div id="content">
    {{{body}}}
  </div>
  <script>
    document.addEventListener("keypress", keyCapt, false);
    function keyCapt (e) {
          console.log('keyCode: ', e.keyCode);
      if (e.keyCode === 32) {
        let el = document.getElementsByClassName('default_action')[0];
        if (el) el.click();
      } else if (e.keyCode === 98) { // b
        let el = document.getElementsByClassName('shortcut_b')[0];
        if (el) el.click();
      } else if (e.keyCode === 101) { // j
        let el = document.getElementsByClassName('shortcut_e')[0];
        if (el) el.click();
      } else if (e.keyCode === 106) { // j
        let el = document.getElementsByClassName('shortcut_j')[0];
        if (el) el.click();
      } else if (e.keyCode === 107) { // k
        let el = document.getElementsByClassName('shortcut_k')[0];
        if (el) el.click();
      } else if (e.keyCode === 108) { // l
        let el = document.getElementsByClassName('shortcut_l')[0];
        if (el) el.click();
      } else if (e.keyCode === 112) { // r
        let el = document.getElementsByClassName('shortcut_p')[0];
        if (el) el.click();
      } else if (e.keyCode === 114) { // r
        let el = document.getElementsByClassName('shortcut_r')[0];
        if (el) el.click();
      } else if (e.keyCode === 115) { // s
        let el = document.getElementsByClassName('shortcut_s')[0];
        if (el) el.click();
      } else if (e.keyCode === 59) { // ;
        let el = document.getElementsByClassName('shortcut_semicolon')[0].click();
        if (el) el.click();
      }
    }
    // let x = document.getElementById('myaudio');
    // x.volume = 0.2;
    // The DOM is stupid: getElementsByTagName doesn't return an array
    // of elements. Instead, it returns an HTMLCollection, which is an
    // "array-like object" which is not like an array. So, one has to
    // do stupid shit like the following to iterate over the elements.
    let elements = document.getElementsByTagName('audio');
    for (let element of elements) {
      element.volume = 0.4;
      let current = 0;
      element.src = audioFiles[current];
      element.addEventListener('ended', function (e) {
        current++;
        if (current == audioFiles.length) current = 0;
        element.src = audioFiles[current];
        if (current === 0) {
          element.pause();
        }
      });
    }

    function replay () {
      let elements = document.getElementsByTagName('audio');
      for (let element of elements) {
        element.play();
      }
    }
  </script>
</body>
</html>
