From 24eca6958199be64ace76bcdd1423d86a163ddc0 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordaneldredge@gmail.com>
Date: Sat, 7 Feb 2015 22:37:12 -0800
Subject: [PATCH] Abstract more skin sprites

---
 css/main.css       | 35 -----------------------------------
 js/skin-sprites.js | 36 ++++++++++++++++++++++++++++++++++++
 js/skin.js         |  5 -----
 3 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/css/main.css b/css/main.css
index a8cf8981..6c31a50f 100755
--- a/css/main.css
+++ b/css/main.css
@@ -414,45 +414,32 @@
 .actions #previous {
     top: 88px;
     left: 16px;
-    background-position: 0 0;
 }
-.actions #previous:active { background-position: 0 -18px; }
 .actions #play {
     top: 88px;
     left: 39px;
-    background-position: -23px 0;
 }
-.actions #play:active { background-position: -23px -18px; }
 .actions #pause {
     top: 88px;
     left: 62px;
-    background-position: -46px 0;
 }
-.actions #pause:active { background-position: -46px -18px; }
 .actions #stop {
     top: 88px;
     left: 85px;
-    background-position: -69px 0;
 }
-.actions #stop:active { background-position: -69px -18px; }
 .actions #next {
     top: 88px;
     left: 108px;
-    background-position: -92px 0;
     width: 22px;
 }
-.actions #next:active { background-position: -92px -18px; }
 
 #eject {
     position: absolute;
     top: 89px;
     left: 136px;
-    /* background-image: CBUTTONS.BMP via Javascript */
     height: 16px;
     width: 22px;
 }
-#eject { background-position: -114px 0; }
-#eject:active { background-position: -114px -16px; }
 
 .shuffle-repeat {
     position: absolute;
@@ -464,38 +451,16 @@
 .shuffle-repeat div {
     position: absolute;
     height: 15px;
-    /* background-image: SHUFREP.BMP via Javascript */
 }
 
 .shuffle-repeat #shuffle {
     width: 47px;
-    background-position: -28px 0;
-}
-.shuffle-repeat #shuffle:active {
-    background-position: -28px -15px;
-}
-
-.shuffle-repeat #shuffle.selected {
-    background-position: -28px -30px;
-}
-.shuffle-repeat #shuffle.selected:active {
-    background-position: -28px -45px;
 }
 
 .shuffle-repeat #repeat {
     left: 46px;
     width: 28px;
 }
-.shuffle-repeat #repeat:active {
-    background-position: 0 -15px;
-}
-
-.shuffle-repeat #repeat.selected {
-    background-position: 0 -30px;
-}
-.shuffle-repeat #repeat.selected:active {
-    background-position: 0 -45px;
-}
 
 #about {
     position: absolute;
diff --git a/js/skin-sprites.js b/js/skin-sprites.js
index 7b859bb9..3e9b82bc 100644
--- a/js/skin-sprites.js
+++ b/js/skin-sprites.js
@@ -7,6 +7,23 @@ var SKIN_SPRITES = [
             { selectors: ["#balance::-webkit-slider-thumb:active", "#balance::-moz-range-thumb:active"], x: 0, y: 422, width: 14, height: 11},
         ]
     },
+    {
+        img: "CBUTTONS",
+        sprites: [
+            { selectors: [".actions #previous"], x: 0, y: 0, width: 23, height: 18},
+            { selectors: [".actions #previous:active"], x: 0, y: 18, width: 23, height: 18},
+            { selectors: [".actions #play"], x: 23, y: 0, width: 23, height: 18},
+            { selectors: [".actions #play:active"], x: 23, y: 18, width: 23, height: 18},
+            { selectors: [".actions #pause"], x: 46, y: 0, width: 23, height: 18},
+            { selectors: [".actions #pause:active"], x: 46, y: 18, width: 23, height: 18},
+            { selectors: [".actions #stop"], x: 69, y: 0, width: 23, height: 18},
+            { selectors: [".actions #stop:active"], x: 69, y: 18, width: 23, height: 18},
+            { selectors: [".actions #next"], x: 92, y: 0, width: 23, height: 18},
+            { selectors: [".actions #next:active"], x: 92, y: 18, width: 22, height: 18},
+            { selectors: ["#eject"], x: 114, y: 0, width: 22, height: 16},
+            { selectors: ["#eject:active"], x: 114, y: 16, width: 22, height: 16},
+        ]
+    },
     {
         img: "MAIN",
         sprites: [
@@ -77,6 +94,25 @@ var SKIN_SPRITES = [
             { selectors: ["#playlist.shade"], x: 72, y: 57, width: 25, height: 14}
         ]
     }, */
+    {
+        img: "SHUFREP",
+        sprites: [
+            { selectors: ["#shuffle"], x: 28, y: 0, width: 47, height: 15},
+            { selectors: ["#shuffle:active"], x: 28, y: 15, width: 47, height: 15},
+            { selectors: ["#shuffle.selected"], x: 28, y: 30, width: 47, height: 15},
+            { selectors: ["#shuffle.selected:active"], x: 28, y: 45, width: 47, height: 15},
+            { selectors: ["#repeat"], x: 0, y: 0, width: 28, height: 15},
+            { selectors: ["#repeat:active"], x: 0, y: 15, width: 28, height: 15},
+            { selectors: ["#repeat.selected"], x: 0, y: 30, width: 28, height: 15},
+            { selectors: ["#repeat.selected:active"], x: 0, y: 45, width: 28, height: 15},
+        ]
+    },
+    {
+        img: "TEXT",
+        sprites: [
+            { selectors: [".character"], x: 0, y: 0, width: 155, height: 74},
+        ]
+    },
     {
         img: "TITLEBAR",
         sprites: [
diff --git a/js/skin.js b/js/skin.js
index 204dc1e8..7a310120 100644
--- a/js/skin.js
+++ b/js/skin.js
@@ -8,14 +8,9 @@ SkinManager = {
     },
 
     _skinImages: {
-        ".windows div": "SHUFREP.BMP",
         "#position": "POSBAR.BMP",
         "#position::-webkit-slider-thumb": "POSBAR.BMP",
         "#position::-moz-range-thumb": "POSBAR.BMP",
-        ".actions div": "CBUTTONS.BMP",
-        "#eject": "CBUTTONS.BMP",
-        ".shuffle-repeat div": "SHUFREP.BMP",
-        ".character": "TEXT.BMP",
         // Put this second, since it will trump .digit
         ".digit-ex": "NUMS_EX.BMP"
     },