console.clear();

var gui, scene, camera, renderer, orbit, lights, mesh, bones, skeletonHelper;

var state = {

  animateBones : true

};

function initScene () {

  //gui = new dat.GUI();
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
  camera.position.z = 30;
  camera.position.y = 30;

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setClearColor( 0x000000, 1 );
  document.body.appendChild( renderer.domElement );

  orbit = new THREE.OrbitControls( camera, renderer.domElement );
  orbit.enableZoom = false;

  lights = [];
  lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
  lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
  lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );

  lights[ 0 ].position.set( 0, 200, 0 );
  lights[ 1 ].position.set( 100, 200, 100 );
  lights[ 2 ].position.set( - 100, - 200, - 100 );

  scene.add( lights[ 0 ] );
  scene.add( lights[ 1 ] );
  scene.add( lights[ 2 ] );

  window.addEventListener( 'resize', function () {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
  }, false );

  initHairs();
}

function createGeometry ( sizing ) {

  var geometry = new THREE.CylinderGeometry(
    0,                       // radiusTop
    3,                       // radiusBottom
    sizing.height,           // height
    8,                       // radiusSegments
    sizing.segmentCount * 3, // heightSegments
    true                     // openEnded
  );

  for ( var i = 0; i < geometry.vertices.length; i ++ ) {

    var vertex = geometry.vertices[ i ];
    var y = ( vertex.y + sizing.halfHeight );

    var skinIndex = Math.floor( y / sizing.segmentHeight );
    var skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;

    geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );
    geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );

  }

  return geometry;

};

function createBones ( sizing ) {

  bones = [];

  var prevBone = new THREE.Bone();
  bones.push( prevBone );
  prevBone.position.y = - sizing.halfHeight;

  for ( var i = 0; i < sizing.segmentCount; i ++ ) {

    var bone = new THREE.Bone();
    bone.position.y = sizing.segmentHeight;
    bones.push( bone );
    prevBone.add( bone );
    prevBone = bone;

  }

  return bones;

};

function createMesh ( geometry, bones ) {

  var material = new THREE.MeshPhongMaterial( {
    skinning : true,
    color: 0x156289,
    emissive: 0x072534,
    side: THREE.DoubleSide,
    shading: THREE.FlatShading
  } );

  var mesh = new THREE.SkinnedMesh( geometry,	material );
  var skeleton = new THREE.Skeleton( bones );

  mesh.add( bones[ 0 ] );

  mesh.bind( skeleton );

  skeletonHelper = new THREE.SkeletonHelper( mesh );
  skeletonHelper.material.linewidth = 2;
  mesh.add( skeletonHelper );

  return mesh;

};

function Hair() {

  THREE.Object3D.apply(this);

  this.height = this.segmentHeight * this.segmentCount;
  this.halfHeight = this.height * 0.5;

  var sizing = {
    segmentHeight : this.segmentHeight,
    segmentCount : this.segmentCount,
    height : this.height,
    halfHeight : this.halfHeight
  };

  this.geometry = createGeometry( sizing );
  this.bones = createBones( sizing );
  this.mesh = createMesh( this.geometry, this.bones );

  this.mesh.scale.multiplyScalar( 1 );
  this.add( this.mesh );
};

Hair.prototype = Object.assign(THREE.Object3D.prototype,
{
  constructor: Hair,
  segmentHeight: 6,
  segmentCount: 5,
  animating: true,
  animate(count){
    //Wiggle the bones
    if ( this.animating) {

      let len = mesh.skeleton.bones.length
      for ( var i = 0; i < len; i++){//; i ++ ) {

        mesh.skeleton.bones[ i ].rotation.z = Math[ i < len/2 ? 'cos' : 'sin' ]( count ) * 2 / mesh.skeleton.bones.length;

      }

    }

    skeletonHelper.update();
  }
});

let hairs = [];

function initHairs(){
  var boneCount = 5;

  for ( let i = 0; i < boneCount; i++){
    let hair = new Hair;
    hair.position.x += i * 10;
    scene.add(hair);
  }
}

let count = 0;

function render () {

  requestAnimationFrame( render );

  count += 0.01;

  var bone = mesh;

  for ( var i = 0; i < hairs.length; i++){
    hairs[i].animate(count);
  }

  renderer.render( scene, camera );

};

initScene();
render();