// This is necessary for the <canvas> to remain pure. More here: https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/
THREE.ImageUtils.crossOrigin = "";

// Allow the canvas to hit the edges of the screen with no scrollbar
document.body.style.margin = 0;
document.body.style.overflow = "hidden";

// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer;

init();
animate();

// Sets up the scene.
function init() {

  // Create the scene and set the scene size.
  scene = new THREE.Scene();
  var WIDTH = window.innerWidth,
      HEIGHT = window.innerHeight;

  // Create a renderer and add it to the DOM.
  renderer = new THREE.WebGLRenderer({antialias:true});
  renderer.setSize(WIDTH, HEIGHT);
  document.body.appendChild(renderer.domElement);

  // Create a camera, zoom it out from the model a bit, and add it to the scene.
  camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
  camera.position.y = 1;
  scene.add(camera);
  
  // Create an event listener that resizes the renderer with the browser window.
  window.addEventListener('resize', function() {
    var WIDTH = window.innerWidth,
        HEIGHT = window.innerHeight;
    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
  });

  // Set the background color of the scene.
  renderer.setClearColorHex(0x333F47, 1);

  // Create some lights and add them to the scene.
  pointLight = new THREE.PointLight( 0x3300aa );
  pointLight.position.x = -100;
  pointLight.position.y = -1;
  pointLight.position.z = -50;
  pointLight.distance = 2000;
  pointLight.intensity = 1.4;
  scene.add( pointLight );

  directionalLight = new THREE.DirectionalLight( 0xffaa00 );
  directionalLight.position.set( 1, 10, 50 ).normalize();
  directionalLight.intensity = 1.4;
  scene.add( directionalLight );

  // Create a material using texture maps
  // Note: These are commercial textures from http://gametextures.com/
  diffuse = THREE.ImageUtils.loadTexture( "https://s3-us-west-2.amazonaws.com/s.cdpn.io/25480/Misc_WoodBarrelOldMold_2k_d.jpg" );
  specular = THREE.ImageUtils.loadTexture( "https://s3-us-west-2.amazonaws.com/s.cdpn.io/25480/Misc_WoodBarrelOldMold_2k_s.jpg" );
  normal = THREE.ImageUtils.loadTexture( "https://s3-us-west-2.amazonaws.com/s.cdpn.io/25480/Misc_WoodBarrelOldMold_2k_n.jpg" );

  var material = new THREE.MeshPhongMaterial({
    map: diffuse,
    specular: 0xffffff,
    specularMap: specular,
    shininess: 10,
    normalMap: normal
  });

  // Load in the mesh and add it to the scene.
  var loader = new THREE.JSONLoader();
  loader.load(
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/25480/barrel.js",function(geometry){
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  });

}


// Renders the scene and updates the render as needed.
function animate() {

  // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
  requestAnimationFrame(animate);

  // Rotate the camera and lights every update.
  var timer = Date.now() * 0.00025;
  camera.position.x = Math.cos( timer ) * 2;
  camera.position.z = Math.sin( timer ) * 1;
  directionalLight.position.y = Math.sin( timer ) * 1;
  camera.lookAt( new THREE.Vector3( 0, 0.4, 0 ) );

  // Render the scene.
  renderer.render(scene, camera);

}