var NavView = View.extend({

  el: ".menu",
  
  events: {
    "click li": "click",
  },
  
  initialize: function(){
  },
  
  click: function(e){
    var id = $(e.target).data("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" )
  },
  
  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" )
  },
  
  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")
  },
  
})