let frameReady = false;

document.addEventListener("DOMContentLoaded", () => {
    const links = document.getElementsByTagName("a");
    for (let i = 0; i < links.length; i++) {
        links[i].addEventListener("click", (event) => {
            if (links[i].classList.contains("title-site-link"))
                return;

            event.preventDefault();

            if (links[i].href.endsWith("index.html")) {
                location.reload();
                return;
            }

            const frame = document.getElementById("frame");
            if (frameReady) {
                const filename1 = frame.src.match(".+/(.+?)([\?#;].*)?$")[1];
                const filename2 = links[i].href.match(".+/(.+?)([\?#;].*)?$")[1];

                if (filename1 === filename2) {
                    const url = new URL(links[i].href);

                    frame.contentWindow.postMessage({
                        type: "scroll",
                        data: {
                            id: "" === url.hash ? "top" : url.hash.slice(1)
                        }
                    }, "*");

                    return;
                }
            }

            if (frame) {
                frame.src = links[i].href;
                frameReady = false;
            }
        }, false);
    }

    const mainElement = document.getElementById("main");
    if (mainElement) {
        mainElement.addEventListener("click", () => {
            exitZoomImage();
        }, false);

        mainElement.addEventListener("keydown", () => {
            exitZoomImage();
        }, false);
    }

    const params = new URL(window.location.href).searchParams;
    const filename = params.get("filename");
    if (filename) {
        const frame = document.getElementById("frame");
        if (frame) {
            frame.src = filename;
            frameReady = false;
        }
    }

    if (window.matchMedia) {
        // テーマをWindowsに合わせる
        if (window.matchMedia("(prefers-color-scheme: dark)").matches)
            setTheme("dark");
        else
            setTheme("light");

        // テーマの変更を監視
        window.matchMedia("(prefers-color-scheme: dark)").addListener((mql) => {
            setTheme(mql.matches ? "dark" : "light");
        });
    } else
        setTheme("light");
}, false);

// フレームが読み込まれたときの処理
function onLoadFrame(frame) {
    frameReady = true;
}

// 言語の変更
function onChangeLanguage(lang) {
    const split = window.location.href.split("/");
    const language = split[split.length - 2];

    if (language === lang)
        return;

    let filename = "";
    const frame = document.getElementById("frame");
    if (frame) {
        filename += "?filename=";
        filename += frame.src.match(".+/(.+?)([\?#;].*)?$")[1];
    }

    window.location.href = "../" + lang + "/index.html" + filename;
}

// テーマの変更
function setTheme(theme) {
    document.getElementById("css-theme").href = "../css/theme-" + theme + ".css";
}

// 画像を拡大
function zoomImage(filepath) {
    const imageContainerElement = document.getElementById("image-container");
    if (imageContainerElement)
        imageContainerElement.style.display = "flex";
                                                    
    const imageElement = document.getElementById("image");
    if (imageElement)
        imageElement.src = filepath;
}

// 拡大を終了
function exitZoomImage() {
    const imageContainerElement = document.getElementById("image-container");
    if (imageContainerElement)
        imageContainerElement.style.display = "";
}

// iframeからのメッセージを受信
window.addEventListener("message", (response) => {
    if ("title" === response.data.type) {
        document.title = response.data.data.title;
    } else if ("navigate" === response.data.type) {
        const frame = document.getElementById("frame");

        if (frame) {
            frameReady = false;
            frame.src = response.data.data.url;
        }
    } else if ("zoom" === response.data.type) {
        zoomImage(response.data.data.url);
    }
}, false);
