// javascript
var image =0;
var translate = 0;
const opaque = 0.3;
const nextBtn = document.getElementById("next");
const prevBtn = document.getElementById("previous");
const gallery = document.getElementById("gallery");
const cardLen = document.getElementsByClassName("card").length - 1;
const pictureWidth = 220;


//next button
nextBtn.addEventListener("click", function() {
    if(image >= 0 && image < cardLen){
        prevBtn.style.opacity = 1.0;
        image++;
        translate = translate - pictureWidth;
        gallery.style.transform = "translateX("+translate+"px)";
    } else if (image == cardLen){
        nextBtn.style.opacity = opaque;
        image = cardLen;
    } 

});

//prev button
prevBtn.addEventListener("click", function() {
    if(image > 0){
        nextBtn.style.opacity = 1.0;
        image--;
        translate = translate + pictureWidth;
        gallery.style.transform = "translateX("+translate+"px)";
    } else if (image == 0){
        prevBtn.style.opacity = opaque;
        image = 0;
    } 
});