Factor out multi-display code

This should help us with a few limitations we've faced, and enable future refacotrs

index.html

@@ -50,9 +50,6 @@
             </div>
             <div class='media-info'>
                 <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'>
@@ -95,6 +92,7 @@
         <script src="media.js"></script>
         <script src="font.js"></script>
         <script src="skin.js"></script>
+        <script src="multi-display.js"></script>
         <script src="winamp.js"></script>
     </body>
 </html>

multi-display.js

@@ -0,0 +1,64 @@
+// Single line text display that can animate and hold multiple registers
+MultiDisplay = {
+    node: null, // The DOM node of the display
+    registers: {},
+    init: function(font, node) {
+        this.font = font;
+        this.node = node;
+        this._marqueeLoop();
+        return this;
+    },
+    addRegister: function(key) {
+        // Create element node
+        var register = document.createElement("div");
+        register.style.display = 'none';
+
+        this.node.appendChild(register);
+        this.registers[key] = {
+            node: register,
+            text: '',
+            marquee: false
+        };
+    },
+    setRegisterText: function(register, text) {
+        // Set text of register
+        this.font.setNodeToString(this.registers[register].node, text);
+    },
+    hideAllRegisters: function() {
+        for(var key in this.registers) {
+            this.registers[key].node.style.display = 'none';
+        }
+    },
+    showRegister: function(key) {
+        this.hideAllRegisters();
+        // Show the one register
+        this.registers[key].node.style.display = 'block';
+    },
+    startRegisterMarquee: function(key) {
+        this.registers[key].marquee = true;
+    },
+    pauseRegisterMarquee: function(key) { 
+        this.registers[key].marquee = false;
+    },
+    _marqueeLoop: function() {
+        var self = this;
+        setTimeout(function () {
+            for(var key in self.registers) {
+                // Check every register to see if it needs to be marqueed
+                if(self.registers[key].marquee) {
+                    var text = self.registers[key].node.firstChild;
+                    // Only scroll if the text is too long
+                    if(text && text.childNodes.length > 30) {
+                        var characterNode = text.firstChild;
+                        text.removeChild(characterNode);
+                        text.appendChild(characterNode);
+                    }
+                }
+            }
+            self._marqueeLoop();
+        }, 220);
+    }
+}
+
+
+

winamp.css

@@ -302,21 +302,6 @@ body {
     display: block;
 }
 
-.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

@@ -38,6 +38,18 @@ function Winamp () {
         'titleBar': document.getElementById('title-bar'),
     };
 
+    this.textDisplay = MultiDisplay.init(Font, this.nodes.songTitle);
+    this.textDisplay.addRegister('songTitle');
+    this.textDisplay.addRegister('position');
+    this.textDisplay.addRegister('volume');
+    this.textDisplay.addRegister('balance');
+    this.textDisplay.addRegister('message'); // General purpose
+
+    this.textDisplay.showRegister('songTitle');
+
+    this.textDisplay.startRegisterMarquee('songTitle');
+
+
     // Make window dragable
     this.nodes.titleBar.addEventListener('mousedown',function(e){
         if(e.target !== this) {
@@ -199,11 +211,11 @@ function Winamp () {
     }
 
     this.nodes.volume.onmousedown = function() {
-        self.nodes.winamp.classList.add('setting-volume');
+        self.textDisplay.showRegister('volume');
     }
 
     this.nodes.volume.onmouseup = function() {
-        self.nodes.winamp.classList.remove('setting-volume');
+        self.textDisplay.showRegister('songTitle');
     }
 
     this.nodes.volume.oninput = function() {
@@ -212,13 +224,13 @@ function Winamp () {
 
     this.nodes.position.onmousedown = function() {
         if(!self.nodes.winamp.classList.contains('stop')){
+            self.textDisplay.showRegister('position');
             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.textDisplay.showRegister('songTitle');
         self.nodes.winamp.classList.remove('setting-position');
     }
 
@@ -228,7 +240,7 @@ function Winamp () {
         var newElapsed = self._timeString(self.media.duration() * newFractionComplete);
         var duration = self._timeString(self.media.duration());
         var message = "Seek to: " + newElapsed + "/" + duration + " (" + newPercentComplete + "%)";
-        self.skin.font.setNodeToString(self.nodes.positionMessage, message);
+        self.textDisplay.setRegisterText('position', message);
     }
 
     this.nodes.position.onchange = function() {
@@ -238,11 +250,11 @@ function Winamp () {
     }
 
     this.nodes.balance.onmousedown = function() {
-        self.nodes.winamp.classList.add('setting-balance');
+        self.textDisplay.showRegister('balance');
     }
 
     this.nodes.balance.onmouseup = function() {
-        self.nodes.winamp.classList.remove('setting-balance');
+        self.textDisplay.showRegister('songTitle');
     }
 
     this.nodes.balance.oninput = function() {
@@ -282,8 +294,8 @@ function Winamp () {
         self.media.setVolume(percent);
         self.nodes.volume.style.backgroundPosition = '0 -' + offset + 'px';
 
-        string = 'Volume: ' + volume + '%';
-        self.skin.font.setNodeToString(self.nodes.volumeMessage, string);
+        var message = 'Volume: ' + volume + '%';
+        self.textDisplay.setRegisterText('volume', message);
 
         // This shouldn't trigger an infinite loop with volume.onchange(),
         // since the value will be the same
@@ -300,7 +312,7 @@ function Winamp () {
         } else {
             string = 'Balance: ' + Math.abs(balance) + '% Left';
         }
-        self.skin.font.setNodeToString(self.nodes.balanceMessage, string);
+        self.textDisplay.setRegisterText('balance', string);
 
         self.media.setBalance(balance);
         balance = Math.abs(balance) / 100
@@ -415,7 +427,7 @@ function Winamp () {
     this._setTitle = function() {
         var duration = self._timeString(self.media.duration());
         var name = self.fileName + ' (' + duration + ')  ***  ';
-        self.skin.font.setNodeToString(document.getElementById('song-title'), name);
+        this.textDisplay.setRegisterText('songTitle', name);
     }
 
     this._setMetaData = function() {
@@ -457,21 +469,6 @@ function Winamp () {
         var timeObject = self._timeObject(time);
         return timeObject[0] + timeObject[1] + ':' + timeObject[2] + timeObject[3];
     }
-
-    this.marqueeLoop = function() {
-        setTimeout(function () {
-            var text = self.nodes.songTitle.firstChild;
-            // Only scroll if the text is too long
-            if(text && text.childNodes.length > 30) {
-                var characterNode = text.firstChild;
-                text.removeChild(characterNode);
-                text.appendChild(characterNode);
-                self.marqueeLoop();
-            }
-
-        }, 220)
-    }
-
 }
 
 keylog = [];
@@ -544,5 +541,4 @@ file = 'https://cdn.rawgit.com/captbaritone/llama/master/llama-2.91.mp3';
 fileName = "1. DJ Mike Llama - Llama Whippin' Intro";
 winamp.loadFromUrl(file, fileName);
 
-winamp.marqueeLoop();
 winamp.skin.setSkinByUrl('https://cdn.rawgit.com/captbaritone/winamp2-js/master/skins/base-2.91.wsz');