Beginnings of Respack UI, minor cleanups

css/hues-res.css

@@ -0,0 +1,126 @@
+#huesResources {
+    position: relative;
+    margin: 5px;
+    height: 385px;
+    font-size: 16px;
+}
+
+.res-packscontainer, .res-packcontainer {
+    position: absolute;
+}
+
+.res-packscontainer {
+    width: 43%;
+    left: 0;
+    margin-right: 10px;
+}
+
+.res-packcontainer {
+    width: 55%;
+    right: 0;
+    margin-left: 10px;
+}
+
+.res-header {
+    padding: 5px 0px;
+}
+
+#res-curheader {
+    padding-top: 0px;
+}
+
+#res-packlist {
+    height: 120px;
+}
+
+#res-remotelist {
+    height: 150px;
+}
+
+.res-list {
+    border: 2px solid black;
+    background: rgba(255,255,255,0.3);
+    overflow: auto;
+    overflow-x: hidden;
+}
+
+.res-listitem {
+    font-size: 10px;
+    border-bottom: 1px solid black;
+}
+
+.res-listitem  > span {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 2px;
+}
+
+.res-listitem :hover {
+    background: rgba(255,255,255,0.5);
+}
+
+.res-listitem input[type="checkbox"] {
+    display: none;
+}
+
+.res-buttons {
+    display: flex;
+    justify-content: space-between;
+    padding: 0px 0px;
+}
+
+.res-button {
+    font-size: 10px;
+    margin: 3px 2px;
+    padding: 3px;
+    background: rgba(127,127,127, 0.5);
+    border-color: rgb(0,0,0);
+    border-width: 1px;
+    border-style: solid;
+    cursor: pointer;
+    /* Don't want double click to select */
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#res-packinfo {
+    margin-top: 5px;
+    font-size: 9px;
+    display: flex;
+    justify-content: space-between;
+}
+
+#res-packcreator > a:link, #res-packcreator > a:visited {
+    color: inherit;
+    text-decoration: none;
+}
+
+#res-packdesc {
+    border: 3px solid gray;
+    background: rgba(255,255,255,0.5);
+    font-size: 9px;
+    height: 85px;
+}
+
+#res-packtabs {
+    display: flex;
+    justify-content: space-between;
+}
+
+#res-packtabs > div {
+    flex-grow: 1;
+}
+
+#res-packcontents {
+    height: 170px;
+}
+
+#res-packbuttons > .res-button {
+    flex-grow: 1;
+    text-align: center;
+}

css/style.css

@@ -12,7 +12,7 @@ html, body {
     height: 100%;
     margin: 0; padding: 0;
     overflow: hidden;
-    background-color:#ffffff;
+    background-color:#fff;
 }
 
 h1 {
@@ -87,8 +87,8 @@ h1, h2, h3 {
     left: 0;
     z-index: 10;
     opacity: 1;
-    transition: opacity 2s linear;
+    transition: opacity 1s linear;
-    -webkit-transition: opacity 2s linear;
+    -webkit-transition: opacity 1s linear;
 }
 
 #preloadHelper.loaded {
@@ -158,6 +158,7 @@ input.tab-input[type="radio"]:checked + label {
     border-width: 2px;
     border-style: solid;
     font-family: 'PetMe64Web';
+    width: 640px;
 }
 
 #huesSettings {
@@ -174,13 +175,6 @@ input.tab-input[type="radio"]:checked + label {
 
 .settings-buttons{
     margin: 10px 2px 10px 0px;
-    /* Don't want double click to select */
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
 }
 
 .settings-checkbox{
@@ -196,6 +190,13 @@ input.tab-input[type="radio"]:checked + label {
     border-width: 1px;
     border-style: solid;
     cursor: pointer;
+    /* Don't want double click to select */
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 label.settings-label:hover {

index.html

@@ -8,6 +8,7 @@
         <link rel="stylesheet" href="css/hues-m.css">
         <link rel="stylesheet" href="css/hues-r.css">
         <link rel="stylesheet" href="css/hues-w.css">
+        <link rel="stylesheet" href="css/hues-res.css">
         <link rel="stylesheet" href="css/font-awesome.min.css">
         <script type="text/javascript" src="js/HuesCore.js"></script>
         <script type="text/javascript" src="js/HuesSettings.js"></script>
@@ -50,7 +51,8 @@
                     <input class="tab-input" type="radio" name="tabs" id="tab3">
                     <label class="tab-label" for="tab3">INFO</label>
                     <div id="tab1-content" class="tab-content">
-                        Soon
+                        <!-- Populated by ResourceManager.js -->
+                        <div id="huesResources"></div>
                     </div>
                     <div id="tab2-content" class="tab-content">
                         <!-- Populated by HuesSettings.js -->

js/HuesUI.js

@@ -44,41 +44,40 @@ function HuesUI(parent) {
 }
 
 HuesUI.prototype.initUI = function() {
-    var doc = this.root.ownerDocument
     var that = this;
 
     // Major info, image, song names
-    var imageName = doc.createElement("div");
+    var imageName = document.createElement("div");
     this.imageName = imageName;
     
-    this.imageLink = doc.createElement("a");
+    this.imageLink = document.createElement("a");
     this.imageLink.target = "_blank";
     this.imageName.appendChild(this.imageLink);
 
-    var songName = doc.createElement("div");
+    var songName = document.createElement("div");
     this.songName = songName;
     
-    this.songLink = doc.createElement("a");
+    this.songLink = document.createElement("a");
     this.songLink.target = "_blank";
     this.songName.appendChild(this.songLink);
 
-    var hueName = doc.createElement("div");
+    var hueName = document.createElement("div");
     this.hueName = hueName;
     
     // Prev/next controls
-    var imagePrev = doc.createElement("div");
+    var imagePrev = document.createElement("div");
     imagePrev.textContent = "<";
     imagePrev.onclick = function() {that.core.previousImage();};
     this.imagePrev = imagePrev;
-    var imageNext = doc.createElement("div");
+    var imageNext = document.createElement("div");
     imageNext.textContent = ">";
     imageNext.onclick = function() {that.core.nextImage();};
     this.imageNext = imageNext;
-    var songPrev = doc.createElement("div");
+    var songPrev = document.createElement("div");
     songPrev.textContent = "<";
     this.songPrev = songPrev;
     songPrev.onclick = function() {that.core.previousSong();};
-    var songNext = doc.createElement("div");
+    var songNext = document.createElement("div");
     songNext.textContent = ">";
     songNext.onclick = function() {that.core.nextSong();};
     this.songNext = songNext;
@@ -93,26 +92,26 @@ HuesUI.prototype.initUI = function() {
     this.imageList = imageList;
     
     // Beat timer, x and y blur, millis timer
-    this.timer = doc.createElement("div");
+    this.timer = document.createElement("div");
     this.timer.textContent = "T=$0x0000";
     
-    this.beatCount = doc.createElement("div");
+    this.beatCount = document.createElement("div");
     this.beatCount.textContent = "B=$0x00";
     
-    this.xBlur = doc.createElement("div");
+    this.xBlur = document.createElement("div");
     this.xBlur.textContent = "X=$0x00";
     
-    this.yBlur = doc.createElement("div");
+    this.yBlur = document.createElement("div");
     this.yBlur.textContent = "Y=$0x00";
     
     // Config stuff
-    this.settingsToggle = doc.createElement("div");
+    this.settingsToggle = document.createElement("div");
     this.settingsToggle.innerHTML = '<i class="fa fa-cog"></i>';
     this.settingsToggle.onclick = function() {
         that.core.settings.toggle();
     }
     
-    this.hideToggle = doc.createElement("div");
+    this.hideToggle = document.createElement("div");
     this.hideToggle.innerHTML = "&#x25BC;";
     this.hideToggle.onclick = function() {
         that.toggleHide();
@@ -230,15 +229,14 @@ RetroUI.prototype.constructor = RetroUI;
 RetroUI.prototype.initUI = function() {
     HuesUI.prototype.initUI.call(this);
     
-    var doc = this.root.ownerDocument;
     var that = this;
     
-    var container = doc.createElement("div");
+    var container = document.createElement("div");
     container.className = "hues-r-container";
     this.root.appendChild(container);
     this.container = container;
     
-    this.mode = doc.createElement("div");
+    this.mode = document.createElement("div");
     container.appendChild(this.mode);
     container.appendChild(this.imageName);
     container.appendChild(this.timer);
@@ -246,28 +244,28 @@ RetroUI.prototype.initUI = function() {
     container.appendChild(this.xBlur);
     container.appendChild(this.yBlur);
     
-    this.colourIndex = doc.createElement("div");
+    this.colourIndex = document.createElement("div");
     this.colourIndex.textContent = "C=$0x00";
     container.appendChild(this.colourIndex);
     
-    this.version = doc.createElement("div");
+    this.version = document.createElement("div");
     container.appendChild(this.version);
     
     container.appendChild(this.hueName);
     container.appendChild(this.songName);
     
-    this.beatBar = doc.createElement("div");
+    this.beatBar = document.createElement("div");
     container.appendChild(this.beatBar);
     
-    this.controls = doc.createElement("div");
+    this.controls = document.createElement("div");
     this.controls.className = "hues-r-controls";
     
-    var imageMode = doc.createElement("div");
+    var imageMode = document.createElement("div");
-    this.imageModeManual = doc.createElement("div");
+    this.imageModeManual = document.createElement("div");
     this.imageModeManual.textContent = "NORMAL";
     this.imageModeManual.onclick = function() {that.core.setIsFullAuto(false);};
     this.imageModeManual.className = "hues-r-manualmode hues-r-button";
-    this.imageModeAuto = doc.createElement("div");
+    this.imageModeAuto = document.createElement("div");
     this.imageModeAuto.textContent = "FULL AUTO";
     this.imageModeAuto.onclick = function() {that.core.setIsFullAuto(true);};
     this.imageModeAuto.className = "hues-r-automode hues-r-button";
@@ -289,7 +287,7 @@ RetroUI.prototype.initUI = function() {
     
     this.root.appendChild(this.controls);
     
-    var subControl = doc.createElement("div");
+    var subControl = document.createElement("div");
     subControl.className = "hues-r-subcontrols";
     subControl.appendChild(this.settingsToggle);
     this.imageList.textContent = "C";
@@ -299,7 +297,7 @@ RetroUI.prototype.initUI = function() {
     
     this.root.appendChild(subControl);
     
-    this.hideRestore = doc.createElement("div");
+    this.hideRestore = document.createElement("div");
     this.hideRestore.className = "hues-r-hiderestore";
     this.hideRestore.innerHTML = "&#x25B2;";
     this.hideRestore.onclick = function() {
@@ -382,13 +380,12 @@ ModernUI.prototype.constructor = ModernUI;
 ModernUI.prototype.initUI = function() {
     HuesUI.prototype.initUI.call(this);
     
-    var doc = this.root.ownerDocument;
     var that = this;
     
     this.imageName.className = "hues-m-imagename";
     this.songName.className = "hues-m-songtitle";
     
-    var controls = doc.createElement("div");
+    var controls = document.createElement("div");
     controls.className = "hues-m-controls";
     this.root.appendChild(controls);
     this.controls = controls;
@@ -396,7 +393,7 @@ ModernUI.prototype.initUI = function() {
     controls.appendChild(this.imageName);
     controls.appendChild(this.songName);
 
-    var leftBox = doc.createElement("div");
+    var leftBox = document.createElement("div");
     leftBox.className = "hues-m-leftbox";
     controls.appendChild(leftBox);
     this.leftBox = leftBox;
@@ -404,23 +401,23 @@ ModernUI.prototype.initUI = function() {
     this.hueName.className = "hues-m-huename";
     leftBox.appendChild(this.hueName);
     
-    var volCluster = doc.createElement("div");
+    var volCluster = document.createElement("div");
     volCluster.className = "hues-m-vol-cluster";
     leftBox.appendChild(volCluster);
     
     this.settingsToggle.className = "hues-m-cog";
     volCluster.appendChild(this.settingsToggle);
     
-    var volBar = doc.createElement("div");
+    var volBar = document.createElement("div");
     volBar.className = "hues-m-vol-bar";
     volCluster.appendChild(volBar);
 
-    var label = doc.createElement("div");
+    var label = document.createElement("div");
     label.textContent = "VOL";
     label.className = "hues-m-vol-label";
     volBar.appendChild(label);
     
-    var infoToggle = doc.createElement("div");
+    var infoToggle = document.createElement("div");
     infoToggle.innerHTML = '?';
     infoToggle.className = "hues-m-question";
     infoToggle.onclick = function() {
@@ -428,7 +425,7 @@ ModernUI.prototype.initUI = function() {
     }
     volCluster.appendChild(infoToggle);
 
-    var input = doc.createElement("input");
+    var input = document.createElement("input");
     input.type = "range";
     input.min = 0;
     input.max = 1;
@@ -439,21 +436,21 @@ ModernUI.prototype.initUI = function() {
         that.core.soundManager.setVolume(parseFloat(input.value));
     }
     
-    var rightBox = doc.createElement("div");
+    var rightBox = document.createElement("div");
     rightBox.className = "hues-m-rightbox";
     controls.appendChild(rightBox);
     this.rightBox = rightBox;
     
     //Song/image controls
-    var songs = doc.createElement("div");
+    var songs = document.createElement("div");
     songs.className = "hues-m-controlblock";
     this.songList.className = "hues-m-songbutton";
     
-    var songControls = doc.createElement("div");
+    var songControls = document.createElement("div");
     songControls.className = "hues-m-controlbuttons";
     this.songPrev.className = "hues-m-prevbutton"
     this.songNext.className = "hues-m-nextbutton"
-    var songShuffle = doc.createElement("div");
+    var songShuffle = document.createElement("div");
     songShuffle.innerHTML = '<i class="fa fa-random"></i>';
     songShuffle.className = "hues-m-actbutton";
     songShuffle.onclick = function() {that.core.randomSong();};
@@ -464,16 +461,16 @@ ModernUI.prototype.initUI = function() {
     songs.appendChild(songControls);
     rightBox.appendChild(songs);
     
-    var images = doc.createElement("div");
+    var images = document.createElement("div");
     images.className = "hues-m-controlblock";
     var imageList = document.createElement("div");
     imageList.textContent = "IMAGES";
     imageList.className = "hues-m-songbutton";
     
-    var imageControls = doc.createElement("div");
+    var imageControls = document.createElement("div");
     imageControls.className = "hues-m-controlbuttons";
     
-    this.imageMode = doc.createElement("div");
+    this.imageMode = document.createElement("div");
     this.imageMode.innerHTML = "&#9654;"; // PLAY
     this.imageMode.className = "hues-m-actbutton";
     this.imageMode.onclick = function() {that.core.toggleFullAuto();};
@@ -486,9 +483,9 @@ ModernUI.prototype.initUI = function() {
     images.appendChild(imageControls);
     rightBox.appendChild(images);
     
-    var leftInfo = doc.createElement("div");
+    var leftInfo = document.createElement("div");
     leftInfo.className = "hues-m-leftinfo";
-    var rightInfo = doc.createElement("div");
+    var rightInfo = document.createElement("div");
     rightInfo.className = "hues-m-rightinfo";
     leftInfo.appendChild(this.xBlur);
     leftInfo.appendChild(this.yBlur);
@@ -499,22 +496,22 @@ ModernUI.prototype.initUI = function() {
     controls.appendChild(leftInfo);
     controls.appendChild(rightInfo);
 
-    var beatBar = doc.createElement("div");
+    var beatBar = document.createElement("div");
     beatBar.className = "hues-m-beatbar";
     this.root.appendChild(beatBar);
     this.beatBar = beatBar;
 
-    var beatLeft = doc.createElement("div");
+    var beatLeft = document.createElement("div");
     beatLeft.className = "hues-m-beatleft";
     beatBar.appendChild(beatLeft);
     this.beatLeft = beatLeft;
 
-    var beatRight = doc.createElement("div");
+    var beatRight = document.createElement("div");
     beatRight.className = "hues-m-beatright";
     beatBar.appendChild(beatRight);
     this.beatRight = beatRight;
     
-    var beatCenter = doc.createElement("div");
+    var beatCenter = document.createElement("div");
     beatCenter.className = "hues-m-beatcenter";
     this.root.appendChild(beatCenter);
     this.beatCenter = beatCenter;
@@ -614,22 +611,21 @@ WeedUI.prototype.initUI = function() {
     RetroUI.prototype.initUI.call(this);
     
     this.container.removeChild(this.beatBar)
-    var doc = this.root.ownerDocument;
     
     this.controls.className = "hues-w-controls";
     this.subControls.className = "hues-w-subcontrols";
     
-    var beatBar = doc.createElement("div");
+    var beatBar = document.createElement("div");
     beatBar.className = "hues-w-beatbar";
     this.root.appendChild(beatBar);
     this.beatBar = beatBar;
 
-    var beatLeft = doc.createElement("div");
+    var beatLeft = document.createElement("div");
     beatLeft.className = "hues-w-beatleft";
     beatBar.appendChild(beatLeft);
     this.beatLeft = beatLeft;
 
-    var beatRight = doc.createElement("div");
+    var beatRight = document.createElement("div");
     beatRight.className = "hues-w-beatright";
     beatBar.appendChild(beatRight);
     this.beatRight = beatRight;
@@ -657,8 +653,7 @@ WeedUI.prototype.beat = function() {
     this.beatCount.textContent = "B=" + this.intToHex2(this.core.getSafeBeatIndex());
     
     if(["x", "o", "X", "O"].indexOf(beats[0]) != -1) {
-        var doc = this.root.ownerDocument;
+        var beatCenter = document.createElement("div");
-        var beatCenter = doc.createElement("div");
         beatCenter.className = "hues-w-beataccent";
         var rot = this.round10(15 - Math.random() * 30);
         var x = this.round10(- this.xVariance / 2 + Math.random() * this.xVariance);

js/ResourceManager.js

@@ -11,6 +11,30 @@ function Resources() {
     this.rToLoad = []
     this.loadFinishCallback = null;
     this.progressCallback = null;
+    
+    this.root = null;
+    this.packView = {
+        name: null,
+        creator: null,
+        size: null,
+        desc: null,
+        songCount: null,
+        imageCount: null,
+        songList: null,
+        imageList: null,
+        totalSongs: null,
+        totalImages: null
+    };
+    this.packsView = {
+        respackList: null,
+        remoteList: null,
+        progressBar: null,
+        progressStatus: null,
+        progressCurrent: null,
+        progressTop: null,
+        progressPercent: null
+    };
+    this.initUI();
 }
 
 // Array of URLs to load, and a callback for when we're done
@@ -65,9 +89,16 @@ Resources.prototype.updateProgress = function() {
 
 Resources.prototype.addPack = function(pack) {
     console.log("Added", pack.name, "to respacks");
+    var id = "res" + this.resourcePacks.length;
     this.resourcePacks.push(pack);
     this.addResourcesToArrays(pack);
     this.rebuildEnabled();
+    this.updateTotals();
+    
+    this.appendListItem("respacks", pack.name, id, this.packsView.respackList);
+    if(id == "res0") {
+        this.selectPack(0);
+    }
 }
 
 Resources.prototype.addResourcesToArrays = function(pack) {
@@ -130,3 +161,194 @@ Resources.prototype.getSongNames = function() {
     }
     return names;
 }
+
+Resources.prototype.initUI = function() {
+    this.root = document.getElementById("huesResources");
+    
+    var packsContainer = document.createElement("div");
+    packsContainer.className = "res-packscontainer";
+    
+    var packHeader = document.createElement("div");
+    packHeader.textContent = "Current respacks";
+    packHeader.className = "res-header";
+    packHeader.id = "res-curheader";
+    var packList = document.createElement("div");
+    packList.className = "res-list";
+    packList.id = "res-packlist";
+    this.packsView.respackList = packList;
+    var remoteHeader = document.createElement("div");
+    remoteHeader.textContent = "Remote respacks";
+    remoteHeader.className = "res-header";
+    var remoteList = document.createElement("div");
+    remoteList.className = "res-list";
+    remoteList.id = "res-remotelist";
+    this.packsView.remoteList = remoteList;
+    
+    var buttons = document.createElement("div");
+    buttons.className = "res-buttons";
+    var loadRemote = document.createElement("div");
+    loadRemote.className = "res-button";
+    loadRemote.textContent = "LOAD";
+    var loadLocal = document.createElement("div");
+    loadLocal.className = "res-button";
+    loadLocal.textContent = "LOAD ZIPS";
+    buttons.appendChild(loadRemote);
+    buttons.appendChild(loadLocal);
+    
+    var progressContainer = document.createElement("div");
+    var progressBar = document.createElement("div");
+    var progressStatus = document.createElement("div");
+    var progressCurrent = document.createElement("div");
+    var progressTop = document.createElement("div");
+    var progressPercent = document.createElement("div");
+    this.packsView.progressBar = progressBar;
+    this.packsView.progressStatus = progressStatus;
+    this.packsView.progressCurrent = progressCurrent;
+    this.packsView.progressTop = progressTop;
+    this.packsView.progressPercent = progressPercent;
+    progressContainer.appendChild(progressBar);
+    progressContainer.appendChild(progressStatus);
+    progressContainer.appendChild(progressCurrent);
+    progressContainer.appendChild(progressTop);
+    progressContainer.appendChild(progressPercent);
+    
+    packsContainer.appendChild(packHeader);
+    packsContainer.appendChild(packList);
+    packsContainer.appendChild(remoteHeader);
+    packsContainer.appendChild(remoteList);
+    packsContainer.appendChild(buttons);
+    packsContainer.appendChild(progressContainer);
+    
+    var indivView = document.createElement("div");
+    indivView.className = "res-packcontainer";
+    
+    var packName = document.createElement("div");
+    var packInfo = document.createElement("div");
+    packInfo.id = "res-packinfo";
+    var packCreator = document.createElement("div");
+    packCreator.id = "res-packcreator";
+    var packCreatorText = document.createElement("a");
+    packCreator.appendChild(packCreatorText);
+    packInfo.appendChild(packCreator);
+    var packSize = document.createElement("div");
+    packInfo.appendChild(packSize);
+    var packDesc = document.createElement("div");
+    packDesc.id = "res-packdesc";
+    
+    var packTabs = document.createElement("div");
+    packTabs.id = "res-packtabs";
+    var songCount = document.createElement("div");
+    songCount.textContent = "Songs:";
+    packTabs.appendChild(songCount);
+    var imageCount = document.createElement("div");
+    imageCount.textContent = "Images:";
+    packTabs.appendChild(imageCount);
+    
+    var packContents = document.createElement("div");
+    packContents.className = "res-list";
+    packContents.id = "res-packcontents";
+    var songList = document.createElement("div");
+    packContents.appendChild(songList);
+    var imageList = document.createElement("div");
+    packContents.appendChild(imageList);
+    
+    var packButtons = document.createElement("div");
+    packButtons.className = "res-buttons";
+    packButtons.id = "res-packbuttons";
+    var enableAll = document.createElement("div");
+    enableAll.textContent = "ENABLE ALL";
+    enableAll.className = "res-button";
+    var invert = document.createElement("div");
+    invert.textContent = "INVERT";
+    invert.className = "res-button";
+    var disableAll = document.createElement("div");
+    disableAll.textContent = "DISABLE ALL";
+    disableAll.className = "res-button";
+    packButtons.appendChild(enableAll);
+    packButtons.appendChild(invert);
+    packButtons.appendChild(disableAll);
+    
+    var totalCounts = document.createElement("div");
+    var totalSongs = document.createElement("div");
+    totalSongs.textContent = "Total Songs:";
+    var totalImages = document.createElement("div");
+    totalImages.textContent = "Total images:";
+    totalCounts.appendChild(totalSongs);
+    totalCounts.appendChild(totalImages);
+    
+    this.packView.name = packName;
+    this.packView.creator = packCreatorText;
+    this.packView.size = packSize;
+    this.packView.desc = packDesc;
+    this.packView.songCount = songCount;
+    this.packView.imageCount = imageCount;
+    this.packView.songList = songList;
+    this.packView.imageList = imageList;
+    this.packView.totalSongs = totalSongs;
+    this.packView.totalImages = totalImages;
+    
+    indivView.appendChild(packName);
+    indivView.appendChild(packInfo);
+    indivView.appendChild(packDesc);
+    indivView.appendChild(packTabs);
+    indivView.appendChild(packContents);
+    indivView.appendChild(packButtons);
+    indivView.appendChild(totalCounts);
+    
+    this.root.appendChild(packsContainer);
+    this.root.appendChild(indivView);
+}
+
+Resources.prototype.updateTotals = function() {
+    this.packView.totalSongs.textContent = "Total songs: " + 
+            this.enabledSongs.length + "/" + this.allSongs.length;
+    this.packView.totalImages.textContent = "Total images: " + 
+            this.enabledImages.length + "/" + this.allImages.length;
+}
+
+Resources.prototype.selectPack = function(id) {
+    var pack = this.resourcePacks[id];
+    
+    this.packView.name.textContent = pack.name;
+    this.packView.creator.textContent = pack.author;
+    this.packView.creator.href = pack.link ? pack.link : "";
+    this.packView.size.textContent = Math.round(pack.size / 1024, 2) + "kiB";
+    this.packView.desc.textContent = pack.description;
+    this.packView.songCount.textContent = "Songs: " + pack.songs.length;
+    this.packView.imageCount.textContent = "Images: " + pack.images.length;
+    
+    var songList = this.packView.songList;
+    var imageList = this.packView.imageList;
+    while (songList.firstElementChild) {
+        songList.removeChild(songList.firstElementChild)
+    }    
+    while (imageList.firstElementChild) {
+        imageList.removeChild(imageList.firstElementChild)
+    }
+    
+    for(var i = 0; i < pack.songs.length; i++) {
+        var song = pack.songs[i];
+        this.appendListItem("songs", song.title, "song" + i, songList);
+    }
+    
+    for(var i = 0; i < pack.images.length; i++) {
+        var image = pack.images[i];
+        this.appendListItem("images", image.name, "image" + i, imageList);
+    }
+}
+
+Resources.prototype.appendListItem = function(name, value, id, root) {
+    var div = document.createElement("div");
+    div.className = "res-listitem";
+    var checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.name = name;
+    checkbox.value = value;
+    checkbox.id = id;
+    checkbox.checked = true;
+    var label = document.createElement("span");
+    label.textContent = value;
+    div.appendChild(checkbox);
+    div.appendChild(label);
+    root.appendChild(div);
+}

js/ResourcePack.js

@@ -157,7 +157,8 @@ Respack.prototype.parseXML = function() {
     if (this.songs.length > 0) {
         if (this._songFile) {
             this._songFile.getText(function(text) {
-                //XML parser will complain about a bare '&'
+                //XML parser will complain about a bare '&', but some respacks use &amp
+                text = text.replace(/&/g, '&');
                 text = text.replace(/&/g, '&');
                 that.parseSongFile(text);
                 // Go to next in series
@@ -173,6 +174,7 @@ Respack.prototype.parseXML = function() {
     }
     if (this.images.length > 0 && this._imageFile) {
         this._imageFile.getText(function(text) {
+            text = text.replace(/&/g, '&');
             text = text.replace(/&/g, '&');
             that.parseImageFile(text);
             that._imageFile = null;
@@ -182,6 +184,7 @@ Respack.prototype.parseXML = function() {
     }
     if (this._infoFile) {
         this._infoFile.getText(function(text) {
+            text = text.replace(/&/g, '&');
             text = text.replace(/&/g, '&');
             that.parseInfoFile(text);
             that._infoFile = null;