// javascript

let everything = document.querySelector(".container");
let carousel = document.querySelector(".gallery");
let images = document.querySelectorAll(".card");
let imageCount = images.length;
let next = document.querySelector(".next");
let prev = document.querySelector(".previous");
    prev.classList.add("disabled");
    
let initPos = 0;
let step = 220;
let maxPos = imageCount * step;

everything.addEventListener("click", moveCarousel);


function moveCarousel(e) {
        
    if (e.target == next) {
        let newPos = initPos - step;
        if (newPos <= 0 && newPos != -maxPos) {
            carousel.style.transform = `translateX(${newPos}px)`;
            initPos = newPos;
        }
    } else if (e.target == prev) {
        let newPos = initPos + step;
        if (newPos <= 0 && newPos != -maxPos) {
            carousel.style.transform = `translateX(${newPos}px)`;
            initPos = newPos;
        }
    }
    
    if (initPos == 0) {
        prev.classList.add("disabled");
    } else if (initPos == -maxPos + step) {
        next.classList.add("disabled");
    } else {
        prev.classList.remove("disabled");
        next.classList.remove("disabled");
    }
}