rotateWindow03.coffee

$ -> 
  log = (x) ->
    console.log x

  navs = $('#navs').children()
  divs = $('#divs').children()
  panels = $('.panel')
  crntPage = 0

  navs.each (index) ->
    $(@).click -> 
      log "click"
      diff = index - crntPage

      deg = if diff > 0 then 180 else -180

      $(divs[index]).css 'transform', 'rotateZ(0deg)'
      setTimeout ->
        for i in [crntPage...index]
          $(divs[i]).css 'transform', "rotateZ(#{deg}deg)"

        crntPage = index
      , 100
      

  position = 0
  touched = false


  getPosition = (event) ->
    event.originalEvent.pageX

  onTouchStart = (event) ->
    position = getPosition event
    touched = true

  onTouchMove = (event) ->
    if !touched then return
    
    move = position - getPosition event

    log position - getPosition event

    if move < -300 or 300 < move
      deg = if move < 0 then -180 else 180
      $(@).css 
        'transform'   : "rotateZ(#{deg}deg)"
        'transition'  : "all ease-out 0.5s"

    $(@).css 'transition'  : "all ease-out 1.0s"

  onTouchEnd = (event) ->
    touched = false

  divs.each (index) ->
    $(@).on 'touchstart mousedown', onTouchStart
    $(@).on 'touchmove mousemove', onTouchMove
    $(@).on 'touchend mouseup', onTouchEnd

  log "end"