(function() {
  'use strict';

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

  /*** gfx setup *****/

  //setup canvas, renderer
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});


  //setup camera - camera defaults to looking down -Z axis with +Y up
  const fov = 90.1;         //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 one light
  const light_color = 0xFFFFFF;
  const light_intensity = 1;
  const light = new THREE.DirectionalLight(light_color, light_intensity);
  light.position.set(-1, 2, 3);
  scene.add(light);


  //setup objects
  const objectPool_count = 500;
  const objectPool = [];

  const plane_dim = .2;
  const plane_geom = new THREE.PlaneGeometry(plane_dim, plane_dim);

  const objOffset = .01;

  for (let i = 0; i < objectPool_count; i++) {
    const plane_mat = new THREE.MeshPhongMaterial({
      color: Math.floor(Math.random() * 16777216)
    });

    const plane_mesh = new THREE.Mesh(plane_geom, plane_mat);
    objectPool.push(plane_mesh);
    objectPool[i].position.x = objOffset * i;
    objectPool[i].position.y = -objOffset * i;
    objectPool[i].visible = false;

    scene.add(objectPool[i]);
  }


  //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) {
    time *=0.001;     //convert time to seconds

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

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }


  //set how many objects should be visible
  function setObjectVisibility(num) {
    for (let i = 0; i < num; i++) {
      objectPool[i].visible = true;
    }

    for (let j = num; j < objectPool.length; j++) {
      objectPool[j].visible = false;
    }
  }


  /*** handle input *****/

  function bindInput() {
    document.querySelector('.js-input').addEventListener('keyup', function(e) {
      setObjectVisibility(sanitiseInput(this.value));
    });
  }

  function sanitiseInput(strInput) {
    var numInput = parseInt(strInput);

    if (isNaN(numInput)) {
      return 0;
    }

    if (numInput > objectPool_count) {
      return objectPool_count;
    }

    if (numInput < 0) {
      return 0;
    }

    return numInput;
  }

  /*** main *****/

  setFOV();
  bindInput();
  requestAnimationFrame(render);


})();