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

function getTable() {
    // Send XHR to totalTable
    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) {
                setData(xhr.responseText);
            } else {
                setError();
            }
        }
    };
    xhr.open('GET', TABLE_URL, true);
    xhr.send();
}

function setData(text) {
    loadingDiv.style.display = "none";
    errorDiv.style.display = "none";
    resultDiv.innerHTML = text;
    emptyCoursesShown = false;

    var emptyCourses = document.getElementsByClassName('no-courses');
    if (emptyCourses.length === 0) {
        showEmptyCourses();
        document.getElementById('extend').style.display = "none";
    } else {
        hideEmptyCourses();
        document.getElementById('extend').addEventListener('click', function() {
            switchEmptyCourses();
        });
    }
    updateExtendText();
}

function showEmptyCourses() {
    emptyCoursesShown = true;
    var emptyCourses = document.getElementsByClassName('no-courses');
    for (var i = 0; i < emptyCourses.length; i++) {
        emptyCourses[i].style.display = "";
    }
}

function hideEmptyCourses() {
    emptyCoursesShown = false;
    var emptyCourses = document.getElementsByClassName('no-courses');
    for (var i = 0; i < emptyCourses.length; i++) {
        emptyCourses[i].style.display = "none";
    }
}

function switchEmptyCourses() {
    if (emptyCoursesShown) {
        hideEmptyCourses();
    } else {
        showEmptyCourses();
    }
    updateExtendText();
}

function updateExtendText() {
    document.getElementById('extendText').innerHTML =
        "Courses with null TD equivalent " + (emptyCoursesShown ? "(hide)" : "(show)");

}

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

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