/*
   Custom vertex displacement shader example
  
   Read through the comments inline for more information.
  
   Lindsay S. Kay,
   lindsay.kay@xeolabs.com
  
   http://scenejs.wikispaces.com/shader
  
   */
  
  SceneJS.createScene({
  
    type: "scene",
    id: "theScene",
    canvasId: "theCanvas",
    loggingElementId: "theLoggingDiv",
  
    nodes: [
  
      /*----------------------------------------------------------------------
       * View and projection transforms
       *--------------------------------------------------------------------*/
      {
        type: "lookAt",
        eye : { x: 0.0, y: 10.0, z: 15 },
        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: [
  
              /*----------------------------------------------------------------------
               * Lighting
               *--------------------------------------------------------------------*/
  
              {
                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: 0.8 },
                diffuse:        true,
                specular:        false,
                dir:          { x: 0.0, y: -0.5, z: -1.0 }
              },
  
              /*----------------------------------------------------------------------
               * Modelling transforms
               *--------------------------------------------------------------------*/
  
              {
                type: "rotate",
                id: "pitch",
                angle: 0.0,
                x : 1.0,
  
                nodes: [
                  {
                    type: "rotate",
                    id: "yaw",
                    angle: 0.0,
                    y : 1.0,
  
                    nodes: [
  
                      /*----------------------------------------------------------------------
                       * Material properties
                       *--------------------------------------------------------------------*/
  
                      {
                        type: "material",
                        emit: 0,
                        baseColor:   { r: 0.3, g: 0.3, b: 0.6 },
                        specularColor: { r: 0.9, g: 0.9, b: 0.9 },
                        specular:    0.7,
                        shine:     10.0,
  
                        nodes: [
  
                          /*----------------------------------------------------------------------
                           * Our shader node defines a GLSL fragment containing a "time" uniform
                           * and a function that wobbles a 3D position as a function of that.
                           *
                           * Then then binds the function to the "modelPos" hook that SceneJS
                           * provides within its automatically-generated vertex shader.
                           *
                           * Within the "idleFunc" callback on our scene render loop (down below),
                           * we'll then update the "time" uniform to drive the wobbling.
                           *--------------------------------------------------------------------*/
  
                          {
                            type: "shader",
                            id: "myShader",
  
                            shaders: [
  
                              /* Vertex shader
                               */
                              {
                                stage: "vertex",
  
                                /* A GLSL snippet containing a custom function.
                                 *
                                 * The snippet can be given as either a string or an array
                                 * of strings.
                                 */
                                code: [
                                  "uniform float time;",
  
                                  "vec4 myModelPosFunc(vec4 pos){",
                                  "  pos.x+=sin(pos.x*5.0+time+10.0)*0.1;",
                                  "  pos.y+=sin(pos.y*5.0+time+10.0)*0.1;",
                                  "  pos.z+=sin(pos.z*5.0+time+10.0)*0.1;",
                                  "  return pos;",
                                  "}"],
  
                                /* Bind our custom function to a SceneJS vertex shader hook
                                 */
                                hooks: {
                                  modelPos: "myModelPosFunc"
                                }
                              },
  
                              /* Fragment shader
                               */
                              {
                                stage: "fragment",
  
                                code: [
                                  "uniform float time; ",
  
                                  "vec4 myPixelColorFunc(vec4 color){",
                                  "  color.r=color.r+sin(time)*0.3;",
                                  "  color.g=color.g+sin(time+0.3)*0.3;",
                                  "  color.b=color.b+sin(time+0.6)*0.3;",
                                  "  color.a=color.a+sin(time);",
                                  "  return color;",
                                  "}"],
  
                                /* Bind our custom function to a SceneJS vertex shader hook
                                 */
                                hooks: {
                                  pixelColor:   "myPixelColorFunc"
                                }
                              }
                            ],
  
                            /* Expose the time uniform as a parameter which we'll set
                             * on this shader node within the render loop.
                             *
                             * We can also set shader parameters using a child shaderParams
                             * node - see other custom shader examples for how.
                             *
                             */
                            params: {
                              time: 0.0
                            },
  
                            nodes: [
                              {
                                type : "teapot"
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  });
  
  /*----------------------------------------------------------------------
   * Scene rendering loop and mouse handler stuff follows
   *---------------------------------------------------------------------*/
  
  var scene = SceneJS.scene("theScene");
  var pitchRotate = scene.findNode("pitch");
  var yawRotate = scene.findNode("yaw");
  var shader = scene.findNode("myShader");
  
  var yaw = 0;
  var pitch = 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;
  }
  
  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);
  }
  
  /* On a mouse/touch drag, we'll re-render the scene, passing in
   * incremented angles in each time.
   */
  function actionMove(posX, posY) {
    if (dragging) {
      yaw += (posX - lastX) * 0.5;
      pitch += (posY - lastY) * 0.5;
  
      var scene = SceneJS.scene("theScene");
  
      yawRotate.set("angle", yaw);
      pitchRotate.set("angle", pitch);
  
      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);
  
  var time = 0;
  
  scene.start({
    idleFunc: function() {
      shader.set("params", {
        time: time 
      });
      time += 0.1;
    }
  });