// we need to load our json of dependencies
// a nice simple d3 v4 force thing example http://bl.ocks.org/mbostock/4062045
var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

radius = 10;
var color = d3.scaleOrdinal(d3.schemeCategory20);



var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d) {
  //    console.log('linky id', d)
      return d.id;

  })
  //.distance(distance)
  .strength(.4)
)
  .force("charge", d3.forceManyBody().strength(-98))
  .force("center", d3.forceCenter(width / 2, height / 2));


d3.request('./deps4d3.ndjson', function(d){
//  console.log(d.responseText.split('\n'))
  var deparray = d.responseText.split('\n');

  var graph = {
    nodes:[],
    links:[]
  };
  //console.log(deparray)

  deparray.forEach(function(e){
    if(e.length > 0){
    console.log(e)
    var eobj = JSON.parse(e);
    graph.nodes.push({id: eobj.name, group: eobj.level})
    var edep = eobj.dependencies;
              // dependencies   dependencies

//    console.log(edep)

    edep.forEach(function(o){
  //    console.log(o.name)
      var olev = eobj.level + 1;
      graph.links.push({ source: eobj.name, target: o.name, value: olev })


    })

  }

  })

  console.log(graph)



  var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

    var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", "node")

    node.append('circle')
      .attr("r", 5)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

    node.append("title").text(function(d) {
console.log('making title', d)
      return d.id + ", level:"  + d.group; });

    node.append("text")
          .attr("dx", 12)
          .attr("dy", ".35em")
          .text(function(d) {
    //        console.log('title should be', d)
            return d.id
          });

    simulation.nodes(graph.nodes)
          .on("tick", ticked);


    simulation.force("link")
            .links(graph.links);


    function ticked() {
      node.attr("cx", function(d) {
      //  console.log("in ticked cx", d)
          return d.x = Math.max(radius, Math.min(width - radius, d.x));
        })
        .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });

        link
            .attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

            node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

      }
// this here ends the data thing
});


function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}