


function displayButtons() {
    delta = 60
    agenda = document.getElementById("calendar");
    grid   = agenda.querySelector(".grid");
    buttonLeft = agenda.querySelector(".slider-button.slider-button-inside.button-left");
    buttonRight = agenda.querySelector(".slider-button.slider-button-inside.button-right");
    buttonLeftPage = agenda.querySelector(".slider-button.slider-button-page.button-left");
    buttonRightPage = agenda.querySelector(".slider-button.slider-button-page.button-right");

    if (agenda.offsetWidth < grid.offsetWidth) {
        if (agenda.scrollLeft < delta) {
            buttonLeft.classList.add("hidden");
            buttonLeftPage.classList.remove("hidden");
        }
        else {
            buttonLeft.classList.remove("hidden");
            buttonLeftPage.classList.add("hidden");
        }
        if (agenda.scrollLeft + agenda.offsetWidth - grid.offsetWidth >= -2) {
            buttonRight.classList.add("hidden");
            buttonRightPage.classList.remove("hidden");
        }
        else {
            buttonRight.classList.remove("hidden");
            buttonRightPage.classList.add("hidden");
        }
            
        
    }
    else {
        buttonLeft.classList.add("hidden");
        buttonRight.classList.add("hidden");
        buttonLeftPage.classList.add("hidden");
        buttonRightPage.classList.add("hidden");
    }
}


addEventListener("resize", (event) => { displayButtons();});


document.addEventListener("DOMContentLoaded", function(e) {
    // setup button visibility
    displayButtons();

    // clic on the left button will move the grid one step to the left
    document.querySelector('.slider-button.button-left').addEventListener('click', function (event) {
        agenda = document.getElementById("calendar");
        grid   = agenda.querySelector(".grid");
        agenda.scrollLeft -= grid.offsetWidth / 7;
    }, false);
    
    
    // clic on the right button will move the grid one step to the right
    document.querySelector('.slider-button.button-right').addEventListener('click', function (event) {
        agenda = document.getElementById("calendar");
        grid   = agenda.querySelector(".grid");
        agenda.scrollLeft += grid.offsetWidth / 7;
    }, false);

    // when the scroll stops, we adjust button visibility
    agenda = document.getElementById("calendar");
    agenda.addEventListener('scrollend', () => {
        displayButtons();
    });
      
    
});