<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>横長ループビューア</title>
  <style>
    html, body { margin:0; height:100%; background:#000; overflow:hidden; }
    #viewer { width:100%; height:100%; position:relative; overflow:hidden; cursor:grab; }
    #viewer.grabbing { cursor:grabbing; }
    #panoWrap { display:flex; position:absolute; top:50%; transform:translateY(-50%); }
    #panoWrap img { height:100%; user-select:none; pointer-events:none; }
    .ctrl { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:10px; }
    .btn { background:rgba(255,255,255,0.8); border:none; padding:6px 12px; border-radius:4px; cursor:pointer; font-size:16px; }
  </style>
</head>
<body>

<div id="viewer">
  <div id="panoWrap">
    <img id="panoImg1" src="" alt="Panorama">
    <img id="panoImg2" src="" alt="Panorama">
    <img id="panoImg3" src="" alt="Panorama">
  </div>
  <div class="ctrl">
    <button class="btn" id="leftBtn">◀</button>
    <button class="btn" id="stopBtn">STOP</button>
    <button class="btn" id="rightBtn">▶</button>
  </div>
</div>

<script>
  // URLハッシュから画像パス取得
  const params = new URLSearchParams(location.hash.replace('#',''));
  const imgPath = params.get('panorama') || '../vr_image/sample.jpg';

  const panoImg1 = document.getElementById('panoImg1');
  const panoImg2 = document.getElementById('panoImg2');
  const panoImg3 = document.getElementById('panoImg3');
  panoImg1.src = panoImg2.src = panoImg3.src = imgPath;

  const panoWrap = document.getElementById('panoWrap');
  const viewer = document.getElementById('viewer');

  let offsetX = 0;
  let dragging = false;
  let lastX = 0;
  let imgWidth = 0;

  let holdInterval = null;
  let autoInterval = null;
  let autoSpeed = -1;   // 自動スクロール速度（px/frame）
  let autoActive = true; // trueならスクロールする

  function updatePosition(){
    if(offsetX <= -2*imgWidth) offsetX += imgWidth;
    if(offsetX >= 0) offsetX -= imgWidth;
    panoWrap.style.left = offsetX + "px";
  }

  function startAutoScroll(){
    stopAutoScroll();
    autoInterval = setInterval(()=>{
      if(autoActive){
        offsetX += autoSpeed;
        updatePosition();
      }
    }, 30);
  }
  function stopAutoScroll(){
    if(autoInterval) clearInterval(autoInterval);
    autoInterval = null;
  }
  function pauseAutoScroll(){
    autoActive = false;
    setTimeout(()=>{ autoActive = true; }, 5000);
  }

  // --- ドラッグ操作 ---
  viewer.addEventListener('mousedown', e=>{
    dragging = true;
    lastX = e.clientX;
    viewer.classList.add("grabbing");
    pauseAutoScroll();
  });
  window.addEventListener('mousemove', e=>{
    if(!dragging) return;
    offsetX += e.clientX - lastX;
    lastX = e.clientX;
    updatePosition();
  });
  window.addEventListener('mouseup', ()=>{
    dragging = false;
    viewer.classList.remove("grabbing");
  });

  // --- ボタン長押し ---
  function startHold(dir){
    pauseAutoScroll();
    stopHold();
    holdInterval = setInterval(()=>{
      offsetX += dir * 5;
      updatePosition();
    }, 20);
  }
  function stopHold(){
    if(holdInterval) clearInterval(holdInterval);
    holdInterval = null;
  }

  document.getElementById('leftBtn').addEventListener('mousedown', ()=> startHold(1));
  document.getElementById('rightBtn').addEventListener('mousedown', ()=> startHold(-1));
  window.addEventListener('mouseup', stopHold);

  // --- STOP ボタン ---
  const stopBtn = document.getElementById('stopBtn');
  stopBtn.addEventListener('click', ()=>{
    autoActive = false;
    stopAutoScroll();   // 完全停止
  });

  // --- 画像読み込み後に初期化 ---
  panoImg1.addEventListener('load', ()=>{
    imgWidth = panoImg1.naturalWidth * (viewer.clientHeight / panoImg1.naturalHeight);
    [panoImg1, panoImg2, panoImg3].forEach(img=>{
      img.style.width = imgWidth + "px";
    });
    offsetX = -imgWidth; // 真ん中からスタート
    updatePosition();
    startAutoScroll();
  });
</script>

</body>
</html>