orderCats = (old, member) ->
  +$(old).data('order') - +$(member).data('order')

class App.CatsView extends Backbone.View
  events: ->
    'mouseenter li':      'showFoto'
    'mouseleave li':      'hideFoto'
    'click .category':    'goToCat'

  blockToCat: false

  insideDishes: false

  changingCat: false

  changeCat: (evt) ->
    newCatId  = $(evt.currentTarget).find('a').data('id')
    newCat    = App.categories.get(newCatId)

    unless @changingCat
      @changingCat = true
      App.currentCatView.exit =>
        App.currentCatView = new App.CategoryView
          el: '#cat-list'
          model: newCat
        App.currentCatView.show true, =>
          @changingCat = false
          App.currentCatView.select()
          App.menuView.updateSubMenu()
      , {}, true

  goToCat: (evt) ->
    id = evt.currentTarget.id

    if !@blockToCat and id != 'download' and !@insideDishes

      @insideDishes = true

      App.menuView.blocked = true
      @blockToCat = true

      boxes = @$el.find('.category').not("##{id}").get().sort(orderCats)
      boxes.push(evt.currentTarget)

      seedtime = 0
      speed = 180
      ended = 0
      size = boxes.length

      $(boxes).each (i, box) =>
        setTimeout =>
          self = this
          $(box).fadeTo 500, 0, ->
            ended++
            if ended == size
              $(boxes).css('display', 'none')
              App.currentCatView = new App.CategoryView
                el: '#cat-list'
                model: App.categories.get(+this.id.split("-").last())
              App.currentCatView.show true, ->
                App.menuView.updateSubMenu()
                self.showTopCats(true)
        , seedtime
        seedtime += speed

  fadeOutCats: (elem, callback) ->
    # (elem, ->)
    # (->)
    if !callback and $.isFunction(elem)
      callback = elem
      elem = null

    boxes = []

    App.menuView.blocked = true
    @blockToCat = true

    if elem
      id = elem.id
      boxes = @$el.find('.category').not("##{id}").get().sort(orderCats)
      boxes.push(elem)
    else
      boxes = @$el.find('.category').get().sort(orderCats)

    seedtime = 0
    speed = 180
    ended = 0
    size = boxes.length

    $(boxes).each (i, box) =>
      setTimeout =>
        self = this
        $(box).fadeTo 500, 0, ->
          ended++
          if ended == size
            $(boxes).css('display', 'none')
            callback?.call(this)
      , seedtime
      seedtime += speed


  showTopCats: (animate) ->
    distance = $('html').width() - $('#menu').offset().left + 5

    if animate
      $.notOverflow (restore) =>
        @placeSubElement '#line1', distance, =>
          @showSubMenu true, =>
            @placeSubElement '#line2', distance, =>
              @placeSubElement '#dload', distance, =>
                App.menuView.blocked = false
                @blockToCat = false
                restore()
    else
      $('#line1').css {top: '0px', display: 'block'}
      @showSubMenu(false)
      $('#line2').css {top: '0px', display: 'block'}
      $('#dload').css
        'top': '0px'
        '*display': 'inline'
        'zoom': 1
        'display': 'inline-block'

  showSubMenu: (animate, callback) ->
    distance = $('html').width() - $('#menu').offset().left + 5

    smenu = $('#submenu')

    if $.trim(smenu.html()) == ''
      html = @collection.reduce (final, cat, it) =>
        final += "<li class='subcat #{if cat == App.currentCat then 'selected' else ''}'>\
          <a href='javascript:void(0);' data-id='#{cat.id}'>#{cat.get('name')}</a>#{ if it < @collection.size() - 1 then "<span class='point'>.</span>" else ''}</li>"
      , ""

      smenu.html(html).css({
        left: "#{if animate then distance else 0}px",
        width: $('#menu').width(),
        display: 'block'
      })

    if animate
      smenu.css('display', 'block').animate {left: '0px'}, 1000, callback
    else
      callback?()

  placeSubElement: (elem, distance, cb) ->
    $(elem).css({
      left: "#{distance}px",
      display: 'block'
    }).animate {left: '0px'}, 1000, -> cb?()

  exit: (afterFunction, data) ->
    if not @insideDishes
      @$el.css('display', 'none')
      @insideDishes = false
      afterFunction()
    else
      @hideSubMenus true, =>
        App.currentCatView.exit =>
          @insideDishes = false
          afterFunction()
        , data

  hideSubMenus: (animate, callback) ->
    distance = $('html').width() - $('#menu').offset().left + 5
    dpx = "#{distance}px"
    if animate
      $.notOverflow (restore) =>
        self = this
        $('#dload').fadeOut(1000).animate {left: dpx}, {
          duration: 1000
          queue: false
          complete: ->
            $('#line2').fadeOut(1000).animate {left: dpx}, {
              duration: 1000
              queue: false
              complete: ->
                $('#submenu').css('left', '0px').fadeOut(1000).animate {left: dpx}, {
                  duration: 1000
                  queue: false
                  complete: ->
                    $('#line1').fadeOut(1000).animate {left: dpx}, {
                      duration: 1000
                      queue: false
                      complete: ->
                        restore()
                        callback?()
                    }
                }
            }
        }

  appear: (cb) ->
    @$el.css('display', 'block')
    App.router.to('menus')
    @show true, cb

  showFoto: (evt) ->
    evt.stopPropagation()

    li = $(evt.currentTarget)
    li.find('.backimage').fadeIn()

  hideFoto: (evt) ->
    evt.stopPropagation()

    li = $(evt.currentTarget)
    li.find('.backimage').fadeOut()

  show: (animate, callback) ->
    # Hide the intro
    $('#intro').css('display', 'none')
    # Go Menu
    App.menuView.go('#to-cats')
    # Position things
    @positionLogo()
    @positionCategories()
    # Categories!
    if animate
      @randomPositionCategories(callback)
    else
      @staticPositionCategories()
      callback?()

  positionCategories: ->
    templ = (cat, text) =>
      id = if cat.id then "cate-#{cat.id}" else cat
      foto = if cat.get then cat.get('foto') else ""
      $.trim("""
        <li class="category" id="#{id}" data-order="#{if cat.get then cat.get('order') else @collection.length + 1}">
          <div class="backimage">
            #{if cat.get then "<img src=#{foto}>" else ""}
          </div>
          <div class="phantomparent">
            <a href="javascript:void();">
              #{if cat.get then cat.get('name') else text}
            </a>
            <a href="javascript:void();" class="phantom">lorem ipsum</a>
          </div>
        </li>
      """)

    list = @collection.reduce (end, cat) ->
      end += templ(cat)
    , ""

    # Download Button
    list += templ('download', 'Download PDF')

    @$el.html("<ul>#{list}</ul>")

  staticPositionCategories: ->
    @$el.find('.category').css('visibility', 'visible')

  randomPositionCategories: (callback) ->
    boxes = $(@$el.find('.category').get().sort(orderCats))

    boxes.css
      opacity: '0'
      visibility: 'visible'

    seedtime = 0
    speed = 180

    boxes.each (i, box) ->
      setTimeout =>
        $(box).fadeTo 500, 1, ->
          if i == boxes.length - 1
            callback?()
      , seedtime
      seedtime += speed

  positionLogo: ->
    $('#aside-logo').css
      display: 'block'
      top: '0px'