Add message while seeking

Also fix issue where the position slider would jump around if you seeked while playing.

index.html

@@ -40,6 +40,7 @@
                 <div id='song-title' class='text'></div>
                 <div id='volume-message' class='text'></div>
                 <div id='balance-message' class='text'></div>
+                <div id='position-message' class='text'></div>
                 <div id='kbps'></div>
                 <div id='khz'></div>
                 <div class='mono-stereo'>

media.js

@@ -3,6 +3,9 @@ function Media (audioId) {
     this.audio = document.getElementById(audioId);
 
     /* Properties */
+    this.duration = function() {
+        return this.audio.duration;
+    }
     this.timeElapsed = function() {
         return this.audio.currentTime;
     }

winamp.css

@@ -214,11 +214,19 @@ a:focus { outline: none; }
 
 .setting-volume #song-title { display: none; }
 .setting-volume #balance-message { display: none; }
+.setting-volume #position-message { display: none; }
 .setting-volume #volume-message { display: block; }
+
 .setting-balance #song-title { display: none; }
 .setting-balance #volume-message { display: none; }
+.setting-balance #position-message { display: none; }
 .setting-balance #balance-message { display: block; }
 
+.setting-position #song-title { display: none; }
+.setting-position #volume-message { display: none; }
+.setting-position #balance-message { display: none; }
+.setting-position #position-message { display: block; }
+
 .media-info #kbps {
     position: absolute;
     left: 111px;

winamp.js

@@ -13,6 +13,7 @@ function Winamp () {
         'fileInput': document.getElementById('file-input'),
         'volumeMessage': document.getElementById('volume-message'),
         'balanceMessage': document.getElementById('balance-message'),
+        'positionMessage': document.getElementById('position-message'),
         'songTitle': document.getElementById('song-title'),
         'time': document.getElementById('time'),
         'shadeTime': document.getElementById('shade-time'),
@@ -103,7 +104,9 @@ function Winamp () {
     }
 
     this.media.addEventListener('timeupdate', function() {
-        self.nodes.position.value = self.media.percentComplete();
+        if(!self.nodes.winamp.classList.contains('setting-position')) {
+            self.nodes.position.value = self.media.percentComplete();
+        }
         self.updateTime();
     });
 
@@ -182,6 +185,26 @@ function Winamp () {
         self.setVolume(this.value);
     }
 
+    this.nodes.position.onmousedown = function() {
+        if(!self.nodes.winamp.classList.contains('stop')){
+            self.nodes.winamp.classList.add('setting-position');
+        }
+    }
+
+    this.nodes.position.onmouseup = function() {
+        // This should only even be needed when we are stopped, but better safe
+        // than sorry
+        self.nodes.winamp.classList.remove('setting-position');
+    }
+
+    this.nodes.position.oninput = function() {
+        var elapsed = self._timeString(self.media.timeElapsed());
+        var duration = self._timeString(self.media.duration());
+        var percentComplete = Math.round(self.media.percentComplete());
+        var message = "Seek to: " + elapsed + "/" + duration + " (" + percentComplete + "%)";
+        self.font.setNodeToString(self.nodes.positionMessage, message);
+    }
+
     this.nodes.position.onchange = function() {
         if(!self.nodes.winamp.classList.contains('stop')){
             self.media.seekToPercentComplete(this.value);
@@ -363,6 +386,11 @@ function Winamp () {
         ];
     }
 
+    this._timeString = function(time) {
+        var timeObject = self._timeObject(time);
+        return timeObject[0] + timeObject[1] + ':' + timeObject[2] + timeObject[3];
+    }
+
     // TODO: Move to font.js
     function digitHtml(digit) {
         horizontalOffset = digit * 9;