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){
    if (!comments || !comments.length && ! this.options.required) {
      this.$el.hide()
      return
    }
    comments.forEach(this.appendComment.bind(this))
  },
  
  parse: function(comment){
    var t = this.template.replace(/{{image}}/g, profile_image(comment.username))
                         .replace(/{{username}}/g, comment.username)
                         .replace(/{{comment}}/g, tidy_urls(comment.comment, true))
    var $t = $(t)
    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 = []
    var comment = $("[name=comment]").val()
    if (! comment || ! comment.length) {
      errors.push("Please enter a comment.")
    }
    return errors.length ? errors : null
  },

  success: function(data){
    this.prependComment(data.comment)
    this.$("[name=comment]").val("")
  }
})