<script>
gsap.registerPlugin(Draggable);
document.addEventListener("DOMContentLoaded", () => {
  const allInstances = document.querySelectorAll("[comparison-wrap]");

  allInstances.forEach((instance) => {
    const wrap = instance;
    const afterImage = instance.querySelector("[comparison-after]");
    const dragger = instance.querySelector("[comparison-dragger]");
    const attrValue = wrap.getAttribute("comparison-bounds-percentage");
    const boundPercent = attrValue !== null ? parseInt(attrValue) / 100 : 0.05;

    let draggableInstance;

    function init() {
      const wrapWidth = wrap.offsetWidth;
      const padding = wrapWidth * boundPercent;

      if (draggableInstance) {
        draggableInstance.kill();
      }
      draggableInstance = Draggable.create(dragger, {
        type: "x",
        bounds: {
          minX: padding - wrapWidth / 2,
          maxX: wrapWidth - padding - wrapWidth / 2,
        },
        onDrag: updateClipPath,
        onThrowUpdate: updateClipPath,
      })[0];

      updateClipPath();
    }
    function updateClipPath() {
      const wrapWidth = wrap.offsetWidth;
      const x = gsap.getProperty(dragger, "x") + wrapWidth / 2;
      afterImage.style.clipPath = `inset(0 0 0 ${x}px)`;
    }
    init();
    let resizeTimer;
    window.addEventListener("resize", () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(init, 50);
    });
  });
});
</script>