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)

    var $viewport = this.$(".flickity-viewport")
    if (! $viewport.length) {
      $viewport = this.$(".cell")
    }
    if (! $viewport.length) {
      this.$(".top").append( $("<div>").addClass("page-up") )
      this.$(".top").append( $("<div>").addClass("page-down") )
    }
    else {
      $("<div>").addClass("page-up").insertAfter( $viewport )
      $("<div>").addClass("page-down").insertAfter( $viewport )
    }
  },
  
  show: function(){
    app.header.updatePageNumber( this.page_number )
    app.header.updateSlideNumber( 0 )
    app.header.updateSlideCount( 1 )
    $('body').removeClass('navopen')
    this.$el.removeClass("hidden")
    this.$el.addClass("active")
    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")
      this.$el.removeClass("active")
    }.bind(this) )
  },
  
  previous: function(e){
    e.stopPropagation()
    app.nav.previous()
  },

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

})