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

  events: {
    "touchstart .item": "touchstart",
    "touchmove .item": "touchmove",
    "touchend .item": "touchend",
    "mousedown .item": "touchstart",
    "mousemove .item": "touchmove",
    "mouseup .item": "touchend",
  },
  
  initialize: function(){
    this.$content = this.$(".content")
    this.$loader = this.$(".loader")
    this.scroller = new IScroll('#collection', app.iscroll_options)
    this.filterView = new CategoryFilter ({ parent: this })
  },
  
  show: function(){
    if (app.closed.storeIsClosed) {
      return app.closed.show()
    }
    app.footer.show("FILTER")
    document.body.className = "collection"
    if (this.loaded) {
      return this.populate(this.data)
    }
    this.fetch()
  },
  
  ok: function(){
    this.filterView.filter()
  },
    
  fetch: function(){
    if (this.loaded) return
    this.$loader.show()
    sdk.product.collection({
      gallery_id: 32780,
      success: this.populate.bind(this)
    })
  },

  populate: function(data){
    if (this.loaded && ! data) {
      data = this.data
    }
    else {
      this.data = data
    }
    if (! this.loaded) {
      this.loaded = true
      this.$loader.hide()
      this.$content.empty()
      // DefaultCode10
      data.SearchResponseFull.Results.Items.forEach(this.append.bind(this))
      this.deferScrollToTop()
    }
    this.afterFetchCallback && this.afterFetchCallback()
  },
  
  append: function(item){
    this.items[ item['Code8'] ] = item
    var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10'], '11_f'))
                         .replace(/{{code8}}/, item['Code8'])
    this.$content.append(t)
  },
  
  pick: function(e){
    var code = $(e.currentTarget).data("code")
    var data = this.items[code]
    app.product.load(code, data)
  },
  
  firstTouch: { x: 0, y: 0, id: "" },
  lastTouch: { x: 0, y: 0, id: "" },
  touchstart: function(e){
    var p = e.originalEvent.touches ? e.originalEvent.touches[0] : e.originalEvent
    this.firstTouch.x = this.lastTouch.x = p.pageX
    this.firstTouch.y = this.lastTouch.y = p.pageY
    this.firstTouch.id = e.currentTarget.dataset.id
  },
  touchmove: function(e){
    var p = e.originalEvent.touches ? e.originalEvent.touches[0] : e.originalEvent
    this.lastTouch.x = p.pageX
    this.lastTouch.y = p.pageY
    this.lastTouch.id = e.currentTarget.dataset.id
  },
  touchend: function(e){
    var first = app.collection.firstTouch
    var last = app.collection.lastTouch
    var distance = Math.sqrt( Math.pow(first.x - last.x, 2) + Math.pow(first.y - last.y, 2) )
    if (distance < 20) {
      this.pick(e)
    }
  },

})