Store files as instanace objects

With files encapsulated as objects, we can store them, sort them, and pass them
around. This is laying a foundation for handling playlists. (#10)

Also, we move the modification of the loading state outside of the skin
manager. This creates a better separation of concerns.

index.html

@@ -111,7 +111,7 @@
         </p>
         <script src="js/jszip.2.4.0.min.js?inline"></script>
         <script src="js/browser.js?inline"></script>
-        <script src="js/file-manager.js?inline"></script>
+        <script src="js/file.js?inline"></script>
         <script src="js/visualizer.js?inline"></script>
         <script src="js/media.js?inline"></script>
         <script src="js/font.js?inline"></script>

js/context.js

@@ -3,6 +3,7 @@ Context = {
     option: document.getElementById('option'),
 
     init: function(winamp) {
+        this.winamp = winamp;
         var self = this;
 
         document.onclick = function() {
@@ -17,20 +18,22 @@ Context = {
         var skinSelectNodes = document.getElementsByClassName('skin-select');
         for(var i = 0; i < skinSelectNodes.length; i++) {
             skinSelectNodes[i].onclick = function() {
-                winamp.setSkinByUrl(this.dataset.skinUrl);
+                var skinFile = new MyFile();
+                skinFile.setUrl(this.dataset.skinUrl);
+                self.winamp.setSkin(skinFile);
             }
         }
 
         document.getElementById('context-play-file').onclick = function(event) {
             self.option.classList.remove('selected');
-            winamp.openFileDialog();
+            self.winamp.openFileDialog();
         };
         document.getElementById('context-load-skin').onclick = function(event) {
             self.option.classList.remove('selected');
-            winamp.openFileDialog();
+            self.winamp.openFileDialog();
         };
         document.getElementById('context-exit').onclick = function() {
-            winamp.close();
+            self.winamp.close();
         };
     }
 }

js/file.js

@@ -0,0 +1,43 @@
+// Custom object representing a file
+// `File` is already a builtin, so we use `MyFile`
+MyFile = function(){
+    this.reader = new FileReader();
+    this.url = null;
+    this.fileReference = null;
+    this.setUrl = function(url){
+        this.url = url;
+    }
+    this.setFileReference = function(fileReference){
+        this.fileReference = fileReference;
+    }
+    this.processBuffer = function(bufferHandler) {
+        if(this.url) {
+            var oReq = new XMLHttpRequest();
+            oReq.open("GET", this.url, true);
+            oReq.responseType = "arraybuffer";
+
+            oReq.onload = function (oEvent) {
+                var arrayBuffer = oReq.response; // Note: not oReq.responseText
+                bufferHandler(arrayBuffer);
+            };
+
+            oReq.send(null);
+            return
+
+        } else if(this.fileReference) {
+            this.reader.onload = function (e) {
+                var arrayBuffer = e.target.result;
+                bufferHandler(arrayBuffer);
+            };
+            this.reader.onerror = function (e) {
+                console.error(e);
+            };
+
+            this.reader.readAsArrayBuffer(this.fileReference);
+            return
+        }
+
+        console.error('Tried to process an unpopulated file object');
+        return false;
+    }
+};

js/skin.js

@@ -1,6 +1,5 @@
 // Dynamically set the css background images for all the sprites
 SkinManager = {
-    fileManager: FileManager,
     font: Font,
     init: function(visualizerNode, analyser) {
         this._createNewStyleNode();
@@ -46,14 +45,9 @@ SkinManager = {
     },
 
     // Given a file of an original Winamp WSZ file, set the current skin
-    setSkinByFileReference: function(fileReference) {
-        this.fileManager.bufferFromFileReference(fileReference, this._setSkinByBuffer.bind(this));
-    },
-
-    // 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));
+    setSkinByFile: function(file, completedCallback) {
+        this.completedCallback = completedCallback;
+        file.processBuffer(this._setSkinByBuffer.bind(this));
     },
 
     // Given a bufferArray containing a Winamp WSZ file, set the current skin
@@ -80,12 +74,9 @@ SkinManager = {
             }
         }
 
-        // Clear the loading state
-        Winamp.unsetLoadingState();
         this.styleNode.appendChild(document.createTextNode(cssRules));
-
         this._parseVisColors(zip);
-
+        this.completedCallback();
     },
 
     _parseVisColors: function(zip) {

js/winamp.js

@@ -1,8 +1,6 @@
 // UI and App logic
 Winamp = {
     init: function(options) {
-        this.fileManager = FileManager;
-
         this.fileInput = document.createElement('input');
         this.fileInput.type = 'file';
         this.fileInput.style.display = 'none';
@@ -27,7 +25,9 @@ Winamp = {
         this.setVolume(options.volume);
         this.setBalance(options.balance);
         this.loadFromUrl(options.mediaFile.url, options.mediaFile.name);
-        this.setSkinByUrl(options.skinUrl);
+        var skinFile = new MyFile();
+        skinFile.setUrl(options.skinUrl);
+        this.setSkin(skinFile);
 
         this._registerListeners();
         return this;
@@ -184,23 +184,28 @@ Winamp = {
     },
 
     loadFromFileReference: function(fileReference) {
+        var file = new MyFile();
+        file.setFileReference(fileReference);
         if(new RegExp("(wsz|zip)$", 'i').test(fileReference.name)) {
-            this.skin.setSkinByFileReference(fileReference);
+            this.skin.setSkinByFile(file);
         } else {
             this.media.autoPlay = true;
             this.fileName = fileReference.name;
-            this.fileManager.bufferFromFileReference(fileReference, this._loadBuffer.bind(this));
+            file.processBuffer(this._loadBuffer.bind(this));
         }
     },
 
     // Used only for the initial load, since it must have a CORS header
     loadFromUrl: function(url, fileName) {
         this.fileName = fileName;
-        this.fileManager.bufferFromUrl(url, this._loadBuffer.bind(this));
+        var file = new MyFile();
+        file.setUrl(url);
+        file.processBuffer(this._loadBuffer.bind(this));
     },
 
-    setSkinByUrl: function(url) {
-        this.skin.setSkinByUrl(url);
+    setSkin: function(file) {
+        this.setLoadingState();
+        this.skin.setSkinByFile(file, this.unsetLoadingState.bind(this));
     },
 
     setLoadingState: function() {