var GalleryView = View.extend({

  videos: [],

  initialize: function(options){
    options = options || {}
    this.data = options.data
  },

  reset: function(){
    this.videos.forEach(function(video){
      video.api('stop')
    })
    this.$(".video iframe").remove()
    this.$(".video").removeClass("playing").removeClass("loaded")
    this.gallery && this.gallery.destroy()

    this.player = null
  },

  build: function($el){

    this.reset()

    this.setElement( $el )

    this.videos = []

    var film = _.filter(this.data.films, byId($el.data("film-id")))[0]

    var $cells = this.$(".cell")
    if ($cells.length == 1) {
      $(".entry").addClass("singleton")
    }

    var gallery = this.gallery = new Flickity( this.el, {
      cellSelector: '.cell',
      cellAlign: 'left',
      wrapAround: true,
      prevNextButtons: false,
      pageDots: true,
      setGallerySize: false,
      draggable: true,
      imagesLoaded: true,
    })

    $el.find(".dot").toArray().forEach(function(el, i){
      var media = film.media[i]
      $(el).html(media.caption || media.title)
    }.bind(this))

    this.$(".video").toArray().forEach(function(el){
      var $el = $(el)

      var $play, $underlay

      $play = $('<div class="play"></div>')

      if (is_desktop) {
        $underlay = $('<div class="underlay"></div>')
        $underlay.css("background-image", $el.css("background-image"))
        $el.css("background-image", 'none')
        $el.append($underlay)
        $el.append($play)

        $play.on("click", function(e){
          e.stopPropagation()
          e.preventDefault()
          if ($el.hasClass('loaded')) {
            var player = $el.data('player')
            try {
              player.api('play')
            } catch (err) { console.error(err) }
          }
          else {
            this.load_video($el)
          }
        }.bind(this))
      }
      else {
        this.load_video($el)
        // $el.append($play)
      }
    }.bind(this))

    gallery.on("cellSelect", function(){
      if (! gallery.selectedElement) return
      // $caption.html( $(gallery.selectedElement).data("caption") )
      console.log(gallery.selectedElement)
      try {
        this.videos.forEach(function(player){
          player.api('pause')
        })
      } catch (err) { console.error(err) }
    }.bind(this) )

    gallery.on("settle", function(){
      if (! gallery || ! gallery.selectedElement) { return }
      // $caption.html( $(gallery.selectedElement).data("caption") )
    }.bind(this) )

    gallery.on("staticClick", function(e){
      console.log(e.target.className)
      var $el = $(e.target)
      if ($el.hasClass("play")) {
        // this.load_video($el)
      }
      else {
        if ($("#okgallery").hasClass("prev")) {
          gallery.previous()
        } else {
          gallery.next()
        }
      }
    }.bind(this) )

    gallery.loader.on("progress", function(imagesLoaded, loadingImage){
      $(loadingImage.img).addClass('loaded')
      $(loadingImage.img).parent().removeClass('loading')
    }.bind(this) )

    function byId(id){
      return function(data){
        return data.id === id
      }
    }
  },

  next: function(){
    this.gallery.next()
  },

  previous: function(){
    this.gallery.previous()
  },

  resize: function(isFullScreen){
    if (! this.gallery) return

    var fullScreenElement = getFullScreenElement()
    this.$(".cell img").each(function(){
      var h = isFullScreen ? $(fullScreenElement).height() : $gallery.height()
      var w = isFullScreen ? "auto" :  this.naturalWidth / this.naturalHeight * h
      $(this).css({
        width: w, height: h,
      })
    })
    $(".flickity-viewport").css("height","")
    this.gallery.resize()
  },

  stop_video: function(){
    try {
      console.log(this.videos)
      this.videos.forEach(function(player){
        player.api('pause')
      })
    } catch (err) { console.error(err) }
  },

  load_video: function($el){
    if ($el.hasClass('loaded')) { return }
    $el.addClass('loaded')
    var vimeo_id = $el.data("video").match(/\d+/)[0]
    var $embed = $('<iframe src="https://player.vimeo.com/video/' + vimeo_id + '?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>')
    $el.append($embed)

    var player = this.player = $f( $el.find("iframe")[0] )
    $el.data('player', player)
    player.addEvent('ready', function(){
      $el.addClass('playing')
      player.api('play')
      player.addEvent('play', function(){
        $el.addClass('playing')
      })
      player.addEvent('pause', function(){
        $el.removeClass('playing')
      })
    })
    this.videos.push(player)
  },

  unload_video: function($el){
    $el.find("iframe").remove()
    $el.removeClass('loaded')
  },

})