var DetailsView = View.extend({

  events: {
  },
  
  action: "/api/thread/",
  keywordAction: "/api/keyword/",
  
  
  initialize: function(opt){
    this.comments = new CommentsView ({ parent: this })
    this.files = new FilesView ({ parent: this })
    this.gallery = new GalleryView ({ parent: this })
    this.form = new CommentForm ({ parent: this })
    this.threadbox = new ThreadBox ({ parent: this })
  },
  
  load: function(id){
    id = id.replace(/\D/g, "")
    $.get(this.action + id, this.populate.bind(this))
  },
  
  populate: function(data){
    var thread = data.thread
    $("h1").html(thread.title)
    $(".subtitle").show().html(metadata(thread))
    this.form.load(data.thread)
    this.comments.load(data.comments)
    this.files.load(data.files)
    this.gallery.load(data.files)
    if (data.thread.keyword) {
      $.get(this.keywordAction + data.thread.keyword, this.populateKeyword.bind(this))
    }
  },
  
  populateKeyword: function(data){
    this.threadbox.load(data)
  },
  
  success: function(){
    window.location.href = "/index"
  },

})

var metadataTemplate = $(".metadata_template").html()
function metadata(thread){
  var datetime = verbose_date(thread.createdate, true)
  var age = get_age(thread.lastmodified, true)
  var t = metadataTemplate
              .replace(/{{ username }}/g, thread.username)
              .replace(/{{ date }}/g, datetime[0])
              .replace(/{{ time }}/g, datetime[1])
              .replace(/{{ active }}/g, age + " ago")
              .replace(/{{ views }}/g, thread.viewed + " view" + courtesy_s(thread.viewed))
  return t
}