// From http://mkweb.bcgsc.ca/circos/guide/tables/
var oldmatrix = [
[0,3,2,0,1,1,2,1,3,0],
[5,0,0,3,9,9,11,11,12,6],
[1,0,0,1,0,0,1,0,0,0],
[2,3,0,0,3,2,2,4,0,0],
[9,6,3,3,0,3,5,4,3,0],
[12,8,2,4,11,0,10,10,14,4],
[5,8,2,2,10,4,0,10,6,4],
[5,3,0,4,4,3,2,0,6,0],
[7,4,1,2,3,7,3,6,0,3],
[2,1,0,0,4,2,2,1,1,0]
];

var matrix = [
[0 ,3,1 ,1,2 ,1 ,3 ],
[5 ,0,9 ,9,11,11,12],

//[2 ,3,3 ,2,2 ,4 ,0 ,0],
[9 ,6,0 ,3,5 ,4 ,3 ],
[12,8,11,0,10,10,14],
[5 ,8,10,4,0 ,10,6 ],
[5 ,3,4 ,3,2 ,0 ,6 ],
[7 ,4,3 ,7,3 ,6 ,0 ],
//[2 ,1,4 ,2,2 ,1 ,1]
];

var teams = [
"Clemson",
"Duke",
//"Georgia Tech",
"Maryland",
"North Carolina",
"NC State",
"Virginia",
"Wake Forest",
//"South Carolina"
];

var colors = [
"#FF6300",
"#00009C",
//"#CFB53B",
"#FF0000",
"#99BADD",
"#CE1126",
"#0D3268",
"#CFB53B",
//"#000000",
//"#CCCCCC"
];

var color = d3.scale.ordinal()      //custom color scale for teams
                .range(colors)
                .domain(teams);

var chord = d3.layout.chord()
.padding(.05)
.sortSubgroups(d3.descending)
.matrix(matrix);

var width = 960,
height = 640,
innerRadius = Math.min(width, height) * .41,
outerRadius = innerRadius * 1.1;

var fill = d3.scale.ordinal()
.domain(d3.range(10))
.range(colors);

var svg = d3.select("#container").select("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// Append groups
svg.append("g")
.attr("class","groups")
.selectAll("path")
.data(chord.groups)
.enter().append("path")
.style("fill", function(d) { return fill(d.index); })
.style("stroke", function(d) { return fill(d.index); })
.attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
.on("mouseover", fade(.1))
.on("mouseout", fade(1));

// Append ticks
var ticks = svg.append("g")
.attr("class","ticks")
.selectAll("g")
.data(chord.groups)
.enter().append("g").selectAll("g")
.data(groupTicks)
.enter().append("g")
.attr("transform", function(d) {
  return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
  + "translate(" + outerRadius + ",0)";
});

//Append Legend

svg.append("rect")   
.attr("x",-450)
.attr("y",-320)
.attr("width",200)
.attr("height",100)
.attr("style","fill-opacity:0;stroke:black;stroke-width:1.5px");

var legend = svg.append("g")
    .attr("class", "legend")
    .attr("width", 200)
    .attr("height", 100)
    .attr("transform", "translate(-445, -310)");

var gs = legend.selectAll("g.keybox")
          .data(teams).enter().append("g")
          .attr("class", "keybox")
          .attr("width", 80)
          .attr("height", 15);

gs.append("text")
  .attr("class","keybox").attr("x",function(d,i){
    if(i<4){return 15;}
    else{return 90;}})
  .attr("y",function(d,i){
    if(i<4){return i*20 +9;}
    else{return (i-4)*20 +9;}})
  .text(function(d,i){
    return teams[i];})
  .on("mouseover", fade(.1))
  .on("mouseout", fade(1));

gs.append("rect")        
  .attr("x",function(d,i){
    if(i<4){return 0;}
    else{return 75;}})
  .attr("y",function(d,i){
     if(i<4){return i*20;}
     else{return (i-4) * 20;}})
  .attr("width",10)
  .attr("height",10)
  .style("fill",function(d, i){
    return colors[i];})
  .on("mouseover", fade(.1))
  .on("mouseout", fade(1));


// Append tick lines
ticks.append("line")
.attr("x1", 1)
.attr("y1", 0)
.attr("x2", 5)
.attr("y2", 0)
.style("stroke", "#000");

// Append tick labels
ticks.append("text")
.attr("x", 8)
.attr("dy", ".35em")
.attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; })
.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.text(function(d) { return d.label; });

// Append chords
svg.append("g")
.attr("class", "chord")
.selectAll("path")
.data(chord.chords)
.enter().append("path")
.attr("d", d3.svg.chord().radius(innerRadius))
.style("fill", function(d) { return d.source.value == d.target.value ? fill(fill.range().length-1) : fill(d.source.index); })
.style("opacity", 1);

/*// Append logos
var logos = d3.select(".logos").selectAll(".logo")
.data(teams)
.enter().append("span").attr("class","logo").attr("title",function(d) { return d; })
.data(chord.groups)
.on("mouseover", fade(.1))
.on("mouseout", fade(1));

// Append images
logos
.insert("span").attr("class","logo_bg").data(images).style("background", function(d) {return "url(" + d + ")";});

// Append scores
logos
.insert("span").attr("class","logo_score").style("opacity",0)
.text(function() { return matrix[0][0] + "-" + matrix[0][0]; }); // preloads variables values 
*/

// Returns an array of tick angles and labels, given a group.
function groupTicks(d) {
  var k = (d.endAngle - d.startAngle) / d.value;
  return d3.range(0, d.value, 1).map(function(v, i) {
    return {
      angle: v * k + d.startAngle,
      label: i % 5 ? null : v / 1
    };
  });
}

// Returns an event handler for fading a given chord group.
function fade(opacity) {
  return function(g, i) {
    // fade chords
    svg.selectAll(".chord path")
    .filter(function(d) { return d.source.index != i && d.target.index != i; })
    .transition()
    .style("opacity", opacity);
    
    // update scores
    d3.selectAll(".logo_score")
    .filter(function(d, j) { return j != i; })
    .text(function(d, j) { 
      var target = j < i ? j : j + 1;
      return matrix[i][target] + "-" + matrix[target][i]; })
    .style("opacity", function() { return opacity == 1 ? 0 : 1; })
    .style("border-color", function(d, j) {
      var target = j < i ? j : j + 1;
      if (matrix[i][target] > matrix[target][i]) return "#090";
      else if (matrix[i][target] < matrix[target][i]) return "#930"; 
      else return d3.select("body").style("color"); });
/*
    // fade logos
    d3.selectAll(".logo_bg")
    .filter(function(d, j) { return j != i; })
    .style("opacity", function() { return opacity == 1 ? 1 : 0.3; });
    */
  };
}