const prevButton = document.querySelector('img.previous');
const nextButton = document.querySelector('img.next');
const gallery = document.querySelector('.gallery');
const cards = document.querySelectorAll('.gallery .card');

prevButton.addEventListener("click", showPrevious);
nextButton.addEventListener("click", showNext);
setActiveButtons();

function showPrevious() {
    if (!prevButton.classList.contains('inactive')) {
        var oldNum = findCurrentCard();
        var newNum = findCurrentCard() - 1;
        goBabyGo(oldNum, newNum);
    }
}

function showNext() {
    if (!nextButton.classList.contains('inactive')) {
        var oldNum = findCurrentCard();
        var newNum = findCurrentCard() + 1;
        goBabyGo(oldNum, newNum);
    }
}

function findCurrentCard() {
    var activeCard = -1;
    for (var i=0; i < cards.length; i++) {
        if (cards[i].classList.contains('current')) {
            activeCard = i;
        }
    }
    return activeCard;
}

function setActiveButtons() {
    if (findCurrentCard() == 0) {
        prevButton.classList.add('inactive');
    } else {
        prevButton.classList.remove('inactive');
    }
    
    if (findCurrentCard() == cards.length - 1) {
        nextButton.classList.add('inactive');
    } else {
        nextButton.classList.remove('inactive');
    }
}

function sliderPosition(newNum) {
    var newPosition = -220 * newNum;
    gallery.style.transform = "translateX(" + newPosition + "px)";
}
  
function goBabyGo(oldNum, newNum) {
    cards[oldNum].classList.remove('current');
    cards[newNum].classList.add('current');
    sliderPosition(newNum);
    setActiveButtons();
}