<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.0/beautify.min.js"></script>
    <script src="<%- skulpt %>" type="text/javascript"></script>
    <script src="skulpt-stdlib.js" type="text/javascript"></script>
</head>
<body>
<h1>In Browser Testing Page</h1>
<p>Open the Javascript Console and click the run button.</p>
<p>Remember that you can add a debugger statement to your Python below or in the Skulpt Javascript.</p>

<p>Using <%- skulpt %> build.</p>

<script type="text/javascript">
Sk.js_beautify = js_beautify;

function outf(text) {
   var mypre = document.getElementById(Sk.pre);
   mypre.appendChild(document.createTextNode(text));
   console.log(text);
}

function showjs(text) {
   var mypre = document.getElementById("runbrowser_jsout");
   mypre.innerHTML = '';
   mypre.appendChild(document.createTextNode(text));
}




function runit(myDiv, pyver) {
    var prog = document.getElementById(myDiv+"_code").value;
    var mypre = document.getElementById(myDiv+"_pre");

    Sk.inputfun = function(prompt) {
        return new Promise(function (resolve) { resolve(window.prompt(prompt)); });
    };

    mypre.innerHTML = '';
    var can = document.getElementById("turtle");
    can.style.display = 'block';
    if (can) {
        can.width = can.width;
        if (Sk.tg) {
            Sk.tg.canvasInit = false;
            Sk.tg.turtleList = [];
        }
    }

    Sk.canvas = "turtle";

    Sk.pre = myDiv+"_pre";

    var future;
    if (pyver == "python2") {
	future = Sk.python2;
    } else if (pyver == "python3") {
	future = Sk.python3;
    }

    var debug = document.getElementById("debug").checked;

    Sk.configure({
        output:outf,
        inputfunTakesPrompt: true,
        debugout: showjs,
        debugging: debug,
        __future__: future
    });

    Sk.onBeforeImport = function() {
        return Sk.misceval.promiseToSuspension(new Promise(function(resolve, reject) {
            setTimeout(function() {
                resolve();
            }, 10);
        }));
    };

    var myPromise = Sk.misceval.asyncToPromise(function() {
        return Sk.importMainWithBody("<stdin>", true, prog, true);
    });

    myPromise.then(function(mod) {}, function(err) {
        if (err.message) {
            outf(err.message + "\n");
            outf(err.stack);
        } else if (err.nativeError) {
            outf(err.nativeError.message + "\n");
            outf(err.nativeError.stack);
        } else {
            outf(err.toString());
            outf(err.stack || "")
        }
    });
}
</script>
<h3>Test Code</h3>
<div id="runbrowser">
<form>
<textarea edit_id="eta_5" id="runbrowser_code" cols="72" rows="20" style="font-family: 'Lucida Console', Monaco, monospace;"><%- code %></textarea>
<br>
<input type="checkbox" id="debug">Debug</input>
<br>
<button onclick="runit('runbrowser', 'python2')" type="button">Run Python 2</button>
<button onclick="runit('runbrowser', 'python3')" type="button">Run Python 3</button>
</form>

<h3>Canvas</h3>
<div id="turtle" height="500" width="800"
	style="border-style: solid; display: none"></div>

<h3>Output</h3>
<pre id="runbrowser_pre" style="background-color: #dddddd"></pre>

<h3>Compiled To Javascript</h3>
<pre id="runbrowser_jsout"></pre>

</div>
</body>
</html>
