Carousel slide interactions

gistfile1.coffee

class Visible
  constructor: (@slides) ->
  
  push: (slide) ->
    slide.set('far_right')
    @slides.push(slide)
  
  unshift: (slide) ->
    slide.set('far_left')
    @slides.unshift(slide)
  
  pop: ->
    slide = @slides.pop()
    slide.set('hidden')
    slide
  
  shift: ->
    slide = @slides.shift()
    slide.set('hidden')
    slide

class WingedCaroucel
  animationPositions =
    forward:
      0: 'far_left'
      1: 'left'
      2: 'center'
      3: 'right'
    reverse:
      0: 'left'
      1: 'center'
      2: 'right'
      3: 'far_right'
  
  constructor: ($ul) ->
    $ul.css
      position: 'relative'
      overflow: 'hidden'
    slides = $ul.children('li')
    slides.css
      position: 'absolute'
      top: 0
      left: 0

    if slides.length is 1
      centerSlide = new Slide(slides[0])
      centerSlide.set('center')
      return
    if slides.length is 2 or slides.length is 3
      # append last, then second to last element to slides

    leftSlide = new Slide(slides.pop())
    leftSlide.set('left')
    centerSlide = new Slide(slides.shift())
    centerSlide.set('center')
    rightSlide = new Slide(slides.shift())
    rightSlide.set('right')

    @visible = new Visible([leftSlide,centerSlide,rightSlide])

    @hidden = (new Slide(slideEl) for slideEl in slides)

  moveForward: ->
    @visible.push(@hidden.shift())
    @animate('forward')
    @hidden.push(@visible.shift())
  moveBack: ->
    @visible.unshift(@hidden.pop())
    @animate('reverse')
    @hidden.unshift(@visible.pop())
  
  animate: (direction) ->
    for slide,i in @visible
      @visible[i].animateTo(animationPositions[direction][i])

class Slide
  positions = 
    far_left: '-20px'
    left: '0'
    center: '20px'
    right: '40px'
    far_right: '60px'
    hidden: '9999px'
  
  constructor: ($el) ->
    @$el = $($el)
    
  set: (position) ->
    @$el.css('left',positions[position])
  
  animateTo: (position) ->
    @$el.animate({left: positions[position]})