var NavView = View.extend({

  el: "#nav",

  events: {
    "click .logo": "home",
    "click li": "go",
    "click #corner": "corner",
    "mouseenter ul": "show_menu",
    "mouseleave ul": "hide_menu",
  },

	initialize: function(){
	},

  home: function(){
    app.router.go("/")
    this.$headings.find(".active").removeClass("active")
    if (app.mobile_nav && app.mobile_nav.state.open) {
      app.mobile_nav.hamburger()
    }
  },

  resetWidths: function(){
	  this.$categories.each(function(){
	    $(this).width( $(this).data("width") )
	  })
  },
  
  go: function(e){
    e.preventDefault()

    this.resetWidths()

    var $t = $(e.currentTarget)
    this.$("li").removeClass("active")
    $t.addClass("active")

    var href = $t.attr("href")
    app.router.go(href)
    if (is_mobile) {
      app.mobile_nav.hamburger()
    }
    this.after_go()
  },
  
  after_go: function(){
    
  },
  
  setActive: function(id){
    var href = '/' + id
    var $el = $('[href="' + href + '"]')
    this.$('.active').removeClass('active')
    if ($el.length) {
      $el.addClass('active')
    }
  },
  
  show_menu: function(e){
    var $el = $(e.currentTarget)
    $el.addClass("hover")

    // var $parent = $el.parent()
    var width = $el.data( "width" )
    $el.width(width)
    console.log(width)
  },

  hide_menu: function(e){
    var $el = $(e.currentTarget)
    $el.removeClass("hover")
    
    // var $parent = $el.parent()
    var hover_width = $el.data( "hover-width" )
    $el.width(hover_width)
  },
  
  corner: function(){
    app.view && app.view.corner()
  },

});