/**

* @author: Kaushik Gopal
*
* A jQuery function that displays the footnotes
* on the side (sidenotes) for easier reading.
*
* This is as recommended by Edward Tufte's style sidenotes:
* https://edwardtufte.github.io/tufte-css/#sidenotes
*
**/

(function () {

$(window).on("load", function() {
    const $footnotes = $(".footnotes"),
          $postContent = $(".post-content");

    loadSideNotesFromFootnotes($postContent, $footnotes);

    $(window).resize(function() {
        // console.log(" XXX -- RESIZE -- XXX ");

        // TODO: optimization if window width doesn't change that much
        // const new_ww = $(".wrapper").outerWidth();
        // if (new_ww === windowWidth) return;
        // windowWidth = new_ww;

        loadSideNotesFromFootnotes($postContent, $footnotes);
    });
});

function loadSideNotesFromFootnotes($postContent, $footnotes) {

    // remove any existing side notes to begin
    $(".sidenote").remove();

    //region Should we even show sidenotes?

    // has post content
    if ($postContent.length < 1) {
        $footnotes.show();  // previous resize could have hidden footnotes
        return;
    }

    const startPosition = $postContent.position().left
        + $postContent.outerWidth()
        + 60; // some padding

    // console.log(" ---> postWidth " + $(".post").outerWidth());
    // console.log(" ---> snStart " + startPosition + startPosition/3);

    // has room to show side content
    if(startPosition + startPosition / 3 > $(".post").outerWidth()) {
        $footnotes.show();  // previous resize could have hidden footnotes
        return;
    }
    //endregion

    const $fnItems = $footnotes.find("ol li");

    $("sup").each(function(index) {
        const $footnoteText = $fnItems.eq(index).text().trim();
        createSideNote($(this), $footnoteText, startPosition);
    });

    $footnotes.hide();
}

function createSideNote(superscript, footnoteText, startPosition) {

    // console.log(" ---> " + superscript.text() + " : " + footnoteText);

    // construct side note <div>
    let div = $(document.createElement('div'))
        .text(footnoteText)
        .addClass("sidenote");

    const topPosition = superscript.offset();

    div.css({
        position: "absolute",
        left: startPosition,
        top: topPosition["top"],
        width: startPosition/3,
    });

    if (startPosition > 420) {
        superscript.hover(function() {
            div.addClass("sidenote-hover");
        }, function () {
            div.removeClass("sidenote-hover");
        });
    } else {
        div.addClass("sidenote-hover");
    }

    // attach side note <div>
    $(document.body).append(div);
}

})();