/*
   This example demonstrates how to define billboards, in this case a simple quad sprite
   object that supports texturing.
  
   Shouts to Salomon Brys for this example - salomon.brys@gmail.com
  
   github.com/xeolabs/scenejs/wiki/billboard
  
   */
  
  SceneJS.createScene({
    type: "scene",
    id: "theScene",
    canvasId: "theCanvas",
    loggingElementId: "theLoggingDiv",
  
    nodes: [
  
      {
        type: "lookAt",
        eye : { x: 0, y: 1, z: 25 },
        look : { x: 0, y: 1, z: 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.0, g: 1.0, b: 1.0 },
                diffuse:        true,
                specular:        true,
                dir:          { x: 1.0, y: -0.5, z: -1.0 }
              },
              {
                type: "light",
                mode:          "dir",
                color:         { r: 1.0, g: 1.0, b: 1.0 },
                diffuse:        true,
                specular:        true,
                dir:          { x: 1.0, y: -1.0, z: -1.0 }
              },
              {
                type: "rotate",
                id: "yaw",
                y: 1,
                nodes: [
                  {
                    type: "rotate",
                    id: "pitch",
                    x: 1,
                    nodes: [
                      {
                        type: "translate",
                        x: 2,
                        y: 0,
                        z: 0,
                        nodes: [
                          {
                            type: "texture",
                            layers: [
                              {
                                uri: "@eye.gif",
                                flipY: false
                              }
                            ],
                            nodes: [
                              {
                                type: "sphere"
                              }
                            ]
                          },
                          {
                            type: "translate",
                            x: 1,
                            y: 4,
                            z: 0,
                            nodes: [
                              {
                                type: "billboard",
                                nodes: [
                                  {
                                    type: "texture",
                                    layers: [
                                      {
                                        uri: "@eye.gif" ,
                                        blendMode: "add"
                                      }
                                    ],
                                    nodes: [
                                      {
                                        type: "quad",
                                        xSize: 1.2,
                                        ySize: 1.2
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      },
                      {
                        type: "translate",
                        x: -3,
                        y: 0,
                        z: -1,
                        nodes: [
                          {
                            type: "billboard",
                            nodes: [
                              {
                                type: "texture",
                                layers: [
                                  {
                                    uri: "@eye.gif" ,
                                    blendMode: "add"
                                  }
                                ],
                                nodes: [
                                  {
                                    type: "quad",
                                    xSize: 1.2,
                                    ySize: 1.2
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  });
  
  /*----------------------------------------------------------------------
   * Scene rendering loop and mouse handler stuff follows
   *---------------------------------------------------------------------*/
  
  var scene = SceneJS.scene("theScene");
  
  var yaw = 0;
  var pitch = 0;
  var lastX;
  var lastY;
  var dragging = false;
  
  function mouseDown(event) {
    lastX = event.clientX;
    lastY = event.clientY;
    dragging = true;
  }
  
  function mouseUp() {
    dragging = false;
  }
  
  /* On a mouse drag, we'll re-render the scene, passing in
   * incremented angles in each time.
   */
  function mouseMove(event) {
    if (dragging) {
      yaw += (event.clientX - lastX) * 0.5;
      pitch += (event.clientY - lastY) * -0.5;
  
      lastX = event.clientX;
      lastY = event.clientY;
    }
  }
  
  var canvas = document.getElementById("theCanvas");
  
  canvas.addEventListener('mousedown', mouseDown, true);
  canvas.addEventListener('mousemove', mouseMove, true);
  canvas.addEventListener('mouseup', mouseUp, true);
  
  scene.start({
  
    /* It's more efficient to update nodes within the idle func
     * rather than as each mouse event occurs. That way SceneJS
     * doesnt have to buffer lots of redundant updates to process. 
     */
    idleFunc: function() {
      scene.findNode("pitch").set("angle", pitch);
      scene.findNode("yaw").set("angle", yaw);
    }
  });