var tree_x = tributary.sw/2 + 410;
var tree_y = 55;
var tree_scale = .24;
var ncurves = 20;

var head = [565, 266];
var root = [0, 250];

var left_heads = [
  [358, 284],
  [363, 170],
  [330, 199],
  [380, 186],
  [330, 150],
  [405, 113]
];
var right_heads = [
  [558, 153],
  [515, 183],
  [595, 210],
  [580, 250],
  [567, 260]
];

var font_size = 15;
var font_face = "Arial";

tributary.duration = 3000;
tributary.ease = d3.ease("quad");
tributary.loop = "pingpong"

var sentences = [
  "Better to be thought a fool then open your mouth and remove all doubt",
  "I don't give a damn for a man that can only spell a word one way.",
  "I don't like to commit myself about heaven and hell - you see, I have friends in both places."
]


tributary.init = function(g) {

var make_curve = function(i) {
  var start, end, curve, amp;
  if(i % 2 === 0) { //even curves go left
  	start = left_heads[(i/2) % left_heads.length];
    curve = -100 * Math.random() - 20;
    end = [
      root[0] + Math.random() * 20 -10,
  	  root[1] + Math.random() * 100 -30
    ]
  } else {
    start = right_heads[parseInt(i/2) % right_heads.length];
    curve = 100 * Math.random() + 20;
    end = [
      root[0] + Math.random() * 20 -10,
  	  root[1] + Math.random() * 100 -30
    ]
  }
  var xoff = -30 + Math.random() * 100;
  var yoff = -15 + Math.random() * 30;

  amp = 40 * Math.random() + 35;
  var cdata = {
    i: i,
    start: start,
    end: end,
    curve: curve,
    amp: amp,
    xoff: xoff,
    yoff: yoff
  }


  var c = g.selectAll("path#curve" + i)
    .data([cdata])
    .enter()
    .append("path").attr("id", "curve" + i)
      .classed("curve", true)

  c
  //.attr('stroke','blue')
  //.attr('stroke-width',3)
  .attr('fill','none')
    .attr('d', function(d) {
      var path = 'M '+d.start[0]+' '+d.start[1]+' q '+d.curve+' '+d.amp+' '+d.end[0]+' '+d.end[1];
      return path
    })
    var sentence = sentences[i%sentences.length];
    var text = g.append('text')
    	.attr('font-size',font_size)
    	.attr('font-family',font_face)


var string = text.selectAll("textPath.txt")
    .data([sentence])
    .enter()
    .append('textPath')
    .attr('xlink:href','#curve' + i)
    .classed("txt", true)
  	.text(sentence)
}
//i happen to host this on the same domain, but you
//can load a remote file as long as Access-Control-Allow-Origin:* header is set
d3.html("/static/svgs/tree.svg", function(data) {
	g.node().appendChild(data);

 	var tree_trunk = g.select("#tree_trunk");
  	var bbox = tree_trunk.node().getBBox();
  	tree_trunk
    	.attr("transform", "translate(" + [tree_x - bbox.width/2, tree_y] + ")scale(" + tree_scale + ")")

	g.append("circle")
      .attr("cx", head[0])
      .attr("cy", head[1])
      .attr("r", 13)
      .attr("fill", "none")
      //.attr("stroke", "#ff0000")

    var curves = d3.range(ncurves);
  for(i in curves) {
    make_curve(i);
  }
});
}

tributary.run = function(g,t) {
  g.selectAll(".curve")
    .attr('d', function(d) {

     var end = [
       d3.interpolate(d.end[0], d.end[0] + d.xoff)(t),
       d3.interpolate(d.end[1], d.end[1] + d.yoff)(t)
       ]
      var path = 'M '+d.start[0]+' '+d.start[1]+' q '+d.curve+' '+d.amp+' '+end[0]+' '+end[1];
      return path
    })
    g.selectAll(".txt")
      .text(function(d) {
        return d;
      })
}