rotateWindow4.coffee

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

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

  # click
  navs.each (index) ->
    $(@).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



  # swipe
  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
    index = $(@).index()

    if move < -250
      return if index == 0
      deg = -180
      index -= 1

    else if 250 < move
      return if index == divs.length - 1
      deg = 180
      index += 1
    $(@).css
      'transform'   : "rotateZ(#{deg}deg)"
      'transition'  : "all ease-out 0.6s"
    $(divs[index]).css
      'transform'   : "rotateZ(0deg)"
      'transition'  : "all ease-out 0.6s"

    $(@).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