var renderer, scene, camera, cube, texture, canvas, ctx, video;

var ww = window.innerWidth,
	wh = window.innerHeight;

function init(){

	renderer = new THREE.WebGLRenderer({canvas : document.getElementById('scene')});
	renderer.setSize(ww,wh);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(50,ww/wh, 0.1, 10000 );
	camera.position.set(0,0,500);
	scene.add(camera);
  
  //Select the video element in the DOM
  video = document.querySelector("video");
  //Mute the sound of the video
  video.muted = true;
  //Loop the video to play it infinitely
  video.loop = true;
  video.crossOrigin = 'anonymous';
  //Add event listener to check when the video is enough loaded to be played
  video.addEventListener("canplay", onVideoReady);
  //Hack for mobile & tablet
  renderer.domElement.addEventListener("click", function(){
    video.play();
  });
}

var onVideoReady = function(){
    //Start the video
    video.play();
    //Create a canvas to draw the video on it
    canvas = document.createElement("canvas");
    //Get the context of the canvas
    ctx = canvas.getContext("2d");
    //Set the dimension of the canvas --> Should always be power of 2 (256,512,1024, etc)
    canvas.width = 512;
    canvas.height = 512;
  document.body.appendChild(canvas);
  canvas.style.position="absolute";
  canvas.style.top = "0px";
  canvas.style.right = "0px";
  canvas.style.width = "50px";
    
    //Create a plane in our scene
    createPlane();

    //Render the scene and start request animation frame
    render();
    
    //Remove the event listener on 'canplay' event
    video.removeEventListener("canplay", onVideoReady);
};
var createPlane = function(){

  //Create a texture from the canvas
  texture = new THREE.CanvasTexture(canvas);
  
	//Create a plane geometry
	var geometry = new THREE.BoxBufferGeometry(150,150,150);
  //Create a Basic material with the texture as map
	var material = new THREE.MeshBasicMaterial({
    map : texture
  });
  //Create a mesh from the geometry and the material
	cube = new THREE.Mesh(geometry, material);

	//Add the plane in the scene
	scene.add(cube);
};


var render = function () {
	requestAnimationFrame(render);
  
  //Draw the video in the canvas
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  //Warn ThreeJs that the texture should be updated
  texture.needsUpdate = true;
  
  //Rotate the cube
  cube.rotation.x += 0.004;
  cube.rotation.y += 0.004;
  cube.rotation.z += 0.004;

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

init();