<!DOCTYPE html>
<meta charset="utf-8">

<link href="../src/d3.css" rel="stylesheet" type="text/css">

<style>

body {
  overflow-y:scroll;
  margin: 0;
  padding: 0;
}

svg {
  overflow: hidden;
}

div {
  border: 0;
  margin: 0;
}


#offsetDiv {
}


#test1 {
  margin: 0;
}


</style>

<body>

<div id="offsetDiv">
  <div id="test1" class="chartWrap">
    <svg></svg>
  </div>
</div>

<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/scatterWithLegend.js"></script>
<script>


//Format A
nv.addGraph({
  generate: function() {
      var width = nv.utils.windowSize().width - 40,
          height = nv.utils.windowSize().height - 40;

      var chart = nv.models.scatterWithLegend()
                .width(width)
                .height(height)
                .showDistX(true)
                .showDistY(true)
                .color(d3.scale.category10().range());
                //.width(width)
                //.height(height)
                //.forceX([-4,4])
                //.forceY([-4,4])
                //.margin({top: 20, right: 10, bottom: 50, left: 80})


    //chart.xaxis.tickFormat(d3.format(".02f"))

    var svg =d3.select('#test1 svg')
      .datum(randomData());


    svg.transition().duration(500)
      .attr('width', width)
      .attr('height', height)
      .call(chart)
      //.attr('width', wid0th)
      //.attr('height', height)

    return chart;
  },
  callback: function(graph) {

    graph.dispatch.on('tooltipShow', function(e) {
        var offsetElement = document.getElementById("test1"),
                left = e.pos[0] + offsetElement.offsetLeft,
                top = e.pos[1] + offsetElement.offsetTop,
                formatter = d3.format(".2f");


      /*
      var content = '<h3>' + e.series.key + '</h3>' +
                    '<p>' +
                    '<span class="value"><span class="label">x:</span><span class="val">' + formatter(e.point.x) + '</span></span><br>' +
                    '<s0pan class="value"><span class="label">y:</span><span class="val">' + formatter(e.point.y) + '</span></span>' +
                    '</p>';

      nvtooltip.show([left, top], content);
      */

      var contentX = '<strong>' + formatter(e.point.x) + '</strong>';
      var contentY = '<strong>' + formatter(e.point.y) + '</strong>';
      var height = nv.utils.windowSize().height - 40;

      nv.tooltip.show([left, height - 50], contentX, 'n', 1);
      nv.tooltip.show([5, top], contentY, 'w', 1);
    });


    graph.dispatch.on('tooltipHide', function(e) {
      nv.tooltip.cleanup();
    });

    window.onresize = function() {
     var width = nv.utils.windowSize().width - 40,
        height = nv.utils.windowSize().height - 40,
        margin = graph.margin();


      if (width < margin.left + margin.right + 20)
        width = margin.left + margin.right + 20;

      if (height < margin.top + margin.bottom + 20)
        height = margin.top + margin.bottom + 20;


      graph
        .width(width)
        .height(height);

      d3.select('#test1 svg')
        .attr('width', width)
        .attr('height', height)
        .call(graph);

      };
  }
});


function randomData() {
  var data = [],
      random = d3.random.normal();

  for (i = 0; i < 2; i++) {
    data.push({
      key: 'Group ' + i,
      values: []
    });

    for (j = 0; j < 100; j++) {
      data[i].values.push({x: random(), y: random(), size: Math.random()});
    }
  }

  return data;
}


</script>