<script type=“text/javascript”>

// Base doc elements
let main = document.getElementById(`main`);
let home = document.getElementById(`home`);
let content = document.getElementById(`content`);
let nav = document.getElementById(`nav`);
// Section tags
let buttons = [];
let active = null;
// CSS vh simulator
let vh = function (v) {
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    return (v * h) / 100;
}
let clearNav = function () {
    for (let i = 0; i < buttons.length; i++) {
        if (nav.children[i].children[0].classList.contains(`active`)) {
            nav.children[i].children[0].classList.remove(`active`);
            content.children[i].style.opacity = `0`;
            setTimeout(() => {
                content.children[i].classList.add(`hidden`);
            }, 300);
        }
    }
    active = null;
}
let recenter = function () {
    if (!!active) {
        content.style.height = `600px`;
        content.style.padding = `20px 10px`;
    } else {
        content.style.height = `0`;
        content.style.padding = `0px 10px`;
    }
    let mainHeight = !!active ? 900 : 217; //TODO: make default value adjustable
    let top = Math.max(0, vh(50) - mainHeight / 2);
    main.style.top = `${top}px`;
}
let reset = function (delay) {
    clearNav();
    setTimeout(recenter, delay);
}
let makeActive = function (section) {
    let wasActive = !!active;
    active = section;
    document.getElementById(section).classList.remove(`hidden`);
    document.getElementById(section + `-link`).classList.add(`active`);
    if (!wasActive) {
        // recenter content if content was not already active
        setTimeout(recenter, 10);
    }
    setTimeout(() => {
        document.getElementById(section).style.opacity = `1.0`;
    }, 200);
}
window.addEventListener(`resize`, recenter);
document.addEventListener(`DOMContentLoaded`, function (event) {
    main = document.getElementById(`main`);
    home = document.getElementById(`home`);
    content = document.getElementById(`content`);
    nav = document.getElementById(`nav`);
    {% for section in site.sections %}
    buttons.push(`{{ section.name }}`);
    {% endfor %}
    home.addEventListener(`click`, function (event) {
        reset(300);
    });
    buttons.forEach(section => {
        document.getElementById(`${section}-link`).addEventListener(`click`, function (event) {
            let fadeTimeout = 0;
            if (active) {
                if (active === section) {
                    return
                }
                clearNav();
                fadeTimeout = 300;
            }
            setTimeout(() => {
                makeActive(section);
            }, fadeTimeout);
        });
    });
    reset(0);
});

</script>