(function (){
"use strict";
function clamp(n, min, max){
return Math.max(min, Math.min(max, n));
}
function cssEscapeSafe(str){
if(window.CSS&&typeof window.CSS.escape==="function") return window.CSS.escape(String(str));
return String(str).replace(/"/g, '\\"');
}
function normalizeSlug(v){
return String(v||"")
.trim()
.toLowerCase()
.replace(/[_\s]+/g, "-")
.replace(/-+/g, "-");
}
function normalizeUrlNoQuery(u){
var s=String(u||"").trim();
if(!s) return "";
return s.split("#")[0].split("?")[0];
}
function getStepPx(track){
var thumb=track.querySelector(".zoop-product-gallery__thumb");
if(!thumb) return 220;
var thumbRect=thumb.getBoundingClientRect();
var styles=window.getComputedStyle(track);
var gap=parseFloat(styles.columnGap||styles.gap||"8")||8;
return Math.max(60, Math.round(thumbRect.width + gap));
}
function updateArrows(state){
if(!state||!state.track||!state.prev||!state.next) return;
var t=state.track;
var maxScroll=Math.max(0, t.scrollWidth - t.clientWidth);
var left=Math.round(t.scrollLeft);
var atStart=left <=2;
var atEnd=left >=(maxScroll - 2);
state.prev.disabled=atStart;
state.next.disabled=atEnd;
state.prev.setAttribute("aria-disabled", atStart ? "true":"false");
state.next.setAttribute("aria-disabled", atEnd ? "true":"false");
}
function scrollByStep(track, dir){
var step=getStepPx(track) * 2;
var target=track.scrollLeft + (dir * step);
var maxScroll=Math.max(0, track.scrollWidth - track.clientWidth);
target=clamp(target, 0, maxScroll);
track.scrollTo({ left: target, behavior: "smooth" });
}
function buildArrows(gallery, track){
var wrap=document.createElement("div");
wrap.className="zoop-product-gallery__thumbs-nav";
var prev=document.createElement("button");
prev.type="button";
prev.className="zoop-product-gallery__arrow is-prev";
prev.setAttribute("aria-label", "Previous thumbnails");
prev.innerHTML="‹";
var next=document.createElement("button");
next.type="button";
next.className="zoop-product-gallery__arrow is-next";
next.setAttribute("aria-label", "Next thumbnails");
next.innerHTML="›";
wrap.appendChild(prev);
wrap.appendChild(next);
track.parentNode.insertBefore(wrap, track);
var state={ track: track, prev: prev, next: next };
prev.addEventListener("click", function (e){
e.preventDefault();
scrollByStep(track, -1);
});
next.addEventListener("click", function (e){
e.preventDefault();
scrollByStep(track, 1);
});
track.addEventListener("scroll", function (){ updateArrows(state); }, { passive: true });
window.addEventListener("resize", function (){ updateArrows(state); });
updateArrows(state);
return state;
}
function setMainFromThumb(gallery, btn, smooth){
if(!gallery||!btn) return false;
var main=gallery.querySelector(".zoop-product-gallery__main");
if(!main) return false;
var src=btn.getAttribute("data-full-src")||"";
var alt=btn.getAttribute("data-alt")||"";
if(src) main.setAttribute("src", src);
if(alt) main.setAttribute("alt", alt);
var thumbs=gallery.querySelectorAll(".zoop-product-gallery__thumb");
for (var i=0; i < thumbs.length; i++) thumbs[i].classList.remove("is-active");
btn.classList.add("is-active");
if(typeof btn.scrollIntoView==="function"){
btn.scrollIntoView({ behavior: smooth ? "smooth":"auto", inline: "nearest", block: "nearest" });
}
return true;
}
function selectThumbByColor(gallery, colorSlug){
if(!gallery||!colorSlug) return false;
var wanted=normalizeSlug(colorSlug);
var thumbs=gallery.querySelectorAll(".zoop-product-gallery__thumb");
var candidate=null;
for (var i=0; i < thumbs.length; i++){
var btn=thumbs[i];
var own=normalizeSlug(btn.getAttribute("data-color-slug")||"");
if(!own) continue;
if(own===wanted){
candidate=btn;
break;
}}
if(!candidate) return false;
return setMainFromThumb(gallery, candidate, true);
}
function syncActiveFromMain(gallery){
var main=gallery.querySelector(".zoop-product-gallery__main");
if(!main) return;
var current=normalizeUrlNoQuery(main.getAttribute("src")||"");
if(!current) return;
var thumbs=gallery.querySelectorAll(".zoop-product-gallery__thumb");
var activeBtn=null;
for (var i=0; i < thumbs.length; i++){
var t=thumbs[i];
var src=normalizeUrlNoQuery(t.getAttribute("data-full-src")||"");
var isActive=(src&&src===current);
t.classList.toggle("is-active", isActive);
if(isActive) activeBtn=t;
}
if(activeBtn&&typeof activeBtn.scrollIntoView==="function"){
activeBtn.scrollIntoView({ behavior: "smooth", inline: "nearest", block: "nearest" });
}}
function initOne(gallery){
if(!gallery||gallery.dataset.zoopGalleryBound==="1") return;
gallery.dataset.zoopGalleryBound="1";
var main=gallery.querySelector(".zoop-product-gallery__main");
var track=gallery.querySelector(".zoop-product-gallery__thumbs");
if(!main||!track) return;
buildArrows(gallery, track);
gallery.addEventListener("click", function (e){
var btn=e.target.closest(".zoop-product-gallery__thumb");
if(!btn||!gallery.contains(btn)) return;
e.preventDefault();
setMainFromThumb(gallery, btn, true);
}, true);
var observer=new MutationObserver(function (){
syncActiveFromMain(gallery);
});
observer.observe(main, { attributes: true, attributeFilter: ["src"] });
syncActiveFromMain(gallery);
}
function initAll(){
var galleries=document.querySelectorAll('[data-zoop-product-gallery="1"]');
for (var i=0; i < galleries.length; i++) initOne(galleries[i]);
}
document.addEventListener("zoop:color-selected", function (e){
var detail=(e&&e.detail)||{};
var colorSlug=String(detail.colorSlug||"");
var productId=parseInt(detail.productId||"0", 10)||0;
if(!colorSlug) return;
var galleries=document.querySelectorAll('[data-zoop-product-gallery="1"]');
for (var i=0; i < galleries.length; i++){
var g=galleries[i];
var gid=parseInt(g.getAttribute("data-product-id")||"0", 10)||0;
if(productId&&gid&&gid!==productId) continue;
selectThumbByColor(g, colorSlug);
}});
if(document.readyState==="loading"){
document.addEventListener("DOMContentLoaded", initAll);
}else{
initAll();
}})();