/*
   Introductory SceneJS scene which demonstrates the use of layers with transparency blending.
  
   In this example we have three nested cubes - an inner opaque blue cube, enclosed by a
   transparent red cube, enclosed by an outer transparent green cube.
  
   When SceneJS blends the cubes with (SRC_ALPHA, ONE_MINUS_SRC_ALPHA), we allocate "layers" to
   the cubes to ensure that they are rendered in the order neccessary for a correct transparency effect.
  
   On the transparent cubes we cull backfaces because we can't control the render order within a geometry's faces.
   We don't want front faces rendering before back faces, which would cause the back faces to be rejected by the
   depth buffer and deny the opportunity to blend the faces - easy fix is just not to render the backfaces.
  
   More info on the layer node:
   github.com/xeolabs/scenejs/wiki/layer
  
   More info on transparency sorting: 
   http://www.opengl.org/wiki/Transparency_Sorting
  
   */
  SceneJS.createScene({
    type: "scene",
    id: "theScene",
    canvasId: "theCanvas",
    loggingElementId: "theLoggingDiv",
  
    nodes: [
      {
        type: "lookAt",
        eye : { x: 0.0, y: 0.0, z: 35.0},
        look : { x : .0, y : 0.0, z : 0 },
        up : { x: 0.0, y: 1.0, z: 0.0 },
  
        nodes: [
          {
            type: "camera",
            optics: {
              type: "perspective",
              fovy : 65.0,
              aspect : 1.47,
              near : 0.10,
              far : 300.0
            },
  
            nodes: [
  
              /*--------------------------------------------------------------------------------------
               * Light sources which will illuminate the cubes, because they are rendered next
               * in sequence.
               *------------------------------------------------------------------------------------*/
  
              {
                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: "light",
                mode:          "dir",
                color:         { r: 1.0, g: 1.0, b: 0.5 },
                diffuse:        true,
                specular:        true,
                dir:          { x: -1.0, y: 0.0, z: -0.7 }
              },
  
              {
                type: "rotate",
                id: "pitch",
                angle: -30.0,
                x : 1.0,
  
                nodes: [
                  {
                    type: "rotate",
                    id: "yaw",
                    angle: -30.0,
                    y : 1.0,
                    nodes: [
  
                      /*------------------------------------------------------------------------------
                       *
                       * LAYER -1 - blended first
                       *
                       * Inner opaque blue cube
                       *----------------------------------------------------------------------------*/
                      {
                        type: "layer",
                        priority: -1,
  
                        nodes: [
                          {
                            type: "material",
                            baseColor:   { r: 0.0, g: 0.0, b: 1.0 },
                            specularColor: { r: 1.0, g: 1.0, b: 1.0 },
                            specular:    0.3,
                            shine:     6.0,
  
                            nodes: [
                              {
                                type:"scale",
                                x: 3,
                                y: 3,
                                z: 3,
  
                                nodes: [
                                  {
                                    type: "cube"
                                  }
  
                                ]
                              }
                            ]
                          }
                        ]
                      },
  
                      /*------------------------------------------------------------------------------
                       *
                       * LAYER 0 (default) - blended next
                       *
                       * Middle transparent red cube
                       *
                       * See how we cull backfaces because we can't control the order in which faces
                       * render. We don't want front faces rendering before back faces, which would
                       * cause the back faces to be rejected by the depth buffer and deny the
                       * opportunity to blend the faces - easy fix is just to not render the backfaces.
                       *----------------------------------------------------------------------------*/
  
                      {
                        type: "flags",
  
                        flags: {
                          transparent: true,
                          backfaces: false  // Hide backfaces
                        },
  
                        nodes: [
                          {
                            type: "material",
                            baseColor:   { r: 1.0, g: 0.0, b: 0.0 },
                            specularColor: { r: 1.0, g: 1.0, b: 1.0 },
                            specular:    0.3,
                            shine:     6.0,
                            alpha:     0.2,
  
                            nodes: [
                              {
                                type:"scale",
                                x: 6,
                                y: 6,
                                z: 6,
  
                                nodes: [
                                  {
                                    type: "cube"
                                  }
  
                                ]
                              }
                            ]
                          },
  
                          /*------------------------------------------------------------------------------
                           *
                           * LAYER 1 - blended last
                           *
                           * Outer transparent green cube
                           *----------------------------------------------------------------------------*/
  
                          {
                            type: "layer",
                            priority: 1,
  
                            nodes: [
  
                              {
                                type: "material",
                                baseColor:   { r: 0.0, g: 1.0, b: 0.0 },
                                specularColor: { r: 1.0, g: 1.0, b: 1.0 },
                                specular:    0.3,
                                shine:     6.0,
                                alpha:     0.2,
  
                                nodes: [
                                  {
                                    type:"scale",
                                    x: 9,
                                    y: 9,
                                    z: 9,
  
                                    nodes: [
                                      {
                                        type: "cube"
                                      }
  
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  });
  
  /*-------------------------------------------------------------------------------------------
   * Cause the inner cube to render first, then the middle cube in the default layer,
   * then the outer cube. This ensures that when SceneJS blends the cubes with
   * (SRC_ALPHA, ONE_MINUS_SRC_ALPHA), they will be are blended into each other
   * in the order neccessary for a correct transparency effect.
   *-------------------------------------------------------------------------------------------*/
  
  //SceneJS.scene("theScene").set("layers", {
  //  "inner-layer": -1, // Higher priority than default layer's 0 priority
  //  "outer-layer": 1 // Lower priority than default layer's 0 priority
  //});
  
  /*----------------------------------------------------------------------
   * Scene rendering loop and mouse handler stuff
   *---------------------------------------------------------------------*/
  
  var yaw = -30;
  var pitch = -30;
  var lastX;
  var lastY;
  var dragging = false;
  
  var texAngle = 0.0;
  var texScale = 1.0;
  
  /* For texture animation
   */
  var timeLast = (new Date()).getTime();
  
  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;
  }
  
  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;
      lastX = posX;
      lastY = posY;
  
      var scene = SceneJS.scene("theScene");
      scene.findNode("pitch").set("angle", pitch);
      scene.findNode("yaw").set("angle", yaw);
    }
  }
  
  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.scene("theScene").start();