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

  events: {
    "touchstart .item": "touchstart",
    "touchmove .item": "touchmove",
    "touchend .item": "touchend",
    "mousedown .item": "touchstart",
    "mousemove .item": "touchmove",
    "mouseup .item": "touchend",
    "touchstart h1": "showDepartmentSelector",
  },
  
  initialize: function(){
    this.$title = this.$("h1")
    this.$content = this.$(".content")
    this.$loader = this.$(".loader")
    this.scroller = ScrollFactory('#collection', app.iscroll_options)
    this.departmentFilterView = new DepartmentFilter ({ parent: this })
    this.sizeFilterView = new SizeFilter ({ parent: this })
  },
  
  show: function(){
    if (! navigator.onLine) {
      app.closed.showElement()
      app.closed.setMessage("PLEASE GO ONLINE TO BROWSE<br>THE STONE ISLAND STORE.", "")
      return
    }
    if (sdk.env !== "test" && app.closed.storeIsClosed) {
      return app.closed.show()
    }
    
//     if (sdk.env === 'test' && this.data.SearchResponseFull.Results.Items.length < 4) {
//       var items = this.data.SearchResponseFull.Results.Items
//       items = items.concat(items).concat(items).concat(items)
//       items = items.concat(items).concat(items).concat(items)
//       this.data.SearchResponseFull.Results.Items = items
//     }
    
    if (this.data && this.data.SearchResponseFull.Results.Items.length < 4) {
      app.footer.hide()
    }
    if (app.store.FilterBy !== "none") {
      if (app.store.FilterBy === "category") {
        app.footer.show("FILTER")
      }
      else {
        app.footer.show("FILTER BY " + app.store.FilterBy.toUpperCase())
      }
    }
    document.body.className = "collection"
    if (this.loaded) {
      console.log("collection this loaded")
      return this.populate(this.data)
    }
    else {
      this.fetch()
    }
  },
  
  // called when footer is tapped - filter by (x)
  save: function(){
    switch (app.store.FilterBy) {
      case 'none':
        this.departmentFilterView.filter()
        break
      case 'size':
        this.sizeFilterView.filter()
        break
    }
  },
  
  fetch: function(){
    console.log("collection fetch")
    if (this.loaded) {
      console.log("collection loaded")
      return
    }
    this.$loader.show()
    if (!app.department_id) {
      console.log("no department ID, store is closed")
    }
    console.log("fetching", app.department_id)
    sdk.product.collection({
      department_id: app.department_id,
      success: this.populate.bind(this)
    })
  },
  
  refresh: function(){
    this.loaded = false
    this.fetch()
  },

  populate: function(data){
    if (this.loaded && ! data) {
      console.log("populate 1")
      data = this.data
    }
    else {
      console.log("populate 2")
      this.data = data
      this.loaded = false
      // console.log(data)
    }
    console.log(">>>>>>>> YES ")
    if (! this.loaded) {
      console.log("populate 3", data.SearchResponseFull.Results.Items.length)
      this.loaded = true
      this.$loader.hide()
      this.$content.empty()
      // DefaultCode10
//       data.SearchResponseFull.Results.Items.length = 1
      var is_single_product = (data.SearchResponseFull.Results.Items.length < 4)
      this.$el.toggleClass("single", is_single_product)
      
      if (is_single_product) {
        console.log("IS SINGLE PRODUCT")
        var item = data.SearchResponseFull.Results.Items[0]
        // console.log(data.SearchResponseFull.Results)
        if (item) {
          var url = sdk.image(item['DefaultCode10'], '13_f')
          console.log(url)
          var img = new Image ()
          img.src = url
        }
        else {
          console.log("no products at all!")
        }
      }
      
//       if (data.SearchResponseFull.Results.Items.length == 1) {
//         app.footer.hide()
//       }
//       else {
//         app.footer.show("FILTER")
//       }
      
      console.log( data.SearchResponseFull.Results.Items.length )

      var items = this.filtered_items || data.SearchResponseFull.Results.Items
      if (app.store.GroupBy === 'size') {
        this.groupBySize( items, is_single_product )
      }
      else {
        this.appendItems( items, is_single_product )
      }
      // this.restoreScroll()
      // this.deferScrollToTop()
    }
    this.afterFetchCallback && this.afterFetchCallback()
    this.deferRefresh()
    this.restoreScroll()
  },
  
  groupBySize: function(items, is_single_product){
    var groups = {}
    items.forEach(function(item){
      if (! item.Sizes.length) return
      var size = item.Sizes[0]
      var id = size['Text']
      if ( ! (id in groups) ) {
        groups[id] = {
          label: SIZE_LOOKUP[ id ],
          items: [],
        }
      }
      groups[id].items.push( item )
    }.bind(this))
    
    Object.keys(groups).sort(function(a,b){
      var ao = SIZE_ORDER.indexOf( a )
      var bo = SIZE_ORDER.indexOf( b )
      return ao - bo
    }).forEach(function(id){
      var size = groups[id]
      var $el = $("<div>")
      $el.addClass("product-group")
      $el.html( size.label )
      this.$content.append($el)
      this.appendItems( size.items, is_single_product )
    }.bind(this))
  },

  appendItems: function(items, is_single_product){
    items.forEach(function(item){
      this.append(item, is_single_product)
    }.bind(this))
  },
  
  append: function(item, is_single_product){
    this.items[ item['Code8'] ] = item
    console.log("TITLE: " + item['ModelNames'])
    var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10'], is_single_product ? '13_f' : '11_f'))
                         .replace(/{{code8}}/, item['Code8'])
                         .replace(/{{title}}/g, stonewash(item['ModelNames'] + ' ' + item['MicroCategory']))
    var $t = $(t)
    if (app.store.ShowProductNameOnCollectionPage) {
      var $title = $("<span>")
      $title.addClass("product-title")
      $title.html( item['ModelNames'] )
      $t.append($title)
    }
    this.$content.append($t)
  },
  
  pick: function(e){
    var code = $(e.currentTarget).data("code")
    var data = this.items[code]
    this.saveScroll()
    app.product.load(code, data)
  },
  
  collectionName: "STONE ISLAND",
  setCollectionName: function(name){
    this.collectionName = name
    this.$title.html(this.collectionName)
    this.$title.attr('aria-label', stonewash(this.collectionName))
  },
  
  // filter by department
  showDepartmentSelector: function(){
    if (this.$("h1").hasClass("single-dept")) {
      this.departmentFilterView.filter()
    }
  },
  
  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)
    }
  },

})