<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Emscripten-Generated Code</title>
    <style>
      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
      textarea.emscripten { font-family: monospace; width: 80%; }
      div.emscripten { text-align: center; }
      div.emscripten_border { border: 1px solid black; }
      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
      canvas.emscripten { border: 0px none; background-color: black; }

      .spinner {
        height: 50px;
        width: 50px;
        margin: 0px auto;
        -webkit-animation: rotation .8s linear infinite;
        -moz-animation: rotation .8s linear infinite;
        -o-animation: rotation .8s linear infinite;
        animation: rotation 0.8s linear infinite;
        border-left: 10px solid rgb(0,150,240);
        border-right: 10px solid rgb(0,150,240);
        border-bottom: 10px solid rgb(0,150,240);
        border-top: 10px solid rgb(100,0,200);
        border-radius: 100%;
        background-color: rgb(200,100,250);
      }
      @-webkit-keyframes rotation {
        from {-webkit-transform: rotate(0deg);}
        to {-webkit-transform: rotate(360deg);}
      }
      @-moz-keyframes rotation {
        from {-moz-transform: rotate(0deg);}
        to {-moz-transform: rotate(360deg);}
      }
      @-o-keyframes rotation {
        from {-o-transform: rotate(0deg);}
        to {-o-transform: rotate(360deg);}
      }
      @keyframes rotation {
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
      }

    </style>
  </head>
  <body>
    <hr/>
    <figure style="overflow:visible;" id="spinner"><div class="spinner"></div><center style="margin-top:0.5em"><strong>emscripten</strong></center></figure>
    <div class="emscripten" id="status">Downloading...</div>
    <div class="emscripten">
      <progress value="0" max="100" id="progress" hidden=1></progress>  
    </div>
    <div class="emscripten_border">
      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
    </div>
    <hr/>
    <div class="emscripten">
      <input type="checkbox" id="resize">Resize canvas
      <input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer
      &nbsp;&nbsp;&nbsp;
      <input type="button" value="Fullscreen" onclick="Module.requestFullscreen(document.getElementById('pointerLock').checked, 
                                                                                document.getElementById('resize').checked)">
    </div>
    
    <hr/>
    <textarea class="emscripten" id="output" rows="8"></textarea>
    <hr>
    <script type='text/javascript'>
      var statusElement = document.getElementById('status');
      var progressElement = document.getElementById('progress');
      var spinnerElement = document.getElementById('spinner');

      var Module = {
        preRun: [],
        postRun: [],
        print: (function() {
          var element = document.getElementById('output');
          if (element) element.value = ''; // clear browser cache
          return function(text) {
            if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
            // These replacements are necessary if you render to raw HTML
            //text = text.replace(/&/g, "&amp;");
            //text = text.replace(/</g, "&lt;");
            //text = text.replace(/>/g, "&gt;");
            //text = text.replace('\n', '<br>', 'g');
            console.log(text);
            if (element) {
              element.value += text + "\n";
              element.scrollTop = element.scrollHeight; // focus on bottom
            }
          };
        })(),
        printErr: function(text) {
          if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
          if (0) { // XXX disabled for safety typeof dump == 'function') {
            dump(text + '\n'); // fast, straight to the real console
          } else {
            console.error(text);
          }
        },
        canvas: (function() {
          var canvas = document.getElementById('canvas');

          // As a default initial behavior, pop up an alert when webgl context is lost. To make your
          // application robust, you may want to override this behavior before shipping!
          // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
          canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);

          return canvas;
        })(),
        setStatus: function(text) {
          if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
          if (text === Module.setStatus.text) return;
          var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
          var now = Date.now();
          if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
          if (m) {
            text = m[1];
            progressElement.value = parseInt(m[2])*100;
            progressElement.max = parseInt(m[4])*100;
            progressElement.hidden = false;
            spinnerElement.hidden = false;
          } else {
            progressElement.value = null;
            progressElement.max = null;
            progressElement.hidden = true;
            if (!text) spinnerElement.hidden = true;
          }
          statusElement.innerHTML = text;
        },
        totalDependencies: 0,
        monitorRunDependencies: function(left) {
          this.totalDependencies = Math.max(this.totalDependencies, left);
          Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
        }
      };
      Module.setStatus('Downloading...');
      window.onerror = function() {
        Module.setStatus('Exception thrown, see JavaScript console');
        spinnerElement.style.display = 'none';
        Module.setStatus = function(text) {
          if (text) Module.printErr('[post-exception status] ' + text);
        };
      };
    </script>
    {{{ SCRIPT }}}
  </body>

<div id="otherContent">
    <input type="button" id="b0" value="Default+None"> This simply requests fullscreen, use when no extra behavior is desirable. This is subject to a wild number of per-browser differences, see <a href="https://github.com/emscripten-core/emscripten/issues/2556">https://github.com/emscripten-core/emscripten/issues/2556</a>.<br />
    <input type="button" id="b1" value="Stretch"> Stretch the WebGL render target to cover the whole screen in pixel-perfect manner, in standard definition. <br />
    <input type="button" id="b2" value="Stretch+HiDPI"> Same as above, but use the actual native display resolution, instead of CSS resolution. <br />
    <input type="button" id="b3" value="Aspect"> Stretch the WebGL render target to cover the full screen, but retain aspect ratio. <br />
    <input type="button" id="b4" value="Aspect+HiDPI"> Same as above, but use the actual native display resolution, instead of CSS resolution.  <br />
    <input type="button" id="b5" value="Stretch+None"> Don't resize WebGL render target, and don't care about aspect ratio, simply stretch over the whole screen. (current Firefox and IE default behavior) <br />
    <input type="button" id="b6" value="Aspect+None"> Don't resize WebGL render target, but scale over the whole screen, preserving aspect ratio. <br />
    <input type="button" id="b15" value="Aspect+None+Nearest"> Same as above, but perform pixelated nearest-neighbor filtering instead of bilinear filtering. <br />
    <input type="button" id="b7" value="Center"> Don't resize the WebGL render target and don't scale the displayed content, but show it full screen. (current Chrome and Safari default behavior) <br />
<div>
    <br />
    <br />
    The Soft fullscreen modes are otherwise exactly like the above, except that they don't actually request fullscreen, but instead they present the canvas maximized in the client area of the page. This is more desirable in Firefox OS mobile packaged apps, where the application is already displayed full screen. Also it allows client desktop apps to use F11 for transitioning between fullscreen mode. <br />
    <input type="button" id="b8" value="Stretch"> <br />
    <input type="button" id="b9" value="Stretch+HiDPI"> <br />
    <input type="button" id="b10" value="Aspect"> <br />
    <input type="button" id="b11" value="Aspect+HiDPI"> <br />
    <input type="button" id="b12" value="Strech+None"> <br />
    <input type="button" id="b13" value="Aspect+None"> <br />
    <input type="button" id="b16" value="Aspect+None+Nearest"> <br />
    <input type="button" id="b14" value="Center">  <br />
</div>
</div>

</html>