d3.json("colorMap.json", function(d) {
  var colorData = d.pitches;
  drawArcs(colorData);
});

var noteArc = function(d){
    var arc = d3.arc()
              .outerRadius(400)
              .innerRadius(1)
              .startAngle(d.pitch * Math.PI / 6)
              .endAngle((d.pitch + 1) * Math.PI / 6);
    return arc;
}

var noteBall = function(d){
    var arc = d3.arc()
              .outerRadius(200)
              .innerRadius(1)
              .startAngle(d.pitch * Math.PI / 6)
              .endAngle((d.pitch + 1) * Math.PI / 6);
    return arc;
}

function drawArcs(colorData) {
  var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    centerX = width / 2,
    centerY = height / 2;
    circleG = svg.append("g").attr("transform", "translate(" + centerX + "," + centerY + ")");

  circleG
    .attr("id", "circleG")
    .selectAll("g")
    .data(colorData)
    .enter()
    .append("g")
    .attr("class", "pitchArc")
    .append("path")
    .each(function(d, i) {
      d3.select(this).attr("d", noteArc(d, i));
    })
    // .attr("d", noteArc)
    .style("fill", function(d){
      return genFill(d, 0.6);
    })
    .attr("id", function(d, i){return "pitch-" + i;})
    .attr("class", "pitchPath")
    .on("click", toggleActive);


}

function genFill(d, opacity) {
    return  d3.hsl(d.h, d.s / 100.0, d.l / 100.0, opacity);
}

function toggleActive(d) {
  var currentPitch = d3.select(this);
  if (currentPitch.classed("activePitch")){
    currentPitch
      .transition()
      .duration(500)
      .attr("d", noteArc(d))
      .style("fill", function(d){
        return genFill(d, 0.6);
      });
    currentPitch.classed("activePitch", false);
  }
  else {
    currentPitch
      .transition()
      .duration(500)
      .attr("d", noteBall(d))
      .style("fill", function(d){
        return genFill(d, 1.0);
      });
    currentPitch.classed("activePitch", true);
  }
}

var t = d3.timer(function(elapsed) {
  min = Math.ceil(0);
  max = Math.floor(12);
  pitch =  Math.floor(Math.random() * (max - min)) + min;
  pitchSelection = d3.selectAll(".pitchPath")
      .filter(function(d, i) { return i === pitch;})
      .each(toggleActive);

}, 1000);