var NavView = View.extend({

  el: ".menu",
  
  events: {
    "click li": "click",
  },
  
  initialize: function(){
    window.addEventListener("popstate", function(e){
      console.log("BACK >>", document.location.pathname)
      app.router.go(document.location.pathname)
    }.bind(this))
    
    if (is_mobile) {
      var $scroller = $("<div class='scroll'>")
      $scroller.html( this.$el.html() )
      this.$el.empty()
      this.$el.append( $scroller )
      this.scroller = new IScroll(this.$el.get(0), app.iscroll_options)
    }
  },
  
  click: function(e){
    var id = $(e.target).closest("li").data("id")
    console.log("PICK", id)
    this.pick(id)
  },
  
  pick: function(id){
    var view = app.lookup[ id ]
    this.swap( view, "down" )
  },
  
  previous: function(){
    if ($('body').hasClass('navopen')) {
      $('body').removeClass('navopen')
      return
    }
    var index = Math.max( app.view.page_number - 1, 0 )
    var view = app.projects[ index ]
    this.swap( view, "up" )

    var prevIndex = Math.max( app.view.page_number - 1, 0 )
    var prevView = app.projects[ prevIndex ]
    prevView.preload()
  },
  
  next: function(){
    if ($('body').hasClass('navopen')) {
      $('body').removeClass('navopen')
      return
    }
    var index = (app.view.page_number + 1) % app.projects.length
    var view = app.projects[ index ]
    this.swap( view, "down" )
    
    var nextIndex = (app.view.page_number + 1) % app.projects.length
    var nextView = app.projects[ nextIndex ]
    nextView.preload()
  },
  
  swap: function(view, direction) {
    if (view && ! app.view) {
      app.view = view
      app.view.show()
      return
    }
    if (! view || app.view == view || app.view.showing) {
      return
    }

    direction = direction || "down"

    addClassForPeriod( document.body, direction, app.navigation_delay )
    
    app.view.hide()
    view.show()
    app.view = view
  },
  
  setActive: function(id){
    this.$(".active").removeClass("active")
    this.$("[data-id=" + id + "]").addClass("active")
  },
  
})