var SerializableView = View.extend({

  serialize: function(){
    var fields = {}
    this.$("input[name], select[name], textarea[name]").each( function(){
      fields[this.name] = this.value
    })
    return fields
  },
  
  deserialize: function(data){
    this.$("input[name], textarea[name]").val("")
    Object.keys(data).forEach(function(k){
      this.$("[" + k + "]").val(data[k])
    })
  },
  
  validate: function(errors){
    var data = this.serialize()
    var errors = []
    var presence_msgs = this.validate_presence
    Object.keys(presence_msgs).forEach(function(k){
      if (! data[k]) errors.push( [ k, presence_msgs[k] ] )
    })
    this.validate_fields && this.validate_fields(errors)
    this.cc && this.cc.validate(errors)
    this.address && this.address.validate(errors)
    return errors.length ? errors : null
  },
  
  show_errors: function(errors){
    var msgs = []
    errors.forEach(function(e){
      this.$("[name=" + e[0] + "]").addClass('error_hilite')
      msgs.push(e[1])
    }.bind(this))
    this.$msg.html(msgs.join("<br>"))
    this.$msg.addClass('alert-notice')
  },
  
  hide_errors: function(){
    this.$msg.removeClass('alert-notice')
    this.$msg.html("")
  },

  save: function(e){
    e && e.preventDefault()

    var errors = this.validate()
    if (errors) {
      this.show_errors(errors)
      return
    }
    else {
      this.hide_errors()
    }
    
    app.curtain.show("loading")
    this.action({
      data: data,
      success: function(data){
        app.curtain.hide("loading")
        this.success(data)
      }.bind(this),
      error: function(data){
        app.curtain.hide("loading")
        this.error(data)
      }.bind(this),
    })
  },
  
  success: function(data){
    console.log("SUCCESS", data)
  },
  
  error: function(data){
    console.log("FAIL", data)
  },

})

var FormView = View.extend(SerializableView).extend(ScrollableView)