<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{name}}</title>

    <!-- Generated javascript library includes -->
    {% for path in includes -%}
    <script type="application/javascript" src="{{path}}"></script>
    {% endfor -%}

    <style>
      .widget { max-width: 900px; margin: auto; }
      .row { width: 100%; margin-bottom: 10px; }
      .col { display: inline-block; }
      .title { width: 80%; margin: 0 auto; }
      .transport { padding-left: 10px; }
      .parameter-name { width: 35%; text-align: right; }
      .parameter-slider { width: 45%; padding-left: 10px; }
      .parameter-slider input { vertical-align: middle; width: 100%; }
      .parameter-value { width: 10%; padding-left: 10px; text-align: left; }
      .link { margin: 10px 10px 0 0; float: right; }
      span { text-align: right; }
    </style>

    <script type="text/javascript">

      var webAssemblySupported = (typeof WebAssembly === 'object');
      var heavyModule = null;
      var loader = null;

      window.onload = function() {
        if (webAssemblySupported) {
          heavyModule = {{name}}_Module();
          heavyModule['onRuntimeInitialized'] = moduleLoaded;
        }
        else {
          console.warn("heavy: web assembly not found, falling back to asm.js");

          var script = document.createElement('script');
          script.src = "{{name}}.asm.js";
          script.onload = function() {
            heavyModule = {{name}}_AsmModule();
            moduleLoaded();
          }
          document.body.appendChild(script);
        }
        document.getElementById("transportButton").style.visibility = "hidden";
      }

      function moduleLoaded() {
        loader = new heavyModule.AudioLibLoader();
        loader.init({
          // optional: set audio processing block size, default is 2048
          blockSize: 2048,
          // optional: provide a callback handler for [print] messages
          printHook: onPrint,
          // optional: provide a callback handler for [s {sendName} @hv_param] messages
          sendHook: onFloatMessage,
          // optional: pass an existing web audio context, otherwise a new one
          // will be constructed.
          webAudioContext: null
        });
        {% for k, v in parameters -%}
        updateSlider_{{k}}({{v.attributes.default}});
        {% endfor -%}
        document.getElementById("transportButton").style.visibility = "visible";
      }

      function start() {
        loader.start();
      }

      function stop() {
        loader.stop();
      }

      function toggleTransport(element) {
        (loader.isPlaying) ? stop() : start();
      }

      function onPrint(message) {
        console.log(message);
      }

      function onFloatMessage(sendName, floatValue) {
        console.log(sendName, floatValue);
      }

      {%- if events | length %}

      // Generated Event Update Methods
{%- for k, v in events %}
      function sendEvent_{{k}}() {
        loader.audiolib.sendEvent("{{v.display}}");
      }
{% endfor %}
      {%- endif %}
      {%- if parameters | length %}
      // Generated Parameter Update Methods
{%- for k, v in parameters %}
      function updateSlider_{{k}}(value) {
        document.getElementById("value_{{k}}").textContent = Number(value).toFixed(2);
        loader.audiolib.setFloatParameter("{{v.display}}", value);
      }
{% endfor %}
      {%- endif %}
    </script>
  </head>
  <body>
    <div class="widget">
      <div class="row title">
        <div class="col"><h2>{{name}}</h2></div>
        <div class="col transport">
          <label>
            start / stop
            <input type="checkbox" id="transportButton" onchange="toggleTransport();">
          </label>
        </div>
      </div>
      {%- if events | length %}
      <div class="row events">
      {%- for k, v in events %}
        <div class="col">
          <button type="button" id="trigger_{{k}}" onclick="sendEvent_{{k}}();">{{k}}</button>
        </div>
      {%- endfor %}
      </div>
      {%- endif %}
      {%- if parameters | length %}
      {%- for k, v in parameters %}
      <div class="row">
        <div class="col parameter-name">{{k}}</div>
        <div class="col parameter-slider">
          <input id="parameter_{{k}}" type="range" min="{{v.attributes.min}}" max="{{v.attributes.max}}" step="0.01" value="{{v.attributes.default}}" onchange="updateSlider_{{k}}(value);" oninput="updateSlider_{{k}}(value)">
        </div>
        <div class="col parameter-value" id="value_{{k}}">{{v.attributes.default}}</div>
      </div>
      {%- endfor %}
      {%- endif %}
      <div class="row">
        <span class="link"><em>powered by <a href="https://enzienaudio.com"><strong>heavy</strong></em></a></span>
      </div>
    </div>
  </body>
</html>
