var width = 960,
    height = 500,
    delay = 1000,
    duration = 1000,
    circleInitialPosition = 200,
    circleCount = 7,
    circleSpacing = width/(circleCount+1),
    circleMovingIncrement = 30,
    data = d3.range(circleCount),
    explanations = _makeExplanations(),
    explanationArea = d3.select(".explanation-area");

var svg = d3.select("body").insert("svg", ".top-container")
  .attr("width", width)
  .attr("height", height);

_goToStage(0);

function _playStage0() {
  //prepare the field, add circles to svg
  svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
      .attr("transform", function(d,i) { return "translate(" + circleSpacing*(i+1) + "," + circleInitialPosition + ")" ;})
      .attr("r", 10)
      .style("stroke", '#000');
}

function _playStage1() {
  //Highlight selected circles (bigger, green stroke)
  svg.selectAll("circle")
    .transition("playStage1")
      .attr('r', 15)
      .style('stroke', 'green')
      .ease('bounce')
      .duration(duration);
}

function _rewindStage1() {
  //interrupt stage1's transitions (running and scheduled)
  svg.selectAll('circle')
    .transition("playStage1")
      .duration(0)

  //rewind to stage1's initial state
  svg.selectAll("circle")
    .transition("rewindStage1")
      .attr('r', 10)
      .style("stroke", '#000');
}

function _playStage2() {
  //Draw one scheduled transition per circle
  //Each transitiopn as a head, a body, a tail, a start time, and an end time
  var drawnTransitions = svg.selectAll(".drawn-transition")
    .data(data)
    .enter().append("g")
      .classed("drawn-transition", true)
      .attr("transform", function(d,i) { return "translate(" + circleSpacing*(i+1) + "," + circleInitialPosition + ")" ;})
  var tails = drawnTransitions.append("path")
    .classed("tail", true)
    .attr("d", d3.svg.symbol().size(20))
    .style("fill", 'grey')
    .style("stroke", 'grey');
  var bodies = drawnTransitions.append("line")
    .classed("body", true)
    .attr({x1: 0, y1: 0, x2: 0, y2: 0})
    .attr("stroke-dasharray", "5")
    .style("stroke", 'grey');
  var heads = drawnTransitions.append("path")
    .classed("head", true)
    .attr("d", d3.svg.symbol().type("triangle-down").size(40))
    .style("fill", 'grey')
    .style("stroke", 'grey');
  var starts = drawnTransitions.append("text")
    .classed("start-time", true)
    .attr("transform", function (d, i) { return "translate(-10, " + (circleMovingIncrement*(i+1) + 15) + ")"; })
    .text(function(d, i) {return "start: " + i + "s"})
    .attr("text-anchor", "end")
    .attr("font-size", "13px")
    .style("fill", 'grey')
    .attr("fill-opacity", 0)
    .style("stroke", 'green')
    .attr("stroke-width", 2)
    .attr("stroke-opacity", 0);
  var ends = drawnTransitions.append("text")
    .classed("end-time", true)
    .attr("transform", function (d, i) { return "translate(-10, " + (circleMovingIncrement*(i+1) + 30) + ")"; })
    .text(function(d, i) {return "end: " + (2*i+1) + "s"})
    .attr("text-anchor", "end")
    .attr("font-size", "13px")
    .style("fill", 'grey')
    .attr("fill-opacity", 0)
    .style("stroke", 'red')
    .attr("stroke-width", 2)
    .attr("stroke-opacity", 0);

  //Animate each transition (longer bodies, adequate position of heads, show start-times and end-times)
  bodies.transition("playStage2")
    .attr("y2", function(d, i) { return circleMovingIncrement*(i+1); })
    .duration(duration);
  heads.transition("playStage2")
    .attr("transform", function (d, i) { return "translate(0, " + circleMovingIncrement*(i+1) + ")"; })
    .duration(duration);
  starts.transition("playStage2")
    .attr("fill-opacity", 1)
    .duration(duration);
  ends.transition("playStage2")
    .attr("fill-opacity", 1)
    .duration(duration);

  //Prepare animation for the next stage: add an 'executed-body' on each transition
  var executedBodies = drawnTransitions.append("line")
    .attr("class", "executed-body")
    .attr({x1: 0, y1: 0, x2: 0, y2: 0})
    .style("stroke", 'grey');
}

function _rewindStage2() {
  //interrupt stage2's transitions (running and scheduled)
  svg.selectAll('.drawn-transition')
    .transition("playStage2")
      .duration(0)

  //rewind to stage2's initial state
  svg.selectAll(".drawn-transition")
    .transition("rewindStage2")
      .style("fill-opacity", 0)
      .style("stroke-opacity", 0)
      .remove();
}

function _playStage3() {
  //Run each transition, move circles down
  svg.selectAll('circle')
    .transition("playStage3")
      .attr('cy', function(d, i) { return circleMovingIncrement*(i+1); })
      .delay(function(d, i) { return delay*(i); })
      .duration(function(d, i) { return duration*(i+1); })
      .ease('linear')

  //Create transitions for each drawn-transition.
  //Graphically speaking, those transitions does nothing
  //Those transitions allow synchronization between sub-transitions that applie on sub-elements of each drawn-transition
  var drawnTransitionAnimations = svg.selectAll(".drawn-transition")
    .transition("playStage3")
      .delay(function(d, i) { return delay*i; })
      .duration(function(d, i) { return duration*(i+1); })

  //Run each transition, make the body of each drawn-transition 'solid' (instead of being dashed)
  drawnTransitionAnimations.each(function (d, i) {
    d3.select(this).select(".executed-body")
      .transition("playStage3")
        .attr("y2", circleMovingIncrement*(i+1))
        .ease('linear')
  })
  drawnTransitionAnimations.each(function (d, i) {
    d3.select(this).select(".body")
      .transition("playStage3")
        .attr("y1", circleMovingIncrement*(i+1))
        .ease('linear')
  })

  //Run each transition, highlight each start-time
  drawnTransitionAnimations.each('start', function () {
    d3.select(this).select('.start-time')
      .attr("stroke-opacity", 1)
      .transition("playStage3")
        .attr("stroke-opacity", 0)
  })

  //Run each transition, highlight each end-time
  drawnTransitionAnimations.each('end', function () {
    d3.select(this).select('.end-time')
      .attr("stroke-opacity", 1)
      .transition("playStage3")
        .attr("stroke-opacity", 0)
  })
}

function _rewindStage3() {
  //interrupt stage3's transitions (running and scheduled)
  svg.selectAll('circle')
    .transition("playStage3")
      .duration(0)

  svg.selectAll('.drawn-transition')
    .transition("playStage3")
      .duration(0)

  svg.selectAll('.executed-body')
    .transition("playStage3")
      .duration(0)

  svg.selectAll('.body')
    .transition("playStage3")
      .duration(0)

  svg.selectAll('.start-time')
    .transition("playStage3")
      .duration(0)

  svg.selectAll('.end-time')
    .transition("playStage3")
      .duration(0)

  //rewind to stage3's initial state
  svg.selectAll('circle')
    .transition("rewindStage3")
      .attr('cy', 0);

  svg.selectAll(".executed-body")
    .transition("rewindStage3")
      .attr('y2', 0);

  svg.selectAll(".body")
    .transition("rewindStage3")
      .attr('y1', 0);

  svg.selectAll(".start-time")
    .transition("rewindStage3")
      .attr('stroke-opacity', 0);

  svg.selectAll(".end-time")
    .transition("rewindStage3")
      .attr('stroke-opacity', 0);
}

function _goToStage(n) {
  switch (parseInt(n)) {
  case 0:
    _rewindStage3();
    _rewindStage2();
    _rewindStage1();
    _playStage0();
    break;
  case 1:
    _rewindStage3();
    _rewindStage2();
    _playStage0();
    _playStage1();
    break;
  case 2:
    _rewindStage3();
    _playStage0();
    _playStage1();
    _playStage2();
    break;
  case 3:
    _playStage0();
    _playStage1();
    _playStage2();
    _playStage3();
    break;
  }
  _updateExplanations(n);
}

function _makeExplanations() {
  return [
    {
      stageIndex: 0,
      explanation: "<== Choose a line of code for more explanations."
    },
    {
      stageIndex: 1,
      explanation: "<em>d3.selectAll(...)</em> selects several elements. In this example, it selects the " + circleCount + " circles."
    },
    {
      stageIndex: 2,
      explanation: "<b>selectAll(...).transition() schedules<sup>*</sup> SEVERAL transitions</b><br> As explained in <a href='http://bost.ocks.org/mike/transition/#per-element' target='_blank'>Transitions Are per-Element and Exclusive</a>, <em>selectAll(...).transition()</em> schedules 1 transition per selected element. This example schedules " + circleCount + " transitions, one per circle. Each transition has its own <em>delay</em>, <em>duration</em>, and end value of the <em>cy</em> attribute. <em>delay</em> and <em>duration</em> allows to derive the start time and the end time of a transition.<br><br><sup>*</sup>In the D3 world, <em>scheduling</em> a transition means <em>defining</em> a transition, ie. setting its properties."
    },
    {
      stageIndex: 3,
      explanation: "As explained in <a href='http://bost.ocks.org/mike/transition/#life-cycle' target='_blank'>The Life of a Transition</a>, when the scheduling of transitions is complete, each transition waits until it can start, then runs, and then stops.<br><br><b>Each transition runs independantly</b><br>When a transition stops or is interupted, this has no side-effect on other transitions, even on sibling transitions (ie. defined by the same JavaScript lines of code). As a proof, note that when one of the transitions of this example stops, others transitions to the right still continue to run!<br> Synchronization between transitions comes with identical delays and/or durations."
    }
  ]
}

function _updateExplanations (index) {
  var explanation = explanations[index].explanation;
  //update explanations

  explanationArea.transition()
    .style("opacity", 0)
    .each('end', function() {
      explanationArea.html(explanation);
    })
  .transition()
      .style("opacity", 1);
}