// Dimensions of sunburst.
var width = 950;
var height = 900;
//var radius = Math.min(width, height) / 2;
var radius = 400;
var node_height = 15;

// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = {
  w: 242, h: 30, s: 3, t: 10
};

// Mapping of step names to colors.
var colors = {
  "Mechanics": "#2038EC",
  "Level Elements": "#FC9838",
  "Enemy Elements": "#D82800",
  "Power-Up / Upgrade / Economy": "#80D010",
  "Systems / Rules": "#5C94FC",
  "Level Design": "#F8B800",
  "Feedback": "#940084",
  "Design Space": "#4A2373",
  "Difficulty Design": "#881400",
  "Modes / Features": "#983AC0",
  "Story": "#747474",
  "Design": "#F8F8F8",
  "Gameplay Elements": "#5C94FC"
};

// Total size of all segments; we set this later, after loading the data.
var totalSize = 0; 

function clickWheel(d)
{
    fillBox(d.name);
}

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

var partition = d3.layout.partition()
    .size([2 * Math.PI, radius * radius])
    .value(function(d) { return d.size; });

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return radius - (5 - d.depth) * node_height; })
    .outerRadius(function(d) { return radius - (5 - d.depth) * node_height + node_height; });
/*
    .innerRadius(function(d) { return Math.sqrt(d.y); })
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
*/

// Use d3.text and d3.csv.parseRows so that we do not need to have a header
// row, and can receive the csv as an array of arrays.

d3.json("/wheel/visit-sequences3-copy.txt", function(json) {
  //rendering logic here
  createVisualization(json);
});


/*
var json = d3.json(raw_text, "text/plain");
createVisualization(json);
*/

/*
var json = JSON.parse(raw_text);
createVisualization(json);
*/

// Main function to draw and set up the visualization, once we have the data.
function createVisualization(json) {

  // Basic setup of page elements.
  initializeBreadcrumbTrail();
  drawLegend();
  d3.select("#togglelegend").on("click", toggleLegend);

  // Bounding circle underneath the sunburst, to make it easier to detect
  // when the mouse leaves the parent g.
  vis.append("svg:circle")
      .attr("r", radius)
      .style("opacity", 0);

  // For efficiency, filter nodes to keep only those large enough to see.
  var nodes = partition.nodes(json)
      .filter(function(d) {
      return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
      });

  var path = vis.data([json]).selectAll("path")
      .data(nodes)
      .enter().append("svg:path")
      .attr("display", function(d) { return d.depth ? null : "none"; })
      .attr("d", arc)
      .attr("fill-rule", "evenodd")
      .style("fill", function(d) { return getColor(d.name, d.parent); })
      .style("opacity", 1)
      .on("mouseover", mouseover)
      .on("click", clickWheel);

  // Add the mouseleave handler to the bounding circle.
  d3.select("#container").on("mouseleave", mouseleave);

  // Get total size of the tree = value of root node from partition.
  totalSize = path.node().__data__.value;
 };

function getColor(name, parent) {
  if(typeof parent == 'undefined') {
    return '#000000';
  } else if(typeof colors[name] == 'undefined') {
    return getColor(parent.name, parent.parent);
  } else {
    return colors[name];
  }
}

// Fade all but the current sequence, and show it in the breadcrumb trail.
function mouseover(d) {

  //change the cursor to a pointer since this is a link
  this.style.cursor='pointer';

  var percentageString = d.name;

  d3.select("#percentage")
      .text(percentageString);

//console.log(d);

  if(typeof d.description == "undefined" || d.description == "") {
    d3.select("#description")
          .text("In the future, this text will be a description for " + d.name + ", and you can click it to get more information. Right now, it's a link to all research on the topic of " + d.name + ".");
  } else {
    d3.select("#description")
        .text(d.description);
  }

  d3.select("#explanation")
      .style("visibility", "");

  d3.select("#description")
      .style("visibility", "");

  var sequenceArray = getAncestors(d);
  updateBreadcrumbs(sequenceArray, percentageString);

  // Fade all the segments.
  d3.selectAll("path")
      .style("opacity", 0.3);

  // Then highlight only those that are an ancestor of the current segment.
  vis.selectAll("path")
      .filter(function(node) {
                return (sequenceArray.indexOf(node) >= 0);
              })
      .style("opacity", 1);
}

// Restore everything to full opacity when moving off the visualization.
function mouseleave(d) {

  // Hide the breadcrumb trail
  d3.select("#trail")
      .style("visibility", "hidden");

  // Deactivate all segments during transition.
  d3.selectAll("path").on("mouseover", null);

  // Transition each segment to full opacity and then reactivate it.
  d3.selectAll("path")
      .transition()
      .duration(1000)
      .style("opacity", 1)
      .each("end", function() {
              d3.select(this).on("mouseover", mouseover);
            });

  d3.select("#explanation")
      .style("visibility", "hidden");

  d3.select("#description")
      .style("visibility", "hidden");
}

// Given a node in a partition layout, return an array of all of its ancestor
// nodes, highest first, but excluding the root.
function getAncestors(node) {
  var path = [];
  var current = node;
  while (current.parent) {
    path.unshift(current);
    current = current.parent;
  }
  return path;
}

function initializeBreadcrumbTrail() {
  // Add the svg area.
  var trail = d3.select("#sequence").append("svg:svg")
      .attr("width", width)
      .attr("height", 75)
      .attr("id", "trail");
/*
  // Add the label at the end, for the percentage.
  trail.append("svg:text")
    .attr("id", "endlabel")
    .style("fill", "#000");
*/
}

// Generate a string that describes the points of a breadcrumb polygon.
function breadcrumbPoints(d, i) {
  var c = document.createElement("canvas");
  var ctx=c.getContext("2d");
  var w = ctx.measureText(d.name).width;
  w = b.w;
  var points = [];
/*
  //display points greater than 3 on a second line
  if(i > 2) {
    var y_start = 60;
  } else {
    var y_start = 0;
  }
*/
y_start = 0;
  points.push("0," + y_start );
  points.push(w + "," + y_start);
  points.push(w + b.t + "," + (y_start + b.h / 2));
  points.push(w + "," + (b.h + y_start));
  points.push("0," + (b.h + y_start));
  if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
    points.push(b.t + "," + (y_start + b.h / 2));
  }
  return points.join(" ");
}

// Update the breadcrumb trail to show the current sequence and percentage.
function updateBreadcrumbs(nodeArray, percentageString) {

  // Data join; key function combines name and depth (= position in sequence).
  var g = d3.select("#trail")
      .selectAll("g")
      .data(nodeArray, function(d) { return d.name + d.depth; });

  // Add breadcrumb and label for entering nodes.
  var entering = g.enter().append("svg:g");

  entering.append("svg:polygon")
      .attr("points", breadcrumbPoints)
      .style("fill", function(d) { return getColor(d.name, d.parent); });

w = b.w;
/*
  var c = document.createElement("canvas");
  var ctx=c.getContext("2d");
  console.log(ctx.measureText(d.name).width);
  var w = ctx.measureText(d.name).width;
*/

  entering.append("svg:text")
      .attr("x", (w + b.t) / 2)
//      .attr("x", function(d) { return "1"; })
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.name; });

  // Set position for entering and updating nodes.
  g.attr("transform", function(d, i) {
    w = b.w;
/*
  var c = document.createElement("canvas");
  var ctx=c.getContext("2d");
  console.log(ctx.measureText(d.name).width);
  var w = ctx.measureText(d.name).width;
*/
    if(i > 2) {
      var x_pos = (i - 3) * (w + b.s);
      var y_pos = 35;
    } else {
      var x_pos = i * (w + b.s);
      var y_pos = 0;
    }

    return "translate(" + x_pos + "," + y_pos + ")";
  });

  // Remove exiting nodes.
  g.exit().remove();

  // Now move and update the percentage at the end.
  d3.select("#trail").select("#endlabel")
      .attr("x", (nodeArray.length + 0.5) * (b.w + b.s))
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(percentageString);

  // Make the breadcrumb trail visible, if it's hidden.
  d3.select("#trail")
      .style("visibility", "");

}

function drawLegend() {

  // Dimensions of legend item: width, height, spacing, radius of rounded rect.
  var li = {
    w: 75, h: 30, s: 3, r: 3
  };

  var legend = d3.select("#legend").append("svg:svg")
      .attr("width", li.w)
      .attr("height", d3.keys(colors).length * (li.h + li.s));

  var g = legend.selectAll("g")
      .data(d3.entries(colors))
      .enter().append("svg:g")
      .attr("transform", function(d, i) {
              return "translate(0," + i * (li.h + li.s) + ")";
           });

  g.append("svg:rect")
      .attr("rx", li.r)
      .attr("ry", li.r)
      .attr("width", li.w)
      .attr("height", li.h)
      .style("fill", function(d) { return d.value; });

  g.append("svg:text")
      .attr("x", li.w / 2)
      .attr("y", li.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.key; });
}

function toggleLegend() {
  var legend = d3.select("#legend");
  if (legend.style("visibility") == "hidden") {
    legend.style("visibility", "");
  } else {
    legend.style("visibility", "hidden");
  }
}