var CollectionView = View.extend({
  
  el: "#collection",
  template: $("#collection .template").html(),
  loaded: false,
  data: null,
  items: {},

  events: {
    "click .item": "pick",
  },
  
  initialize: function(){
    this.$content = this.$(".content")
    this.$loader = this.$(".loader")
    this.scroller = new IScroll('#collection .scroll')
  },

  show: function(){
    document.body.className = "collection"
    if (this.loaded) {
      return this.populate(this.data)
    }
    this.fetch()
  },
  
  fetch: function(){
    this.$loader.show()
    sdk.product.collection({
      gallery_id: 31617,
      success: this.populate.bind(this)
    })
  },

  populate: function(data){
    this.$loader.hide()
    this.$content.empty()
    // DefaultCode10
    console.log(data)
    data.SearchResponseFull.Results.Items.forEach(function(item){
      this.items[ item['Code8'] ] = item
      var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10']))
                           .replace(/{{code8}}/, item['Code8'])
      this.$content.append(t)
      
    }.bind(this))
  },
  
  pick: function(e){
    var code = $(e.currentTarget).data("code")
    var data = this.items[code]
    app.product.load(data)
  },

})