/**
 * Bump mapping example
 *
 * More info:
 *
 * https://github.com/xeolabs/scenejs/wiki/texture
 * 
 */

/*----------------------------------------------------------------------
 * Scene graph definition
 *---------------------------------------------------------------------*/

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

  nodes: [
    {
      type: "lookAt",
      eye : { x: 0.0, y: 0.0, z: -10},
      look : { x : 0.0, y : 0.0, z : 0 },
      up : { x: 0.0, y: 1.0, z: 0.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 }
            },

            /* Material properties
             */
            {
              type: "material",
              baseColor:   { r: 1.0, g: 1.0, b: 1.0 },
              specularColor: { r: 1.0, g: 1.0, b: 1.0 },
              specular:    0.9,
              shine:     6.0,

              nodes: [
                {
                  type: "texture",

                  /* A texture can have multiple layers, each applying an
                   * image to a different material or geometry component.
                   */

                  layers: [

                    /* Our first texture layer is applied to the baseColor of our material.
                     */
                    {
                      uri:"graphic-webgl-scenejs-examples-web-images-pattern.jpg",
                      minFilter: "linear",
                      magFilter: "linear",
                      wrapS: "repeat",
                      wrapT: "repeat",
                      isDepth: false,
                      depthMode:"luminance",
                      depthCompareMode: "compareRToTexture",
                      depthCompareFunc: "lequal",
                      flipY: false,
                      width: 1,
                      height: 1,
                      internalFormat:"lequal",
                      sourceFormat:"alpha",
                      sourceType: "unsignedByte",
                      applyTo:"baseColor",
                      blendMode: "multiply"
                    },

                    /* Our second layer texture is the bump map, and is applied to
                     * our geometry node's normal vectors.
                     */
                    {
                      uri:"graphic-webgl-scenejs-examples-web-images-normal-map.jpg",
                      minFilter: "linear",
                      magFilter: "linear",
                      wrapS: "repeat",
                      wrapT: "repeat",
                      isDepth: false,
                      depthMode:"luminance",
                      depthCompareMode: "compareRToTexture",
                      depthCompareFunc: "lequal",
                      flipY: false,
                      width: 1,
                      height: 1,
                      internalFormat:"lequal",
                      sourceFormat:"alpha",
                      sourceType: "unsignedByte",
                      applyTo:"normals",
                      blendMode: "multiply"
                    }

                  ],

                  nodes: [
                    {
                      type: "rotate",
                      id: "pitch",
                      angle: -30.0,
                      x : 1.0,

                      nodes: [
                        {
                          type: "rotate",
                          id: "yaw",
                          angle: -30.0,
                          y : 1.0,

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

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

var yaw = -30;
var pitch = -30;
var lastX;
var lastY;
var dragging = false;

/* For texture animation
 */
var timeLast = (new Date()).getTime();

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("the-scene");

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) {
    yaw += (posX - lastX) * 0.5;
    pitch += (posY - lastY) * -0.5;

    scene.findNode("pitch").set("angle", pitch);
    scene.findNode("yaw").set("angle", yaw);

    lastX = posX;
    lastY = posY;
  }
}

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

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);

/* Start the scene - more info: http://scenejs.wikispaces.com/scene#Starting
 */
scene.start();