var FilesView = FormView.extend({
  
  el: "#files",
  
  events: {
    "click .file": "pick",
  },
  
  initialize: function(){
    this.__super__.initialize.call(this)
    this.template = this.$(".template").html()
    this.templateTotal = this.$(".templateTotal").html()
  },
  
  load: function(files){
    if (! files.length) {
      this.$el.hide()
    }
    var total = 0, has_music = false
    files.forEach(function(file){
      if (is_image(file.filename)) {
        return
      }
      this.appendFile(file)
      total += file.size
      has_music = has_music || file.filename.match(/(mp3|wav|ogg)/i)
    }.bind(this))
    
    var size = hush_size(total)
    var t = this.templateTotal.replace(/{{size_class}}/g, size[0])
                              .replace(/{{size}}/g, size[1])
    this.$el.append(t)
    
    if (has_music) {
      audio.init()
    }
  },
  
  parse: function(file){
    var size = hush_size(file.size)
    var datetime = verbose_date(file.date, true)
    var date_class = carbon_date(file.date)
    var link = make_link(file)

    var t = this.template.replace(/{{username}}/g, file.username)
                         .replace(/{{link}}/g, link)
                         .replace(/{{filename}}/g, file.filename)
                         .replace(/{{date_class}}/g, date_class)
                         .replace(/{{date}}/g, datetime[0])
                         .replace(/{{time}}/g, datetime[1])
                         .replace(/{{size_class}}/g, size[0])
                         .replace(/{{size}}/g, size[1])
    return t
  },
  
  prependFile: function(file){
    var $el = $( this.parse(file) )
    this.$el.prepend($el)
  },

  appendFile: function(file){
    var $el = $( this.parse(file) )
    this.$el.append($el)
  },
  
  pick: function(e){
    if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
    if (! e.target.href.match(/(mp3|wav|ogg)/i)) return
    e.preventDefault()
    audio.play( e.target.dataset.index )
  },

})