var container = d3.select("body"),
    article = d3.select("article"),
    scrollH = article.node().scrollHeight,
    offsetH = article.node().offsetHeight,
    n = Math.ceil(scrollH / offsetH),
    xScale = d3.scalePow().range([450/2+50, innerWidth-25]),
    randRotate = d3.randomUniform(-5, 5),
    activeI = 0

d3.range(n-1).forEach(function(i) {
  d3.select(container.node().appendChild(article.node().cloneNode(true)))
})

var data = d3.range(n).map(d => ({
  i: d
}))

d3.selectAll("article")
  .data(data)
  .style("left", (d,i) => `${xScale(-Math.pow((i/n) - 1, 4) + 1)}px`)
  .style("top", `${innerHeight/2}px`)
  .style("top", d => innerHeight/2 + innerHeight/(5*d.i+1) * Math.sin(d.i) + "px")
  .style("transform", (d,i) => `
    translate(-50%, -50%)
    rotate(${randRotate()}deg)
    scale(${Math.pow(.7, i)})
  `)
  .style("z-index", (d,i) => n-i)
  .each(function(d,i) {
    this.scrollTop = i * offsetH
  })
  .on("mouseenter", (d,i) => activeI = i)
  .on("scroll", function(d,i) {
    if(i == activeI) {
      var current = this
      d3.selectAll("article")
        .filter((dd,ii) => ii !== i)
        .each(function(dd) {
          var newScrollTop = current.scrollTop + (dd.i - d.i) * offsetH
          var newHeight;
          if(newScrollTop < 0) {
            newHeight = Math.max(offsetH + newScrollTop,0)
          } else if(newScrollTop > scrollH - offsetH) {
            newHeight = Math.max(offsetH - (newScrollTop - (scrollH - offsetH)),0)
          } else {
            newHeight = offsetH
          }
          d3.select(this).style("height", `${newHeight < 2 ? 0 : newHeight}px`)
          this.scrollTop = newScrollTop
        })
    } else {
      d3.event.preventDefault()
    }
  })

// d3.timer(function(t) {
//   d3.selectAll("article")
//     .style("top", d => innerHeight/2 + innerHeight/(8*d.i) * Math.sin(t/2000 + d.i) + "px")
// })