var HootBox = FormView.extend({
  
  el: "#hootbox",
  
  events: {
  },
  
  action: "/api/thread/1/comment",
  
  initialize: function(){
    this.__super__.initialize.call(this)
    this.template = this.$(".template").html()
    this.$hoots = this.$("#hoots")
    this.$comment = this.$("[name=comment]")
  },
  
  load: function(comments){
    comments.forEach(this.appendComment.bind(this))
  },
  
  parse: function(comment){
    var t = this.template.replace(/{{username}}/g, comment.username)
                         .replace(/{{comment}}/g, tidy_urls(comment.comment, true))
    return t
  },
  
  prependComment: function(comment){
    var $el = $( this.parse(comment) )
    this.$hoots.prepend($el)
  },

  appendComment: function(comment){
    var $el = $( this.parse(comment) )
    this.$hoots.append($el)
  },
  
  validate: function(){
    var errors = []
    if (! this.$comment.val()) {
      errors.push("no comment")
      return errors
    }
    return null
  },
  
  beforeSend: function(){
    this.$comment.val("")
  },
  
  showErrors: function(){
  },
  
  success: function(data){
    this.prependComment(data.comment)
  }
})