var CartSummary = ScrollableView.extend({
  
  el: "#cart_summary",
  
  template: $("#cart_summary .template").html(),
  
  events: {
  },
  
  data: null,
  
  initialize: function(opt){
    this.parent = opt.parent
    this.$loader = this.$(".loader")
    this.$cart_body = this.$(".cart_body")
    this.$cart_empty = this.$(".cart_empty")
    this.scroller = new IScroll('#cart_summary', app.iscroll_options)

    this.$rows = this.$(".rows")
    this.$subtotal = this.$(".subtotal")
    this.$shipping = this.$(".shipping")
    this.$tax = this.$(".tax")
    this.$total = this.$(".total")
  },
  
  show: function(){
    document.body.className = "cart"
    app.cart.el.className = "summary"
    if (auth.has_cart()) {
      this.load()
    }
    else {
      this.empty()
    }
  },
  
  load: function(){
    this.$loader.show()
    sdk.cart.get_status({
      success: this.populate.bind(this),
      error: this.empty.bind(this),
    })
  },
  
  populate: function(data){
    this.data = data

    this.$loader.hide()
    app.footer.show("SHIPPING >", "CANCEL")

    app.header.set_cart_count(data.Cart.Items.length)

    this.parent.$itemcount.html(pluralize(data.Cart.Items.length, "ITEM", "S"))

    this.$rows.empty()
    
    data.Cart.Items.forEach(function(item){
      var $el = $("<div>")
      this.$rows.append($el)
      var code_ten = item['Code10']
      var code = code_ten.substr(0, 8)
      var size_id = item['Size']
      app.product.find(code, function(data, details){
        console.log(data, details)
        
        var descriptions = app.product.get_descriptions( details )
        console.log(descriptions)

        var name_partz = descriptions['ModelNames'].split(' ')
        var num = name_partz.shift()
        var title = name_partz.join(' ')
        var type = title_case( descriptions['MicroCategory'] )
        
        var color_name, size_name
        console.log(code)
        details.Item.ModelColors.some(function(color){
        console.log(color)
          if (color['Code10'] == code_ten) {
            color_name = color['ColorDescription']
            console.log(color)
            return true
          }
          return false
        })
        details.Item.ModelSizes.some(function(size){
          if (size['SizeId'] == size_id) {
            console.log(size)
            size_name = size['Default']['Text']
            size_name = SIZE_LOOKUP[ size_name ] || size_name
            return true
          }
          return false
        })

        var t = this.template
                    .replace(/{{image}}/, sdk.image(item['Code10'], '11_f'))
                    .replace(/{{sku}}/, num)
                    .replace(/{{title}}/, title)
                    .replace(/{{type}}/, type)
                    .replace(/{{size}}/, size_name)
                    .replace(/{{color}}/, color_name)
                    .replace(/{{quantity}}/, 1)
                    .replace(/{{price}}/, as_cash(details.Item.Price.DiscountedPrice))
        $el.html(t)
      }.bind(this))
    }.bind(this))
    
    var subtotal = data.Cart.Totals.TotalToPay
    var shipping_cost = data.Cart.DeliveryMethod.Selected.Amount.Total
    var tax = 0
    var total = data.Cart.Totals.TotalToPay
    
    this.$subtotal.html( as_cash(subtotal) )
    this.$shipping.html( as_cash(shipping_cost) )
    this.$tax.html( as_cash(tax) )
    this.$total.html( as_cash(total) )

    this.$el.removeClass("empty").addClass("full")
    this.deferScrollToTop()
  },
  
  empty: function(){
    this.$loader.hide()
    app.footer.hide()
    app.header.set_cart_count(0)
    this.parent.$itemcount.html("0 ITEMS")
    this.$el.addClass("empty").removeClass("full")
  },

  ok: function(){
    app.router.go('cart/shipping')
  },
  
  cancel: function(){
    app.router.go('intro')
  },
  
  remove_item: function(e){
    // $( e.currentTarget ).closest(".row").remove()
    sdk.cart.delete_item({
      data: {
        Code10: "",
        Size: "",
      },
    }).done(function(){
    })
  },

})