var units = "Widgets";

// Dimensiones del mapa
var margin = {top: 250, right: 50, bottom: 10, left: 100};
var width = screen.width - margin.left - margin.right;
var height = screen.height / 3;
var height_offset = (screen.height / 100) * 50;

// SVG en donde pintar todo
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 / 2) + "," + margin.top + ")")
;

// Propiedades del Sankey
var sankey = d3.sankey()
  .nodeWidth(0)
  .nodePadding(0)
  .size([width, height])
;

// Propiedades de los links
var path = d3.linkHorizontal()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y + (d.dy / 2);
  })
;

// crea el tip y sus características
var tip = d3.tip()
	.direction("n")
  .attr('class', 'd3-tip')
  .offset(function(d){
		if (d.x > 200){
			return [-10, 0];
		}
	})
  .html(function(d) {
		return d.descripcion;
	})
;

//llama al tip para que se cree en el svg
svg.call(tip);

// Carga los datos y pinta todo
d3.json("proceso_2.json", function(error, graph) {

	//datos del json a sankey
  sankey
  	.nodes(graph.nodes)
    .links(graph.links)
    .layout(0)
  ;

	// Agrega los links
  var link = svg
		.append("g")
		.selectAll(".link")
    .data(graph.links)
    .enter()
			.append("path")
      .attr("class", "link")
      .attr("d", path)
      .style("stroke-width", 5)
			.style('stroke', function(d){
				if (d.color == "Naranja"){
					return "#F59B00";
				} else if (d.color == "Amarillo"){
					return "#ffff33"
				}
			})
      .sort(function(a, b) {
				return b.dy - a.dy;
			})
	;

	// Agrega los nodos
  var node = svg
		.append("g")
		.selectAll(".node")
    .data(graph.nodes)
    .enter()
			.append("g")
      .attr("class", "node")
      .attr("transform", function(d) {
		  	return "translate(" + d.x + "," + d.y + ")";
			})
			.on('mouseover', tip.show)
			.on('mouseout', tip.hide)
      .call(d3.drag()
        .subject(function(d) {
          return d;
        })
        .on("start", function() {
          this.parentNode.appendChild(this);
        })
        .on("drag", dragmove))
	;

	// Agrega los círculos de los nodos
  node
		.append("circle")
		.attr("cx", sankey.nodeWidth() / 2)
		.attr("cy", function (d) {
			return d.dy / 2;
		})
		.attr("r", function (d) {
			return 7;
		})
    .style("fill", "white")
    .style("stroke", function(d) {
			if(d.tipo == "Punitivo"){
				return "#F59B00";
			} else {
				return "#ffff33";
			};
		})
		.style('stroke-width', '5px')
    .append("title")
      .text(function(d) {
		  return d.name;
		})
	;

	// Agrega los títulos de los nodos
  node
		.append("text")
    .attr("x", function(d){
			return d.dx;
		})
    .attr("y", function(d) {
			return d.dy - (d.dy / 6);
		})
    .attr("text-anchor", "middle")
    .text(function(d) {
			return d.name;
		})
		.attr('font-size', '9')
		.call(wrap, 70)
	;

	// Función para mover los nodos
  function dragmove(d) {
    d3.select(this)
      .attr("transform", "translate("+ d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
    sankey.relayout();
    link.attr("d", path);
  }

	//función para ajustar cuadro de texto del proceso
	function wrap(text, width) {
		text.each(function() {
			var text = d3.select(this);
			var words = text.text().split(/\s+/).reverse();
			var word;
			var line = [];
			var lineNumber = 0;
			var lineHeight = 1; // ems
			var x = text.attr("x");
			var y = text.attr("y");
			var dy = parseFloat(text.attr("dy"));
			var tspan = text.text(null)
				.append("tspan")
					.attr("x", x)
					.attr("y", y)
					.attr("dy", dy + "em")
			;
			while (word = words.pop()) {
				line.push(word);
				tspan.text(line.join(" "));
				if (tspan.node().getComputedTextLength() > width) {
					line.pop();
					tspan.text(line.join(" "));
					line = [word];
					tspan = text.append("tspan")
						.attr("x", x)
						.attr("y", y)
						.attr("dy", ++lineNumber * lineHeight + "em")
						.text(word);
				}
			}
		});
	}
});