var CreditCardView = SerializableView.extend({
  
  template: $("#creditcard_template").html(),
  
  cardOptions: {
    accept: ['visa', 'mastercard', 'amex'],
  },
  
  events: {
  },
  
  initialize: function(opt){
    this.parent = opt.parent
    this.setElement( this.parent.$(".cc") )
    this.$el.html(this.template)
    
    this.$number = this.$("[name=Number]")
    this.$number.validateCreditCard(this.updateCard.bind(this), this.cardOptions)
  },
  
  populate: function(data){
    this.data = data
    data.Number = "XXXX XXXX XXXX " + data.Number
    this.$number.attr("type", "text")
    this.parent.$(".cc input").val("")
    this.$(".cc input").val("")
    this.load_data(data)
  },
  
  updateCard: function(card){
    // console.log(card)
    // card.card_type.name
    // card.card_type.valid
  },
  
  validate_presence: {
    'Number': 'Please enter your credit card number.',
    'Cvv': 'Please enter your security code.',
  },
  
  validate_fields: function(data, errors){
    var card = this.$number.validateCreditCard(this.cardOptions)
    if (! card.valid) { errors.push([ "Number", "Your card number is invalid." ]) }
    if (! data.ExpirationMonth || data.ExpirationMonth == "NONE") { errors.push([ "ExpirationMonth", "Please enter the expiration month." ]) }
    if (! data.ExpirationYear || data.ExpirationYear == "NONE") { errors.push([ "ExpirationYear", "Please select the expiration month." ]) }
    data.UserId = auth.user_id
    if (card.valid) {
      data.Type = card.card_type.name
    }
  },

})