nonlinear-scroll.coffee

# nonlinear scrolling of idea attachments
# we want to make it like the scrolling pauses on each attachment
# for this we create an empty wrapper with the same width, height and use a fixed positioning for attachments container
# this way we can freely decide where to position them based on window's scroll position, and the wrapper will keep the
# preserved space in the document

$(window).on 'scroll', ->
  container = $('.nonlinear-scroll')
  wrapper = $('.nonlinear-scroll-wrapper')
  breathePoints = $('.nonlinear-scroll-breathe-point')

  fixedHeight=false
  fh=300
  sumh = 0; breathePoints.each (index, elem) -> sumh += $(elem).outerHeight(true)
  remainingh = container.outerHeight(true)-sumh

  # make the wrapper and position the container
  wrapper.height(if fixedHeight then (1+breathePoints.size()) * fh + remainingh else container.height())
  cwidth = container.width()
  container.css position:'fixed', width: cwidth

  # we have everything related to the wrapper, so calculations are simpler
  position = $(window).scrollTop() - wrapper.offset().top

  console.log "position #{position}, height #{wrapper.height()}"
  if position < 0 or position > wrapper.height()
  #we are out of unlinear scroll area, thereis nothing to do
    container.css position:'static'
    return

  #find which breathePoint is there
  breathePoint = null
  distance= 0 #is how much of the element is passed the #scroll
  eh=0
  scrollHeight = 0 # how much of scroll Height is assigned to the element
  if fixedHeight
    n = Math.floor(position/fh)
    if n < breathePoints.size()
      breathePoint = $(breathePoints[n])
      distance = position - n * fh
      scrollHeight = fh
      eh = breathePoint.outerHeight(true)
      console.log(distance)
  else
    breathePoints.each (index, elem) ->
      elem = $(elem)
      etop = elem.position().top
      eh = elem.outerHeight(true)
      scrollHeight = eh
      if  etop <= position < etop + eh
        breathePoint = elem
        distance = position - etop
        false
      else
        true

  if breathePoint
    #apply the easing function
    #      console.log(easeInOut(distance/eh))
    easedPos = breathePoint.position().top +  eh * easeInOut(distance/scrollHeight)


    container.css top: -easedPos
  else  #we are passed all the breathe points, no easing anymore
    if fixedHeight
      n = Math.round(position/fh)
      distance = position - breathePoints.size() * fh
      container.css top: -(sumh + distance)
    else
      container.css top: -position

easeInOut = (x) ->
  p=4
  x2 = Math.pow(x,p)
  x12 = Math.pow(1-x,p)
  x2 / (x2 + x12)