var graphic;

graphic = new Object;

graphic.create = function() {
  d3.json("cities.json",  function(data) { update2(data);});
}

var w = 1280,
    h = 800,
    r = 720,
    x = d3.scale.linear().range([0, r]),
    y = d3.scale.linear().range([0, r]),
    node,
    root,
    data;

var pack = d3.layout.pack()
    .size([r, r])
    .value(function(d) { return d.size/1000000; })

var vis = d3.select("body").insert("svg:svg", "h2")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");


function update2(data) {

  node = root = data;
  var node = vis.data([data]).selectAll("g.node")
      .data(pack.nodes)
      .enter().append("g")
      .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
      
  node.append("a")
    .attr("xlink:href", function(d) { return d.link; })
    .append("svg:circle")
      .attr("class", function(d) { return d.children ? "parent" : "child"; })
      .attr("r", function(d) { return d.r; })
      .on("click", function(d) { 
            if (d.children) {
              return zoom(node == d ? root : d);} });
   
    node.filter(function(d) { return !d.children; }).append("svg:text")
      .attr("class", function(d) { return d.children ? "parent" : "child"; })
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
      .text(function(d) { return d.name.substring(0, d.r / 3); });
      
   node.filter(function(d) { return !d.children; })
   .tooltip(function(d, i) {
    var r, svg;
    //r = +d3.select(this).attr('r');
    r = d.r;
    svg = d3.select(document.createElement("svg")).attr("height", 50);
    g = svg.append("g");
    g.append("rect").attr("width", r * 10).attr("height", 10);
    g.append("text").text("10 times the radius of the circle").attr("dy", "25");
    g.append("a").attr("xlink:href","http://www.google.com").append("text").text("google.com").attr("dy", "35");
    return {
      type: "popover",
      title: d.name,
      content: svg,
      detection: "shape",
      placement: "fixed",
      gravity: "right",
      position: [d.x, d.y],
      displacement: [r + 2, -72],
      //displacement: [0, 0],
      mousemove: false
    };
    });
   
   // .append("svg:title")
      // .text(function(d) { return d.name.concat(" : ",numberWithCommas(d.size)); });

};

$(document).ready(graphic.create);

function numberWithCommas(x) {
    x = x/1000000
    return "$".concat(x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")," million");
}

function zoom(d, i) {
  var k = r / d.r / 2;
  x.domain([d.x - d.r, d.x + d.r]);
  y.domain([d.y - d.r, d.y + d.r]);

  var t = vis.transition()
      .duration(d3.event.altKey ? 7500 : 750);
  
  t.selectAll("g.node")
    .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });

  t.selectAll("circle")
      .attr("r", function(d) { return k * d.r; });

  t.selectAll("text")
      .text(function(d) { return d.name.substring(0, k * d.r / 3); })
      .style("opacity", function(d) { return k * d.r > 20 ? 1 : 0; });

  t.filter(function(d1) { return !d1.children; })
   .tooltip(function(d2, i) {
      var r, svg;
      //r = +d3.select(this).attr('r');
      r = d2.r;
      svg = d3.select(document.createElement("svg")).attr("height", 50);
      g = svg.append("g");
      g.append("rect").attr("width", r * 10).attr("height", 10);
      g.append("text").text("10 times the radius of the circle").attr("dy", "25");
      g.append("a").attr("xlink:href","http://www.google.com").append("text").text("google.com").attr("dy", "35");
      return {
        type: "popover",
        title: "It's a me, Rectangle",
        content: svg,
        detection: "shape",
        placement: "fixed",
        gravity: "right",
        position: [d2.x, d2.y],
        displacement: [r + 2, -72],
        //displacement: [0, 0],
        mousemove: false
      };
    });
    
  node = d;
  d3.event.stopPropagation();
}