$( function() {

var csv_text = 'date,sugar\n\
2011-01-13T15:42:08,108\n\
2011-01-14T15:42:08,108\n\
2011-01-15T15:42:08,108\n\
2011-01-16T15:42:08,108\n\
2011-01-17T15:42:08,108\n\
2011-02-15T20:58:25,121\n\
2011-02-16T20:58:25,121\n\
2011-02-17T20:58:25,121\n\
2011-02-18T20:58:25,121\n\
2011-02-19T20:58:25,121\n\
2011-02-20T20:58:25,121\n\
2011-02-21T20:58:25,121\n\
2011-03-08T16:55:07,100\n\
2011-03-08T18:29:12,91\n\
2011-03-08T19:30:37,94\n\
2011-03-08T21:34:27,126\n\
2011-03-09T08:38:01,242\n';
    var json = [ ];

    json = d3.csv.parse(csv_text);
    json.forEach(fix_row);

    var url = './sugars.csv';
    draw_graph(json);

    d3.csv(url, update_data);

} );

function draw_graph(data) {
  var results,
      chart,
      dots,
      margin = 100,
      w = 8,
      h = 500,
      x, y,
      width = 1100,
      xAxis, yAxis;

  $('#lab #test').remove( );
  $('#lab').append( $('#clone').clone(true).attr('id', 'test') );

  chart = d3.select( '#test' ).append( 'svg' )
      .attr( 'class', 'chart' )
      .attr( 'width', width )
      .attr( 'height', h )
      .append('g');

  d3.select('svg g')
      .attr('transform', 'translate(50, 50)');

  x = d3.time.scale()
      .domain( [data[0].date, d3.time.day.offset(data[data.length - 1].date, 1)] )
      .range( [0, width - margin] )

  y = d3.scale.linear()
      .domain( [0, d3.max( data, function( d ) { return d.sugar; } )] )
      .rangeRound( [0, h - margin] );

  // safety bars
  var safeties = {
    low: 70,
    high: 140,
    x: x.range()[0],
    y: (h - margin) - y(140) + .5,
    width: (width - margin),
    height: y(140) -  y(70)  + .5

  };
  var bars = chart.append('g')
          .attr('class', 'safety');

  bars.append('rect')
      .attr('class', 'safe-sugar')
    
      ;


  // Bars
  dots = chart.append('g')
      .attr('class', 'dots');

  dots.selectAll( 'circle' )
      .data( data )
    .enter().append( 'circle' )
      .attr( 'r', '.5ex')
      // .attr( 'width', w )
      // .attr( 'height', function( d ) { return y( d.population ) } )
      .append('g');

  // Axis
  xAxis = d3.svg.axis()
      .scale(x)
      .ticks(12)
      // .tickFormat(d3.time.format('%m/%d/%y'))
      .tickSize(10, 20, 1);

  yAxis = d3.svg.axis()
      .scale(d3.scale.linear().domain( [0, d3.max( data, function( d ) { return d.sugar || 0; } )] ).rangeRound( [h - margin, 0] ))
      .ticks(7)
      .tickSize(6, 3, 1)
      .orient('left');
      // .orient('right');

  chart.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0, ' + (h - margin) + ')');

  chart.append('g')
      .attr('class', 'y axis');
      // .attr('transform', 'translate(' + x.range()[1] + ')')

    

  d3.select("svg").call(d3.behavior.zoom()
    //  By supplying only .x() any pan/zoom can only alter the x scale.  y scale remains fixed.
      .x(x)
      .on("zoom",render)
  );
  
  function render() {
    bars.selectAll("rect")
      .attr( 'x', safeties.x)
      .attr( 'y', safeties.y)
      .attr( 'width', safeties.width)
      .attr( 'height', safeties.height)
    dots.selectAll("circle")
      .attr( 'cx', function( d, i ) { return x( d.date ) - .5; } )
      .attr( 'cy', function( d ) { return (h - margin) - y( d.sugar ) + .5 } )
    chart.select(".x.axis").call(xAxis)
    chart.select(".y.axis").call(yAxis)
  } 

  //  Call this to place initially
  render();
}



function update_data(rows)  {
  // console.log('XXX', this, arguments);
  if (rows) {
    rows.forEach(fix_row);
    draw_graph(rows);
  }
}

function fix_row(row, i) {
  row.date = d3.time.format.iso.parse(row.date);
  row.sugar = parseInt(row.sugar);
  // console.log('rows each', this, arguments);

}