//CAMUS BRAIN LOGO
//CHANGE top line to attach brain to whatever div you wish
//(currently looks )



var width = 960,
    height = 960,
    clone1;
var path = d3.geo.path(),
    force = d3.layout.force()

        var dotSide = 7,
            dotSep   = 1,
            logoXPadding = 2 * dotSide,
            logoYPadding = 2 * dotSide,
            h = Math.floor(logoXPadding / 2) - 0.5 * dotSide;
            v = Math.floor(height - logoYPadding / 2) - 0.5 * dotSide;
    var nodes = [],
        links = [];
    var svgNode;
    var flag = true;
    var logo = "LogoBlackMed.svg";
    if(width < 900) logo = "LogoBlacksmall.svg";
d3.xml(logo, "image/svg+xml", function(error, xml) {
  if (error) throw error;
    svgNode = xml
                .getElementsByTagName("svg")[0];
    draw();
});
function draw() {
    var nodes = [];
    var links = [];
    var xMove = 0;
    var yMove = 200;
    if (width < 800){
        yMove = 150;
        xMove = 50;
    }
    var svg = d3.select("svg")
        .attr("width", width)
        .attr("height", height).append("g").attr("transform","translate("+ (xMove) + "," + (yMove) + ")");


  //FROM MBOSTOCK FORCE STATES BLOCK
  var circles = d3.select(svgNode).selectAll("circle")[0];
  var paths = d3.select(svgNode).selectAll("path")[0];
 var newPaths = svg.append("g").classed("oldPaths",true).selectAll("path")
        .data(paths).enter()
        .append("path")
         .attr("d",function(d){
             var me = d3.select(d);
           //   console.log(d,"rawD");
             // console.log(me.attr("d"));
             return me.attr("d")
         })
         .attr("class",function(d){
             return d.classList[0];
         });
          var oldCircles = svg.append("g").classed("oldCircles",true).selectAll("circle")
                 .data(circles).enter()
                 .append("circle")
                  .attr("cx",function(d){
                      var me = d3.select(d);
                    //   console.log(d,"rawD");
                      return me.attr("cx")
                  })
                  .attr("cy",function(d){
                      var me = d3.select(d);
                    //   console.log(d,"rawD");
                      // console.log(me.attr("d"));
                      return me.attr("cy")
                  })
                  .attr("r", function(d) {
                      return d.r.baseVal.value})
                  .attr("class",function(d){
                      return d.classList[0];
                  });
  var arrCircles = [];
  var arrPaths = [];
  oldCircles[0].forEach(function(s){
      var me = d3.select(s);
      // console.log(me.node());
      arrCircles.push(me.node());
      var centroid = getMyCentroid(me.node())
      if (centroid.some(isNaN)) return;
        centroid.x = centroid[0];
        centroid.y = centroid[1];
        centroid.fixed = false,
        centroid.radius = 0;
        //DECIDE WHAT TO MAKE AS THE "FEATURE" cant get a real feature
        centroid.feature = me.node();
        centroid.class = me.attr("class");
        nodes.push(centroid);
  })
  newPaths[0].forEach(function(s){
      var me = d3.select(s);
      // console.log(me.node());
      arrPaths.push(me.node());
      var centroid = getMyCentroid(me.node())
      if (centroid.some(isNaN)) return;
        centroid.x = centroid[0];
        centroid.y = centroid[1];
        centroid.fixed = false;
        if(me.classed("st9"))
        centroid.fixed = true;
        centroid.radius = 0;
        //DECIDE WHAT TO MAKE AS THE "FEATURE" cant get a real feature
        centroid.feature = me.attr("d");
        centroid.class = me.attr("class");
        //
      nodes.push(centroid);
  })
// var total = nodes.push(circles);
// console.log(total,"both");
  d3.geom.voronoi().links(nodes).forEach(function(link) {
    var dx = link.source.x - link.target.x,
        dy = link.source.y - link.target.y;
    link.distance = Math.sqrt(dx * dx + dy * dy);
    links.push(link);
  });
svg.select("g.oldPaths").remove();
svg.select("g.oldCircles").remove();
// console.log(nodes);
nodes.unshift({x: 1e4, y: 1e4}); // insert root node
var root = nodes[0];
root.radius = 0;
root.fixed = true;
var charge = -100;
if(width < 800) charge = -50;
force
    //   .gravity(params.gravity.value)
        // .linkStrength(1.5)
         .linkStrength(5)
    //     .friction(params.friction.value)
      .nodes(nodes)
      .links(links)
    // .charge(function(d, i) { return i ? 0 : -400; })
    .charge(charge)
      .linkDistance(function(d,i) {return d.distance; })
      .size([width*1.5,height])
        // .theta(3)
      .gravity(0)
    // .charge(function(d, i) { return i ? 0 : -150; })
        // .linkDistance(0.1)
      .start();
      var drag = force.drag();
        //   .on("dragend", dragend)
        //   .on("dragstart", dragstart);
    flag = false;
  var node = svg.selectAll("g")
      .data(nodes);
    node.enter().append("g")
      .attr("transform", function(d) {return "translate(" + -d.x + "," + -d.y + ")"; })
      .call(drag)
    .append("path")
    //   .attr("transform", function(d,i) {if (typeof d != 'undefined')return; if(d.feature[0] === "M") return "translate(" + d.x + "," + d.y + ")"; })
      .attr("d", function(d,i) { if(i === 0) return; if(d.feature[0] === "M") return d.feature ;})
      .attr("class", function(d,i) {if(i === 0) return; if(d.feature[0] === "M") return d.class});
    node.append("g")
      .call(drag)
     .append("circle")
        .attr("cx", function(d,i) {if(i === 0) return; if(d.feature[0] !== "M") return d.feature.cx.baseVal.value; })
        .attr("cy", function(d,i) {if(i === 0) return; if(d.feature[0] !== "M") return d.feature.cy.baseVal.value; })
        .attr("r", function(d,i) {if(i === 0) return; if(d.feature[0] !== "M")  return d.feature.r.baseVal.value})
        .attr("class",function(d,i){
            if(i === 0) return;
            if(d.feature[0] !== "M")
            return d.feature.classList[0] + " " + "ball";
        });

svg
  .on("mousemove", mausIn)
  .on("touchmove", mausIn)
  .on("mouseout", mausOut)
  .on("touchend", mausOut);
d3.select("svg")   .on("click",click);
var clickF = false;
function click(){
    // force.gravity(-.01)
    if(clickF) {
        // force.start();
        // force
        // .linkDistance(function(d,i) {return d.distance})
        addNodes();
        clickF = false;
    } else {
    //  d3.selectAll("path").transition()
    //   .duration(2750)
    // //   .attr("transform",function(d,i){return "translate(" + i +"," + i + ")" + "scale(" + i +")" });
    // .style("transform","scale(2)")
        // node.filter(function(d) {return d.fixed == true})
        // .each(function(d){
        //     d3.select(this).transition().attr()
        // })
        // setTimeout(function(){explode()},4000);
    var bbox = node.node().getBBox();
// svg.transition().attr("transform","translate(" + (-width/4) + "," + (-height/4) + ") scale(2)");
         node.filter(function(d) {return d.fixed == false})
            .transition()
            // .ease("elastic-out")
            .ease("cubic-out")
            .delay(function(d,i){return (Math.random() * 40) * 20})
            // .duration(500).attr("transform",function(d){return "translate(0,-1000)" + " scale(" + (Math.random()* (5 - .1) + .1) + ")"});
            // node.transition()
            .duration(5500)
            .attr("transform",function(d){ console.log(d);
                // return "translate(" + (Math.floor(Math.random() * 501) - 500) + ",-2700)" +
                 return "translate(" + (-200) + ", -200)" +
                " scale(" + (Math.random()* (2 - .001) + .001) + ")" +
                " rotate(-25)"
                // "rotate(-180, " + d[0] + ", " + d[1] + ")";
            });
        // force
        // .linkDistance(function(d,i) {if(d3.select(d)[0][0].target.class !== "st9") return d.distance*10;
        // else return d.distance})
        // .gravity(.1)
        //  .friction(.02)
        // force.start();
         clickF = true
    }
}
function mausOut() {
  var p1 = d3.mouse(this);
  root.px = root.py = 1e4;
  force.resume();
}
function mausIn() {
  var p1 = d3.mouse(this);
  root.px = p1[0];
  root.py = p1[1];
  force.resume();
}
  force.on("tick", function(e) {
     var q = d3.geom.quadtree(nodes),
    i = 0,
    n = nodes.length;
    svg.selectAll("path").attr("transform", function(d,i) {
        if(isNaN(d.x) || isNaN(d.y)) return;
      return "translate(" + d.x + "," + d.y + ")";
    });
    svg.selectAll("circle").attr("transform", function(d,i) {
        if(isNaN(d.x)) return;
        if(isNaN(d.y)) return;
      return "translate(" + d.x + "," + d.y + ")";
    });
//END OF TICK
  });

}
var myVar = setInterval(addNodes, 20000);
function getMyCentroid(element) {
    var me = d3.select(element);
    var bbox = me.node().getBBox();
    return [bbox.x + bbox.width/2, bbox.y + bbox.height/2];
}
function dragstart(d) {
    clone1 = JSON.parse(JSON.stringify(nodes));
    // console.log(clone1);
}
function addNodes() {
        d3.selectAll("svg")
                .remove();
         draw();
}
function showLinks() {
    if (!flag) {
        d3.selectAll("line").style("stroke","lightgray");
        flag = true;
    } else {
        flag = false
        d3.selectAll("line").style("stroke","none");
    }
}
function dragend(d) {}





//Extra collide function
 function collide(node) {
   var r = node.radius + 16,
       nx1 = node.x - r,
       nx2 = node.x + r,
       ny1 = node.y - r,
       ny2 = node.y + r;
   return function(quad, x1, y1, x2, y2) {
       if(x1 === NaN) return;
       if(x2 === NaN) return;
       if(y1 === NaN) return;
       if(y2 === NaN) return;
     if (quad.point && (quad.point !== node)) {
       var x = node.x - quad.point.x,
           y = node.y - quad.point.y,
           l = Math.sqrt(x * x + y * y),
           r = node.radius + quad.point.radius;
       if (l < r) {
         l = (l - r) / l * .5;
         node.x -= x *= l;
         node.y -= y *= l;
         quad.point.x += x;
         quad.point.y += y;
       }
     }
     return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
   };
 }