<!--
 * Copyright 2009, Google Inc.
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 *     * Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above
 * copyright notice, this list of conditions and the following disclaimer
 * in the documentation and/or other materials provided with the
 * distribution.
 *     * Neither the name of Google Inc. nor the names of its
 * contributors may be used to endorse or promote products derived from
 * this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Mulitple Contexts</title>
<style>
html, body {
  width: 100%;
  height: 100%;
  border: 0px;
  padding: 0px;
  margin: 0px;
  background-color: red;
}
CANVAS {
  background-color: gray;
}
.context {
  float: left;
  position: relative;
  margin: 5px;
}
.fpsContainer {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  color: white;
  font-family: sans-serif;
  background-color: rgba(0,0,0,0.5);
  border-radius: 10px;
  padding: 10px;
}
#viewContainer {
  width: 100%;
  height: 100%;
}
</style>
<script src="../tdl/base.js"></script>
<script src="../utils/simple-scene.js"></script>
<script>
tdl.require('tdl.fps');
tdl.require('tdl.log');
tdl.require('tdl.webgl');
window.onload = initialize;

var g = {
  num: 3,
  size: 256,
};

// globals
var g_logGLCalls = true;  // whether or not to log webgl calls
var g_debug = false;      // whether or not to debug.
var g_drawOnce = false;   // draw just one frame.
var g_scenes = [];

function ValidateNoneOfTheArgsAreUndefined(functionName, args) {
  for (var ii = 0; ii < args.length; ++ii) {
    if (args[ii] === undefined) {
      tdl.error("undefined passed to gl." + functionName + "(" +
                tdl.webgl.glFunctionArgsToString(functionName, args) + ")");
    }
  }
}

function Log(msg) {
  if (g_logGLCalls) {
    tdl.log(msg);
  }
}

function LogGLCall(functionName, args) {
  if (g_logGLCalls) {
    ValidateNoneOfTheArgsAreUndefined(functionName, args)
    tdl.log("gl." + functionName + "(" +
                tdl.webgl.glFunctionArgsToString(functionName, args) + ")");
  }
}

function initialize() {
  tdl.misc.applyUrlSettings(g);
  var c = document.getElementById("viewContainer");
  for (var ii = 0; ii < g.num; ++ii) {
    var div = document.createElement('div');
    div.className = "context";
    var fpsDiv = document.createElement('div');
    fpsDiv.className = "fpsContainer";
    var fpsSpan = document.createElement('span');
    fpsSpan.className = "fps";
    var fpsValue = document.createElement('span');
    fpsDiv.appendChild(fpsSpan);
    fpsDiv.appendChild(fpsValue);
    div.appendChild(fpsDiv);
    var fpsTimer = new tdl.fps.FPSTimer();
    var canvas = document.createElement("canvas");
    div.appendChild(canvas);
    c.appendChild(div);
    canvas.width = g.size;
    canvas.height = g.size;
    var scene = new SimpleScene(canvas, ii);
    g_scenes.push(scene);
    function setupRenderFunc(canvas, scene, fpsTimer, fpsValue) {
      var then = (new Date()).getTime() * 0.001;
      var renderFunc = function() {
        requestAnimationFrame(renderFunc);
        var now = (new Date()).getTime() * 0.001;
        var elapsedTime = now - then;
        then = now;
        fpsTimer.update(elapsedTime);
        fpsValue.innerText = fpsTimer.averageFPS;
        scene.render(elapsedTime);
      };
      return renderFunc;
    };
    setupRenderFunc(canvas, scene, fpsTimer, fpsValue)();
  }
  return true;
}
</script>
</head>
<body>
<div id="viewContainer">
</div>
</body>
</html>



