const INTERVAL = 2000;
const STATE_PAUSE = "⏸︎";
const STATE_PLAY = "⏵︎";

// Start at -1 - the recursive function playSlideshow() increases this to 0
// on page load
let currentSlide = -1;

// Elements

let slideshow = document.getElementsByClassName("slideshow")[0];
let container = document.getElementsByClassName("slides")[0];
let slides = document.getElementsByClassName("slide");
let dots = document.getElementsByClassName("dot");
let stateBtn = document.getElementById("state");
let expandBtn = document.getElementById("expand");

// Global state
let maxIndex = slides.length - 1;
var timeout;
var paused = false;

// Set up event listeners
window.addEventListener("resize", setHeights, true);
slideshow.addEventListener("mouseenter", mouseEnter, true);
slideshow.addEventListener("mouseleave", mouseLeave, true);
document.getElementById("prev").addEventListener("click", prevSlide);
document.getElementById("next").addEventListener("click", nextSlide);
document.getElementById("state").addEventListener("click", changeState);
if (dots.length - 1 != maxIndex) {
  console.log("Number of control dots does not match number of slides");
}
expandBtn.addEventListener("click", expand);
for (i = 0; i <= dots.length - 1; i++) {
  dots[i].addEventListener("click", goToSlide);
  dots[i].slide = i;
}


// Start the slideshow
playSlideshow();

// Recursive function that advances the slide and then calls itself with a 
// delay
function playSlideshow() {
  setHeights();
  nextSlide();
  timeout = setTimeout(playSlideshow, INTERVAL);
}

// Change the slide to a given index
function setSlide(slide) {
  if (slide < 0 || slide > maxIndex) {
    console.log("Attempted to change to slide outside range (" + slide.toString() + ")");
    return;
  }

  // Remove active class from figure and dot
  for (i = 0; i <= maxIndex; i++) {
    slides[i].className = slides[i].className.replace(" active", "");
    dots[i].className = dots[i].className.replace(" active", "");
  }

  // Add active class to figure and dot
  slides[slide].className += " active";
  dots[slide].className += " active";

  currentSlide = slide;
}

function setHeights() {
  var firstSlideHeight = slides[0].offsetHeight;
  // Set heights (based on height of first slide with 100% width)
  for (i = 1; i <= maxIndex; i++) {
    var captionHeight = slides[i].getElementsByTagName("figcaption")[0].offsetHeight;
    // Set figure height
    slides[i].style.maxHeight = slides[0].offsetHeight.toString() + "px";
    // Set image height
    slides[i].getElementsByTagName("img")[0].style.maxHeight = (firstSlideHeight - captionHeight).toString() + "px";
  }
}

function nextSlide() {
  // Go to the next slide
  if (currentSlide == maxIndex) {
    setSlide(0);
  }
  else {
    setSlide(currentSlide + 1);
  }
}

function prevSlide() {
  // Go to the previous slide
  if (currentSlide == 0) {
    setSlide(maxIndex);
  }
  else {
    setSlide(currentSlide - 1);
  }
}

function goToSlide(evt) {
  // Go to a slide specified by the event (called when the dots are clicked)
  setSlide(evt.currentTarget.slide);
}

function mouseEnter() {
  // Pause the slideshow
  clearTimeout(timeout);
  timeout = null;
}

function mouseLeave() {
  // Start the slideshow if not manually paused
  if (!paused && timeout == null) {
    timeout = setTimeout(playSlideshow, INTERVAL);
  }
}

function changeState() {
  if (paused) {
    // Play immediately despite mouseover
    stateBtn.innerHTML = STATE_PAUSE;
    timeout = setTimeout(playSlideshow, INTERVAL);
    stateBtn.title = "Pause";
  }
  else {
    // Pause until user presses play again
    clearTimeout(timeout); // make sure timer is stopped
    timeout = null;
    stateBtn.innerHTML = STATE_PLAY;
    stateBtn.title = "Play";
  }
  paused = !paused;
}

function expand() {
  // Open the image in a new tab
  window.open(slides[currentSlide].getElementsByTagName('img')[0].src, 'blank');
}