var lastUpdate;
var container;
var camera, scene, renderer;
var uniforms;

function init() {
  // basic setup
  container = document.getElementById("container");
  camera = new THREE.Camera();
  camera.position.z = 1;
  scene = new THREE.Scene();
  var geometry = new THREE.PlaneBufferGeometry(2, 2);

  const map = document.querySelector("#video");
  map.oncanplay = function() {
    map.play();
  };
  const texture = new THREE.VideoTexture(map);
  texture.minFilter = THREE.LinearFilter;

  const map2 = document.querySelector("#video2");
  map2.oncanplay = function() {
    map2.play();
  };
  const texture2 = new THREE.VideoTexture(map2);
  texture2.minFilter = THREE.LinearFilter;

  // shader stuff
  uniforms = {
    intensity: { type: "f", value: 0.75 },
    dispFactor: { type: "f", value: 0.0 },
    direction: { type: "b", value: false },
    map1: { type: "t", value: texture },
    map2: { type: "t", value: texture2 }
  };
  var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.getElementById("vertexShader").textContent,
    fragmentShader: document.getElementById("fragmentShader").textContent
  });
  
  lastUpdate = new Date().getTime();
  // put it together for rendering
  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  container.appendChild(renderer.domElement);

  // event listeners
  onWindowResize();
  window.addEventListener("resize", onWindowResize, false);

  // gui
  this.GUI = new dat.GUI();
  this.GUI.add(uniforms.intensity, "value", 0, 2, 0.01).name("intensity");
  this.GUI.add(uniforms.dispFactor, "value", 0, 1, 0.01).name("transition");

  this.guiObj = {
    reverse: false
  };
  this.GUI.add(this.guiObj, "reverse")
    .listen()
    .onChange(() => {
      uniforms.direction.value = this.guiObj.reverse;
    });

  var self = this;
  var obj = {
    animate: () => {
      var t = 1;
      if (this._value == 1) {
        t = 0;
      }
      TweenMax.to(uniforms.dispFactor, 1.1, {
        value: t,
        ease: Expo.easeOut
      });

      if (this._value == 1) {
        this._value = 0;
      } else {
        this._value = 1;
      }
    }
  };
  this.GUI.add(obj, "animate");
}

// events
function onWindowResize(evt) {
  renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
  var currentTime = new Date().getTime();
  var timeSinceLastUpdate = currentTime - lastUpdate;
  lastUpdate = currentTime;

  requestAnimationFrame(animate);
  render(timeSinceLastUpdate);
}
function render(timeDelta) {
  renderer.render(scene, camera);
}

// boot
init();
animate();