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(){
	  this.$categories = this.$("ul")
	  this.$headings = this.$categories.find("li:first-child")
	  this.$experiments_nav = $("#experiments_nav")
	  "breakout clock dendrite draw fireworks harp hypercube life rain sequencer snow starfield trails waves webcam".split(" ").forEach(function(name){
	    var $tag = $("<li>").attr("href", "/experiments/" + name)
	    $tag.html("<span>" + name + "</span>")
	    this.$experiments_nav.append($tag)
	  }.bind(this))
	  this.$categories.each(function(){
	    $(this).data("width", $(this).width())
	  })
	},

  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)
    var $parent = $t.parent()
    var $parentHeading = $parent.find(":first-child")
    this.$("li").removeClass("active")
    this.$headings.addClass("active")
    $parentHeading.removeClass("active")
    $t.addClass("active")
    
    var hover_width = $t.find("span").width() 
    $parent.data( "hover-width", hover_width )
    $parent.width( hover_width )
    this.$(".hover").removeClass("hover")
    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()
  },

});