Fix for nums_ex.bmp

Ugly hack, but it works for now.

Fixes #62

skin.js

@@ -19,6 +19,7 @@ SkinManager = {
         ".status #play-pause": "PLAYPAUS.BMP",
         ".play .status #work-indicator": "PLAYPAUS.BMP",
         ".status #time #minus-sign": "NUMBERS.BMP",
+        ".status #time.ex #minus-sign": "NUMS_EX.BMP",
         ".media-info .mono-stereo div": "MONOSTER.BMP",
         "#volume": "VOLUME.BMP",
         "#volume::-webkit-slider-thumb": "VOLUME.BMP",
@@ -56,6 +57,7 @@ SkinManager = {
     // Gets passed as a callback, so don't have access to `this`
     _setSkinByBuffer: function(buffer) {
         var zip = new JSZip(buffer);
+        document.getElementById('time').classList.remove('ex');
 
         // XXX Ideally we would empty the style tag here, but I don't know how
         // Appending overwrites, which has the same net effect, but after
@@ -68,8 +70,12 @@ SkinManager = {
             if (file) {
                 var value = "background-image: url(data:image/bmp;base64," + btoa(file.asBinary()) + ")"
                 cssRules += selector + "{" + value + "}\n";
-            }
 
+                // CSS has to change if this file is present
+                if(fileName == 'NUMS_EX.BMP') {
+                    document.getElementById('time').classList.add('ex');
+                }
+            }
         }
 
         // Clear the loading state

winamp.css

@@ -153,8 +153,7 @@ a:focus { outline: none; }
 .stop .status #play-pause { background-position: -18px 0; }
 .status #time {
     position: absolute;
-    left: 48px;
-    left: 40px;
+    left: 39px;
     top: 26px;
     /* Just to make it clickable */
     height: 13px;
@@ -178,28 +177,44 @@ a:focus { outline: none; }
 .status #time.countdown #minus-sign {
     background-position: -20px -6px;
 }
+/* Alternate format for minus sign, when skin supports it */
+.status #time.ex #minus-sign {
+    top: 0px;
+    left: -1px;
+    width: 9px;
+    height: 13px;
+    /* background-image: NUMS_EX.BMP via Javascript */
+    background-position: -90px 0px;
+}
+.status #time.ex.countdown #minus-sign {
+    background-position: -99px 0px;
+}
 
 .status #time #minute-first-digit {
     position: absolute;
-    left: 8px;
+    pointer-events: none;
+    left: 9px;
     height: 13px;
     width: 9px;
 }
 .status #time #minute-second-digit {
     position: absolute;
-    left: 20px;
+    pointer-events: none;
+    left: 21px;
     height: 13px;
     width: 9px;
 }
 .status #time #second-first-digit {
     position: absolute;
-    left: 38px;
+    pointer-events: none;
+    left: 39px;
     height: 13px;
     width: 9px;
 }
 .status #time #second-second-digit {
     position: absolute;
-    left: 50px;
+    pointer-events: none;
+    left: 51px;
     height: 13px;
     width: 9px;
 }

winamp.js

@@ -128,7 +128,7 @@ function Winamp () {
     }
 
     this.nodes.time.onclick = function() {
-        this.classList.toggle('countdown');
+        self.nodes.time.classList.toggle('countdown');
         self.updateTime();
     }