$(function() {

var startTime = new Date();
var lastOffset = 1.0;
var currentTime = function() {
  return lastOffset;
};

var chartSize = {n: 15.0, step: 5.0};

$('body').on('click', '.js-adjust-window', function() {
  chartSize = $(this).data();
});

$('body').on('click', '.chart', function() {
  $(this).data('chart').toggleSize();
});

var clips = 0;
function StripChart(container, name) {
  container = container.append('div').attr('class', 'chart');
  $(container[0][0]).data('chart', this);
  container.append('h3').text(name);

  var data = [];

  var margin = {top: 10, right: 10, bottom: 20, left: 70},
      width = 960 - margin.left - margin.right,
      lgHeight = 500 - margin.top - margin.bottom,
      smHeight = 80 - margin.top - margin.bottom,
      height = smHeight;

  var make_x_scale = function() {
    var t, range;
    if (chartSize.all) {
      t = currentTime();
      range = width;
    } else {
      t = d3.max([currentTime(), chartSize.n]);
      range = t * width / chartSize.n;
    }
    return d3.scale.linear()
      .domain([0, t])
      .range([0, range]);
  };
  var x = make_x_scale();

  var make_y_scale = function() {
    return d3.scale.linear()
      .domain(d3.extent(data, function(d) { return d.y; }))
      .range([height, 0]);
  };
  var y = make_y_scale();

  var line = d3.svg.line()
      .x(function(d) { return x(d.x); })
      .y(function(d) { return y(d.y); });

  var svgElement = container.append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
  var svg = svgElement.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var clipId = "clip" + (clips++);
  var clipRect = svg.append("defs").append("clipPath")
      .attr("id", clipId)
    .append("rect")
      .attr("width", width)
      .attr("height", height);

  var make_x_axis = function() {
    var baseAxis = d3.svg.axis().scale(x).orient("bottom");
    if (chartSize.all) {
      return baseAxis.ticks(10);
    } else {
      var t = currentTime();
      var ticks = [];
      var i;
      for(i = 0; i <= t; i += chartSize.step) {
        ticks.push(i);
      }
      for(; i <= chartSize.n; i += chartSize.step) {
        ticks.push(i);
      }
      return baseAxis.tickValues(ticks);
    }
  };
  var xAxis = svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.svg.axis().scale(x).orient("bottom"));

  var make_y_axis = function() {
    return d3.svg.axis().scale(y).ticks(4).orient("left");
  };
  var yAxis = svg.append("g")
      .attr("class", "y axis")
      .call(make_y_axis());

  var yGrid = svg.append("g")
      .attr("class", "grid")
      .call(make_y_axis().tickSize(-width, 0, 0).tickFormat(""));

  var path = svg.append("g")
      .attr("clip-path", "url(#" + clipId + ")")
    .append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", line);

  var updateInterval = 500;
  var tick = function() {
    x = make_x_scale();
    y = make_y_scale();

    var t = currentTime();
    var xtrans = x((!chartSize.all && t > chartSize.n) ? (chartSize.n - t) : 0);

    svgElement.attr("height", height + margin.top + margin.bottom);
    clipRect.attr("height", height);

    xAxis
        .call(make_x_axis())
      .transition().duration(updateInterval).ease('linear')
        .attr("transform", "translate(" + xtrans + "," + height + ")");

    yAxis.call(make_y_axis());
    yGrid.call(make_y_axis().tickSize(-width, 0, 0).tickFormat(""));

    path
        .attr("d", line)
      .transition()
        .duration(updateInterval)
        .ease("linear")
        .attr("transform", "translate(" + xtrans + ")")
        .each('end', tick);
  }

  tick();

  this.addPoint = function(point) {
    data.push(point);
  };

  this.toggleSize = function() {
    height = (height == lgHeight) ? smHeight : lgHeight;
  };
}

var charts = {};
var ws = new WebSocket($('body').data('websocket'));
ws.onmessage = function(e) {
  var data = JSON.parse(e.data);
  var i;
  for (i = 0; i < data.samples.length; i++) {
    var sample = data.samples[i];
    var chart = charts[sample.name];
    lastOffset = data.offset;
    if (!chart)
      chart = charts[sample.name] = new StripChart(d3.select('body'), sample.name);
    if (sample.rss)
      chart.addPoint({x: data.offset, y: sample.rss});
  }
};

});