// Enable transitions between themes without reloading page

var Themes = {
    AUTO: "auto",
    LIGHT: "light",
    DARK: "dark"
};

var jsTheme;

window.addEventListener("load", function() {

    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

    // Add trees
    if (!document.querySelector(".tree")) {
        for (var x = 0; x < width; x += 240) {
            var left = x + Math.floor(Math.random() * 240 / 2);
            var bottom = Math.floor(Math.random() * 150);
            var img = document.createElement("img");
            img.className = "tree";
            img.height = 300;
            img.alt = "";
            img.style.position = "fixed";
            img.style.left = left + "px";
            img.style.bottom = bottom + "px";
            document.body.appendChild(img);
        }
    }

    // Apply current theme
    var themeCookie = document.cookie.match(/theme=([a-z]+)/i);
    if (themeCookie) applyTheme(themeCookie[1], true);
    else applyPreferredTheme(true);

    // Add click listener to theme buttons
    var themeBtns = document.getElementsByClassName("theme-btn");
    for (var i = 0; i < themeBtns.length; i++) {
        themeBtns[i].onclick = function(e) {

            var event = e || window.event;
            var target = event.target || event.srcElement;

            event.returnValue = false;
            if (event.preventDefault) event.preventDefault();

            // Ignore if already selected
            if (target.className.indexOf("selected") > -1) return;

            // Get new theme
            var theme = target.getAttribute("data-theme");

            // Apply theme changes
            if (theme === Themes.AUTO) {
                document.cookie = "theme=; expires=Tue, 19 Jan 2038 03:14:08 GMT";
                applyPreferredTheme(false);
            } else {
                document.cookie = "theme=" + theme + "; expires=Tue, 19 Jan 2038 03:14:08 GMT"
                applyTheme(theme, false);
            }

            // Set new selected button
            deselectThemeButton(document.querySelector(".theme-btn.selected"));
            selectThemeButton(target);

            // Force redrawing of containers because of a bug in IE8
            var containers = document.getElementsByClassName("container");
            for (var i = 0; i < containers.length; i++) containers[i].className += "";

        }
    }

    // Automatically computes the preferred theme and calls applyTheme() with it
    function applyPreferredTheme(firstTime) {
        var preferredTheme = ("matchMedia" in window && matchMedia("(prefers-color-scheme: dark)").matches) ? Themes.DARK : Themes.LIGHT;
        applyTheme(preferredTheme, firstTime);
    }

    function applyTheme(theme, firstTime) {

        if (jsTheme && jsTheme.href.match(theme)) return;

        // Set trees
        var trees = document.getElementsByClassName("tree");
        for (var i = 0; i < trees.length; i++) {
            trees[i].src = "/assets/img/tree_" + theme + (window.SVGElement ? ".svg" : ".png");
        }

        if (!firstTime) {

            if (jsTheme) document.head.removeChild(jsTheme);
            jsTheme = document.createElement("link");
            jsTheme.rel = "stylesheet";
            jsTheme.href = "/assets/style/" + theme + "-mode.css";
            document.head.appendChild(jsTheme);

            if (window.linkOnloadSupported) {
                document.body.className += " loading";
                jsTheme.onload = function () {
                    document.body.className = document.body.className.replace(/\s*loading/g, "");
                    var themeStyles = document.getElementsByClassName("theme-style");
                    for (var i = 0; i < themeStyles.length; i++) {
                        document.head.removeChild(themeStyles[i]);
                    }
                }
            }

        }

    }

    // Functions to select/deselect a theme button

    function selectThemeButton(themeBtn) {
        if (themeBtn.textContent) themeBtn.textContent += " ✓";
        else themeBtn.innerText += " ✓";
        themeBtn.className += "selected";
    }

    function deselectThemeButton(themeBtn) {
        if (themeBtn.textContent) themeBtn.textContent = themeBtn.textContent.replace(" ✓", "");
        else themeBtn.innerText = themeBtn.innerText.replace(" ✓", "");
        themeBtn.className = themeBtn.className.replace("selected", "");
    }

}, false);