{% comment %}
  Comic Viewer Include with Smooth Scrolling & Responsive Layout
  
  Parameters:
  - comic_title: Title to display (optional)
  - comic_folder: Path to the folder containing comic frames (default: /assets/images/comic/)
  - file_extension: File extension of the comic frames (default: .jpg)
  - frame_prefix: Prefix for the frame filenames (default: frame-)
  - total_frames: Total number of frames in the comic
{% endcomment %}

{% assign comic_title = include.comic_title %}
{% assign comic_folder = include.comic_folder | default: "/assets/images/comic/" %}
{% assign file_extension = include.file_extension | default: ".jpg" %}
{% assign frame_prefix = include.frame_prefix | default: "frame-" %}
{% assign total_frames = include.total_frames | default: 10 %}

<div class="comic-container">
  {% if comic_title %}
    <h2 class="comic-title">{{ comic_title }}</h2>
  {% endif %}
  <div class="comic-viewer-wrapper">
    <div class="comic-viewer" id="comic-viewer">
      <!-- Comic frames will be loaded here dynamically -->
    </div>
  </div>

  <!-- Progress bar for visualization -->
  <div class="progress-container">
    <div id="progress-bar" class="progress-bar"></div>
  </div>

  <div class="comic-controls">
    <button id="prev-frame" class="comic-button">Previous</button>
    <span id="frame-counter">Frame 1 of {{ total_frames }}</span>
    <button id="next-frame" class="comic-button">Next</button>
  </div>
  
</div>

<style>
  .comic-container {
    max-width: 1300px;	
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    box-sizing: border-box;
  }
  
  .comic-title {
    margin-bottom: 15px;
    text-align: center;
  }
  
  .comic-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    gap: 15px;
  }
 
  .comic-button {
    padding: 8px 16px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .comic-button:hover {
    background-color: #2980b9;
  }
  
  .comic-button:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
  }
  
  #frame-counter {
    font-size: 16px;
    font-weight: bold;
  }
  
  .comic-viewer-wrapper {
    overflow: hidden;
    position: relative;
    margin-top: 20px;
    cursor: grab;
    border-radius: 8px;
    max-height: 70vh;
  }
  
  .comic-viewer-wrapper.dragging {
    cursor: grabbing;
  }
  
  .comic-viewer {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%;
  }
  
  .comic-frame {
    height: 100%;
    max-height: 70vh; 
    max-width: 700px;
    object-fit: contain;
    pointer-events: none; /* Prevents images from interfering with drag */
  }
  
  /* Progress bar styles */
  .progress-container {
    width: 100%;
    height: 6px;
    background-color: #eee;
    border-radius: 3px;
    margin-top: 10px;
    overflow: hidden;
  }
  
  .progress-bar {
    height: 100%;
    background-color: #3498db;
    width: 0%;
    transition: width 0.3s ease-out;
  }
</style>

<script>
	document.addEventListener('DOMContentLoaded', function() {
  // Configuration variables
  const comicFolder = "{{ comic_folder }}";
  const fileExtension = "{{ file_extension }}";
  const totalFrames = {{ total_frames }};
  const framePrefix = "{{ frame_prefix }}";

  // Get DOM elements
  const comicViewer = document.getElementById('comic-viewer');
  const comicViewerWrapper = comicViewer.parentElement;
  const prevButton = document.getElementById('prev-frame');
  const nextButton = document.getElementById('next-frame');
  const frameCounter = document.getElementById('frame-counter');
  const progressBar = document.getElementById('progress-bar');

  // Set initial state
  let currentStartFrame = 1;
  let isDragging = false;
  let startX = 0;
  let currentTranslate = 0;
  let previousTranslate = 0;
  let animationID = 0;
  let frameWidth = 0;
  let framesPerView = 1;
  let maxStartFrame = 1;

  // Initialize frames
  function initializeFrames() {
    // Clear existing frames
    comicViewer.innerHTML = '';

    // Add all frames to the container
    for (let i = 1; i <= totalFrames; i++) {
      const frame = document.createElement('img');
      frame.src = `${comicFolder}${framePrefix}${i}${fileExtension}`;
      frame.alt = `Frame ${i}`;
      frame.className = 'comic-frame';
      frame.dataset.frameNumber = i;

      comicViewer.appendChild(frame);
    }

    // Wait for the first image to load to get dimensions
    const firstImage = comicViewer.querySelector('.comic-frame');
    if (firstImage) {
      if (firstImage.complete) {
        calculateFramesPerView();
        updateDisplay();
      } else {
        firstImage.onload = function() {
          calculateFramesPerView();
          updateDisplay();
        };
      }
    } else {
      // Fallback if no images loaded
      calculateFramesPerView();
      updateDisplay();
    }
  }

  // Calculate how many frames can be shown at once based on window width
  function calculateFramesPerView() {
    const maxFrameWidth = 700; // Max width for a single frame
    let viewerWidth = comicViewerWrapper.offsetWidth;
    let viewerHeight = comicViewerWrapper.offsetHeight;

    // Calculate the width of each frame (capped at maxFrameWidth)
    frameWidth = Math.min(Math.min(maxFrameWidth, viewerWidth),viewerHeight);

    // Calculate how many frames can fit in the viewer
    framesPerView = Math.max(1, Math.floor(viewerWidth / frameWidth));

    // Calculate the maximum start frame (ensuring the last frame is always visible)
    maxStartFrame = Math.max(1, totalFrames - framesPerView + 1);

    // Make sure current start frame is valid
    currentStartFrame = Math.min(currentStartFrame, maxStartFrame);
  }

  // Update display based on current start frame
  function updateDisplay() {
    // Calculate the end frame (either the last frame in view or the total number of frames)
    const endFrame = Math.min(currentStartFrame + framesPerView - 1, totalFrames);

    // Update frame counter to show current visible frames
    if(framesPerView == 1) {
      frameCounter.textContent = `Frame ${currentStartFrame} of ${totalFrames}`;
    } else {
      frameCounter.textContent = `Frames ${currentStartFrame}-${endFrame} of ${totalFrames}`;
    }
//  debug
    let windwidth = window.innerWidth;
    let viewerWidth = comicViewerWrapper.offsetWidth;
    let viewerHeight = comicViewer.offsetHeight;
//frameCounter.textContent = `cur ${currentStartFrame}, fpv ${framesPerView}, end ${endFrame}, window ${windwidth}, vw ${viewerWidth}, msf ${maxStartFrame}, vh ${viewerHeight}, vw ${viewerWidth}`

    // Update button states
    prevButton.disabled = (currentStartFrame === 1);
    nextButton.disabled = (currentStartFrame >= maxStartFrame);

    // Update all frame widths
    const frames = comicViewer.querySelectorAll('.comic-frame');
    frames.forEach(frame => {
      frame.style.width = `${frameWidth}px`;
    });

    // Calculate new translate position
    const translateX = -(currentStartFrame - 1) * frameWidth;

    // Apply smooth transition
    comicViewer.style.transform = `translateX(${translateX}px)`;
    previousTranslate = translateX;
    currentTranslate = translateX;

    // Update progress bar
    const progress = ((currentStartFrame - 1) / (maxStartFrame - 1)) * 100;
    progressBar.style.width = `${progress}%`;
  }

  // Move forward by one frame
  function nextFrame() {
    if (currentStartFrame < maxStartFrame) {
      currentStartFrame++;
      updateDisplay();
      return true;
    }
    return false;
  }

  // Move backward by one frame
  function prevFrame() {
    if (currentStartFrame > 1) {
      currentStartFrame--;
      updateDisplay();
      return true;
    }
    return false;
  }

  // Event listeners for navigation buttons
  prevButton.addEventListener('click', function() {
    prevFrame();
  });

  nextButton.addEventListener('click', function() {
    nextFrame();
  });

  // Touch and gesture controls
  function touchStart(event) {
    isDragging = true;
    startX = event.type.includes('mouse')
      ? event.pageX
      : event.touches[0].clientX;

    // Stop any ongoing animation
    cancelAnimationFrame(animationID);

    comicViewerWrapper.classList.add('dragging');

    // Prevent default behavior to avoid page scrolling on mobile
    if (event.type.includes('touch')) {
      event.preventDefault();
    }
  }

  function touchMove(event) {
    if (!isDragging) return;

    const currentX = event.type.includes('mouse')
      ? event.pageX
      : event.touches[0].clientX;

    const diff = currentX - startX;
    const moveAmount = previousTranslate + diff;

    // Apply some resistance at the edges
    const maxTranslate = 0;
    const minTranslate = -(maxStartFrame - 1) * frameWidth;

    let resistanceAmount = 0;
    if (moveAmount > maxTranslate) {
      resistanceAmount = (moveAmount - maxTranslate) * 0.3;
      currentTranslate = maxTranslate + resistanceAmount;
    } else if (moveAmount < minTranslate) {
      resistanceAmount = (minTranslate - moveAmount) * 0.3;
      currentTranslate = minTranslate - resistanceAmount;
    } else {
      currentTranslate = moveAmount;
    }

    comicViewer.style.transform = `translateX(${currentTranslate}px)`;

    // Prevent default to stop page scrolling while dragging
    if (event.type.includes('touch') && Math.abs(diff) > 10) {
      event.preventDefault();
    }
  }

  function touchEnd() {
    if (!isDragging) return;
    isDragging = false;
    comicViewerWrapper.classList.remove('dragging');

    // Calculate which frame to snap to based on swipe direction and velocity
    const movedBy = currentTranslate - previousTranslate;

    if (Math.abs(movedBy) > frameWidth * 0.2) {
      // If moved more than 20% of frame width, move to next/prev frame
      if (movedBy > 0) {
        prevFrame();
      } else {
        nextFrame();
      }
    } else {
      // Otherwise snap back to current frame
      updateDisplay();
    }
  }

  // Add event listeners for mouse and touch events
  comicViewerWrapper.addEventListener('mousedown', touchStart);
  comicViewerWrapper.addEventListener('touchstart', touchStart, { passive: false });

  window.addEventListener('mousemove', touchMove);
  window.addEventListener('touchmove', touchMove, { passive: false });

  window.addEventListener('mouseup', touchEnd);
  window.addEventListener('touchend', touchEnd);

  // Add keyboard navigation
  document.addEventListener('keydown', function(e) {
    if (e.key === 'ArrowLeft') {
      prevFrame();
    } else if (e.key === 'ArrowRight') {
      nextFrame();
    } else if (e.key >= '1' && e.key <= '9') {
      // Jump to frame by number key (if in range)
      const frameNum = parseInt(e.key);
      if (frameNum <= totalFrames) {
        // Go to that frame as the starting frame (or as close as allowed)
        currentStartFrame = Math.min(frameNum, maxStartFrame);
        updateDisplay();
      }
    }
  });

  // Handle window resize
  window.addEventListener('resize', function() {
    calculateFramesPerView();
    updateDisplay();
  });

  // Handle wheel events for scrolling
  comicViewerWrapper.addEventListener('wheel', function(e) {
    e.preventDefault();

    // Determine scroll direction
    if (e.deltaY > 0) {
      nextFrame();
    } else {
      prevFrame();
    }
  }, { passive: false });

  // Load frames and initialize the viewer
  initializeFrames();
});

</script>