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.$iframes = this.$(".cell.iframe")
    this.$images = this.$(".cell.image")
    this.$videos = this.$(".cell.video")

    this.images = this.$images.toArray().map(function(img){ return $(img).data("uri") })

    if (is_mobile) {
      this.$iframes.remove()
      this.$videos.remove()
      this.$iframes = this.$videos = $(".nothing")
      if (this.$(".mobile").length) {
        this.$(".desktop").remove()
        this.$(".mobile").removeClass("desktop")
      }
    }
    else {
      this.$(".mobile").remove()
      this.$(".desktop").removeClass("desktop")
    }

    if (this.$(".cell").length > 1) {
      this.$(".top").flickity(app.flickity_options).on( 'cellSelect', function(e) {
        var gallery = $(e.target).data('flickity')
        app.header.updateSlideNumber( gallery.selectedIndex )
      })
    }

    var $viewport = this.$(".flickity-viewport")
    if (! $viewport.length) {
      $viewport = this.$(".cell")
    }
    if (is_desktop) {
      if ($viewport.length) {
        $("<div>").addClass("page-up").insertAfter( $viewport )
        $("<div>").addClass("page-down").insertAfter( $viewport )
      }
      else if (this.$('.top').length) {
        this.$(".top").append( $("<figure>").addClass("page-up") )
        this.$(".top").append( $("<figure>").addClass("page-down") )
      }
      else {
        this.$el.append( $("<figure>").addClass("page-up") )
        this.$el.append( $("<figure>").addClass("page-down") )
      }
    }

    // now that the gallery is ready, store this data..
    this.project_id = this.$el.data("id")
    this.page_number = opt.page_number
    this.slide_count = this.$(".cell").length
        
    this.$el.addClass('hidden')
  },
  
  preload: function(){
    if (this.images.length) {
      app.loader.preloadImage( this.images[0] )
    }
  },
  
  show: function(){
    app.header.updatePageNumber( this.page_number )
    app.header.updateSlideNumber( 0 )
    app.header.updateSlideCount( this.slide_count )
    $('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.$images.each(function(){
      var uri = $(this).data("uri")
      $(this).css("background-image", "url(" + uri + ")")
    })
    
    if (is_mobile) {
      this.$images.each(function(){
        var uri = $(this).data("uri")
        $(this).css("background-image", "url(" + uri + ")")
      })
    }
    else {
      this.$iframes.each(function(){
        var uri = $(this).data("uri")
        $(this).html("<iframe src='" + uri + "'>")
      })
    }

    app.nav.setActive( 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")
      
      this.$images.each(function(){
        $(this).css("background-image", "")
      })
      this.$iframes.html("")
      this.$videos.html("")
      
    }.bind(this) )
  },
  
  previous: function(e){
    if (is_mobile) return;
    e.stopPropagation()
    app.nav.previous()
  },

  next: function(e){
    if (is_mobile) return;
    e.stopPropagation()
    app.nav.next()
  },

})