const bgColour = "#8888aa";
const btnDefaultColour = "#020202";

function getSections(htmlString) {
    var root = document.createElement("html");

    console.log("Parsing " + htmlString);
    root.innerHTML = htmlString;

    var sectionDescriptions = {};
    var elements = root.getElementsByClassName("section");

    for (let sidx = 0; sidx < elements.length; ++sidx) {
        let el = elements[sidx];
        let id = `section_${sidx}`;

        console.log(`Found section ${sidx} ${el}`);
        el.id = id;

        var title = el.getElementsByTagName("h2")[0];
        
        sectionDescriptions[id] = {html: el, title: title.innerHTML};
    }

    return [root, sectionDescriptions];
}

function makeScrollButton(id, title, sectionCount) {
    btn = document.createElement("button");

    btn.id = id;
    btn.className = "scrolllink";
    btn.style.width = `${100 / (sectionCount + 1) >> 0}%`;
    btn.appendChild(document.createTextNode(title));

    return btn;
}

function createPage(html, sections, parentPage = null) {
    const nofSections = Object.keys(sections).length;

    console.log(`Creating page with ${nofSections} sections.`);

    if (nofSections > 0) {
        var navMenu = html.getElementsByClassName("nav_sticky")[0];

        if (navMenu != null) {
            if (parentPage != null) {
                navMenu.appendChild(makeScrollButton("btn_back", "Back", nofSections));
            } else {
                navMenu.appendChild(makeScrollButton("btn_start", "Top", nofSections));
            }

            for (let id in sections) {
                navMenu.appendChild(makeScrollButton("btn_" + id, sections[id].title, nofSections));
            }
        }
    }

    return html.outerHTML;
}

function highlightScroll(btn) {
    $(".scrolllink").each(function() {
        $(this).css({"backgroundColor": btnDefaultColour});
    });
    btn.css({"backgroundColor": bgColour});
    $('#content').show();
}

function configureNavTo(btn, page, buttonName = null) {
    console.log(`Configuring navigation button ${buttonName != null? buttonName : btn}`);

    btn.click(function(e) {
        console.log(`Navigating to ${page}`);
        e.preventDefault(e);
        loadContentDoc(page);
    });
}

function configureScrollTo(btn, element, margin = 20, buttonName = null) {
    console.log(`Configuring scroll button ${buttonName != null? buttonName : btn}`);

    btn.click(function(e) {
        e.preventDefault();
        console.log("Scrolling to " + element.attr("id"));
        $("body").animate({scrollTop: element.offset().top - margin});
        highlightScroll(btn);
    });
}

function configurePageNav(parentPage = null) {
    if (parentPage == null) configureScrollTo($("#btn_start"), $("body"), offset = 0, buttonName = "top");
    else configureNavTo($("#btn_back"), parentPage, buttonName="back");

    $("#content .section").each(function(s) {
        var sectionId = $(this).attr("id");
        var sectionBtn = $("#btn_" + sectionId);
        var section = $(this);

        console.log("Configuring section " + sectionId);
        $(this).mouseenter(function() {
            highlightScroll(sectionBtn);
        });

        console.log("Found btn: " + sectionBtn.attr("id"));
        configureScrollTo(sectionBtn, section, offset = 20, buttonName = sectionId);
    });

    $('#content').show();
}

function loadContentDoc(page, parentPage = null) {
    console.log("Click: " + page);

    if (parentPage == null) pagePath = `${page}/${page}.html`;
    else pagePath = `${parentPage}/${page}`

    $.get(pagePath, function(data) {
        console.log("this => " + $(this))
        $(".tablink").each(
            function() {
                $(this).css({"backgroundColor": btnDefaultColour});
            }
        );

        var clickBtn = $("#btn_" + (parentPage == null? page : parentPage));

        clickBtn.css({"background-color": bgColour});
        console.log("fg colour => " + clickBtn.css("backgroundColor"));

        console.log("Pre load: " + $("#content")[0].innerHTML);

        [data, sections] = getSections(data);
        page = createPage(data, sections, parentPage = parentPage);

        $('#content')[0].innerHTML = page;
        console.log("Post load: " + $("#content")[0].innerHTML);
        $('#content').show();

        configurePageNav(parentPage = parentPage);
    });
}

const navMenu = [
    "home",
    "prognosticator",
    "animath",
    "anipool",
    "apmath"
];

let searchParams = new URLSearchParams(window.location.search);

$(document).ready(function() {
    navMenu.forEach(function(page) {
        console.log("Linking " + page + " => #btn_" + page);
        configureNavTo($("#btn_" + page), page);
    });

    if (searchParams.has("page")) loadContentDoc(searchParams.get("page"));
    else if (searchParams.has("subPage")) {
        loadContentDoc(searchParams.get("subPage"), parentPage = searchParams.get("parentPage"));
    } else loadContentDoc("home");
});