@* Javascript gets inlined because it ain't much (but it's honest work) *@

@* Mark searched term *@
@if (ViewData.ContainsKey("Mark"))
{
    <script src="~/js/mark.min.js" asp-append-version="true"></script>
    <script>
        var elements = document.querySelectorAll(".ha-register-body, .ha-searchresultpreview, .ha-comment");
        if (elements.length < 1000) {
            var instancesearch = new Mark(elements);
            instancesearch.mark('@ViewData["Mark"]', { "element": "span", "className": "ha-found", "acrossElements": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"] });
        }
        var instanceletter = new Mark(document.querySelectorAll(".ha-letterbody"));
        instanceletter.mark('@ViewData["Mark"]', { "element": "span", "className": "ha-found", "acrossElements": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"] });
    </script>
}

@* Mark anchor *@
<script>
    function markanchor() {
        var currentUrl = document.URL,
            urlParts = currentUrl.split('#');
        var anchor = (urlParts.length > 1) ? urlParts[1] : null;
        if (anchor != null) {
            var element = document.getElementById(anchor);
            var pointerelement = document.createElement("span");
            pointerelement.classList.add("ha-location");
            pointerelement.prepend("☛");
            if (element !== null && element.classList.contains("ha-linecount")) {
                pointerelement.classList.add("-left-5");
                pointerelement.classList.add("-top-1.5")
                element.prepend(pointerelement);
            } else if (element !== null && element.classList.contains("ha-commenthead")) {
                pointerelement.classList.add("-left-6");
                element.prepend(pointerelement);
            }
        }
    }

    window.addEventListener("load", function () {
        markanchor();
    });
</script>

@* Mark links active *@
<script>
    // Marks links as active which target URL starts with the current URL
    const markactive_startswith = function (element) {
        var all_links = element.getElementsByTagName("a"),
            i = 0,
            len = all_links.length,
            full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes

        for (; i < len; i++) {
            if (full_path.startsWith(all_links[i].href.toLowerCase())) {
                all_links[i].className += " active";
            }
        }
    };

    // Marks links active which target URL is exact the same as the current URL
    const markactive_exact = function (element) {
        var all_links = element.getElementsByTagName("a"),
            i = 0,
            len = all_links.length,
            full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes

        for (; i < len; i++) {
            if (full_path == all_links[i].href.toLowerCase() || full_path == all_links[i].href.toLowerCase() + "/") {
                all_links[i].className += " active";
            }
        }
    };

    // Marks links as active, single links mutch match exactly, dropdown only the beginning
    const markactive_menu = function (element) {
        var all_links = element.getElementsByTagName("a"),
            i = 0,
            len = all_links.length,
            marked = false,
            full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
        full_path = full_path.split("?")[0];

        for (; i < len; i++) {
            if (all_links[i].parentNode.classList.contains("ha-topnav-dropdown")) {
                if (full_path.startsWith(all_links[i].href.toLowerCase())) {
                    all_links[i].className += " active pointer-events-none";
                    marked = true;
                }
            } else {
                if (full_path == all_links[i].href.toLowerCase() || full_path == all_links[i].href.toLowerCase() + "/") {
                    all_links[i].className += " active pointer-events-none";
                    marked = true;
                }
            }
        }

        i = 0;
        if (marked === false) {
            for (; i < len; i++) {
                if (all_links[i].classList.contains("ha-active-default")) {
                    all_links[i].className += " active";
                }
            }
        }
    };

    window.addEventListener("load", function () {
        if (document.getElementById("ha-topnav") !== null)
            markactive_menu(document.getElementById("ha-topnav"));
        if (document.getElementById("ha-register-nav") !== null)
            markactive_exact(document.getElementById("ha-register-nav"));
        if (this.document.getElementById("ha-adminuploadfields") !== null)
            markactive_exact(document.getElementById("ha-adminuploadfields"));
    });
</script>

@* Menu view for mobile / small screen users *@
<script>
    const openmenu = function () {
        var x = document.getElementById("ha-topnav");
        if (x !== null) x.className += " ha-topnav-collapsed";
        let oldbutton = document.getElementById("openmenubutton");
        if (oldbutton !== null) oldbutton.setAttribute("class", "hidden");
        let newbutton = document.getElementById("closemenubutton");
        if (newbutton !== null) newbutton.setAttribute("class", "");
    };

    const closemenu = function () {
        var x = document.getElementById("ha-topnav");
        if (x !== null) x.className = "ha-topnav";
        let oldbutton = document.getElementById("closemenubutton");
        if (oldbutton !== null) oldbutton.setAttribute("class", "hidden");
        let newbutton = document.getElementById("openmenubutton");
        if (newbutton !== null) newbutton.setAttribute("class", "");
    };

    window.addEventListener("load", function () {
        // Menu: Show / Hide Buttons for mobile View
        if (
            document.getElementById("openmenubutton") !== null &&
            document.getElementById("closemenubutton") !== null
        ) {
            document
                .getElementById("openmenubutton")
                .addEventListener("click", openmenu);
            document
                .getElementById("closemenubutton")
                .addEventListener("click", closemenu);
        }
    });
</script>

@* Scrolling Button *@
<script>
    const scrollFunction = function () {
        button = document.getElementById("ha-scrollbutton");
        if (button !== null) {
            if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
                // button.style.display = "block";
                button.style.pointerEvents = "auto";
                button.style.opacity = "1";
            } else {
                // button.style.display = "none";
                button.style.pointerEvents = "none";
                button.style.opacity = "0";
            }
        }
    }

    window.addEventListener("load", function () {
        // Scroll button
        if (document.getElementById("ha-scrollbutton") !== null) {
            scrollFunction();
            document.getElementById("ha-scrollbutton").addEventListener("click", () => {
                document.body.scrollTop = 0; // For Safari
                document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
            })
            window.addEventListener("scroll", scrollFunction);
        }
    });
</script>

@* Letter View: Tabs
    TODO: Generalize, Integrate mobile-friendly version *@
<script>
    const showhidebutton = function (
        buttonid,
        divid,
        buttonlist,
        divlist,
        starthidden
    ) {
        let button = document.getElementById(buttonid);
        let div = document.getElementById(divid);

        if (starthidden && div !== null) {
            div.classList.add("hide");
        }

        if (!starthidden && button !== null) {
            button.classList.add("active");
        }

        if (button !== null) {
            button.addEventListener("click", function () {
                for (let btn of buttonlist) {
                    let inactivebutton = document.getElementById(btn);
                    if (inactivebutton !== null) inactivebutton.classList.remove("active");
                }

                for (let element of divlist) {
                    let hiddenelement = document.getElementById(element);
                    if (hiddenelement !== null) {
                        hiddenelement.classList.add("hide")
                        hiddenelement.classList.remove("flow-root");
                    };
                }

                if (button !== null) button.classList.add("active");
                if (div !== null) {
                    div.classList.add("flow-root");
                    div.classList.remove("hide");
                }
            });
        }
    };

    window.addEventListener("load", function () {
        // Letter View: Show / Hide Tabs
        let buttonlist = ["ha-lettertextbtn", "ha-additionsbtn", "ha-marginalsbtn"];
        let divlist = ["ha-lettertext", "ha-additions", "ha-marginals"];

        if (this.document.getElementById("ha-lettertextbtn") !== null) {
            showhidebutton(
                "ha-lettertextbtn",
                "ha-lettertext",
                buttonlist,
                divlist,
                false
            );
            showhidebutton(
                "ha-additionsbtn",
                "ha-additions",
                buttonlist,
                divlist,
                true
            );
            showhidebutton(
                "ha-marginalsbtn",
                "ha-marginals",
                buttonlist,
                divlist,
                true
            );
        } else {
            showhidebutton(
                "ha-lettertextbtn",
                "ha-lettertext",
                buttonlist,
                divlist,
                true
            );
            showhidebutton(
                "ha-additionsbtn",
                "ha-additions",
                buttonlist,
                divlist,
                false
            );
            showhidebutton(
                "ha-marginalsbtn",
                "ha-marginals",
                buttonlist,
                divlist,
                true
            );
        }
    });
</script>

@* Theme reading & switching *@
<script>
    // Functions for switching theme
    const go_to_dark = function () {
        localStorage.setItem("theme", "ha-toggledark");
        document.documentElement.classList.add("dark");
    };

    const go_to_bright = function () {
        document.documentElement.classList.remove("dark");
        localStorage.setItem("theme", "ha-togglebright");
    };

    // Functions for reading theme settings
    const get_theme_settings = function (standard) {
        var theme = localStorage.getItem("theme");
        if (theme === null) theme = standard;
        let toggleSwitch = document.getElementById(theme).click();
    };

    window.addEventListener("load", function () {
        if (
            document.getElementById("ha-togglebright") !== null &&
            this.document.getElementById("ha-toggledark") !== null
        ) {
            document
                .getElementById("ha-togglebright")
                .addEventListener("click", go_to_bright);
            document
                .getElementById("ha-toggledark")
                .addEventListener("click", go_to_dark);
        }
        get_theme_settings("ha-togglebright");
    });
</script>

@* Functions for collapsing marginals, and adding a button next to those*@
<script>
    const getLineHeight = function (element) {
        var temp = document.createElement(element.nodeName),
            ret;
        temp.setAttribute("class", element.className);
        temp.innerHTML = "Ü";
        element.parentNode.appendChild(temp);
        ret = temp.getBoundingClientRect().height;
        temp.parentNode.removeChild(temp);
        return ret;
    };

    const collapsebox = function (element, height, lineheight) {
        element.style.maxHeight = height + "px";
        element.classList.add("ha-collapsed-box");
        element.classList.remove("ha-expanded-box");
    };

    const uncollapsebox = function (element) {
        element.classList.remove("ha-collapsed-box");
        element.classList.add("ha-expanded-box");
    };

    const addbuttoncaollapsebox = function (element, height, hoverfunction) {
        let btn = document.createElement("div");
        btn.classList.add("ha-btn-collapsed-box");

        if (element.classList.contains("ha-collapsed-box")) {
            btn.classList.add("ha-open-btn-collapsed-box");
        } else {
            btn.classList.add("ha-close-btn-collapsed-box");
        }

        btn.addEventListener("click", function (ev) {
            ev.stopPropagation();
            if (element.classList.contains("ha-collapsed-box")) {
                uncollapsebox(element);
                btn.classList.remove("ha-open-btn-collapsed-box");
                btn.classList.add("ha-close-btn-collapsed-box");
                btn.classList.add("ha-collapsed-box-manually-toggled");
            } else {
                collapsebox(element, height);
                btn.classList.remove("ha-close-btn-collapsed-box");
                btn.classList.remove("ha-collapsed-box-manually-toggled");
                btn.classList.add("ha-open-btn-collapsed-box");
            }
        });

        if (hoverfunction) {
            let timer = null;

            element.addEventListener("mouseenter", function (ev) {
                ev.stopPropagation();
                timer = setTimeout(function () {
                    if (element.classList.contains("ha-collapsed-box")) {
                        uncollapsebox(element);
                        btn.classList.remove("ha-open-btn-collapsed-box");
                        btn.classList.add("ha-close-btn-collapsed-box");
                    }
                }, 200);
            });

            element.addEventListener("mouseleave", function (ev) {
                ev.stopPropagation();
                if (timer != null) {
                    clearTimeout(timer);
                }
                if (
                    element.classList.contains("ha-expanded-box") &&
                    !btn.classList.contains("ha-collapsed-box-manually-toggled")
                ) {
                    collapsebox(element, height);
                    btn.classList.remove("ha-close-btn-collapsed-box");
                    btn.classList.add("ha-open-btn-collapsed-box");
                }
            });
        }
        element.parentNode.insertBefore(btn, element);
    };

    const overlappingcollapsebox = function (selector, hoverfunction) {
        let boxes = document.querySelectorAll(selector);
        let lineheight = 1;

        if (boxes.length >= 1) {
            lineheight = getLineHeight(boxes[0]);
        }

        for (var i = 0; i < boxes.length; i++) {
            if (i < boxes.length - 1) {
                let element = boxes[i];
                let thisrect = element.getBoundingClientRect();
                let nextrect = boxes[i + 1].getBoundingClientRect();
                let overlap = thisrect.bottom - nextrect.top;
                if (
                    // -1 for catching lines that perfectly close up on each other
                    overlap >= -1 &&
                    !(window.getComputedStyle(element).display === "none")
                ) {
                    let newlength = 0;
                    if (overlap >= 0)
                        newlength = thisrect.height - overlap;
                    else
                        newlength = thisrect.height - lineheight;
                    if (newlength % (lineheight * 3) <= 2)
                        newlength -= lineheight;
                    let remainder = newlength % lineheight;
                    newlength = newlength - remainder - 1;

                    // Line clamping for Marginals
                    if (element.classList.contains("ha-marginalbox")) {
                        let marginals = element.querySelectorAll(".ha-marginal");
                        let h = 0;
                        for (let m of marginals) {
                            let cr = m.getBoundingClientRect();
                            let eh = cr.bottom - cr.top;
                            h += eh;
                            if (h >= newlength) {
                                let lines = Math.floor(eh / lineheight);
                                let cutoff = Math.floor((h - newlength) / lineheight);
                                m.style.cssText += "-webkit-line-clamp: " + (lines - cutoff) + ";";
                            }
                        }
                    }

                    requestAnimationFrame(() => {
                        collapsebox(element, newlength, lineheight);
                    });
                    requestAnimationFrame(() => {
                        addbuttoncaollapsebox(element, newlength, hoverfunction);
                    });
                }
            }
        }
    };

    const marginalboxwidthset = function () {
        let lt = document.getElementById("ha-letterbody");
        if (lt !== null) {
            let mg = lt.querySelectorAll(".ha-lettertext .ha-marginalbox");
            if (mg.length > 0) {
                let ltbcr = lt.getBoundingClientRect();
                let mgbcr = mg[0].getBoundingClientRect();
                let nw = ltbcr.right - mgbcr.left - 18;

                for (let element of mg) {
                    element.style.width = nw + "px";
                }
            }
        }
    }



    const collapseboxes = function () {
        overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
        overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
        overlappingcollapsebox(".ha-commentlist .ha-letlinks", true);
        overlappingcollapsebox(".ha-lettertext .ha-marginalbox", true);
    };

    window.addEventListener("load", function () {
        marginalboxwidthset();
        collapseboxes();
        var doit;
        this.window.addEventListener("resize", function () {
            this.clearTimeout(doit);
            marginalboxwidthset();
            doit = this.setTimeout(collapseboxes, 250);
        });
    });
</script>