var ProjectView = View.extend({

  events: {
    "click": "next",
    "click .page-up": "previous",
    "click .page-down": "next",
    "click .top": "stopPropagation",
  },
  
  initialize: function(opt){
    // this.gallery = new GalleryView ()
    this.project_id = this.$el.data("id")
    this.page_number = opt.page_number
    console.log("INIT", this.project_id)
    $("<div>").addClass("page-up").insertBefore( this.$(".flickity-viewport") )
    $("<div>").addClass("page-down").insertAfter( this.$(".flickity-viewport") )
  },
  
  show: function(){
    app.header.updatePageNumber( this.page_number )
    app.header.updateSlideNumber( 0 )
    app.header.updateSlideCount( 1 )
    $('body').removeClass('navopen')
    this.$el.removeClass("hidden")
    
    if (this.project_id == "cover") {
      app.router.pushState("/")
    }
    else {
      app.router.pushState("/project/" + this.project_id)
    }

    this.showing = true
    addClassForPeriod( this.el, "showing", app.navigation_delay, function(){
      this.showing = false
    }.bind(this) )
  },
  
  hide: function(){
    addClassForPeriod( this.el, "hiding", app.navigation_delay, function(){
      this.$el.addClass("hidden")
    }.bind(this) )
  },
  
  previous: function(e){
    e.stopPropagation()
    app.nav.previous()
  },

  next: function(e){
    e.stopPropagation()
    app.nav.next()
  },

})