g_keyIsDown = [];
  
  document.onkeydown = function(e) {
    var keycode;
    if (window.event) {
      keycode = window.event.keyCode;
    } else if (e) {
      keycode = e.which;
    }
    g_keyIsDown[keycode] = true;
    if (g_currentTool != null) {
      g_currentTool.handleKeyDown(keycode);
    }
  };
  
  document.onkeyup = function(e) {
    var keycode;
    if (window.event) {
      keycode = window.event.keyCode;
    } else if (e) {
      keycode = e.which;
    }
    g_keyIsDown[keycode] = false;
    if (g_currentTool != null) {
      g_currentTool.handleKeyUp(keycode);
    }
  };
  
  document.onmouseup = function(e) {
    if (g_currentTool != null) {
      g_currentTool.handleMouseUp(e);
    } else {
      cancelInsertDrag();
    }
  };
  
  // NOTE: mouseDown, mouseMove and mouseUp are mouse event handlers for events
  // taking place inside the o3d area.  They typically pass the events down
  // to the currently selected tool (e.g. Orbit, Move, etc).  Tool and item
  // selection mouse events are registered seperately on their respective DOM
  // elements.
  
  // This function handles the mousedown events that happen inside the o3d
  // area.  If a tool is currently selected (e.g. Orbit, Move, etc.) the event
  // is forwarded over to it.  If the middle mouse button is pressed then we
  // temporarily switch over to the orbit tool to emulate the SketchUp behavior.
  function mouseDown(e) {
    // If the middle mouse button is used, then switch into the orbit tool,
    // Sketchup-style.
    if (e.button == g_o3d.Event.BUTTON_MIDDLE) {
      g_lastTool = g_currentTool;
      g_lastSelectorLeft = $('toolselector').style.left;
      selectTool(null, TOOL_ORBIT);
    }
  
    if (g_currentTool != null) {
      g_currentTool.handleMouseDown(e);
    }
  }
  
  // This function handles mouse move events inside the o3d area.  It simply
  // forwards them down to the currently selected tool.
  function mouseMove(e) {
    if (g_currentTool != null) {
      g_currentTool.handleMouseMove(e);
    }
  }
  
  // This function handles mouse up events that take place in the o3d area.
  // If the middle mouse button is lifted then we switch out of the temporary
  // orbit tool mode.
  function mouseUp(e) {
    // If the middle mouse button was used, then switch out of the orbit tool
    // and reset to their last tool.
    if (e.button == g_o3d.Event.BUTTON_MIDDLE) {
      $('toolselector').style.left = g_lastSelectorLeft;
      g_currentTool = g_lastTool
    }
    if (g_currentTool != null) {
      g_currentTool.handleMouseUp(e);
    }
  }
  
  function scrollMe(e) {
    e = e ? e : window.event;
    var raw = e.detail ? e.detail : -e.wheelDelta;
    if (raw < 0) {
      g_camera.eye.distanceFromTarget *= 11 / 12;
  
    } else {
      g_camera.eye.distanceFromTarget *= (1 + 1 / 12);
    }
    g_camera.update();
  }
  
  function name {
    return document.getElementById(name);
  }
  
  // An array of tool objects that will get populated when our base model loads.
  var g_tools = [];
  
  function selectTool(e, opt_toolNumber) {
    var ICON_WIDTH = 32;
    var toolNumber = opt_toolNumber;
  
    if (toolNumber == undefined) {
      // Where you click determines your tool. But since our underlying toolbar
      // graphic isn't perfectly uniform, perform some acrobatics to get the best
      // toolNumber match.
      var pt = getRelativeCoordinates(e, $('toolpanel'));
      if (pt.x < 120) {
        toolNumber = Math.floor((pt.x - 8) / ICON_WIDTH)
      } else {
        toolNumber = Math.floor((pt.x - 26) / ICON_WIDTH)
      }
      toolNumber = peg(toolNumber, 0, 9);
    }
  
    // Now place the selector graphic over the tool we clicked.
    if (toolNumber < 3) {
      $('toolselector').style.left = toolNumber * ICON_WIDTH + 8;
    } else {
      $('toolselector').style.left = toolNumber * ICON_WIDTH + 26;
    }
  
    // Finally, activate the appropriate tool.
    // TODO: Replace this hacky zoom extents tool detection with
    // tools that have an onActivate callback.
    if (toolNumber == TOOL_ZOOM_EXTENTS) {
      // Reset our camera. (Zooming to extents would be better, obviously ;)
      g_camera.eye.distanceFromTarget = 900;
      g_camera.target = { x: -100, y: 0, z: 0 };
      g_camera.update();
  
      // Then reset to the orbit tool, after pausing for a bit so the user
      // sees the zoom extents button depress.
      setTimeout(function() { selectTool(null, TOOL_ORBIT)}, 200);
    } else {
      g_currentTool = g_tools[toolNumber];
    }
  
  }
  
  function loadFile(context, path) {
    function callback(pack, start_move_tool_root, exception) {
      if (exception) {
        alert('Could not load: ' + path + '\n' + exception);
      } else {
        // Generate draw elements and setup material draw lists.
        o3djs.pack.preparePack(g_pack, g_viewInfo);
  
        // Manually connect all the materials' lightWorldPos params to the context
        var materials = g_pack.getObjectsByClassName('o3d.Material');
        for (var m = 0; m < materials.length; ++m) {
          var material = materials[m];
          var param = material.getParam('lightWorldPos');
          if (param) {
            param.bind(g_lightPosParam);
          }
        }
  
        /*
        o3djs.dump.dump('---dumping context---\n');
        o3djs.dump.dumpParamObject(context);
  
        o3djs.dump.dump('---dumping root---\n');
        o3djs.dump.dumpTransformTree(g_client.root);
  
        o3djs.dump.dump('---dumping render root---\n');
        o3djs.dump.dumpRenderNodeTree(g_client.renderGraphRoot);
  
        o3djs.dump.dump('---dump g_pack shapes---\n');
        var shapes = g_pack.getObjectsByClassName('o3d.Shape');
        for (var t = 0; t < shapes.length; t++) {
          o3djs.dump.dumpShape(shapes[t]);
        }
  
        o3djs.dump.dump('---dump g_pack materials---\n');
        var materials = g_pack.getObjectsByClassName('o3d.Material');
        for (var t = 0; t < materials.length; t++) {
          o3djs.dump.dump (
              '  ' + t + ' : ' + materials[t].className +
              ' : "' + materials[t].name + '"\n');
          o3djs.dump.dumpParams(materials[t], '    ');
        }
  
        o3djs.dump.dump('---dump g_pack textures---\n');
        var textures = g_pack.getObjectsByClassName('o3d.Texture');
        for (var t = 0; t < textures.length; t++) {
          o3djs.dump.dumpTexture(textures[t]);
        }
  
        o3djs.dump.dump('---dump g_pack effects---\n');
        var effects = g_pack.getObjectsByClassName('o3d.Effect');
        for (var t = 0; t < effects.length; t++) {
          o3djs.dump.dump ('  ' + t + ' : ' + effects[t].className +
                  ' : "' + effects[t].name + '"\n');
          o3djs.dump.dumpParams(effects[t], '    ');
        }
      */
      }
      if (start_move_tool_root != g_floorplanRoot) {
        selectTool(null, TOOL_MOVE);
        g_tools[TOOL_MOVE].initializeWithShape(start_move_tool_root);
      }
      g_camera.update();
    }
  
    g_pack = g_client.createPack();
    g_pack.name = 'load pack';
  
    new_object_root = null;
    if (g_floorplanRoot == null) {
      // Assign as the floorplan
      g_floorplanRoot = g_pack.createObject('o3d.Transform');
      g_floorplanRoot.name = 'floorplan';
      g_floorplanRoot.parent = g_client.root;
  
      g_placedModelsRoot = g_pack.createObject('o3d.Transform');
      g_placedModelsRoot.name = 'placedModels';
      g_placedModelsRoot.parent = g_floorplanRoot;
  
      // Put the object we're loading on the floorplan.
      new_object_root = g_floorplanRoot;
  
      // Create our set of tools that can be activated.
      // Note: Currently only the Delete, Move, Rotate, Orbit, Pan and Zoom
      // tools are implemented.  The last four icons in the toolbar are unused.
      g_tools = [
        new DeleteTool(g_viewInfo.drawContext, g_placedModelsRoot),
        new MoveTool(g_viewInfo.drawContext, g_placedModelsRoot),
        new RotateTool(g_viewInfo.drawContext, g_placedModelsRoot),
        new OrbitTool(g_camera),
        new PanTool(g_camera),
        new ZoomTool(g_camera),
        null,
        null,
        null,
        null
      ]
  
      selectTool(null, TOOL_ORBIT);
    } else {
      // Create a new transform for the loaded file
      new_object_root = g_pack.createObject('o3d.Transform');
      new_object_root.name = 'loaded object';
      new_object_root.parent = g_placedModelsRoot;
  
    }
  
    if (path != null) {
      o3djs.scene.loadScene(g_client, g_pack, new_object_root, path, callback);
    }
  
    return new_object_root;
  }
  
  function setClientSize() {
    // Create a perspective projection matrix
    g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
      3.14 * 45 / 180, g_client.width / g_client.height, 0.1, 5000);
  }
  
  function resize() {
    setClientSize();
  }
  
  function init() {
    o3djs.util.makeClients(initStep2);
  }
  
  function initStep2(clientElements) {
    g_o3dElement = clientElements[0];
  
    var path = window.location.href;
    var index = path.lastIndexOf('/');
    path = path.substring(0, index + 1) + g_buildingAsset;
    var url = document.getElementById('url').value = path;
  
    g_o3d = g_o3dElement.o3d;
    g_math = o3djs.math;
    g_client = g_o3dElement.client;
  
    g_mainPack = g_client.createPack();
    g_mainPack.name = 'simple viewer pack';
  
    // Create the render graph for a view.
    g_viewInfo = o3djs.rendergraph.createBasicView(
        g_mainPack,
        g_client.root,
        g_client.renderGraphRoot,
        [1, 1, 1, 1]);
  
    g_lastRot = g_math.identity(3);
    g_thisRot = g_math.identity(3);
  
    var root = g_client.root;
  
    var target = [0, 0, 0];
    var eye = [0, 0, 5];
    var up = [0, 1, 0];
    g_viewInfo.drawContext.view = g_math.matrix4.lookAt(eye, target, up);
  
    setClientSize();
  
    var paramObject = g_mainPack.createObject('ParamObject');
    // Set the light at the same position as the camera to create a headlight
    // that illuminates the object straight on.
    g_lightPosParam = paramObject.createParam('lightWorldPos', 'ParamFloat3');
    g_lightPosParam.value = eye;
  
    doload();
  
    o3djs.event.addEventListener(g_o3dElement, 'mousedown', mouseDown);
    o3djs.event.addEventListener(g_o3dElement, 'mousemove', mouseMove);
    o3djs.event.addEventListener(g_o3dElement, 'mouseup', mouseUp);
  
    g_o3dElement.addEventListener('mouseover', dragOver, false);
    // for Firefox
    g_o3dElement.addEventListener('DOMMouseScroll', scrollMe, false);
    // for Safari
    g_o3dElement.onmousewheel = scrollMe;
  
    document.getElementById('toolpanel').onmousedown = selectTool;
  
    // Create our catalog list from the global list of items (g_items).
    html = [];
    for (var i = 0; i < g_items.length; i++) {
      html.push('<div class="catalogItem" onmousedown="startInsertDrag(\'',
          g_items[i].url, '\')" style="background-position:-', (i * 62) ,
          'px 0px" title="', g_items[i].title, '"></div>');
    }
    $('itemlist').innerHTML = html.join('');
  
    // Register a mouse-move event listener to the entire window so that we can
    // catch the click-and-drag events that originate from the list of items
    // and end up in the o3d element.
    document.addEventListener('mousemove', mouseMove, false);
  }
  
  function dragOver(e) {
    if (g_urlToInsert != null) {
      doload(g_urlToInsert);
    }
    g_urlToInsert = null;
  }
  
  function doload(opt_url) {
    var url;
    if (opt_url != null) {
      url = opt_url
    } else if ($('url')) {
      url = $('url').value;
    }
    g_root = loadFile(g_viewInfo.drawContext, url);
  }
  
  function startInsertDrag(url) {
    // If no absolute web path was passed, assume it's a local file
    // coming from the assets directory.
    if (url.indexOf('http') != 0) {
      var path = window.location.href;
      var index = path.lastIndexOf('/');
      g_urlToInsert = path.substring(0, index + 1) + g_assetPath + url;
    } else {
      g_urlToInsert = url;
    }
  }
  
  function cancelInsertDrag() {
    g_urlToInsert = null;
  }