$(function(){
  var w = 260,
      h = 960,
      fill = d3.scale.category20();

  var vis = d3.select("#chart")
    .append("svg:svg")
      .attr("width", w)
      .attr("height", h);

  d3.json("/scripts/blogposts.json", function(json) {
    var force = self.force = d3.layout.force()
      .nodes(json.nodes)
      .links(json.links)
      .gravity(.05)
      .distance(30)
      .charge(-120)
      .size([260, 200])
      .start();

    var link = vis.selectAll("line.link")
      .data(json.links)
      .enter().append("svg:line")
      .attr("class", "link")
      .attr("x1", function( data ) { return data.source.x; })
      .attr("y1", function( data ) { return data.source.y; })
      .attr("x2", function( data ) { return data.target.x; })
      .attr("y2", function( data ) { return data.target.y; });

    var node = vis.selectAll("g.node")
      .data(json.nodes)
      .enter()
        .append("svg:g")
        .style("cursor", "pointer")
        .attr("class", "node")

    node.append("svg:circle")
      .attr("class", "node")
      .style("fill", '#bada55')
      .attr("r", 3);

  /*
    node.append("svg:text")
      .attr("class", "nodetext")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.name });
  */

    node.call(force.drag);

    force.on("tick", function() {
      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 + ")"; });
    });

    node.on("click", function( data ) {
      window.location = window.location.origin + data.url;
    });
  });
})