var scale = d3.scaleCluster();

var textAreaButton = d3.select("#user-data-button").on("click", refreshColours);

function refreshColours() {

  d3.select("#output").selectAll("p, hr").remove();

  var values = d3.select("#user-data").property("value").split('\n');
  var n = values.length;
  for (var i = 0; i < n; i++) {
    values[i] = +values[i];
  };
  values.sort(sortNumber);

  var noOfClasses = d3.select("#classes").property("value");
  noOfClasses = +noOfClasses;

  var classes = [];
  for (var i = 0; i < noOfClasses; i++) {
    classes[i] = i;
  };

  var startColour = "#" + d3.select("#start-colour").property("value");
  var endColour = "#" + d3.select("#end-colour").property("value");

  var colour = d3.scaleLinear().domain([0,noOfClasses])
  .interpolate(d3.interpolateHcl)
  .range([d3.rgb(startColour), d3.rgb(endColour)]);

  scale.domain(values);
  scale.range(classes);
  var clusters = scale.clusters();

  var nestedValues = d3.nest()
  .key(function(d) { return scale(d); })
  .entries(values);

  d3.select("#output")
  .selectAll("p")
  .data(nestedValues)
  .enter()
  .append("p")
  .attr("id", function(d) { return "class-" + d.key; })
  .text(function(d) {
    var arrayToString = d.values.toString();
    arrayToString = arrayToString.replace(/,/g, ", ");
    var colourString = colour(+d.key);
    var prefix = "Group " + d.key + " " + colourString + ": ";
    return prefix + arrayToString;
  })
  .style("color", "#FFF")
  .style("background-color", function(d) { return colour(+d.key); })
  .style("padding", "4px");

  return false;

};

function sortNumber(a,b) {
  return a - b;
};