var MailboxView = View.extend({
  el: "#messages",
  
  events: {
  },
  
  action: "/api/mailbox/",
  
  initialize: function(){
    this.__super__.initialize.call(this)
    this.template = this.$(".template").html()
    this.boxlist = new BoxList ()
  },
  
  load: function(name){
    name = sanitize(name) || "inbox"
    $("h1").html(name)
    $.get(this.action + name, this.populate.bind(this))
  },
  
  populate: function(data){
    $("body").removeClass('loading')
    this.boxlist.load(data.boxes)

    var user = data.user
    var max = data.messages.length-1
    data.messages.forEach(function(message, i){
      var $row = $( this.parse(message, user) )
      if (i === 0) $row.addClass("first")
      if (i === max) $row.addClass("last")
      this.$el.append($row)
    }.bind(this))
  },
  
  parse: function(message, user){
    var datetime = verbose_date(message.date)
    var size = hush_size(message.size)
    var id = message.id

    var is_sender = message.sender == user.username
    var t = this.template
                .replace(/{{id}}/g, message.id)
                .replace(/{{to}}/g, is_sender ? "to " : "")
                .replace(/{{username}}/g, is_sender ? message.recipient : message.sender)
                .replace(/{{subject}}/g, message.subject)
                .replace(/{{date}}/g, datetime[0])
                .replace(/{{time}}/g, datetime[1])
                .replace(/{{date_class}}/g, carbon_date(message.lastmodified) )
                .replace(/{{size}}/g, size[1] )
                .replace(/{{size_class}}/g, size[0] )
    return t
  },

})