/* 
Create carousel for 5 images:
    - change arrow opacity for begining and end
    - bonus: add transitions
*/
const prevButton = document.querySelector('.previous');
const nextButton = document.querySelector('.next');
const gallery = document.querySelector('.gallery');
let currTranslateX = 0;
const imgWidth = 220;
const numImages = 5;

function nextClick() {
    // only execute if there are more images to see
    if (currTranslateX > -((numImages-1) * imgWidth)) {
        prevButton.style.opacity = 1;
        // transform: translateX(currX - 220);
        currTranslateX -= imgWidth;
        gallery.style.transform = `translateX(${currTranslateX}px)`;
        // reduce opacity of next arrow if on last image
        if (currTranslateX == -((numImages-1) * imgWidth)) {
            nextButton.style.opacity = 0.3;
        }
    }    
}

function prevClick() {
    // only execute if there are more images to see
    if (currTranslateX < 0) {
        nextButton.style.opacity = 1;
        // translate X + 220
        currTranslateX += imgWidth;
        gallery.style.transform = `translateX(${currTranslateX}px)`;
        // reduce opacity of prev arrow if on first image
        if (currTranslateX === 0) {
            prevButton.style.opacity = 0.3;   
        }
    }    
}

prevButton.addEventListener('click', prevClick)
nextButton.addEventListener('click', nextClick)