"use strict";

(function() {
  var loc = window.location.pathname,
    dir = loc.substring(0, loc.lastIndexOf('/'));

  var svg = d3.select("svg");

  var widthWindow = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var heightWindow = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  svg.attr("width", widthWindow / 1.5);
  svg.attr("height", heightWindow / 1.5);

  var width = +svg.attr("width"),
    height = +svg.attr("height");

  d3.select(window)
    .on("resize", function() {
      var widthWindow = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      var heightWindow = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      svg.attr("width", widthWindow / 2);
      svg.attr("height", heightWindow / 2);
    });

  var color = d3.scaleOrdinal(d3.schemeCategory20);

  var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) {
      return d.id;
    }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));


  d3.json(dir + "data/out/corpus/graph.json", function(error, graph) {
    if (error) throw error;

    var link = svg.append("g")
      .attr("class", "links")
      .selectAll("line")
      .data(graph.links)
      .enter().append("line")
      .attr("stroke-width", function(d) {
        return d.value;
      })

    var node = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle")
      .data(graph.nodes)
      .enter().append("circle")
      .attr("r", function(d) {
        return 7;
        // return 10 * d.specificity;
      })
      .attr("fill", function(d) {
        return color(d.group);
      })
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended))
      .on("click", function(d) {
        window.open('/data/in/corpus/' + d.istex + '.txt');
      })
      .on("mouseover", function(d) {
        d3.select("#subtitle").transition();
        d3.select("#subtitle").style("opacity", 1);
        d3.select("#subtitle").text(() => {
          return d3.select(this).selectAll("title").text();
        })
        d3.select(this).transition().attr("r", 14).duration(200);
      })
      .on("mouseleave", function(d) {
        d3.select("#subtitle").transition().style("opacity", 0).duration(200);
        d3.select(this).transition().attr("r", 7).duration(200);
      });

    node.append("title")
      .text(function(d) {
        return d.istex + '\n' + d.value;
      });

    link.append("title")
      .text(function(d) {
        return d.value;
      });

    simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

    simulation.force("link")
      .links(graph.links);

    function ticked() {
      link
        .attr("x1", function(d) {
          return d.source.x;
        })
        .attr("y1", function(d) {
          return d.source.y;
        })
        .attr("x2", function(d) {
          return d.target.x;
        })
        .attr("y2", function(d) {
          return d.target.y;
        });

      node
        .attr("cx", function(d) {
          return d.x;
        })
        .attr("cy", function(d) {
          return d.y;
        });
    }
  });

  function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }

  function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }

  function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }

})();