Progress on work indicator

This should be the right Javascript/CSS but it doesn't look right for Chrome or FF users yet because of the glitch rendering these four pixels from the BMP file in those browsers. The feature now works in Safari.

index.html

@@ -23,7 +23,7 @@
             <div class='status'>
                 <div id='clutter-bar' class='disabled'></div>
                 <div id='play-pause' class='stop'>
-                    <div id='work-indicator' class='selected'></div>
+                    <div id='work-indicator'></div>
                 </div>
                 <div id='time'>
                     <div id='minus-sign'></div>

winamp.css

@@ -120,10 +120,10 @@ a:focus { outline: none; }
     height: 9px;
     width: 3px;
     background-image: url('skins/default/PLAYPAUS.BMP');
-    background-position: -39px 0;
+    background-position: -36px 0;
 }
 .status #play-pause.play #work-indicator.selected {
-    background-position: -36px 0;
+    background-position: -39px 0;
 }
 
 .status #play-pause.play { }

winamp.js

@@ -102,6 +102,7 @@ function Winamp () {
         'volume': document.getElementById('volume'),
         'balance': document.getElementById('balance'),
         'playPause': document.getElementById('play-pause'),
+        'workIndicator': document.getElementById('work-indicator'),
         'winamp': document.getElementById('winamp'),
         'titleBar': document.getElementById('title-bar'),
     };
@@ -178,6 +179,14 @@ function Winamp () {
         self.setStatus('stop');
     });
 
+    this.media.addEventListener('waiting', function() {
+        self.nodes.workIndicator.classList.add('selected');
+    });
+
+    this.media.addEventListener('playing', function() {
+        self.nodes.workIndicator.classList.remove('selected');
+    });
+
     this.nodes.shade.onclick = function() {
         self.nodes.winamp.classList.toggle('shade');
     }