const deep_value = (o, p) => p.split('.').reduce((a, v) => a[v], o);

let slideIndeces = {};

// Next/previous controls
function plusSlides(id, n) {
  showSlides(id, slideIndeces[id] += n);
}

// Thumbnail image controls
function currentSlide(id, n) {
  showSlides(id, slideIndeces[id] = n);
}

function showSlides(id, n) {
  let i;
  console.log(`${id}-slide`);
  let slides = document.getElementsByClassName(`${id}-slide`);
  let dots = document.getElementsByClassName(`${id}-demo`);
  let captionText = document.getElementById(`${id}-caption`);

  // Overflow
  if (n > slides.length) { slideIndeces[id] = 1; }
  // Underflow
  if (n < 1) { slideIndeces[id] = slides.length; }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  let slide = slides[slideIndeces[id]-1];
  slide.style.display = "block";
  const project = deep_value(projects, slide.id);
  dots[slideIndeces[id]-1].className += " active";
  if ('Download' in project) {
    captionText.innerHTML = `<a href="${project.Pfad}/${project.Download}" download>${project.Name}</a> von ${project.Team} ${project.Lizenz}`
  } else {
    captionText.innerHTML = `${project.Name} von ${project.Team} ${project.Lizenz}`
  }
} 

window.onload = function () {
  let slides = document.getElementsByClassName("container");
  for (let slide of slides) {
    let id = slide.id.replace("-slides", "");
    slideIndeces[id] = 1;
    showSlides(id, 1);
  }
}