<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/d3.css" rel="stylesheet" type="text/css">
<style>

body {
  overflow-y:scroll;
}

text {
  font: 12px sans-serif;
}

</style>
<body>

<svg id="test1"></svg>

<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/bar.js"></script>
<script> 

  var testdata = [
    { 
      label: "One is a very long",
      y: 5
    },
    { 
      label: "Two is also very long",
      y: 2
    },
    { 
      label: "Three",
      y: 9
    },
    { 
      label: "Four",
      y:  7
    },
    { 
      label: "Five",
      y: 4
    },
    {
        label: "Six",
        y: 3
    }
  ];


  var testdata2 = [
      {
          label: "One is a very long",
          y: 1
      },
      {
          label: "Two is also very long",
          y: 12
      },
      {
          label: "Three",
          y: -9
      },
      {
          label: "Four",
          y:  4
      },
      {
          label: "Five",
          y: 6
      }
  ];

  var td = 0;
  var a = (Math.random()*10)+1;
  if (a > 5) td = 1;

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

    var chart = nv.models.bar()
        .width(width)
        .height(height)
        .labelField('label')
        .dataField('y')
        .showLabels(true)
        .title("This is a sample chart title")
         ;

    if (td === 0) {
      d3.select("#test1")
        .attr('width', width)
        .attr('height', height)
        .datum(testdata)
        .call(chart);
    } else {
        d3.select("#test1")
                .attr('width', width)
                .attr('height', height)
                .datum(testdata2)
                .call(chart);
    }

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

      graph.dispatch.on('tooltipShow', function(e) {
          var offsetElement = document.getElementById("chart"),
                  left = e.pos[0],
                  top = e.pos[1];

          var content = '<h3>' + e.label + '</h3>' +
                  '<p>' +
                  e.value +
                  '</p>';

          nv.tooltip.show([left, top], content);
      });

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

      graph.dispatch.on('elementClick', function(e) {
          console.log("Bar Click",e);
      });

      graph.dispatch.on('chartClick', function(e) {
          console.log("Chart Click",e);
      });

      graph.dispatch.on('chartClick', function(e) {
          console.log('Click Switching to');
          if (td === 0) {
              d3.select("#test1")
                      .datum(testdata2)
                      .call(graph);
              td = 1;

          } else {
              d3.select("#test1")
                      .datum(testdata)
                      .call(graph);
              td = 0;
          }
      });


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

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

/*
//Format B
nv.addGraph(function() {
    var selection = d3.select("body")
        .datum(irwinHallDistribution(10000, 10));

    var chart = nv.models.histogram()
          .bins(d3.scale.linear().ticks(20))
          .tickFormat(d3.format(".02f"));

    chart(selection);

    return chart;
}, function(g) { console.log(g.width(), g.height()) })

//Format C
nv.addGraph(function() {
  return nv.models.histogram()
           .bins(d3.scale.linear().ticks(20))
           .tickFormat(d3.format(".02f"))(
             d3.select("body")
              .datum(irwinHallDistribution(10000, 10))
             );
}, function(g) { console.log(g.width(), g.height()) })
*/


</script>