var MailboxView = View.extend({
  el: ".mailbox",
  
  events: {
  },
  
  action: "/api/mailbox/",
  
  initialize: function(){
    this.__super__.initialize.call(this)
    this.template = this.$(".template").html()
    this.boxTemplate = this.$(".boxTemplate").html()
  },
  
  load: function(name){
    $("h1").html(name)
    $.get(this.action + name, this.populate.bind(this))
  },
  
  populate: function(data){
    data.boxes.forEach(this.appendBox.bind(this))
    data.messages.forEach(this.appendMessage.bind(this))
  },
  
  parseBox: function(box){
    var t = this.boxTemplate
                .replace(/{{box}}/g, box.name)
                .replace(/{{count}}/g, box.count)
    return t
  },
  
  parseMessage: function(message){
    var datetime = verbose_date(message.date)
    var id = message.id

    var t = this.template
                .replace(/{{id}}/g, thread.id)
                .replace(/{{username}}/g, thread.username)
                .replace(/{{subject}}/g, thread.title)
                .replace(/{{date}}/g, datetime[0])
                .replace(/{{time}}/g, datetime[1])
                .replace(/{{date_class}}/g, carbon_date(thread.lastmodified) )
                .replace(/{{size}}/g, size[1] )
                .replace(/{{size_class}}/g, size[0] )
    return t
  },

  appendBox: function(box){
    var $row = $( this.parseBox(box) )
    this.$el.append($row)
  },

  appendMessage: function(message){
    var $row = $( this.parseMessage(message) )
    this.$el.append($row)
  },

})