var names = [
  "Mutt and Jeff",
  "",
  "Inspector Gen",
  "Franklin",
  "Vlade",
  "Citizen",
  "Amelia",
  "Charlotte",
  "Stefan and Roberto"
]

var radius = 1
var length = 100

var nameToAngle = d3.scaleOrdinal()
  .domain(names)
  .range(d3.range(0, Math.PI*2, Math.PI*2/names.length))

var zScale = d3.scaleLinear()
  .domain([0, 1111347])
  .range([0, length])


d3.json('chapters.json', function(err, res){
  chapters = res

  links = []
  var prevLength = 0
  chapters.forEach(function(chapter){
    chapter.links.forEach(function(d){
      d.tIndex = d.index + prevLength
      d.narrator = chapter.name
      d.tName = d.name
        .replace('Mutt', 'Mutt and Jeff')
        .replace('Jeff', 'Mutt and Jeff')
        .replace('Gen', 'Inspector Gen')
        .replace('Stefan', 'Stefan and Roberto')
        .replace('Roberto', 'Stefan and Roberto')

      d.pos = [
        Math.cos(nameToAngle(d.narrator))*radius, Math.sin(nameToAngle(d.narrator))*radius, 
      ]
    })
    links = links.concat(chapter.links)

    chapter.start = prevLength
    chapter.end = prevLength += chapter.length
  })



  // Create an empty scene
  var scene = new THREE.Scene();

  // Create a basic perspective camera
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 10000 );
  camera.position.z = length*1.01;

  // Create a renderer with Antialiasing
  var renderer = new THREE.WebGLRenderer({antialias:true});

  // Configure renderer clear color
  renderer.setClearColor("#2E2B40");

  // Configure renderer size
  renderer.setSize( window.innerWidth, window.innerHeight );

  // Append Renderer to DOM
  d3.selectAll('canvas').remove()
  document.body.appendChild( renderer.domElement );


  var material = new THREE.MeshBasicMaterial( { color: "#ffffff" } );
  chapters.forEach(function(d){
    var geometry = new THREE.BoxGeometry(.05, 0.05, zScale(d.length));
    var bar02 = new THREE.Mesh( geometry, material );
    bar02.position.x = Math.cos(nameToAngle(d.name))*radius;
    bar02.position.y = Math.sin(nameToAngle(d.name))*radius;
    bar02.position.z = zScale(d.start)
    scene.add( bar02 );

  })


  // line geometry
  var lineGeometry = new THREE.Geometry();
  links.forEach(function(d){

    var z = zScale(d.tIndex)
    
    var x0 = Math.cos(nameToAngle(d.narrator))*radius;
    var y0 = Math.sin(nameToAngle(d.narrator))*radius;
    var vertexPos = new THREE.Vector3(x0, y0, z);
    lineGeometry.vertices.push(vertexPos);
    
    var x1 = Math.cos(nameToAngle(d.tName))*radius;
    var y1 = Math.sin(nameToAngle(d.tName))*radius;
    var vertexPos = new THREE.Vector3(x1, y1, z);
    lineGeometry.vertices.push(vertexPos);

  })

  // line object
  var lineMaterial = new THREE.LineBasicMaterial({color:0xffff00});

  var lineObject = new THREE.Line(lineGeometry, lineMaterial, THREE.LineSegments);
  lineObject.position.set
  scene.add(lineObject);


  // Render Loop
  if (window.timer) window.timer.stop()
  window.timer =  d3.timer(function() {
    // bar02.rotation.z+=0.001;  
    camera.position.z -= length/5000
    
    // Render the scene
    renderer.render(scene, camera);
  })

})