SceneJS.createScene({
  type: "scene",
  id: "the-scene",
  canvasId: "theCanvas",
  loggingElementId: "theLoggingDiv",

  nodes: [
    {
      type: "lookAt",

      id: "the-lookat",
      
      eye : { x: 0.0, y: 2.0, z: 55 },
      look : { y:1.0 },
      up : { y: 1.0 },

      nodes: [
        {
          type: "camera",
          optics: {
            type: "perspective",
            fovy : 25.0,
            aspect : 1.47,
            near : 0.10,
            far : 300.0
          },

          nodes: [

            {
              type: "light",
              mode:          "dir",
              color:         { r: 1, g: 1, b: 1 },
              diffuse:        true,
              specular:        true,
              dir:          { x: 0.5, y: -1, z: 0.0 }
            },

            {
              type: "light",
              mode:          "dir",
              color:         { r: 1, g: 1, b: 1 },
              diffuse:        true,
              specular:        true,
              dir:          { x: 0.0, y: 0.0, z: -0.5 }
            },
              
            /*--------------------------------------------------------------------------------------
             * A billboard node stops the backdrop from rotating as we update the lookAt
             *------------------------------------------------------------------------------------*/

            {
              type: "billboard",

              nodes: [

                /*--------------------------------------------------------------------------------------
                 * A stationary node stops the backdrop from translating as we update the lookAt
                 *------------------------------------------------------------------------------------*/

                {
                  type: "stationary",

                  nodes: [
                    {
                      type: "texture",
                      layers: [
                        {
                          uri: "graphic-webgl-scenejs-examples-images-BrickWall.jpg",
                          applyTo:"baseColor",                          
                          blendMode: "multiply",

                          /* This will scale the UV coordinates of the
                           * geometry to map correctly to this texture
                           */
                          scale: {
                            x: 0.2,
                            y: 0.2
                          }
                        }
                      ],

                      nodes: [

                        /*---------------------------------------------------------------------
                         * Material properties for the backdrop geometry
                         *--------------------------------------------------------------------*/

                        {
                          type: "material",
                          baseColor: { r: .95, g: .95, b: .95 },
                          specularColor: { r: 0.0, g: 0.0, b: 0.0 },
                          emit:      0.2,
                          specular:    0.9,
                          shine:     3.0,

                          nodes: [

                            /*--------------------------------------------------------------
                             * Push the backdrop away along the view-space Z-axis
                             *------------------------------------------------------------*/

                            {
                              type:"translate",

                              z: -300,

                              nodes: [

                                /*------------------------------------------------------
                                 * Scale the backdrop up a bit
                                 *----------------------------------------------------*/

                                {
                                  type:"scale",
                                  x: 10,
                                  y: 10,
                                  z: 0.1,

                                  nodes: [

                                    /*---------------------------------------------
                                     * The backdrop geometry - note the 'colors'
                                     * array, which defines white at the top two
                                     * corners and dark gray at the bottom two.
                                     *--------------------------------------------*/
                                    {
                                      type: "geometry",

                                      primitive: "triangles",

                                      /* Vertex positions
                                       */
                                      positions : [
                                        5, 5, 5, -5, 5, 5,-5,-5, 5, 5,-5, 5
                                      ],

                                      /* Normal per vertex
                                       */
                                      normals : [
                                        0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1
                                      ],

                                      /* Vertex UV coordinates
                                       */
                                      uv : [
                                        5, 5, 0, 5, 0, 0, 5, 0

                                      ],

                                      /* Second optional layer of vertex UV coordinates
                                       */
                                      uv2 : [
                                      ],

                                      /* Vertex colors - top two points are white, bottom two are dark
                                       */
                                      colors : [
                                        1.0, 1.0, 1.0, 1.0,
                                        1.0, 1.0, 1.0, 1.0,
                                        0.1, 0.1, 0.1, 1.0,
                                        0.1, 0.1, 0.1, 1.0

                                      ],

                                      /* Indices describing two triangles to form the quad
                                       */
                                      indices : [
                                        0, 1, 2, 0, 2, 3
                                      ]
                                    }
                                  ]
                                }
                              ]
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            },

            {
              type: "material",
              emit: 0,
              baseColor:   { r: 0.6, g: 0.4, b: 0.8 },
              specularColor: { r: 0.9, g: 0.9, b: 0.9 },
              specular:    0.9,
              shine:     100.0,

              nodes: [
                {
                  type: "scale",
                  x:1.0,
                  y:1.0,
                  z:1.0,

                  nodes: [
                    {
                      type : "teapot"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
});


var canvas = document.getElementById("theCanvas");

var origin = null;
var speed = null;
canvas.addEventListener('mousedown', function(e) {
  origin = {x: e.clientX, y: e.clientY};
}, false);

canvas.addEventListener('mouseup', function(e) {
  origin = null;
  speed = null;
}, false);

canvas.addEventListener('mousemove', function(e) {
  if (origin)
    speed = {x: e.clientX - origin.x, y: e.clientY - origin.y};
}, false);

canvas.addEventListener('mousewheel', function(event) {
  var delta = 0;
  if (!event) event = window.event;
  if (event.wheelDelta) {
    delta = event.wheelDelta / 120;
    if (window.opera) delta = -delta;
  } else if (event.detail) {
    delta = -event.detail / 3;
  }
  if (delta) {
    if (delta < 0) {
      speed.y -= 0.2;
    } else {
      speed.y += 0.2;
    }
  }
  if (event.preventDefault)
    event.preventDefault();
  event.returnValue = false;
}, true);

var scene = SceneJS.scene("the-scene");

scene.start({
  fps: 60,
  idleFunc: function() {
    if (speed && speed.y)
      SceneJS.Message.sendMessage({
        command: "lookAt.move",
        target: "the-lookat",
        z: -speed.y / 100,
        ignoreY: true
      });

    if (speed && speed.x)
      SceneJS.Message.sendMessage({
        command: "lookAt.rotate",
        target: "the-lookat",
        angle: -speed.x / 420,
        ignoreY: true
      });
  }
});