var ChatView = View.extend({

  el: "#chat",
  
  template: $("#message_template").html(),

  events: {
    "submit form": "send",
    "scroll #messages": "scroll",
  },
  
  initialize: function(socket){
    var $msg = this.$msg = this.$("#message")
    this.$messages = this.$("#messages")
    this.messages = this.$messages.get(0)
    this.$msg.focus()
    $(window).focus(function(){ $msg.focus() })

    socket.on("message", function(msg){
      base.chat.add(msg)
    })
  },
  
  seen: {},
  add: function(msg){
    var key = msg.date + "_" + msg.nick
    if (key in this.seen) return
    this.seen[key] = true
    
    var $el = $( this.template )
    $el.find(".nick").html(sanitize(msg.nick))
    $el.find(".msg").html(sanitizeHTML(msg.msg))
    this.$messages.append($el)
    if (! this.scrolled) {
      this.scrollToBottom()
    }
  },
  
  addMany: function(msgs){
    var base = this
    var wasScrolled = this.scrolled
    this.scrolled = true
    msgs.forEach(function(msg){
      base.add(msg)
    })
    this.scrolled = wasScrolled
    if (! this.scrolled) {
      this.scrollToBottom()
    }
  },
  
  send: function(e){
    e && e.preventDefault()
    var val = this.$msg.sanitize()
    this.$msg.focus()
    if (! val) return
    this.$msg.val("")
    var msg = {}
    msg.room = room.name
    msg.msg = val
    msg.nick = user.username
    msg.date = +new Date
    this.add(msg)
    app.socket.emit("message", msg)
  },
  
  empty: function(){
    this.$messages.empty()
  },

  scrolled: false,
  scroll: function(){
    this.scrolled = (this.messages.scrollTop > this.messages.scrollHeight - this.$el.height() - 100)
  },
  scrollToBottom: function(){
    this.messages.scrollTop = document.body.scrollHeight
  }

})