class CSS3Book
  constructor: () ->
    # unless $.browser.webkit
    #   $('.book-host').css
    #      display: 'none'

    @rotX = '5deg'
    pageEven = '.page.even'
    pageOdd = '.page.odd'

    $('html').on 'click', (e) ->
      console.log e.target

    $(pageEven).first().css
      'z-index': 100
      'WebkitTransform': "rotateX(#{@rotX}) translate3d(0,0,1px)"

    $("#{pageOdd}").css
      'WebkitTransform': "rotateX(#{@rotX}) rotateY(-180deg) translate3d(0,0,0px)"

    $("#{pageEven}:not(:first)").css
      'WebkitTransform': "rotateX(#{@rotX}) rotateY(0deg) translate3d(0,0,0px)"


    $(pageEven).click (e) ->
      $this_ = $(@)
      $prevOdd_ = $(@).prev(pageOdd)
      $nextOdd_ = $(@).next(pageOdd)
      $nextEven_ = $nextOdd_.next(pageEven)

      $this_.css
        WebkitAnimationName: 'even-next'
      $prevOdd_.css
        WebkitAnimationName: 'odd-out'
      $nextOdd_.css
        WebkitAnimationName: 'odd-next'
      $nextEven_.css
        WebkitAnimationName: 'even-in'


    $(pageOdd).click (e) ->
      $this_ = $(@)
      $prevEven_ = $(@).prev(pageEven)
      $prevOdd_ = $prevEven_.prev(pageOdd)
      $nextEven_ = $(@).next(pageEven)

      $this_.css
        WebkitAnimationName: 'odd-prev'
      $prevEven_.css
        WebkitAnimationName: 'even-prev'
      $prevOdd_.css
        WebkitAnimationName: 'odd-in'
      $nextEven_.css
        WebkitAnimationName: 'even-out'

$ ->
  if document.getElementById('css3book')?
    book = new CSS3Book()