(function() {

  var margin = {top: 6, right: 20, bottom: 20, left: 30},
      width = window.innerWidth - 20 - margin.right - margin.left,
      height = 432 - margin.top - margin.bottom;

  var svg = d3.select('svg')
      .attr('width', window.innerWidth - 20)
      .attr('height', 432)
      .attr('viewbox', '0 0 ' + width + ' ' + 432)
      .attr('class', 'black-bg')

  svg.append('defs')
      .append('clipPath')
      .attr('id', 'clip')
        .append('rect')
        .attr('width', width)
        .attr('height', height);

  var beats = {
      tick: 0,
      start: Date.now(),
      beat: 4,
      measure: 4,
      measures: 0,
      max: 0,
      bpm: 60000 / 128, // 128 bpm, ~469 ms
      len: 253,
      toLoop: '',

      play: function () {
        var sync = this.counter && this.measures ?
              Math.round( this.bpm * (this.counter % this.measures) ) :
              0;
        this.start = Date.now() - sync;
        this.emit();
      },

      emit: function () {
        var real = Math.round(this.tick * this.bpm);
        var ideal = Date.now() - this.start;
        var diff = ideal - real;
        var td = function (label) {
            return {
              label: label,
              beat: this.tick,
              measure: this.measures,
              diff: diff,
              to: this.bpm - diff,
              max: this.max
            };
        }.bind(this);

        this.tick += 1;
        if (diff > this.max) { this.max = diff; }
        if (this.tick % this.measure === 0) {
          this.measures += 1;
          evts.measure(td('measure'));
        } else {
          evts.beat(td('beat'));
        }
        clearTimeout(this.toLoop);
        this.toLoop = setTimeout(function (self) {
          self.emit();
        }, this.bpm - diff, this );
      },
      stop: function () {
        clearTimeout(this.toLoop);
        this.tick = 0;
        this.measures = 0;
      },
      pause: function () {
        clearTimeout(this.toLoop);
        this.tick = this.tick % this.measure;
      }
  };

  var evts = d3.dispatch('beat', 'measure', 'play', 'pause', 'stop' );

  evts.on('measure', function (td) {
    plot.append(td);
    plot.update(td);
    log(adjLog, td.beat, td.diff, td.max);
  });

  evts.on('beat', function (td) {
    plot.append(td);
    plot.update(td);
    log(adjLog, td.beat, td.diff, td.max)
  });

  evts.on('play', function () {
    beats.play();
    plot.play();
    uncorrected.play();
  });

  evts.on('pause', function () {
    beats.pause()
    uncorrected.stop();
  });

  evts.on('stop', function () {
    beats.stop()
    uncorrected.stop();
  });


var plot = {
  init: function () {
    var now = Date.now() - beats.bpm;

    this.xScale = d3.time.scale()
      .range([0, width]);

    this.yScale = d3.scale.linear()
      .range([height, 0])
      .domain([-5, 30]);

    this.grp = svg.append('g')
      .attr('class', 'plot')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    this.grp.append('text')
      .text('setTimeout deviation in ms')
      .attr('x', 20)
      .attr('y', 15);

    this.xAxis = this.grp.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0,' + height + ')')
      .attr('opacity', 0)
      .call(this.xScale.axis = d3.svg.axis().scale(this.xScale).orient('bottom'));

    this.yAxis = this.grp.append('g')
      .attr('class', 'y axis')
      .attr('transform', 'translate(0,' + (margin.top - 5) + ')')
      .call(this.yScale.axis = d3.svg.axis().scale(this.yScale).orient('left'));

    this.dots = this.grp.append('g')
      .attr('id', 'dot-clip')
      .attr('clip-path', 'url(#clip)')
        .append('g')
        .attr('id', 'dots');
  },

  append: function (td) {
    var plot = this;
    var last = this.xScale.domain()[1];
    var datum = td;
    datum.then = Date.now();
    this.dots.append('circle')
      .attr('class', 'dot ' + datum.beat + ' ' + datum.label  )
      //.attr('r', 2)
      .attr('cx', plot.xScale(last))
      .attr('cy', plot.yScale(datum.diff))
      //.attr('fill', datum.fill)
      .datum(datum);
  },
    // http://bl.ocks.org/mbostock/1166403
  update: function(td) {
      //this.paused = false;
      var plot = this;
      // update the x domain
      var now = Date.now();
      this.xScale.domain([now - (beats.len - 2) * beats.bpm, now - beats.bpm]);

      // slide the x-axis left
      var trans = this.grp.transition().duration(td.to).ease('linear');
      trans.select('.x.axis').call(plot.xScale.axis);

      this.dots.selectAll('.dot')
          .transition()
          .ease('linear')
          .duration(td.to)
          .attr('cx', function (d, i) {
            return plot.xScale(d.then - td.to);
          })

      var goneDots = this.dots.selectAll('circle.dot')
            .filter(function () {
              var cx = parseInt(this.getAttribute('cx'), 10)
              return cx < 0;
            });
      if (!goneDots.empty()) {
        goneDots.remove();
      };
  },

  play: function () {
    var now = Date.now();
    if (beats.measures === 0) {
      this.dots.selectAll('.dot').remove();
    }
    this.xScale.domain([now - (beats.len - 2) * beats.bpm, now - beats.bpm]);
    this.xAxis.attr('opacity', 1)
  },
}

  var playPauseCtrl = document.getElementById('play-pause-ctrl');
  playPauseCtrl.addEventListener('click', function () {
    if ( this.classList.contains('play') ) {
      this.classList.add('pause');
      this.classList.remove('play');
      evts.play();
    } else if ( this.classList.contains('pause') ) {
      this.classList.remove('pause');
      this.classList.add('play');
      evts.pause();
    }
  });

  var stopCtrl = document.getElementById('stop-ctrl');
  stopCtrl.addEventListener('click', function () {
    playPauseCtrl.classList.add('play');
    playPauseCtrl.classList.remove('pause');
    evts.stop();
  });

  var adjLog = d3.select('#adjusted');
  var uncLog = d3.select('#uncorrected');
  var log = function (selection, count, dev, max) {
    var countEl = selection.select('.count').text(count);
    var devEl = selection.select('.dev').text(dev);
    var maxEl = selection.select('.max').text(max);
  };

  var uncorrected = {
      tick: 0,
      start: 0,
      bpm: 60000 / 128, // 128 bpm, ~469 ms
      toLoop: '',
      max: 0,

      play: function () {
        this.start = Date.now();
        this.tick = 0;
        this.loop();
      },

      loop: function () {
        var real = Math.round(this.tick * this.bpm);
        var ideal = Date.now() - this.start;
        var diff = ideal - real;

        this.tick += 1;
        if (diff > this.max ) { this.max = diff; }
        log(uncLog, this.tick, diff, this.max);

        clearTimeout(this.toLoop);
        this.toLoop = setTimeout(function (self) {
          self.loop();
        }, this.bpm, this);
      },
      stop: function () {
        clearTimeout(this.toLoop);
        this.tick = 0;
      }
  };

  plot.init();

})();