// The results: every image bent, the same seed without tools under a wipe that follows the pointer.
// Runs as js_on_load of a gr.HTML component. The listeners sit on `element`, so they survive new results.
let sticky = false;

function setCut(card, pct, wiping) {
  const frame = card.querySelector(".bc-frame");
  if (!frame) return;
  frame.style.setProperty("--cut", pct + "%");
  frame.classList.toggle("bc-wiping", wiping);
}

function reset() {
  element.querySelectorAll(".bc-card[data-both]").forEach((c) => setCut(c, sticky ? 100 : 0, false));
}

element.addEventListener("pointermove", (e) => {
  const frame = e.target.closest(".bc-frame");
  if (!frame) return;
  const r = frame.getBoundingClientRect();
  const pct = Math.round(100 * Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)));
  element.querySelectorAll(".bc-card[data-both]").forEach((c) => setCut(c, pct, true));
});

element.addEventListener("pointerout", (e) => {
  if (e.target.closest(".bc-frame") && !(e.relatedTarget && e.relatedTarget.closest && e.relatedTarget.closest(".bc-frame"))) reset();
});

element.addEventListener("click", (e) => {
  const btn = e.target.closest(".bc-toggle");
  if (!btn) return;
  sticky = !sticky;
  btn.classList.toggle("bc-on", sticky);
  btn.textContent = sticky ? "Gebogene Bilder zeigen" : "Alle ohne Eingriff zeigen";
  reset();
});

watch("value", () => { sticky = false; reset(); });