// javascript

//variables
const nextButton = document.querySelector(".next");
const previousButton = document.querySelector(".previous");
const galleryViewer = document.querySelector(".gallery");
const cardCollection = document.querySelectorAll(".card");
let position = 0;
let slide = 0;

//Add Listeners to buttons
    nextButton.addEventListener('click', () => {move("forward");});
    previousButton.addEventListener('click',() => {move("backward");});

//Define forward and backward behavior
function move(direction){
    
    //remove any end classes
    if(previousButton.classList.contains("end")){previousButton.classList.remove("end");};
    if(nextButton.classList.contains("end")){nextButton.classList.remove("end");};
    //remove the current status of current slide before we change the slide
    cardCollection[slide].classList.remove("current");
    
    //set slide counter based on direction
    if(direction === "forward" && slide < 4){
       slide = slide+1;//move slide count up  
    }
    if (direction === "backward" && slide > 0){
        slide = slide-1;//move slide count down
    }
    
    //calculate the position of the photo & translate to show that image
    position = slide * (-220);
    galleryViewer.style.transform = "translateX("+position+"px)";
    cardCollection[slide].classList.add("current"); //make current image the current image
   
    //show disabled arrows on ends 
    if(slide === 4){
        nextButton.classList.add("end");
    }
    if(slide === 0){
        previousButton.classList.add("end");
    }

}