/* NOTIFICATION ___________________________________________________________________________________ */

var notification_number = 0;

function noti(title, text, color, bgcolor) {
    var not = document.createElement("div");
    not.style = "transition-duration:0.5s;width:300px;border-radius:8px;padding:10px;position:fixed;z-index:999;" +
        "bottom:20px;right:20px;";
    if (color) { not.style += "color:" + color + ";" }
    if (bgcolor) { not.style += "background-color:" + bgcolor + ";" }
    not.innerHTML =
        "<span id='notification_" + notification_number + "' class='closeButton' style='position:absolute;top:2px;right:10px;font-size:30px;cursor:pointer;'>&times;</span>" +
        "<h2 style='margin:0px;'>" +
        title + "</h3><hr style='border-color:" +
        color + ";'><p style='margin-top:15px;margin-bottom:10px;font-size:1.2em;'>" +
        text + "</p>";
    not.classList.add("notification");
    not.id = "notification_" + notification_number + "_div";
    notification_number++;
    document.body.appendChild(not);
    var closeButtons = document.querySelectorAll(".closeButton");
    closeButtons.forEach(element => {
        element.addEventListener("click", function () {
            var delNot = document.getElementById(element.id + "_div");
            delNot.style.opacity = "0";
            setTimeout(() => {
                delNot.remove();
            }, 1000);
        });
    });
    setTimeout(() => {
        if (not) {
            not.style.opacity = "0";
        }
    }, 5000);
    setTimeout(() => {
        if (not) {
            not.remove();
        }
    }, 6000);
}