var loadingDiv = document.getElementById('loading');
var errorDiv = document.getElementById('error');
var resultDiv = document.getElementById('result');
const timeout = 10000;
var emptyCoursesShown = false;
var calendar;

function getTable() {
    // Send XHR to totalTable
    resultDiv.innerHTML = '';
    loadingDiv.style.display = "";
    errorDiv.style.display = "none";

    let xhr = new XMLHttpRequest();
    xhr.timeout = timeout;
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                let events = JSON.parse(xhr.responseText);
                setData(events);
            } else {
                setError();
            }
        }
    };
    xhr.open('GET', CALENDAR_URL, true);
    xhr.send();
}

function setData(events) {
    loadingDiv.style.display = "none";
    errorDiv.style.display = "none";
    calendar = new FullCalendar.Calendar(resultDiv, {
        events: events,
        defaultView: 'agendaWeek',
        minTime: "07:00:00",
        maxTime: "19:00:00",
        timeZone: 'local',
        nowIndicator: true,
        allDaySlot: false,
        eventClick: function(info) {
            info.jsEvent.preventDefault();
        },
        customButtons: {
            refreshCalendar: {
                text: "Refresh",
                click: function() {
                    getTable();
                },
            },
        },
        header: {
            left: 'title',
            center: '',
            right: 'refreshCalendar month,agendaWeek,agendaDay prev,next today'
        }
    });
    calendar.render();
}

function setError() {
    loadingDiv.style.display = "none";
    errorDiv.style.display = "";
}

document.getElementById('tryAgain').addEventListener('click', getTable);
getTable();