addEventListener('app-ready', function () {
  function update(err, bin, percentiles) {
    if (err) {
      window.alert(err);
      return;
    }

    console.log(bin);
    // bins[bin] = JSON.parse(percentiles);

    // var lines = svg.selectAll('.bin')
    //   .data(bins, function (d) { return d.bin; });

    // lines.enter().append('path')
    //   .attr('class', 'bin')
    //   .attr('d', function (d) { return line(d.density); });
  }

  var cutoff = document.getElementById('cutoff-value');

  var margin = {top: 20, right: 10, bottom: 20, left: 10};

  var width = 640 - margin.left - margin.right,
      height = 460 - margin.top - margin.bottom;

  var svg = d3.select('body').append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
    .append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  var x = d3.scale.linear().range([0, width]).domain([0, 1]),
    y = d3.scale.linear().range([height, 0]).domain([0, cutoff.value]);

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

  var bins = {};

  slider(document.getElementsByClassName('slider'));
  density(cutoff.value, false, update);

  function slider(selection) {
    function onSliderChange(input) {
      return function (e) {
        input.value = e.target.value = precision(e.target.value, 2);
        y.domain([0, input.value]);
        density(input.value, false, update);
      };
    }

    var i = selection.length;

    while (--i >= 0) {
      var range = selection[i].children[0],
        input = selection[i].children[1];

      range.addEventListener('change', onSliderChange(input));
      input.addEventListener('change', onSliderChange(range));
    }

    return selection;
  }

  function precision(value, decimals) {
    return Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals);
  }
});