var ChatView = View.extend({

  template: $("#collaborator-template").html(),

  events: {
    "submit form": "send",
    "scroll #messages": "scroll",
  },
  
  initialize: function(){
    this.$msg = this.$("#message")
    this.$messages = this.$("#messages")
    this.messages = this.$messages.get(0)
  },
  
  add: function(msg){
    var $el = $( this.template )
    $el.find(".nick").html(msg.nick)
    $el.find(".msg").html(msg.msg)
    this.$messages.append($el)
    if (! this.scrolled) {
      this.scrollToBottom()
    }
  },
  
  send: function(){
    var val = this.$msg.sanitize()
    if (! val) return
    var msg = {}
    msg.room = room.name()
    msg.msg = val
    msg.nick = user.username
    // app.socket.send("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
  }

})