"use strict";
//var w3 = {};

class includableElement {
    constructor(element) {
        this.elmnt = element;
    };

    // ---- This method converts markup to HTML and sticks a button on it.
    doConvert(inText, animate) {
        var inName = this.elmnt.id;

        // ---- toggle element id (newName) and button label (funcName)
        var newName, funcName;
        var bExpanding = inName.startsWith("essay");
        if (bExpanding) {
            newName = inName.replace("essay", "synops");
            funcName = "Collapse";
            this.elmnt.style.background = "BISQUE";
        } else {
            newName = inName.replace("synops", "essay");
            funcName = "Expand";
            this.elmnt.style.background = "ANTIQUEWHITE";
        };

        // ---- Make Button
        var newStr = "'" + newName  + "'";
        this.elmnt.id = newName;
        var func = '"myExpand(' + newStr + ')"';
        var buttonString = '<button class="button"  onclick=' + func + '>' + funcName + '</button>';

        // ---- Make Text
        var converter = new showdown.Converter();
        var textString = converter.makeHtml(inText);
        if (bExpanding) {  // -- Do postconversion if necessary
            textString = this.doPostConversion(textString);
        };

        // ---- Combine button and text
        this.elmnt.innerHTML = buttonString + textString;

        if (animate) {
            this.elmnt.style.opacity = 0;
            this.doFadeIn();
        };

    }; // ---- end of doConvert method

    // --- Post-showdown processing to parse special F W Sweet symbols
    doPostConversion(textString) {

        // --- Add drop-cap to first line
        var newString = textString.replace('<p>', '<p><div class="dropcap">' );
        newString = newString.replace("</p>","</div></p>");

        //--- Handle images
/*
        var foundit = newString.includes("floatleft");
        while (foundit) {
            newString = newString.replace("floatleft","floatright");
            foundit = newString.includes("floatleft");
        }
*/
         return newString;
    };

    // ---- This method requests an essay or synopsis dowload
    doLoadEssay() {
        var fileName = "includes/" + this.elmnt.id + ".md";
        var xhttp = new XMLHttpRequest();
        var myself = this;
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                myself.doConvert(xhttp.responseText, true);
            }
        };
        xhttp.open("GET", fileName);
        xhttp.send();
    }; //  --- end of essay or synopsis download request

    // ---- This method requests dowload of an includable file
    doLoadFile() {
        var fileName = "includes/" + this.elmnt.innerHTML;
        var xhttp = new XMLHttpRequest();
        var myself = this;
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                myself.doReceive(xhttp.responseText);
            };
        };
        xhttp.open("GET", fileName);
        xhttp.send();
    };

    // ---- This method receives a file download and then recurses back to calling for the next includable file
    doReceive(response) {
        var rawName = this.elmnt.innerHTML;
        var suffix = rawName.endsWith(".md");
        if (suffix) {
            this.elmnt.id = rawName.replace(".md", "");
            this.doConvert(response, false);
        } else {
            this.elmnt.innerHTML = response;
        };
        this.elmnt.classList.remove("include");
        myInclude();  // recurse until no element has class="include"
    }; // --- end of doReceive file

    // ---- This method animates the transition from synopsis to full essay and back again,
    doFadeIn() {
        var element = this.elmnt;
        var pos = 0;
        var id = setInterval(frame, 5);
        function frame() {
            if (pos > 99) {
                clearInterval(id); 
            } else {
                pos = pos + 2;
                var pct = pos/100;
                element.style.opacity = pct;
                element.style.transform = "rotateY(" + (180 * (1 - pct)) + "deg)";
            };
        };
    };

}; // ---- end of includableElement class

function goBack() {
"use strict"
    location.reload();
};

// --- request/receive essay in response to button-click
function myExpand(inName) {
"use strict"
    var elmnt = document.getElementById(inName);
    if (elmnt) { // if any element with id = inName
        var elementObj = new includableElement(elmnt);
        elementObj.doLoadEssay();
        if (inName.startsWith("essay")) {
            history.replaceState(null, null, '?pg=' + inName);
        };
    };
};

// --- Infinite ping-pong recursion of request/receive files until all includables have been expanded.
function myInclude() {
"use strict"
    var elmnt = document.querySelector(".include");
    if (elmnt) {  // if any element has class="include"
        var elementObj = new includableElement(elmnt);
        elementObj.doLoadFile();
    }; // elmnt > 0
   // drops out here if no element has class="include"
    setTimeout(preClick, 3000);
};

function preClick() {
    if (window.location.href.indexOf('?') > -1) {
        var page = getUrlVars()['pg'];
           myExpand(page);
    };
};

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
};

//var number = getUrlVars()["pg"];