<script>
(function () {
  // ===== 라이트박스 =====
  var lb = document.getElementById("lb");
  if (!lb) return;
  var img = document.getElementById("lb-img");
  var info = document.getElementById("lb-info");
  var strip = document.getElementById("lb-strip");
  var elCount = document.getElementById("lb-count");
  var btnPrev = document.getElementById("lb-prev");
  var btnNext = document.getElementById("lb-next");
  var btnClose = document.getElementById("lb-close");
  var btnToggle = document.getElementById("lb-toggle");
  var root = document.documentElement;

  var list = [];       // 현재 필터가 걸린 뒤 화면에 보이는 figure 들
  var idx = -1;
  var lastFocus = null;

  function visibleFigs() {
    return Array.prototype.slice.call(document.querySelectorAll("figure.shot"))
      .filter(function (f) {
        if (f.classList.contains("hide")) return false;
        var p = f.closest(".dblock, section.style-sec, #sortview");
        while (p) {
          if (p.classList.contains("hide")) return false;
          p = p.parentElement ? p.parentElement.closest(".dblock, section.style-sec, #sortview") : null;
        }
        return f.offsetParent !== null;
      });
  }

  function textOf(fig, sel) {
    var e = fig.querySelector(sel);
    return e ? e.textContent.trim() : "";
  }

  function sectionOf(fig) {
    var d = fig.closest(".dblock");
    if (d) { var h4 = d.querySelector(".dhead h4"); if (h4) return h4.textContent.trim(); }
    var s = fig.closest("section.style-sec");
    if (s) { var h3 = s.querySelector(".sec-head h3"); if (h3) return h3.textContent.trim(); }
    return "";
  }

  var CATNAME = { p: "펜던트", f: "플로어", t: "테이블", w: "벽,천장", b: "포터블", l: "전구,스트립", m: "분위기컷" };

  function renderInfo(fig) {
    info.innerHTML = "";
    var h = document.createElement("p");
    h.className = "lb-t";
    h.textContent = textOf(fig, "figcaption .t");
    info.appendChild(h);

    function row(label, val, asHtml) {
      if (!val) return;
      var p = document.createElement("p");
      p.className = "lb-row";
      if (label) { var b = document.createElement("b"); b.textContent = label + " "; p.appendChild(b); }
      if (asHtml) { var sp = document.createElement("span"); sp.innerHTML = val; p.appendChild(sp); }
      else { p.appendChild(document.createTextNode(val)); }
      info.appendChild(p);
    }

    var meta = fig.querySelector("figcaption .meta2");
    if (meta) row("", meta.innerHTML, true);
    var s = fig.querySelector("figcaption .s");
    if (s) row("", s.innerHTML, true);

    var sec = document.createElement("div");
    sec.className = "lb-sec";
    var lb1 = document.createElement("div");
    lb1.className = "lb-lb"; lb1.textContent = "분류";
    sec.appendChild(lb1);
    info.appendChild(sec);
    row("섹션", sectionOf(fig));
    row("형태", CATNAME[fig.getAttribute("data-c")] || "");
    var rateBtn = fig.querySelector(".rate");
    if (rateBtn) row("기억할만함", rateBtn.classList.contains("on") ? rateBtn.textContent.trim() : "표시 없음");
  }

  function buildStrip() {
    strip.innerHTML = "";
    list.forEach(function (f, i) {
      var im = document.createElement("img");
      var src = f.querySelector("img");
      im.src = src ? src.getAttribute("src") : "";
      im.alt = textOf(f, "figcaption .t");
      im.tabIndex = 0;
      im.addEventListener("click", function () { show(i); });
      im.addEventListener("keydown", function (e) { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); show(i); } });
      strip.appendChild(im);
    });
  }

  function show(i) {
    if (i < 0 || i >= list.length) return;
    idx = i;
    var fig = list[idx];
    var src = fig.querySelector("img");
    img.src = src ? src.getAttribute("src") : "";
    img.alt = textOf(fig, "figcaption .t");
    renderInfo(fig);
    elCount.textContent = (idx + 1) + " / " + list.length;
    btnPrev.disabled = (idx === 0);
    btnNext.disabled = (idx === list.length - 1);
    var thumbs = strip.children;
    for (var k = 0; k < thumbs.length; k++) thumbs[k].classList.toggle("cur", k === idx);
    if (thumbs[idx] && thumbs[idx].scrollIntoView) {
      thumbs[idx].scrollIntoView({ block: "nearest", inline: "center" });
    }
  }

  function open(fig) {
    list = visibleFigs();
    var i = list.indexOf(fig);
    if (i < 0) { list = [fig]; i = 0; }
    lastFocus = document.activeElement;
    buildStrip();
    lb.hidden = false;
    root.classList.add("lbopen");
    show(i);
    btnClose.focus();
  }
  function close() {
    lb.hidden = true;
    lb.classList.remove("infoopen");
    root.classList.remove("lbopen");
    img.src = "";
    strip.innerHTML = "";
    if (lastFocus && lastFocus.focus) lastFocus.focus();
  }
  function step(d) { show(Math.min(list.length - 1, Math.max(0, idx + d))); }

  // 도판 클릭으로 열기 (별 버튼 클릭은 제외)
  document.addEventListener("click", function (e) {
    if (!e.target.closest) return;
    if (e.target.closest("#lb")) return;
    if (e.target.closest("figure.shot .acts")) return;
    var box = e.target.closest("figure.shot .imgbox");
    if (!box) return;
    e.preventDefault(); e.stopPropagation();
    open(box.closest("figure.shot"));
  }, true);

  btnPrev.addEventListener("click", function () { step(-1); });
  btnNext.addEventListener("click", function () { step(1); });
  btnClose.addEventListener("click", close);
  btnToggle.addEventListener("click", function () {
    var on = lb.classList.toggle("infoopen");
    btnToggle.textContent = on ? "설명 닫기" : "설명";
  });

  document.addEventListener("keydown", function (e) {
    if (lb.hidden) return;
    if (e.key === "Escape") { e.preventDefault(); if (lb.classList.contains("infoopen")) { lb.classList.remove("infoopen"); btnToggle.textContent = "설명"; } else { close(); } return; }
    if (e.key === "ArrowLeft") { e.preventDefault(); step(-1); return; }
    if (e.key === "ArrowRight") { e.preventDefault(); step(1); return; }
    if (e.key === "Home") { e.preventDefault(); show(0); return; }
    if (e.key === "End") { e.preventDefault(); show(list.length - 1); return; }
    if (e.key === "i" || e.key === "I") { e.preventDefault(); btnToggle.click(); return; }
  }, true);

  // 배경 클릭으로 닫기
  lb.addEventListener("click", function (e) {
    if (e.target === lb || e.target.id === "lb-stage") close();
  });

  // 스와이프
  var sx = 0, sy = 0, moved = false;
  var stage = document.getElementById("lb-stage");
  stage.addEventListener("touchstart", function (e) {
    if (e.touches.length !== 1) return;
    sx = e.touches[0].clientX; sy = e.touches[0].clientY; moved = false;
  }, { passive: true });
  stage.addEventListener("touchmove", function () { moved = true; }, { passive: true });
  stage.addEventListener("touchend", function (e) {
    if (!moved || !e.changedTouches.length) return;
    var dx = e.changedTouches[0].clientX - sx;
    var dy = e.changedTouches[0].clientY - sy;
    if (Math.abs(dx) < 45 || Math.abs(dx) < Math.abs(dy)) return;
    step(dx < 0 ? 1 : -1);
  }, { passive: true });
})();
</script>
