script.js

// State
let slides = [];
let currentIndex = 0;
let preloadedImages = {};

// DOM elements
const slideContainer = document.getElementById('slide-container');
const currentSlideImg = document.getElementById('current-slide');
const loadingContainer = document.getElementById('loading-container');

// Device detection
function isMobile() {
  return window.innerWidth <= 768;
}

// Fetch appropriate slides JSON
async function loadSlides() {
  try {
    const jsonFile = isMobile() ? 'slides-mobile.json' : 'slides-desktop.json';
    const response = await fetch(jsonFile);

    if (!response.ok) {
      throw new Error(`Failed to load ${jsonFile}`);
    }

    slides = await response.json();

    if (slides.length === 0) {
      showError('No slides found');
      return;
    }

    console.log(`Loaded ${slides.length} slides from ${jsonFile}`);

    // Load first slide
    await loadFirstSlide();

    // Hide loading screen
    hideLoading();

    // Start preloading next slides
    preloadSlides(currentIndex + 1, 2);

  } catch (error) {
    console.error('Error loading slides:', error);
    showError('Failed to load slides');
  }
}

// Load the first slide immediately
async function loadFirstSlide() {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      currentSlideImg.src = slides[0];
      currentSlideImg.classList.add('fade-in');
      preloadedImages[0] = img;
      resolve();
    };
    img.onerror = () => {
      reject(new Error('Failed to load first slide'));
    };
    img.src = slides[0];
  });
}

// Preload images
function preloadSlides(startIndex, count) {
  for (let i = startIndex; i < startIndex + count && i < slides.length; i++) {
    if (!preloadedImages[i]) {
      const img = new Image();
      img.src = slides[i];
      preloadedImages[i] = img;
    }
  }
}

// Show slide
function showSlide(index) {
  // Bounds checking
  if (index < 0 || index >= slides.length) {
    console.log('Slide index out of bounds');
    return;
  }

  // Fade out current slide
  currentSlideImg.classList.remove('fade-in');
  currentSlideImg.classList.add('fade-out');

  // Update slide after fade out
  setTimeout(() => {
    currentIndex = index;
    currentSlideImg.src = slides[currentIndex];

    // Fade in new slide
    currentSlideImg.classList.remove('fade-out');
    currentSlideImg.classList.add('fade-in');

    // Preload next slides
    preloadSlides(currentIndex + 1, 2);
  }, 400); // Match CSS transition duration
}

// Navigation functions
function nextSlide() {
  if (currentIndex < slides.length - 1) {
    showSlide(currentIndex + 1);
  }
}

function previousSlide() {
  if (currentIndex > 0) {
    showSlide(currentIndex - 1);
  }
}

// Keyboard navigation
function handleKeyboard(event) {
  switch(event.key) {
    case 'ArrowRight':
    case ' ':
      event.preventDefault();
      nextSlide();
      break;
    case 'ArrowLeft':
      event.preventDefault();
      previousSlide();
      break;
  }
}

// Touch swipe navigation
let touchStartX = 0;
let touchEndX = 0;

function handleTouchStart(event) {
  touchStartX = event.changedTouches[0].screenX;
}

function handleTouchEnd(event) {
  touchEndX = event.changedTouches[0].screenX;
  handleSwipe();
}

function handleSwipe() {
  const swipeThreshold = 50;
  const diff = touchStartX - touchEndX;

  if (Math.abs(diff) > swipeThreshold) {
    if (diff > 0) {
      // Swipe left - next slide
      nextSlide();
    } else {
      // Swipe right - previous slide
      previousSlide();
    }
  }
}

// Error handling
function showError(message) {
  hideLoading();
  slideContainer.innerHTML = `<div class="error-message">${message}</div>`;
  console.error(message);
}

// Hide loading screen
function hideLoading() {
  loadingContainer.classList.add('hidden');
}

// Image error handling
currentSlideImg.addEventListener('error', () => {
  console.error('Failed to load slide:', slides[currentIndex]);
  showError('Slide failed to load');
});

// Event listeners
document.addEventListener('keydown', handleKeyboard);
slideContainer.addEventListener('touchstart', handleTouchStart);
slideContainer.addEventListener('touchend', handleTouchEnd);

// Initialize
loadSlides();