const dialogElement = document.getElementById('dialog');
const detailsElement = document.getElementById('details');
const dialogContentElement = document.getElementById('dialog-content');
const errorSoundElement = document.getElementById('error');
const clickSoundElement = document.getElementById('click');

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

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

function details_button() {
    clickSoundElement.play();
    dialogContentElement.style.opacity = '0';

    dialogElement.animate([
        {
            opacity: 0,
            width: 'var(--keyframe-hide-dialog-width)',
            paddingBottom: 'var(--keyframe-hide-dialog-padding-bottom)',
        }
    ], {
        fill: 'forwards',
        easing: 'ease-out',
        duration: 250
    });

    setTimeout(function(){
        dialogElement.style.display = 'none';
        detailsElement.style.display = 'inline-block';
    }, 250);

    detailsElement.animate([
        {
            opacity: 0, offset: 0.95
        },
        {
            opacity: 1
        }
    ], {
        fill: 'forwards',
        easing: 'ease-out',
        duration: 1000
    })
}