window.onload = function() {
    setTimeout(function () {
        play("error");
    }, 1000)
}

const getStyleProperty = (s, p) => getComputedStyle(s).getPropertyValue(p);

function play(audioId) {
    let audioElement = document.getElementById(audioId);
    audioElement.play();
}

function close_button(href) {
    play("click");
    window.location.href = href;
}

function details_button() {
    play("click");

    document.getElementById('dialog-content').style.display = 'none';
    let root = document.documentElement;
    let dialogElement = document.getElementById('dialog');
    dialogElement.animate([
        {
            opacity: 0,
            width: getStyleProperty(root, '--keyframe-hide-dialog-width'),
            height: getStyleProperty(root, '--keyframe-hide-dialog-height'),
        }
    ], {
        fill: 'forwards',
        easing: 'ease-out',
        duration: 250
    });
    dialogElement.style.display = 'none';

    let detailsElement = document.getElementById('details');
    detailsElement.style.display = 'inline-block';
    detailsElement.animate([
        {
            opacity: 0, offset: 0.95
        },
        {
            opacity: 1
        }
    ], {
        fill: 'forwards',
        easing: 'ease-out',
        duration: 1000
    })
}