


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

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


    }
    else {
        buttonLeft.classList.add("hidden");
        buttonRight.classList.add("hidden");
        buttonPageLeft.classList.remove("hidden");
        buttonPageRight.classList.remove("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-inside.button-left').addEventListener('click', function (event) {
        agenda = document.getElementById("calendar");
        grid   = agenda.querySelector(".grid");
        agenda.scrollLeft -= 4 * agenda.offsetWidth / 5;
    }, false);


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

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


});
