/* VARASYS PolyMeter — embed loader (zero-dependency, ~1 KB).
 *
 * Drop a placeholder + this script into any page:
 *   <div data-varasys-metronome="micro" data-patch="v1;t120;kick:4;snare:4=.X.X"></div>
 *   <script src="https://metronome.varasys.io/embed.js"></script>
 *
 * Attributes:
 *   data-varasys-metronome  editor | initial | teacher | micro   (which form factor)
 *   data-patch              a PolyMeter program/settings string (preloads it)
 *   data-setlist            a base64url set-list code (alternative to data-patch)
 *   data-width / data-height  iframe size (default 100% × 300; height auto-grows)
 *
 * Each placeholder becomes an <iframe src=".../<page>?embed=1#p=<patch>"> (the page's
 * own ?embed=1 mode strips the site chrome) and auto-resizes to the widget's content.
 */
(function () {
  var PAGES = { editor: "editor.html", initial: "player.html", teacher: "teacher.html", micro: "micro.html" };
  var me = document.currentScript;
  var ORIGIN = me ? me.src.replace(/\/embed\.js(\?.*)?$/, "") : location.origin;

  function build(el) {
    var v = (el.getAttribute("data-varasys-metronome") || "micro").toLowerCase();
    var page = PAGES[v] || "micro.html";
    var patch = el.getAttribute("data-patch");
    var sl = el.getAttribute("data-setlist");
    var hash = patch ? "#p=" + encodeURIComponent(patch)
             : sl ? "#sl=" + encodeURIComponent(sl) : "";
    var f = document.createElement("iframe");
    f.src = ORIGIN + "/" + page + "?embed=1" + hash;
    f.title = "VARASYS PolyMeter — " + v;
    f.loading = "lazy";
    f.setAttribute("allow", "autoplay");
    f.setAttribute("data-vmeter", v);
    f.style.cssText = "border:0;display:block;max-width:100%;width:" +
      (el.getAttribute("data-width") || "100%") + ";height:" +
      (el.getAttribute("data-height") || "300") + "px";
    (el.replaceWith ? el.replaceWith(f) : el.parentNode.replaceChild(f, el));
  }

  function init() {
    var els = document.querySelectorAll("[data-varasys-metronome]");
    for (var i = 0; i < els.length; i++) build(els[i]);
  }

  // auto-resize: the widget posts { type:'varasys-h', h } on load/resize
  window.addEventListener("message", function (e) {
    if (!e.data || e.data.type !== "varasys-h" || typeof e.data.h !== "number") return;
    var f = document.querySelectorAll("iframe[data-vmeter]");
    for (var i = 0; i < f.length; i++) if (f[i].contentWindow === e.source) f[i].style.height = e.data.h + "px";
  });

  if (document.readyState !== "loading") init();
  else document.addEventListener("DOMContentLoaded", init);
})();