const langNavMap = {
    "langBtnEng": "info_eng.html",
    "langBtnJp": "info_jp.html"
};

function load_info(path) {
    fetch(path /*, options */)
        .then((response) => {
            return response.text();
        }
        )
        .then((html) => {
            document.getElementById("infoBox").innerHTML = html;
        })
        .catch((error) => {
            console.warn(error);
        });
}

var langNavigator = document.getElementById('langNavigator');
for (let ele of langNavigator.children) {
    if (ele.tagName == "BUTTON") {
        ele.addEventListener(
            'mouseup',
            (e) => {
                for (let btn of document.getElementsByClassName('activeLangBtn')) {
                    btn.className = 'nonactiveLangBtn';
                }
                let path = langNavMap[ele.id];
                console.log("Loading " + path);
                load_info(path);
                ele.className = 'activeLangBtn';
            }
        );
    }
}

for (let ele of langNavigator.children) {
    if (ele.tagName == "BUTTON" && ele.className == "activeLangBtn") {
        let path = langNavMap[ele.id];
        console.log("Loading " + path);
        load_info(path);
        break;
    }
}