const scenes = ["scene1", "scene2", "scene3", "scene4", "scene5", "scene6", "scene7", "scene8", "scene9", "scene10", "scene11", "scene12", "scene13", "scene14", "scene15", "scene16", "scene17", "scene18", "scene19", "scene20"];
let currentSceneIndex = 0;
let autoRotateActive = false;




const viewer = pannellum.viewer("panorama", {
  default: {
    firstScene: "scene1",
    autoLoad: true,
    autoRotate: -2,
    sceneFadeDuration: 1000,
    compass: true,
    hfov: 120,
  },
  scenes: {
    scene1: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_facility.jpg" },
    scene2: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_lobby.jpg" },
    scene3: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_sec_living.jpg" },
    scene4: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_sec_lobby.jpg" },
    scene5: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_1_room.jpg"  },
    scene6: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_2_room.jpg"  },
    scene7: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_3_room.jpg"  },
    scene8: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_4_room.jpg"  },
    scene9: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_toilet.jpg"  },
    scene10: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_bath.jpg" },
    scene11: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_3rd.jpg"  },
    scene12: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_3rd_lobby.jpg"  },
    scene13: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_3rd_living.jpg"  },
    scene14: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_resting.jpg"  },
    scene15: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_nusing.jpg" },
    scene16: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_physical.jpg" },
    scene17: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_resturant.jpg" },
    scene18: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_disaster_slide.jpg"},
    scene19: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_terrace.jpg" },
    scene20: { type: "equirectangular", panorama: "/base_1/img/panorama/panorama_parking.jpg" },
 },
});




// È°¼º ½æ³×ÀÏ °­Á¶
function highlightThumbnail() {
  document.querySelectorAll('.thumbnail img').forEach((img) => img.classList.remove('active'));
  const currentScene = scenes[currentSceneIndex];
  const activeThumbnail = document.querySelector(`.thumbnail img[onclick="switchScene('${currentScene}')"]`);
  if (activeThumbnail) activeThumbnail.classList.add('active');
}




// ¾À Àüȯ
function switchScene(sceneId) {
  viewer.loadScene(sceneId);
  currentSceneIndex = scenes.indexOf(sceneId);
  highlightThumbnail();
}




function prevScene() {
  currentSceneIndex = (currentSceneIndex - 1 + scenes.length) % scenes.length;
  viewer.loadScene(scenes[currentSceneIndex]);
  highlightThumbnail();
}




function nextScene() {
  currentSceneIndex = (currentSceneIndex + 1) % scenes.length;
  viewer.loadScene(scenes[currentSceneIndex]);
  highlightThumbnail();
}




function zoomIn() {
  viewer.setHfov(viewer.getHfov() - 10);
}




function zoomOut() {
  viewer.setHfov(viewer.getHfov() + 10);
}




function toggleAutoRotate() {
  autoRotateActive = !autoRotateActive;
  autoRotateActive ? viewer.startAutoRotate(-2) : viewer.stopAutoRotate();
}




// ¸¶¿ì½º µå·¡±× ½ºÅ©·Ñ + °ü¼º È¿°ú
const thumbnailControls = document.getElementById("thumbnail-controls");
let isDown = false;
let startX, scrollLeft, velocity = 0, momentum;




thumbnailControls.addEventListener("mousedown", (e) => {
  if (e.button !== 0) return;
  isDown = true;
  startX = e.pageX;
  scrollLeft = thumbnailControls.scrollLeft;
  velocity = 0; // Ãʱ⠼ӵµ ¼³Á¤
  cancelMomentum();
  thumbnailControls.classList.add("active");
});




thumbnailControls.addEventListener("mouseleave", () => {
  isDown = false;
  applyMomentum();
  thumbnailControls.classList.remove("active");
});




thumbnailControls.addEventListener("mouseup", () => {
  isDown = false;
  applyMomentum();
  thumbnailControls.classList.remove("active");
});




thumbnailControls.addEventListener("mousemove", (e) => {
  if (!isDown) return;
  e.preventDefault();
  const x = e.pageX;
  const walk = (x - startX) * 0.8; // À̵¿ °Å¸® Á¶Á¤
  thumbnailControls.scrollLeft = scrollLeft - walk;
  velocity = (x - startX) * 0.05; // ¼Óµµ ÀúÀå
});




// °ü¼º È¿°ú Àû¿ë
function applyMomentum() {
  if (Math.abs(velocity) < 0.1) return; // ÃÖ¼Ò ¼Óµµ ÀÌÇ϶ó¸é ¸ØÃã
  thumbnailControls.scrollLeft -= velocity; // ½ºÅ©·Ñ À̵¿
  velocity *= 0.90; // ¼Óµµ °¨¼Ó
  momentum = requestAnimationFrame(applyMomentum);
}




function cancelMomentum() {
  cancelAnimationFrame(momentum);
}




// ½æ³×ÀÏ À̹ÌÁö µå·¡±× ±âº» µ¿ÀÛ ¹æÁö
document.querySelectorAll("#thumbnail-controls img").forEach((img) => {
  img.addEventListener("dragstart", (e) => e.preventDefault());
});






// Ãʱ⠽æ³×ÀÏ °­Á¶
highlightThumbnail();