function waitForAnimationEnd(elem, animationName)
{
    return new Promise(resolve => {
        function handleAnimationEnd(evt)
        {
            if (evt.animationName === animationName)
            {
                elem.onanimationend = null;
                resolve();
            }
        }

        elem.onanimationend = handleAnimationEnd;
    });
}

let sound = new Audio("../assets/game-boy-advance-startup-sound.mp3");

async function sessionStartupAnimation()
{
    // Page setup
    let all_default_elements = document.body.querySelectorAll("*");
    all_default_elements.forEach((elem) => elem.style.opacity = 0);

    console.log(document.body.style.height);

    let xmlhttp = new XMLHttpRequest();

    // Not the most optimised way, but it's working
    xmlhttp.open("GET", "assets/startup_quotes.json", false);
    xmlhttp.send();
    if(xmlhttp.status != 200)
    {
        throw WebTransportError("The file 'assets/startup_quots.json' is not available");
    }

    let quotes = JSON.parse(xmlhttp.responseText)["quotes"];
    let quote = quotes[Math.floor(Math.random() * quotes.length)];

    // First the author
    let author_elem = document.createElement("h2");
    author_elem.className = "startup-animation-author";
    author_elem.innerHTML = quote.author + "<sup>®</sup>";

    document.body.appendChild(author_elem);

    await waitForAnimationEnd(author_elem, "opacity-fade-in")

    // Then the text and sound
    let text_elem = document.createElement("h1");
    text_elem.className = "startup-animation-text";
    text_elem.innerHTML = quote.text;

    document.body.appendChild(text_elem);

    sound.play();

    await waitForAnimationEnd(text_elem, "text-animation");

    // Fade out for both
    text_elem.style.animation = "opacity-fade-out 1s ease-in";
    text_elem.style.opacity = 0;
    author_elem.style.animation = "opacity-fade-out 1s ease-in";
    author_elem.style.opacity = 0;

    await waitForAnimationEnd(text_elem, "opacity-fade-out");

    // Remove them and fade in for page content
    document.body.removeChild(author_elem);
    document.body.removeChild(text_elem);

    all_default_elements.forEach((elem) => elem.style.animation = "opacity-fade-in 0.5s");
    all_default_elements.forEach((elem) => elem.style.opacity = 1);
}

function interruptStartingAnimation()
{
    let author_elem = document.body.querySelector(".startup-animation-author");
    author_elem.getAnimations().forEach((animation) => animation.finish());

    let text_elem = document.body.querySelector(".startup-animation-text");
    text_elem.getAnimations().forEach((animation) => animation.finish());

    if(sound.currentTime < 2.75)
    {
        sound.currentTime = 2.75;
    }
}

window.onkeydown = () => {
    interruptStartingAnimation();
    window.onkeydown = null;
}

// Only start animation per session
window.onload = () => {
    document.body.style.opacity = 1;

    if(!sessionStorage.getItem("hasExecutedSessionStartupAnimation"))
    {
        sessionStorage.setItem("hasExecutedSessionStartupAnimation", "true");
        sessionStartupAnimation();
    }
}