// javascript

//grab gallery
const gallery = document.querySelector(".gallery");
let galleryXPosition = 0;

//grab buttons
const previousButton = document.querySelector(".previous");
const nextButton = document.querySelector(".next");

//add click events to each button
previousButton.addEventListener("click", movePrevious);
nextButton.addEventListener("click", moveNext);
//check keypress events
document.addEventListener("keydown", checkButton);

function checkButton(e){
    switch (e.keyCode) {
        case 37:
            // console.log('left key pressed');
            movePrevious();
            break;
        case 38:
           console.log('Why did you press up?');
            break;
        case 39:
            // console.log('right key pressed');
            moveNext();            
            break;
        case 40:
            console.log('Why did you press down?');
            break;
    }
}

function movePrevious(){
    if(galleryXPosition <= -880){
        //check if currently on end of images: do nothing
        console.log("end of the line");
    }else if(galleryXPosition <= -660){
        //check next item is end of images: dim previous button
        previousButton.classList.add("end");
        //move to final image
        galleryXPosition -= 220;
        gallery.style.transform = `translateX(${galleryXPosition}px)`;
    }else{
        //not near end of images: show full previous button
        nextButton.classList.remove("end");
        //move to next image
        galleryXPosition -= 220;
        gallery.style.transform = `translateX(${galleryXPosition}px)`;
    }
}

function moveNext(){ 
    //check if currently on end of images: do nothing
    if(galleryXPosition === 0){
        console.log("end of the line");
    }else if(galleryXPosition >= -220){
        //check next item is end of images: dim next button
        nextButton.classList.add("end");
        //move to final image
        galleryXPosition += 220;
        gallery.style.transform = `translateX(${galleryXPosition}px)`;
    }else{
        //not near end of images: show full next button
        previousButton.classList.remove("end");
        //move to next image
        galleryXPosition += 220;
        gallery.style.transform = `translateX(${galleryXPosition}px)`;
    }
}