/**
 * HAWAII-1964: tableflower 画像拡大ポップアップ（PCのみ）
 * dress/upgrade.html の option-dress_upgrade_gallery.js をベースに
 * tableflower 用にローカライズ
 */
document.addEventListener('DOMContentLoaded', function () {

  /* ==========================================================
    判定関数
  ========================================================== */
  function isSP() {
    return window.innerWidth <= 768;
  }

  /* ==========================================================
    モーダルギャラリー（PC用）
    .tf_box 内の全 .item a を横断的に収集（3グループ×4枚 = 12枚を順送り）
  ========================================================== */
  const photo = document.getElementById('photo');
  const tfBox = document.querySelector('.tf_box');
  if (!photo || !tfBox) return;

  const picMain = document.getElementById('pic_main');
  const picCaption = document.getElementById('pic_caption');
  const anchors = tfBox.querySelectorAll('.item a');
  const maxNum = anchors.length - 1;
  let nowNum = 0;

  anchors.forEach((a, index) => {
    a.addEventListener('click', (e) => {
      if (isSP()) {
        // SP時はリンク無効（拡大表示なし）
        e.preventDefault();
        return;
      }
      e.preventDefault();
      photo.classList.add('dis');
      nowNum = index;
      modalSet(nowNum);
    });
  });

  // NEXT
  const nextBtn = photo.querySelector('.next');
  if (nextBtn) {
    nextBtn.addEventListener('click', (e) => {
      e.preventDefault();
      nowNum = (nowNum < maxNum) ? nowNum + 1 : 0;
      modalSet(nowNum);
    });
  }

  // PREV
  const prevBtn = photo.querySelector('.prev');
  if (prevBtn) {
    prevBtn.addEventListener('click', (e) => {
      e.preventDefault();
      nowNum = (nowNum > 0) ? nowNum - 1 : maxNum;
      modalSet(nowNum);
    });
  }

  // 閉じる
  photo.querySelectorAll('.close-bg, .close').forEach(el => {
    el.addEventListener('click', (e) => {
      e.preventDefault();
      photo.classList.remove('dis');
    });
  });

  // メイン画像とキャプションセット
  function modalSet(num) {
    const target = anchors[num];
    if (!target) return;
    const imgSrc = target.getAttribute('href');
    const imgAlt = target.getAttribute('title');
    if (picMain) picMain.querySelector('img').setAttribute('src', imgSrc);
    if (picCaption) picCaption.innerHTML = imgAlt;
  }

  // resizeでモーダル非表示
  let timer = null;
  window.addEventListener('resize', () => {
    if (timer !== null) clearTimeout(timer);
    timer = setTimeout(() => {
      photo.classList.remove('dis');
    }, 100);
  });

});