var SettingsView = View.extend({

  el: "#settings",

  events: {
    "click": "stopPropagation",
    "click .open": "open",
    "click .close": "close",
    "blur [name=bg]": "updateBackground",
    "submit form": "save",
  },
  
  initialize: function(socket){
    this.$bg = this.$("[name=bg]")
    socket.on("settings", this.update.bind(this))
  },
  
  open: function(){
    if (this.isOpen) {
      return this.close()
    }
    this.isOpen = true
    this.$el.addClass("active")
    this._close = this.close.bind(this)
    $(document.body).on("click", this._close)
  },
  
  close: function(){
    this.isOpen = false
    this.$el.removeClass("active")
    $(document.body).off("click", this._close)
  },

  serialize: function(){
    var fd = {}
    
    this.$("input[name], select[name], textarea[name]").each( function(){
      if (this.type == "password") {
        if (this.value.length > 0) {
          fd[this.name] = SHA1.hex('lol$' + this.value + '$asdf')
        }
      }
      else {
        fd[this.name] = sanitize(this.value)
      }
    })
    
    return fd
  },

  save: function(e){
    if (this.saving) { return }
    this.saving = true
    e.preventDefault()
    var data = this.serialize()
    app.socket.emit("settings", data)
  },
  
  update: function(data){
    var base = this
    if (this.saving) {
      this.saving = false
      return
    }
    Object.keys(data).forEach(function(key){
      switch (key) {
        case 'bg':
          console.log(data.bg)
          base.$bg.val(data.bg.url)
          bg.change(data.bg)
          break
      }
    })
  },
  
  updateBackground: function(){
    if (this.saving) { return }
    var url = this.$bg.stripHTML()
    bg.change(url)
    app.socket.emit("settings", { bg: { url: url, tile: false } })
  }
})