var HubView = ScrollableView.extend({
  
  el: "#hub",
  template: $("#hub .template").html(),

  events: {
    "click .content-share": "share",
    "click .store": "store_link",
    "click .gallery-left": "gallery_left",
    "click .gallery-right": "gallery_right",
    "click .play": "play_video",
  },
  
  initialize: function(){
    this.$content = this.$(".content")
    this.$loader = this.$(".loader")
    this.scroller = new IScroll('#hub', app.iscroll_options)
  },

  show: function(){
    this.deferScrollToTop()
    app.footer.hide()
    document.body.className = "hub"
    if (! this.populated) {
      this.populate( BACKUP_DB.hub )
    }
  },

  galleries: {},
  populated: false,
  populate: function(data){
    // sort posts by date, reversed
    this.populated = true
    this.data = data.map(function(s){
      return [ +moment(s.date), s ]
    }).sort(function(a,b){
      return a[0] > b[0] ? -1 : a[0] == b[0] ? 0 : 1
    }).map(function(pair){
      // console.log(pair[1])
      return pair[1]
    })
    this.$loader.hide()
    this.$content.empty()
    this.galleries = {}
    // id date subtitle body link store image[uri caption]
    this.data.forEach(function(row){
      // console.log(row)
      // console.log(moment(row.date))
      var t = this.template.replace(/{{id}}/g, row.id)
                           .replace(/{{date}}/, moment(row.date).format("MM.DD.YYYY"))
                           .replace(/{{title}}/, row.title)
                           .replace(/{{subtitle}}/, row.subtitle)
                           .replace(/{{link}}/, row.link)
                           .replace(/{{body}}/, row.body.replace(/\n/g, "<br>"))
      var $t = $(t)
      if (row.store != "true") {
        $t.find(".store").remove()
      }
      this.$content.append($t)
      
      if (row.image && row.image.length > 1) {
        // image gallery
        var $gallery = $(".gallery-" + row.id)
        row.image.forEach(function(img){
          var el = document.createElement("div")
          el.style.backgroundImage = "url(" + img.uri + ")"
          el.className = "item"
          $gallery.append(el)
        })
        this.galleries[row.id] = new Flickity( ".gallery-" + row.id, {
          selector: '.item',
          cellAlign: 'center',
          autoPlay: false,
          freeScroll: false,
          wrapAround: true,
          imagesLoaded: true,
          prevNextButtons: false,
          pageDots: false,
          contain: true,
          draggable: true,
        })
      }
      else {
        // single image
        var url = row.link
        var is_video = url.match(/youtube|youtu.be|vimeo/)
        var image_url
        if (row.image && row.image.length) {
          image_url = row.image[0].uri
        }
        else if (is_video && url.match(/youtube|youtu.be/)) {
          var ytid = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
          image_url = "http://i.ytimg.com/vi/" + ytid + "/hqdefault.jpg"
        }
        else {
          image_url = ""
        }
        
        var el = document.createElement("div")

        if (is_video) {
          var ytid = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
          var tag = '<iframe webkit-playsinline src="https://www.youtube.com/embed/' + ytid + '?playsinline=1" frameborder="0"></iframe>'
          el.innerHTML = tag
          
          // webkit-playsinline (html attribute)
          // &playsinline=1  (yt iframe api param)
        }
        else {
          el.style.backgroundImage = "url(" + image_url + ")"
        }
        el.className = "item"
        $(".gallery-" + row.id).append(el)
        $(".gallery-" + row.id).data("row", row)
        
        // video, append play button
//         if (is_video) {
//           var play = document.createElement("div")
//           play.className = "play"
//           $(".gallery-" + row.id).append(play)
//           $(".gallery-" + row.id).addClass("gallery-video-post")
//         }
        $t.find(".gallery-left").remove()
        $t.find(".gallery-right").remove()
      }
      
    }.bind(this))
    
    this.deferScrollToTop()
  },
  
  store_link: function(){
    app.router.go("store")
  },
  play_video: function(e){
    var row = $(e.currentTarget).closest('.gallery-video-post').data("row")
    window.open(row.link, '_system')
  },
  
  gallery_left: function(e){
    var id = $(e.currentTarget).closest(".hub_item").data('id')
    this.galleries[id].previous()
  },
  gallery_right: function(e){
    var id = $(e.currentTarget).closest(".hub_item").data('id')
    this.galleries[id].next()
  },

  share: function(e){
    var title = $(e.currentTarget).parent().find(".title").text()
    console.log("share", title)
    window.plugins.socialsharing.share(title, null, null, "http://deeplink.me/www.stoneisland.com/hub" )
  },

})