4 files changed, 102 insertions, 6 deletions

diff --git a/public/assets/js/index.js b/public/assets/js/index.js
index 6111b4e..8f1a059 100644
--- a/public/assets/js/index.js
+++ b/public/assets/js/index.js
@@ -10,6 +10,7 @@ var app = (function(){
   }
   
   app.focused = true
+  app.typing = false
   
   app.focus = function(){
     app.focused = true
diff --git a/public/assets/js/lib/views/details/audio.js b/public/assets/js/lib/views/details/audio.js
new file mode 100644
index 0000000..6a8f5ed
--- /dev/null
+++ b/public/assets/js/lib/views/details/audio.js
@@ -0,0 +1,69 @@
+var audio = (function(){
+  var audio = {}
+  
+  var el, music = [], current_index = -1
+  var links, comment, parent
+
+  audio.init = function () {
+    links = document.querySelectorAll("a")
+    comment = document.querySelector("#comment")
+    parent = document.querySelector("#audio")
+
+    Array.prototype.slice.apply(links).forEach(function(url){
+      if (! url.href.match(/(mp3|wav|ogg)/)) return
+      url.dataset.index = music.length
+      music.push(url)
+    })
+    audio.build()
+  }
+  audio.build = function () {
+    el = document.createElement("audio")
+    el.setAttribute("controls", true)
+    el.addEventListener("ended", audio.next)
+    el.src = music[0]
+    parent.appendChild(el)
+    document.body.addEventListener("keydown", audio.keydown)
+  }
+  audio.destroy = function () {
+    el.pause()
+    el = null
+    parent.removeChild(el)
+    document.body.removeEventListener("keydown", audio.keydown)
+  }
+  audio.play = function (index) {
+    current_index = (parseInt(index) + music.length) % music.length
+    el.src = music[current_index].href
+    el.play()
+    var playing = document.querySelector(".playing")
+    if (playing) playing.classList.remove("playing")
+    music[current_index].classList.add("playing")
+  }
+  audio.prev = function (){
+    audio.play(current_index - 1)
+  }
+  audio.next = function (){
+    audio.play(current_index + 1)
+  }
+  audio.toggle = function (){
+    if (el.paused) el.play()
+    else el.pause()
+  }
+  audio.keydown = function(e){
+    if (app.typing || e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
+    switch (e.keyCode) {
+      case 37: // left
+        audio.prev()
+        break;
+      case 39: // right
+        audio.next()
+        break;
+      case 32: // spacebar
+        e.preventDefault()
+        audio.toggle()
+        break;
+    }
+  }
+  
+  return audio
+
+})()
\ No newline at end of file
diff --git a/public/assets/js/lib/views/details/comments.js b/public/assets/js/lib/views/details/comments.js
index 399c90d..819daba 100644
--- a/public/assets/js/lib/views/details/comments.js
+++ b/public/assets/js/lib/views/details/comments.js
@@ -3,6 +3,8 @@ var CommentsView = FormView.extend({
   el: "#comments",
   
   events: {
+    "focus textarea": "focus",
+    "blur textarea": "blur",
   },
   
   initialize: function(){
@@ -35,5 +37,14 @@ var CommentsView = FormView.extend({
   
   success: function(){
     this.prependComment(comment)
-  }
+  },
+  
+  focus: function(){
+    app.typing = true
+  },
+  
+  blur: function(){
+    app.typing = false
+  },
+
 })
\ No newline at end of file
diff --git a/public/assets/js/lib/views/details/files.js b/public/assets/js/lib/views/details/files.js
index b19cf3c..399d8a7 100644
--- a/public/assets/js/lib/views/details/files.js
+++ b/public/assets/js/lib/views/details/files.js
@@ -3,6 +3,7 @@ var FilesView = FormView.extend({
   el: "#files",
   
   events: {
+    "click .file": "pick",
   },
   
   initialize: function(){
@@ -15,25 +16,35 @@ var FilesView = FormView.extend({
     if (! files.length) {
       this.$el.hide()
     }
-    var total = 0
+    var total = 0, has_music = false
     files.forEach(function(file){
       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 = file.filename
+    if (link.indexOf("http") !== 0) {
+      link = "//carbonpictures.com/bucky/data/" + file.thread + "/" + file.filename
+    }
 
     var t = this.template.replace(/{{username}}/g, file.username)
-                         .replace(/{{link}}/g, file.filename)
+                         .replace(/{{link}}/g, link)
                          .replace(/{{filename}}/g, file.filename)
                          .replace(/{{date_class}}/g, date_class)
                          .replace(/{{date}}/g, datetime[0])
@@ -53,7 +64,11 @@ var FilesView = FormView.extend({
     this.$el.append($el)
   },
   
-  success: function(){
-    this.prependFile(file)
-  }
+  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 )
+  },
+
 })
\ No newline at end of file