From 2c5a3c9a12ecfc86f6e2dcfa69d377df4f4df376 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordaneldredge@gmail.com>
Date: Mon, 12 Jan 2015 23:53:26 -0800
Subject: [PATCH] Major refactor separating ui from core logic

---
 index.html           |   1 +
 js/hotkeys.js        |   1 +
 js/main-window.js    | 371 +++++++++++++++++++++++++++++++++++++++++++
 js/media.js          |   4 +
 js/skin.js           |   3 +-
 js/winamp.js         | 370 ++++++------------------------------------
 js/window-manager.js |   4 +-
 7 files changed, 429 insertions(+), 325 deletions(-)
 create mode 100644 js/main-window.js

diff --git a/index.html b/index.html
index 09c0fde3..e67cc488 100755
--- a/index.html
+++ b/index.html
@@ -120,6 +120,7 @@
         <script src="js/hotkeys.js?inline"></script>
         <script src="js/context.js?inline"></script>
         <script src="js/window-manager.js?inline"></script>
+        <script src="js/main-window.js?inline"></script>
         <script src="js/winamp.js?inline"></script>
         <script type="text/javascript">
             if(Browser.isCompatible()) {
diff --git a/js/hotkeys.js b/js/hotkeys.js
index 133c2b61..90026177 100644
--- a/js/hotkeys.js
+++ b/js/hotkeys.js
@@ -6,6 +6,7 @@ Hotkeys = {
             if(e.ctrlKey) { // Is CTRL depressed?
                 switch(e.keyCode) {
                     case 68: winamp.toggleDoubledMode(); break;   // CTRL+D
+                    // XXX FIXME
                     case 76: winamp.openOptionMenu(); break;      // CTRL+L
                     case 84: winamp.toggleTimeMode(); break;      // CTRL+T
                 }
diff --git a/js/main-window.js b/js/main-window.js
new file mode 100644
index 00000000..a2d544dc
--- /dev/null
+++ b/js/main-window.js
@@ -0,0 +1,371 @@
+MainWindow = {
+    init: function(winamp) {
+        this.winamp = winamp;
+        this.nodes = {
+            'close': document.getElementById('close'),
+            'shade': document.getElementById('shade'),
+            'buttonD': document.getElementById('button-d'),
+            'position': document.getElementById('position'),
+            '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'),
+            'visualizer': document.getElementById('visualizer'),
+            'previous': document.getElementById('previous'),
+            'play': document.getElementById('play'),
+            'pause': document.getElementById('pause'),
+            'stop': document.getElementById('stop'),
+            'next': document.getElementById('next'),
+            'eject': document.getElementById('eject'),
+            'repeat': document.getElementById('repeat'),
+            'shuffle': document.getElementById('shuffle'),
+            'volume': document.getElementById('volume'),
+            'kbps': document.getElementById('kbps'),
+            'khz': document.getElementById('khz'),
+            'mono': document.getElementById('mono'),
+            'stereo': document.getElementById('stereo'),
+            'balance': document.getElementById('balance'),
+            'workIndicator': document.getElementById('work-indicator'),
+            'titleBar': document.getElementById('title-bar'),
+            'window': document.getElementById('winamp'),
+        };
+
+        this.handle = document.getElementById('title-bar');
+        this.body = this.nodes.window;
+
+        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');
+
+        this._registerListeners();
+        return this;
+    },
+
+    _registerListeners: function() {
+        var self = this;
+
+        this.nodes.close.onclick = function() {
+            self.close();
+        }
+
+        this.nodes.shade.onclick = function() {
+            self.nodes.window.classList.toggle('shade');
+        }
+
+        this.nodes.buttonD.onmousedown = function() {
+            if(self.nodes.window.classList.contains('doubled')) {
+                self.textDisplay.setRegisterText('message', 'Disable doublesize mode');
+            } else {
+                self.textDisplay.setRegisterText('message', 'Enable doublesize mode');
+            }
+            self.textDisplay.showRegister('message');
+        }
+
+        this.nodes.buttonD.onmouseup = function() {
+            self.textDisplay.showRegister('songTitle');
+        }
+
+        this.nodes.buttonD.onclick = function() {
+            self.winamp.toggleDoubledMode();
+        }
+
+        this.nodes.play.onclick = function() {
+            self.winamp.play();
+        }
+
+        this.nodes.songTitle.onmousedown = function() {
+            self.textDisplay.pauseRegisterMarquee('songTitle');
+        }
+
+        this.nodes.songTitle.onmouseup = function() {
+            setTimeout(function () {
+                self.textDisplay.startRegisterMarquee('songTitle');
+            }, 1000);
+        }
+
+        this.nodes.position.onmousedown = function() {
+            if(!self.nodes.window.classList.contains('stop')){
+                self.textDisplay.showRegister('position');
+                self.nodes.window.classList.add('setting-position');
+            }
+        }
+
+        this.nodes.position.onmouseup = function() {
+            self.textDisplay.showRegister('songTitle');
+            self.nodes.window.classList.remove('setting-position');
+        }
+
+        this.nodes.position.oninput = function() {
+            var newPercentComplete = self.nodes.position.value;
+            var newFractionComplete = newPercentComplete/100;
+            var newElapsed = self._timeString(self.winamp.media.duration() * newFractionComplete);
+            var duration = self._timeString(self.winamp.media.duration());
+            var message = "Seek to: " + newElapsed + "/" + duration + " (" + newPercentComplete + "%)";
+            self.textDisplay.setRegisterText('position', message);
+        }
+
+        this.nodes.position.onchange = function() {
+            if(self.winamp.getState() != 'stop'){
+                self.winamp.media.seekToPercentComplete(this.value);
+            }
+        }
+
+        this.nodes.previous.onclick = function() {
+            self.winamp.previous();
+        }
+
+        this.nodes.next.onclick = function() {
+            self.winamp.next();
+        }
+
+        this.nodes.pause.onclick = function() {
+            self.winamp.pause();
+        }
+
+        this.nodes.stop.onclick = function() {
+            self.winamp.stop();
+        }
+
+        this.nodes.eject.onclick = function() {
+            self.winamp.openFileDialog();
+        }
+
+        this.nodes.repeat.onclick = function() {
+            self.winamp.toggleRepeat();
+        }
+
+        this.nodes.shuffle.onclick = function() {
+            self.winamp.toggleShuffle();
+        }
+
+        this.nodes.shadeTime.onclick = function() {
+            self.winamp.toggleTimeMode();
+        }
+
+        this.nodes.volume.onmousedown = function() {
+            self.textDisplay.showRegister('volume');
+        }
+
+        this.nodes.volume.onmouseup = function() {
+            self.textDisplay.showRegister('songTitle');
+        }
+
+        this.nodes.volume.oninput = function() {
+            self.winamp.setVolume(this.value);
+        }
+
+        this.nodes.time.onclick = function() {
+            self.winamp.toggleTimeMode();
+        }
+
+        this.nodes.balance.onmousedown = function() {
+            self.textDisplay.showRegister('balance');
+        }
+
+        this.nodes.balance.onmouseup = function() {
+            self.textDisplay.showRegister('songTitle');
+        }
+
+        this.nodes.balance.oninput = function() {
+            if(Math.abs(this.value) < 25) {
+                this.value = 0;
+            }
+            self.winamp.setBalance(this.value);
+        }
+
+        this.nodes.visualizer.onclick = function() {
+            self.winamp.toggleVisualizer();
+        }
+
+        this.nodes.window.addEventListener('dragenter', this.dragenter.bind(this));
+        this.nodes.window.addEventListener('dragover', this.dragover.bind(this));
+        this.nodes.window.addEventListener('drop', this.drop.bind(this));
+    },
+
+    toggleDoubledMode: function() {
+        this.nodes.buttonD.classList.toggle('selected');
+        this.nodes.window.classList.toggle('doubled');
+    },
+
+    close: function() {
+        // Probably not the right thing once we have more windows
+        this.winamp.close();
+        this.nodes.window.classList.add('closed');
+    },
+
+    updatePosition: function(percent) {
+        if(!this.nodes.window.classList.contains('setting-position')) {
+            this.nodes.position.value = percent;
+        }
+    },
+
+    // In shade mode, the position slider shows up differently depending on if
+    // it's near the start, middle or end of its progress
+    updateShadePositionClass: function() {
+        var position = this.nodes.position;
+
+        position.removeAttribute("class");
+        if(position.value <= 33) {
+            position.classList.add('left');
+        } else if(position.value >= 66) {
+            position.classList.add('right');
+        }
+    },
+
+    // TODO: Refactor this function
+    updateTime: function() {
+        this.updateShadePositionClass();
+
+        var shadeMinusCharacter = ' ';
+        if(this.nodes.time.classList.contains('countdown')) {
+            digits = this.winamp._timeObject(this.winamp.media.timeRemaining());
+            var shadeMinusCharacter = '-';
+        } else {
+            digits = this.winamp._timeObject(this.winamp.media.timeElapsed());
+        }
+        this.winamp.skin.font.displayCharacterInNode(shadeMinusCharacter, document.getElementById('shade-minus-sign'));
+
+        var digitNodes = [
+            document.getElementById('minute-first-digit'),
+            document.getElementById('minute-second-digit'),
+            document.getElementById('second-first-digit'),
+            document.getElementById('second-second-digit')
+        ];
+        var shadeDigitNodes = [
+            document.getElementById('shade-minute-first-digit'),
+            document.getElementById('shade-minute-second-digit'),
+            document.getElementById('shade-second-first-digit'),
+            document.getElementById('shade-second-second-digit')
+        ];
+
+        // For each digit/node
+        for(i = 0; i < 4; i++) {
+            var digit = digits[i];
+            var digitNode = digitNodes[i];
+            var shadeNode = shadeDigitNodes[i];
+            digitNode.innerHTML = '';
+            digitNode.appendChild(this.winamp.skin.font.digitNode(digit));
+            this.winamp.skin.font.displayCharacterInNode(digit, shadeNode);
+        }
+    },
+
+    setWorkingIndicator: function() {
+        this.nodes.workIndicator.classList.add('selected');
+    },
+
+    unsetWorkingIndicator: function() {
+        this.nodes.workIndicator.classList.remove('selected');
+    },
+
+    setLoadingState: function() {
+        this.nodes.window.classList.add('loading');
+    },
+
+    unsetLoadingState: function() {
+        this.nodes.window.classList.remove('loading');
+    },
+
+    toggleTimeMode: function() {
+        this.nodes.time.classList.toggle('countdown');
+        this.updateTime();
+    },
+
+    setVolume: function(volume) {
+        var percent = volume / 100;
+        var sprite = Math.round(percent * 28);
+        var offset = (sprite - 1) * 15;
+        this.nodes.volume.style.backgroundPosition = '0 -' + offset + 'px';
+
+        var message = 'Volume: ' + volume + '%';
+        this.textDisplay.setRegisterText('volume', message);
+
+        // This shouldn't trigger an infinite loop with volume.onchange(),
+        // since the value will be the same
+        this.nodes.volume.value = volume;
+    },
+
+    setBalance: function(balance) {
+        var string = '';
+        if(balance == 0) {
+            string = 'Balance: Center';
+        } else if(balance > 0) {
+            string = 'Balance: ' + balance + '% Right';
+        } else {
+            string = 'Balance: ' + Math.abs(balance) + '% Left';
+        }
+        this.textDisplay.setRegisterText('balance', string);
+        balance = Math.abs(balance) / 100
+        var sprite = Math.round(balance * 28);
+        var offset = (sprite - 1) * 15;
+        this.nodes.balance.style.backgroundPosition = '-9px -' + offset + 'px';
+    },
+
+    changeState: function(state) {
+        var stateOptions = ['play', 'stop', 'pause'];
+        for(var i = 0; i < stateOptions.length; i++) {
+            this.nodes.window.classList.remove(stateOptions[i]);
+        }
+        this.nodes.window.classList.add(state);
+    },
+
+    toggleLlama: function() {
+        this.nodes.window.classList.toggle('llama');
+    },
+
+    setTitle: function(fileName, duration) {
+        var duration = this._timeString(duration);
+        var name = fileName + ' (' + duration + ')  ***  ';
+        this.textDisplay.setRegisterText('songTitle', name);
+    },
+
+    setChannelCount: function(channels) {
+        this.nodes.mono.classList.remove('selected');
+        this.nodes.stereo.classList.remove('selected');
+        if(channels == 1) {
+            this.nodes.mono.classList.add('selected');
+        } else if(channels == 2) {
+           this.nodes.stereo.classList.add('selected');
+        }
+    },
+
+    toggleRepeat: function() {
+        this.nodes.repeat.classList.toggle('selected');
+    },
+
+    toggleShuffle: function() {
+        this.nodes.shuffle.classList.toggle('selected');
+    },
+
+    dragenter: function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+    },
+
+    dragover: function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+    },
+
+    drop: function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        var dt = e.dataTransfer;
+        var file = dt.files[0];
+        this.winamp.loadFromFileReference(file);
+    },
+
+    _timeString: function(time) {
+        var timeObject = this.winamp._timeObject(time);
+        return timeObject[0] + timeObject[1] + ':' + timeObject[2] + timeObject[3];
+    }
+
+}
diff --git a/js/media.js b/js/media.js
index 7868bd23..7a5523d0 100644
--- a/js/media.js
+++ b/js/media.js
@@ -172,6 +172,10 @@ Media = {
         this._gainNode.gain.value = volume;
     },
 
+    getVolume: function() {
+        return this._gainNode.gain.value;
+    },
+
     // From -100 to 100
     setBalance: function(balance) {
         var changeVal = Math.abs(balance) / 100;
diff --git a/js/skin.js b/js/skin.js
index 51d9a1cf..971dc766 100644
--- a/js/skin.js
+++ b/js/skin.js
@@ -52,6 +52,7 @@ SkinManager = {
 
     // Given the url of an original Winamp WSZ file, set the current skin
     setSkinByUrl: function(url) {
+        Winamp.setLoadingState();
         this.fileManager.bufferFromUrl(url, this._setSkinByBuffer.bind(this));
     },
 
@@ -80,7 +81,7 @@ SkinManager = {
         }
 
         // Clear the loading state
-        document.getElementById('winamp').classList.remove('loading');
+        Winamp.unsetLoadingState();
         this.styleNode.appendChild(document.createTextNode(cssRules));
 
         this._parseVisColors(zip);
diff --git a/js/winamp.js b/js/winamp.js
index cf3070de..f5f833dc 100755
--- a/js/winamp.js
+++ b/js/winamp.js
@@ -15,46 +15,7 @@ Winamp = {
         };
         this.state = '';
 
-        this.nodes = {
-            'close': document.getElementById('close'),
-            'shade': document.getElementById('shade'),
-            'buttonD': document.getElementById('button-d'),
-            'position': document.getElementById('position'),
-            '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'),
-            'visualizer': document.getElementById('visualizer'),
-            'previous': document.getElementById('previous'),
-            'play': document.getElementById('play'),
-            'pause': document.getElementById('pause'),
-            'stop': document.getElementById('stop'),
-            'next': document.getElementById('next'),
-            'eject': document.getElementById('eject'),
-            'repeat': document.getElementById('repeat'),
-            'shuffle': document.getElementById('shuffle'),
-            'volume': document.getElementById('volume'),
-            'kbps': document.getElementById('kbps'),
-            'khz': document.getElementById('khz'),
-            'balance': document.getElementById('balance'),
-            'playPause': document.getElementById('play-pause'),
-            'workIndicator': document.getElementById('work-indicator'),
-            'winamp': document.getElementById('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');
+        this.mainWindow = MainWindow.init(this);
 
         this.setVolume(options.volume);
         this.setBalance(options.balance);
@@ -66,35 +27,13 @@ Winamp = {
     },
 
     _registerListeners: function() {
-        self = this;
+        var self = this;
 
-        this.windowManager.registerWindow(this.nodes.winamp, this.nodes.titleBar);
-
-        this.nodes.close.onclick = function() {
-            self.close();
-        }
-
-        this.nodes.buttonD.onmousedown = function() {
-            if(self.nodes.winamp.classList.contains('doubled')) {
-                self.textDisplay.setRegisterText('message', 'Disable doublesize mode');
-            } else {
-                self.textDisplay.setRegisterText('message', 'Enable doublesize mode');
-            }
-            self.textDisplay.showRegister('message');
-        }
-        this.nodes.buttonD.onmouseup = function() {
-            self.textDisplay.showRegister('songTitle');
-        }
-
-        this.nodes.buttonD.onclick = function() {
-            self.toggleDoubledMode();
-        }
+        this.windowManager.registerWindow(this.mainWindow);
 
         this.media.addEventListener('timeupdate', function() {
-            if(!self.nodes.winamp.classList.contains('setting-position')) {
-                self.nodes.position.value = self.media.percentComplete();
-            }
-            self.updateTime();
+            self.mainWindow.updatePosition(self.media.percentComplete());
+            self.mainWindow.updateTime();
         });
 
         this.media.addEventListener('visualizerupdate', function(analyser) {
@@ -107,150 +46,23 @@ Winamp = {
         });
 
         this.media.addEventListener('waiting', function() {
-            self.nodes.workIndicator.classList.add('selected');
+            self.mainWindow.setWorkingIndicator();
         });
 
         this.media.addEventListener('playing', function() {
             self.setState('play');
-            self.nodes.workIndicator.classList.remove('selected');
+            self.mainWindow.unsetWorkingIndicator();
         });
 
-        this.nodes.shade.onclick = function() {
-            self.nodes.winamp.classList.toggle('shade');
-        }
-
-        this.nodes.time.onclick = function() {
-            self.toggleTimeMode();
-        }
-
-        this.nodes.shadeTime.onclick = function() {
-            self.toggleTimeMode();
-        }
-
-        this.nodes.visualizer.onclick = function() {
-            if(self.skin.visualizer.style == self.skin.visualizer.NONE) {
-                self.skin.visualizer.setStyle(self.skin.visualizer.BAR);
-            } else if(self.skin.visualizer.style == self.skin.visualizer.BAR) {
-                self.skin.visualizer.setStyle(self.skin.visualizer.OSCILLOSCOPE);
-            } else if(self.skin.visualizer.style == self.skin.visualizer.OSCILLOSCOPE) {
-                self.skin.visualizer.setStyle(self.skin.visualizer.NONE);
-            }
-            self.skin.visualizer.clear();
-        }
-
-        this.nodes.songTitle.onmousedown = function() {
-            self.textDisplay.pauseRegisterMarquee('songTitle');
-        }
-
-        this.nodes.songTitle.onmouseup = function() {
-            setTimeout(function () {
-                self.textDisplay.startRegisterMarquee('songTitle');
-            }, 1000);
-        }
-
-        this.nodes.previous.onclick = function() {
-            self.previous();
-        }
-
-        this.nodes.play.onclick = function() {
-            self.play();
-        }
-
-        this.nodes.pause.onclick = function() {
-            self.pause();
-        }
-
-        this.nodes.stop.onclick = function() {
-            self.stop();
-        }
-
-        this.nodes.next.onclick = function() {
-            self.next();
-        }
-
-        this.nodes.eject.onclick = function() {
-            self.openFileDialog();
-        }
-
         this.fileInput.onchange = function(e){
             self.loadFromFileReference(e.target.files[0]);
         }
 
-        this.nodes.volume.onmousedown = function() {
-            self.textDisplay.showRegister('volume');
-        }
-
-        this.nodes.volume.onmouseup = function() {
-            self.textDisplay.showRegister('songTitle');
-        }
-
-        this.nodes.volume.oninput = function() {
-            self.setVolume(this.value);
-        }
-
-        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() {
-            self.textDisplay.showRegister('songTitle');
-            self.nodes.winamp.classList.remove('setting-position');
-        }
-
-        this.nodes.position.oninput = function() {
-            var newPercentComplete = self.nodes.position.value;
-            var newFractionComplete = newPercentComplete/100;
-            var newElapsed = self._timeString(self.media.duration() * newFractionComplete);
-            var duration = self._timeString(self.media.duration());
-            var message = "Seek to: " + newElapsed + "/" + duration + " (" + newPercentComplete + "%)";
-            self.textDisplay.setRegisterText('position', message);
-        }
-
-        this.nodes.position.onchange = function() {
-            if(!self.nodes.winamp.classList.contains('stop')){
-                self.media.seekToPercentComplete(this.value);
-            }
-        }
-
-        this.nodes.balance.onmousedown = function() {
-            self.textDisplay.showRegister('balance');
-        }
-
-        this.nodes.balance.onmouseup = function() {
-            self.textDisplay.showRegister('songTitle');
-        }
-
-        this.nodes.balance.oninput = function() {
-            if(Math.abs(this.value) < 25) {
-                this.value = 0;
-            }
-            self.setBalance(this.value);
-        }
-
-        this.nodes.repeat.onclick = function() {
-            self.toggleRepeat();
-        }
-
-        this.nodes.shuffle.onclick = function() {
-            self.toggleShuffle();
-        }
-
         // Propagate state to window css
         this.addEventListener('changeState', function() {
-            var stateOptions = ['play', 'stop', 'pause'];
-            for(var i = 0; i < stateOptions.length; i++) {
-                self.nodes.winamp.classList.remove(stateOptions[i]);
-            }
-            self.nodes.winamp.classList.add(self.state);
+            self.mainWindow.changeState(self.state);
         });
 
-        this.nodes.winamp.addEventListener('dragenter', this.dragenter.bind(this));
-        this.nodes.winamp.addEventListener('dragover', this.dragover.bind(this));
-        this.nodes.winamp.addEventListener('drop', this.drop.bind(this));
-
     },
 
     /* Functions */
@@ -259,14 +71,12 @@ Winamp = {
         this.dispatchEvent('changeState');
     },
 
-    toggleDoubledMode: function() {
-        this.nodes.buttonD.classList.toggle('selected');
-        this.nodes.winamp.classList.toggle('doubled');
+    getState: function() {
+        return this.state;
     },
 
     toggleTimeMode: function() {
-        this.nodes.time.classList.toggle('countdown');
-        this.updateTime();
+        this.mainWindow.toggleTimeMode();
     },
 
     previous: function(num) {
@@ -275,7 +85,7 @@ Winamp = {
     },
 
     play: function() {
-        if(this.state == 'play'){
+        if(this.getState() == 'play'){
             this.media.stop();
         }
         this.media.play();
@@ -283,10 +93,10 @@ Winamp = {
     },
 
     pause: function() {
-        if(this.state == 'pause'){
+        if(this.getState() == 'pause'){
             this.media.play();
         }
-        else if(this.state == 'play')
+        else if(this.getState() == 'play')
         {
             this.media.pause();
             this.setState('pause');
@@ -309,140 +119,53 @@ Winamp = {
         volume = Math.min(volume, 100);
 
         var percent = volume / 100;
-        var sprite = Math.round(percent * 28);
-        var offset = (sprite - 1) * 15;
 
         this.media.setVolume(percent);
-        this.nodes.volume.style.backgroundPosition = '0 -' + offset + 'px';
-
-        var message = 'Volume: ' + volume + '%';
-        this.textDisplay.setRegisterText('volume', message);
-
-        // This shouldn't trigger an infinite loop with volume.onchange(),
-        // since the value will be the same
-        this.nodes.volume.value = volume;
+        this.mainWindow.setVolume(volume);
     },
 
     incrementVolumeBy: function(ammount) {
-        this.setVolume((winamp.nodes.volume.value*1) + ammount);
+        this.setVolume((this.media.getVolume() * 100) + ammount);
+    },
+
+    toggleDoubledMode: function() {
+        this.mainWindow.toggleDoubledMode();
     },
 
     // From -100 to 100
     setBalance: function(balance) {
-        var string = '';
-        if(balance == 0) {
-            string = 'Balance: Center';
-        } else if(balance > 0) {
-            string = 'Balance: ' + balance + '% Right';
-        } else {
-            string = 'Balance: ' + Math.abs(balance) + '% Left';
-        }
-        this.textDisplay.setRegisterText('balance', string);
-
         this.media.setBalance(balance);
-        balance = Math.abs(balance) / 100
-        sprite = Math.round(balance * 28);
-        offset = (sprite - 1) * 15;
-        this.nodes.balance.style.backgroundPosition = '-9px -' + offset + 'px';
+        this.mainWindow.setBalance(balance);
     },
 
     seekForwardBy: function(seconds) {
         this.media.seekToTime(this.media.timeElapsed() + seconds);
-        winamp.updateTime()
+        winamp.mainWindow.updateTime()
     },
 
     toggleRepeat: function() {
         this.media.toggleRepeat();
-        this.nodes.repeat.classList.toggle('selected');
+        this.mainWindow.toggleRepeat();
     },
 
     toggleShuffle: function() {
         this.media.toggleShuffle();
-        this.nodes.shuffle.classList.toggle('selected');
+        this.mainWindow.toggleShuffle();
     },
 
     toggleLlama: function() {
-        document.getElementById('winamp').classList.toggle('llama');
-    },
-
-    // TODO: Refactor this function
-    updateTime: function() {
-        this.updateShadePositionClass();
-
-        var shadeMinusCharacter = ' ';
-        if(this.nodes.time.classList.contains('countdown')) {
-            digits = this._timeObject(this.media.timeRemaining());
-            var shadeMinusCharacter = '-';
-        } else {
-            digits = this._timeObject(this.media.timeElapsed());
-        }
-        this.skin.font.displayCharacterInNode(shadeMinusCharacter, document.getElementById('shade-minus-sign'));
-
-        var digitNodes = [
-            document.getElementById('minute-first-digit'),
-            document.getElementById('minute-second-digit'),
-            document.getElementById('second-first-digit'),
-            document.getElementById('second-second-digit')
-        ];
-        var shadeDigitNodes = [
-            document.getElementById('shade-minute-first-digit'),
-            document.getElementById('shade-minute-second-digit'),
-            document.getElementById('shade-second-first-digit'),
-            document.getElementById('shade-second-second-digit')
-        ];
-
-        // For each digit/node
-        for(i = 0; i < 4; i++) {
-            var digit = digits[i];
-            var digitNode = digitNodes[i];
-            var shadeNode = shadeDigitNodes[i];
-            digitNode.innerHTML = '';
-            digitNode.appendChild(this.skin.font.digitNode(digit));
-            this.skin.font.displayCharacterInNode(digit, shadeNode);
-        }
+        this.mainWindow.toggleLlama();
     },
 
     close: function() {
         this.media.stop();
         this.setState('stop'); // Currently unneeded
-        this.nodes.winamp.classList.add('closed');
     },
 
     openFileDialog: function() {
         this.fileInput.click();
     },
 
-    // In shade mode, the position slider shows up differently depending on if
-    // it's near the start, middle or end of its progress
-    updateShadePositionClass: function() {
-        var position = this.nodes.position;
-
-        position.removeAttribute("class");
-        if(position.value <= 33) {
-            position.classList.add('left');
-        } else if(position.value >= 66) {
-            position.classList.add('right');
-        }
-    },
-
-    dragenter: function(e) {
-        e.stopPropagation();
-        e.preventDefault();
-    },
-
-    dragover: function(e) {
-        e.stopPropagation();
-        e.preventDefault();
-    },
-
-    drop: function(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        var dt = e.dataTransfer;
-        var file = dt.files[0];
-        this.loadFromFileReference(file);
-    },
-
     loadFromFileReference: function(fileReference) {
         if(new RegExp("(wsz|zip)$", 'i').test(fileReference.name)) {
             this.skin.setSkinByFileReference(fileReference);
@@ -460,10 +183,28 @@ Winamp = {
     },
 
     setSkinByUrl: function(url) {
-        this.nodes.winamp.classList.add('loading');
         this.skin.setSkinByUrl(url);
     },
 
+    setLoadingState: function() {
+        this.mainWindow.setLoadingState();
+    },
+
+    unsetLoadingState: function() {
+        this.mainWindow.unsetLoadingState();
+    },
+
+    toggleVisualizer: function() {
+        if(this.skin.visualizer.style == this.skin.visualizer.NONE) {
+            this.skin.visualizer.setStyle(this.skin.visualizer.BAR);
+        } else if(this.skin.visualizer.style == this.skin.visualizer.BAR) {
+            this.skin.visualizer.setStyle(this.skin.visualizer.OSCILLOSCOPE);
+        } else if(this.skin.visualizer.style == this.skin.visualizer.OSCILLOSCOPE) {
+            this.skin.visualizer.setStyle(this.skin.visualizer.NONE);
+        }
+        this.skin.visualizer.clear();
+    },
+
     /* Listeners */
     addEventListener: function(event, callback) {
         this._callbacks[event].push(callback);
@@ -481,12 +222,6 @@ Winamp = {
         this.media.loadBuffer(buffer, this._setMetaData.bind(this));
     },
 
-    _setTitle: function() {
-        var duration = this._timeString(this.media.duration());
-        var name = this.fileName + ' (' + duration + ')  ***  ';
-        this.textDisplay.setRegisterText('songTitle', name);
-    },
-
     _setMetaData: function() {
         var kbps = "128";
         var khz = Math.round(this.media.sampleRate() / 1000).toString();
@@ -494,19 +229,13 @@ Winamp = {
         this.skin.font.setNodeToString(document.getElementById('kbps'), kbps);
         this.skin.font.setNodeToString(document.getElementById('khz'), khz);
         this._setChannels();
-        this.updateTime();
-        this._setTitle();
+        this.mainWindow.updateTime();
+        this.mainWindow.setTitle(this.fileName, this.media.duration());
     },
 
     _setChannels: function() {
         var channels = this.media.channels();
-        document.getElementById('mono').classList.remove('selected');
-        document.getElementById('stereo').classList.remove('selected');
-        if(channels == 1) {
-            document.getElementById('mono').classList.add('selected');
-        } else if(channels == 2) {
-            document.getElementById('stereo').classList.add('selected');
-        }
+        this.mainWindow.setChannelCount(channels);
     },
 
     /* Helpers */
@@ -521,9 +250,4 @@ Winamp = {
             Math.floor(seconds % 10)
         ];
     },
-
-    _timeString: function(time) {
-        var timeObject = this._timeObject(time);
-        return timeObject[0] + timeObject[1] + ':' + timeObject[2] + timeObject[3];
-    }
 }
diff --git a/js/window-manager.js b/js/window-manager.js
index 1110780f..8a0e3e6d 100644
--- a/js/window-manager.js
+++ b/js/window-manager.js
@@ -1,5 +1,7 @@
 WindowManager = {
-    registerWindow: function(body, handle) {
+    registerWindow: function(win) {
+        body = win.body;
+        handle = win.handle;
 
         // Make window dragable
         handle.addEventListener('mousedown',function(e){