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 = ScrollFactory('#hub', app.iscroll_options)
    HubLoader.init(this)
  },

  show: function(){
    this.deferScrollToTop()
    app.footer.hide()
    document.body.className = "hub"
    HubLoader.isNeeded()
    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 = {}
    HubLoader.add(this.data)
    
    this.deferScrollToTop()
  },
  
  append: function(row){
    // id date subtitle body link store image[uri caption]
    // 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(/{{cleantitle}}/, stonewash(row.title))
                         .replace(/{{cleansubtitle}}/, stonewash(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.setAttribute('aria-label', img.caption)
        el.className = "item"
        $gallery.append(el)
      })
      var gallery = 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,
      })
      gallery.on('staticClick', function(e){
        var url = gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
        app.fullscreenViewer.show(url, url)
      })
      $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Image gallery, use the arrows to scroll.")
      if (accessibility.voiceOver) {
        $(".gallery-target-" + row.id).attr('aria-label', stonewash(row.title) + ". Image gallery, use the arrows to scroll.")
        $(".gallery-target-" + row.id).click(function(e){
          e && e.preventDefault()
          var url = gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
          app.fullscreenViewer.show(url, url)
        })
      }
    }
    else {
      // single image
      var el = document.createElement(accessibility.voiceOver ? "a" : "div")
      if (row.image && row.image.length) {
        el.style.backgroundImage = "url(" + row.image[0].uri + ")"
      }
      el.className = "item"
      $(".gallery-" + row.id).append(el)
      $(".gallery-" + row.id).data("row", row)
      // video, append play button
      if (row.link.match(/youtube|youtu.be|vimeo/)) {
        var play = document.createElement("div")
        play.className = "play"
        $(".gallery-" + row.id).append(play)
        $(".gallery-" + row.id).addClass("gallery-video-post")
        $(".gallery-" + row.id).attr('role', 'link')
        $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Tap to watch the video on Youtube")
        // $(".gallery-target-" + row.id).attr('aria-label', stonewash(row.title) + ". Tap to watch the video on Youtube")
        if (! row.image) {
          var url = row.link
          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];
          e.style.backgroundImage = "url(https://i.ytimg.com/vi/" + ytid + "/maxresdefault.jpg"
        }
        // $(".gallery-target-" + row.id).click(function(e){
        //   e && e.preventDefault()
        //   window.open(row.link, '_system')
        // })
        $(".gallery-target-" + row.id).remove()
      } else {
        $(el).click(function(e){
          e && e.preventDefault()
          app.fullscreenViewer.show(row.image[0].uri)
        })
        $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Main image")
        $(".gallery-target-" + row.id).attr('aria-label', stonewash(row.title) + ". Main image.")
        $(".gallery-target-" + row.id).click(function(e){
          e && e.preventDefault()
          app.fullscreenViewer.show(row.image[0].uri)
        })
      }
      $t.find(".gallery-left").remove()
      $t.find(".gallery-right").remove()
    }
  },
  
  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)
    if (window.plugins && window.plugins.socialsharing) {
      window.plugins.socialsharing.share(title, null, null, "http://deeplink.me/www.stoneisland.com/hub" )
    }
  },

})

var HubLoader = (function(){
  var queue, view, item, loader
  var count = 0
  var HubLoader = {}
  var loader
  var needed = false
  var loading = false
  HubLoader.init = function(v){
    view = v
  }
  HubLoader.add = function(items){
    queue = items
    HubLoader.load()
  }
  HubLoader.load = function(){
    if (!queue) return
    item = queue.shift()
    count++
    if (! item || loading) return
    loading = true
    if (item.image && item.image.length) {
      loader = new Loader (HubLoader.build)
      images = item.image.map(function(img){
        return img.uri.replace("http:", "https:")
      }).filter(function(img){
        return img.uri
      })
      loader.preloadImages(images, true)
    }
    else {
      HubLoader.build()
    }
  }
  HubLoader.isNeeded = function(){
    needed = true
    if (!loading) HubLoader.load()
  }
  HubLoader.build = function(){
    view.append(item)
    view.scroller.refresh()
    loading = false
    if (count > 3 && ! needed) return
    // if (count === 10) return
    setTimeout(HubLoader.load, count < 10 ? 1000 : 5000)
  }
  return HubLoader
})()