console.clear()

d3.select('body').selectAppend('div.tooltip.tooltip-hidden')


var dataSlides = [
  [
    {
      "x": 50,
      "y": 166.21283523133368
    },
    {
      "x": 150.00000000000003,
      "y": 162.1994740865985
    },
    {
      "x": 250,
      "y": 207.82778795407094
    },
    {
      "x": 350.00000000000006,
      "y": 207.2138488493635
    },
    {
      "x": 450,
      "y": 203.12844844701576
    }
  ],

  [
    {
      "x": 50,
      "y": 166.21283523133368
    },
    {
      "x": 150.00000000000003,
      "y": 163.1994740865985
    },
    {
      "x": 250,
      "y": 286.82777269528185
    },
    {
      "x": 350.00000000000006,
      "y": 45.213845034666235
    },
    {
      "x": 450,
      "y": 43.12844463231849
    }
  ]
]


var drag = d3.drag()
  .on('drag', d => {
    // d.x = d3.event.x
    d.y = d3.event.y
    render(0)
  })

var sel = d3.select('#graph').html(''),
    width = sel.node().offsetWidth,
    height = innerWidth > 925 ? width : innerHeight*.7,
    r = 30

_.flatten(dataSlides).forEach(d => d.r = d.r || r)

var svg = sel.html('').append('svg').at({width, height})

var data = JSON.parse(JSON.stringify(dataSlides[0]))

var area = d3.area()
  .y0(d => d.y - d.r)
  .y1(d => d.y + d.r)
  .x(d =>  d.x)

var pathAreaSel = svg.append('path')
  .at({fill: '#f0f', fillOpacity: .9})


var line = d3.line()
  .y(d => d.y)
  .x(d => d.x)

var pathLineSel = svg.append('path')
  .at({stroke: '#0ff', strokeOpacity: .8, fill: 'none', strokeWidth: r*2})
  .translate([0, r*5])


var circleSel = svg
  .appendMany('circle', data)
  .at({stroke: '#eee', fillOpacity: 0, r, strokeDasharray: '2 2'})
  .st({cursor: 'pointer'})
  // .call(d3.attachTooltip)
  .call(drag)


var strokeHeightSel = svg.appendMany('path', d3.pairs(data))
  .at({stroke: '#00f', strokeWidth: 1.5})

var strokeWidthSel = svg.appendMany('path', d3.pairs(data))
  .at({stroke: '#00f', strokeWidth: 1.5})

function strokeHeightPath([a, b]){
  return [
    'M',
    (a.x + b.x)/2,
    (a.y + b.y)/2 - (a.r + b.r)/2,
    'v',
    (a.r + b.r)
  ].join(' ')
}

function strokeWidthPath([a, b]){
  var angle = calcAngle(a, b)
  var dist = r*2

  return [
    'M',
    (a.x + b.x)/2,
    (a.y + b.y)/2 - (a.r + b.r)/2,
    'l',
    Math.cos(angle - Math.PI/2) * dist,
    Math.sin(angle - Math.PI/2) * dist,
  ].join(' ')

  function calcAngle(a, b){
    return Math.atan2(a.y - b.y, a.x - b.x)
  }
}

render(0)

function render(duration) {
  circleSel.transition().duration(duration)
    .translate(d => [d.x, d.y])
  pathAreaSel.transition().duration(duration)
    .at({d: area(data)})
  pathLineSel.transition().duration(duration)
    .at({d: line(data)})

  strokeHeightSel.data(d3.pairs(data))
    .transition().duration(duration)
    .at({d: strokeHeightPath})

  strokeWidthSel.data(d3.pairs(data))
    .transition().duration(duration)
    .at({d: strokeWidthPath})

}


function step(i){
  console.log(i)
  if (dataSlides[i]){
    data.forEach((d, j) => {
      d.x = dataSlides[i][j].x
      d.y = dataSlides[i][j].y
    })
  }
  // data.forEach(d => d.y = Math.random()*height)
  render(1000)
}

var gs = d3.graphScroll()
    .container(d3.select('#container'))
    .graph(sel)
    .eventId('uniqueId1')
    .sections(d3.selectAll('#sections > div'))
    // .offset(innerWidth < 900 ? innerHeight - 30 : 200)
    .on('active', step)