/*
 A teapot with an orbiting directional light source that you can rotate with the mouse.

 The white dot is not the actual position of the light - it just indicates its direction
 relative to the teapot.

 Lindsay S. Kay,
 lindsay.kay@xeolabs.com

 https://github.com/xeolabs/scenejs/wiki/light

 */

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

  nodes: [
    {
      type: "lookAt",
      eye : { x: 0.0, y: 10.0, z: 35 },
      look : { y:1.0 },
      up : { y: 1.0 },

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

          nodes: [

            /*---------------------------------------------------------------------------------
             * Our animated light source is rotated using a Quaternion node which
             * receives rotation updates through configs injected into the scene when
             * it is rendered
             * -------------------------------------------------------------------------------*/

            {
              type: "quaternion",
              id: "myQuaternion",

              nodes: [
                {
                  type: "light",

                  mode: "dir",

                  /* Colour of our light
                   */
                  color: { r: 1.0, g: 1.0, b: 0.0 },

                  /* Our light will contribute to both the quantities of
                   * specular and diffuse light that will hit our teapot.
                   */
                  diffuse: true,
                  specular: true,

                  /* The directional light's direction, a vector from the
                   * origin of this coordinate system (which is in this
                   * case the view coordinate system, since our light is
                   * not within any no modelling transform nodes).
                   *
                   * The direction vector is calculated by mouse handlers and
                   * injected into the scene's render method.
                   */
                  dir: { x: 0, y: 0, z: -1.0 }

                  /* Note the absence of attenuation properties;
                   * unlike a point light, a directional light has no
                   * position, and is therefore not subject to attenuation
                   * since it is at an infinite distance.
                   */
                },

                /*----------------------------------------------------------
                 * A sphere that marks the light's direction - not the focus
                 * of this example
                 * -------------------------------------------------------*/
                {
                  type: "translate",
                  z: 10 ,
                  nodes: [
                    {
                      type: "material",
                      baseColor:   { r: .6, g: .6, b: 0.6 },
                      specularColor: { r: 0.9, g: 0.9, b: 0.9 },
                      emit: 0.5,
                      specular:    0.9,
                      shine:     6.0,
                      nodes: [
                        {
                          type: "scale",
                          x: 0.5,
                          y: 0.5,
                          z: 0.5,
                          nodes: [
                            {
                              type: "sphere"
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            },

            /*--------------------------------------------------------------------------
             * Teapot, rotated and scaled into position within model-space, coloured
             * with some material properties
             * ------------------------------------------------------------------------*/

            {
              type: "rotate",
              angle: -20,
              x : 1.0,
              nodes: [

                {
                  type: "rotate",
                  angle: 30.0,
                  y : 1.0,

                  nodes: [

                    {
                      type: "scale",
                      x: 2,
                      y: 2,
                      z: 2,

                      nodes: [
                        {
                          type: "material",
                          baseColor:   { r: 0.9, g: 0.2, b: 0.2 },
                          specularColor: { r: 0.9, g: 0.9, b: 0.2 },
                          emit:      0.0,
                          specular:    0.9,
                          shine:     6.0,

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

/*---------------------------------------------------------------------------------------------------------------------
 * Scene rendering loop and mouse handler stuff
 *--------------------------------------------------------------------------------------------------------------------*/

var rotx = 0;
var roty = 0;
var lastX;
var lastY;
var dragging = false;

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

function mouseDown(event) {
  lastX = event.clientX;
  lastY = event.clientY;
  dragging = true;
}

function touchStart(event) {
  lastX = event.targetTouches[0].clientX;
  lastY = event.targetTouches[0].clientY;
  dragging = true;
}

function mouseUp() {
  dragging = false;
}

function touchEnd() {
  dragging = false;
}

var scene = SceneJS.scene("theScene");

/* On a mouse or touch drag, we'll re-render the scene, passing in
 * incremented angles in each time.
 */
function mouseMove(event) {
  var posX = event.clientX;
  var posY = event.clientY;
  actionMove(posX,posY);
}

function touchMove(event) {
  var posX = event.targetTouches[0].clientX;
  var posY = event.targetTouches[0].clientY;
  actionMove(posX,posY);
}

function actionMove(posX, posY) {
  if (dragging) {

    roty = posX - lastX;
    rotx = posY - lastY;

    if (Math.abs(roty) > Math.abs(rotx)) {

      scene.findNode("myQuaternion").add({
        rotation:{
          y: 1,
          angle: roty
        }
      });

    } else {

      scene.findNode("myQuaternion").add({
        rotation:{
          x: 1,
          angle: rotx
        }
      });
    }
    lastX = posX;
    lastY = posY;
  }
}

canvas.addEventListener('mousedown', mouseDown, true);
canvas.addEventListener('mousemove', mouseMove, true);
canvas.addEventListener('mouseup', mouseUp, true);
canvas.addEventListener('touchstart', touchStart, true);
canvas.addEventListener('touchmove', touchMove, true);
canvas.addEventListener('touchend', touchEnd, true);

SceneJS.bind("error", function(e) {
  alert(e.exception.message);
});

scene.start();