/**** extra math functions *****/

Math.degrees = function(radians) {
  return radians * 180 / Math.PI;
};


/**** main *****/

(function() {
  'use strict';

  /**** setup *****/

  //setup canvas, renderer
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});     //you can add antialias: true


  //setup camera - camera defaults to looking down -Z axis with +Y up
  const fov = 90;         //in degs, but most Three.js angles take rads
  const aspect = 1;       //canvas default = 300/150
  const near = 0.1;
  const far = 5;
  const cameraDistance = 2;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = cameraDistance;


  //setup scene
  const scene = new THREE.Scene();


  //setup plane mesh
  const plane_dim = 1.5;
  const plane_geom = new THREE.PlaneGeometry(plane_dim, plane_dim);

  //you need to push all three- can't just push one or two...
  plane_geom.faces[0].vertexColors.push( new THREE.Color(0x00ffff) );
  plane_geom.faces[0].vertexColors.push( new THREE.Color(0x00ff00) );
  plane_geom.faces[0].vertexColors.push( new THREE.Color(0x0000ff) );

  //you also can't really set the colour of a material, and vertex colours at the same time, or else the vertex colours mostly get overridden
  plane_geom.faces[1].vertexColors.push( new THREE.Color(0x00ffff) );
  plane_geom.faces[1].vertexColors.push( new THREE.Color(0x00ff00) );
  plane_geom.faces[1].vertexColors.push( new THREE.Color(0x0000ff) );

  const plane_mat = new THREE.MeshPhongMaterial({
    side: THREE.DoubleSide,
    vertexColors: THREE.VertexColors,
    shininess: 60
  });

  const plane_mesh = new THREE.Mesh(plane_geom, plane_mat);
  scene.add(plane_mesh);
  plane_mesh.rotation.x = 5.1;
  plane_mesh.rotation.z = .3;


  //setup a directional light
  const light_color = 0xFFFFFF;
  const light_intensity = 1;
  const light = new THREE.DirectionalLight(light_color, light_intensity);
  light.position.set(0, 2, 2);
  scene.add(light);

  const lightAmb = new THREE.AmbientLight( 0x404040 ); // soft white light
  scene.add( lightAmb );


  //vars to handle changes during rendering
  const plane_mesh_scaleInc = .01;
  const plane_mesh_scaleMax = 2;
  let plane_mesh_redChannel = 0;            //this is to do a vertex colour changing as rendering takes place. Will inc by 1 per frame


  //this func will return a hex value for the vertex colour. Checks bounds also.
  function incVertexColour() {
    plane_mesh_redChannel += .01;

    if (plane_mesh_redChannel > 1) {
      plane_mesh_redChannel = 0;
    }

    return plane_mesh_redChannel;

  }


  /**** rendering functions *****/

  //rendering
  function resizeRendererToDisplaySize() {
    const canvas = renderer.domElement;
    const pixelRatio = window.devicePixelRatio;
    const width = canvas.clientWidth * pixelRatio | 0;       //CSS width of canvas
    const height = canvas.clientHeight * pixelRatio | 0;     //CSS height of canvas
    const needResize = canvas.width !== width || canvas.height !== height;      //drawingbuffer width/height of canvas

    if (needResize) {
      //changes the canvas size
      renderer.setSize(width, height, false);
    }

    return needResize;
  }


  function setFOV() {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;

    if (camera.aspect < 1) {
      const vFOV = 2 * Math.atan( ( canvas.clientHeight / canvas.clientWidth ) / cameraDistance );
      camera.fov = Math.degrees(vFOV);
    } else {
      //FOV we want is approx 53.2 degrees
      const vFOV = 2 * Math.atan( ( 1 ) / cameraDistance );
      camera.fov = Math.degrees(vFOV);
    }

    camera.updateProjectionMatrix();
  }


  //the time var is automatically passed in (can be called anything BTW)
  function render(time) {
    plane_mesh.scale.x += plane_mesh_scaleInc;

    const newVertexColor = incVertexColour();

    plane_geom.colorsNeedUpdate = true;
    plane_geom.faces[0].vertexColors[0].setRGB(newVertexColor, 0, 0);
    plane_geom.faces[0].vertexColors[1].setRGB(0, newVertexColor, 0);
    plane_geom.faces[0].vertexColors[2].setRGB(0, 0, newVertexColor);

    if(plane_mesh.scale.x > plane_mesh_scaleMax) {
      plane_mesh.scale.x = 1;
    }

    if (resizeRendererToDisplaySize()) {
      setFOV();
    }

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  setFOV();
  requestAnimationFrame(render);

})();