var slides = document.querySelectorAll(".image-list .slide-image");
var previousImageButton = document.getElementById("prev-image");
var nextImageButton = document.getElementById("next-image");
var currentSlide = 0;
var counter = document.getElementById("slide-count");
var secondaryProgressBar = document.getElementsByClassName("secondary-progress-bar")[0];
var progressBarWidth = 100;
var secondaryProgressBarWidth = (progressBarWidth / slides.length);

function imageCounter() {
    counter.textContent = (currentSlide + 1) + " / " + (slides.length);
}

function nextSlide() {
    goToSlide(currentSlide + 1);
    slideBarRight();
}

function previousSlide() {
    goToSlide(currentSlide - 1);
}

function goToSlide(n) {
    slides[currentSlide].className = "slide-image";
    currentSlide = (n + slides.length) % slides.length;
    slides[currentSlide].className = "slide-image showing";
    imageCounter();
}

function slideBarRight() {
    var stepRight = secondaryProgressBarWidth * (currentSlide + 1) + "%";
    secondaryProgressBar.style.left = stepRight;
}

document.addEventListener("onload", imageCounter());
nextImageButton.addEventListener("click", nextSlide);
previousImageButton.addEventListener("click", previousSlide);