<!DOCTYPE html>
<html>
<head>
    <title></title>
    %(scripts)s
    <script src="skulpt-stdlib.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" crossorigin="anonymous"></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>

<script type="text/javascript">
function outf(text) {
   var mypre = document.getElementById(Sk.pre);
   mypre.innerHTML = mypre.innerHTML + text;
}

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


function builtinRead(x) {
    //console.log(x);
    if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined) {
        throw "File not found: '" + x + "'";
    }

    var file = Sk.builtinFiles["files"][x];

    if (!file) {
        return new Promise(function (accept, reject) {
            function reqListener () {
                console.log(this);
                console.log(arguments)
                accept(this.responseText);
            }

            var oReq = new XMLHttpRequest();
            oReq.addEventListener("load", reqListener);
            oReq.open("GET", "%(root)s" + file);
            oReq.send();
        });
    }

    return file;
}

function runit(myDiv) {
   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)); });
   };
   //Sk.outputfun = alert;

   mypre.innerHTML = '';
   Sk.console = {
    'container': '#'+myDiv+"_canvas",
    'width': 400,
    'height': 300,
    'pngMode': true,
    'printHtml': function (a,b) {}
   }
   Sk.canvas = myDiv+"_canvas";
   $("#"+Sk.canvas).empty()
    var can = document.getElementById(Sk.canvas);
    can.style.display = 'block';
    if (can) {
        can.width = can.width;
        if (Sk.tg) {
            Sk.tg.canvasInit = false;
            Sk.tg.turtleList = [];
        }
    }

    Sk.pre = myDiv+"_pre";
    Sk.configure({
        output:outf,
        read: builtinRead,
        inputfunTakesPrompt: true,
        debugout: showjs,
        debugging: %(debug_mode)s
    });

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

    myPromise.then(function(mod) {}, function(err) {
        console.error(err.toString());
        console.error(err.nativeError.stack);
    });
}
</script>
<h3>Test Code</h3>
<div id="runbrowser">
<form>
<button onclick="runit('runbrowser')" type="button">Run</button><br>
<textarea edit_id="eta_5" id="runbrowser_code" cols="72" rows="20" style="font-family: 'Lucida Console', Monaco, monospace;">
%(code)s
</textarea>
</form>

<h3>Canvas</h3>
<div id="runbrowser_canvas" height="500px" width="800px"
	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>