bleh more

4 files changed, 110 insertions, 27 deletions

diff --git a/www/css/index.css b/www/css/index.css
index b94f40d..c2c3f9c 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -101,23 +101,69 @@ html.no-js #gotit {
 
 /* dialogs */
 #dialogs {
-  background: url("../dump/ui/bg-config.png");
   z-index: 50;
   width: 504px;
   height: 395px;
   margin-left: -252px;
   margin-top: -197.5px;
 }
+.no-webp #dialogs {
+  background: url("../dump/ui/bg-config.png");
+}
 .webp #dialogs {
   background: url("../dump/ui/bg-config.webp");
 }
-#options {
+#dialogs > div {
+  display: none;
   padding: 10px 20px;
 }
+.config_sfxtest_label {
+  padding-left: 24px;
+  background-repeat: no-repeat;
+}
+.no-webp .config_sfxtest_label {
+  background-image: url("../dump/ui/bt-musicplay.png");
+}
+.webp .config_sfxtest_label {
+  background-image: url("../dump/ui/bt-musicplay.webp");
+}
+.config_language_sel {
+  padding-left: 24px;
+  background-repeat: no-repeat;
+}
+.no-webp .config_language_sel {
+  background-image: url("../dump/ui/bt-language.png");
+}
+.webp .config_language_sel {
+  background-image: url("../dump/ui/bt-language.webp");
+}
+.saves {
+  overflow-y: scroll;
+  height: 260px;
+  width: 450px;
+}
+.new_save_button {
+  padding-left: 30px;
+  background-repeat: no-repeat;
+}
+.no-webp .new_save_button {
+  background-image: url("../dump/ui/bt-star.png");
+}
+.webp .new_save_button {
+  background-image: url("../dump/ui/bt-star.webp");
+}
 #return {
   position: absolute;
   bottom: 15px;
   right: 20px;
+  padding-left: 30px;
+  background-repeat: no-repeat;
+}
+.no-webp #return {
+  background-image: url("../dump/ui/bt-return.png");
+}
+.webp #return {
+  background-image: url("../dump/ui/bt-return.webp");
 }
 
 /* content */
@@ -128,13 +174,15 @@ html.no-js #gotit {
   position: absolute;
 }
 #window {
-  background: url("../dump/ui/bg-say.png");
   width: 800px;
   height: 160px;
   position: absolute;
   top: 440px;
   left: 0;
 }
+.no-webp #window {
+  background: url("../dump/ui/bg-say.png");
+}
 .webp #window {
   background: url("../dump/ui/bg-say.webp");
 }
@@ -156,15 +204,18 @@ html.no-js #gotit {
   left: 28px;
 }
 #nvl {
-  background: url("../dump/ui/bg-nvl.png") no-repeat top left;
+  background: white no-repeat top left;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }
+.no-webp #nvl {
+  background-image: url("../dump/ui/bg-nvl.png");
+}
 .webp #nvl {
-  background: url("../dump/ui/bg-nvl.webp") no-repeat top left;
+  background-image: url("../dump/ui/bg-nvl.webp");
 }
 #nvlsay {
   padding: 15px 35px;
@@ -179,12 +230,14 @@ html.no-js #gotit {
   right: 10px;
   width: 16px;
   height: 16px;
-  background-image: url("../dump/ui/ctc.png");
   -o-animation: blink 2s infinite linear;
   -moz-animation: blink 2s infinite linear;
   -webkit-animation: blink 2s infinite linear;
   animation: blink 2s infinite linear;
 }
+.no-webp .ctc {
+  background-image: url("../dump/ui/ctc.png");
+}
 .webp .ctc {
   background-image: url("../dump/ui/ctc.webp");
 }
@@ -224,14 +277,29 @@ html.no-js #gotit {
   right: 10px;
   display: none;
 }
+.no-webp #auto {
+  background: url("dump/ui/sd-auto.png");
+}
+.webp #auto {
+  background: url("dump/ui/sd-auto.webp");
+}
+.no-webp #skip {
+  background: url("dump/ui/sd-skip.png");
+}
+.webp #skip {
+  background: url("dump/ui/sd-skip.webp");
+}
 #choices {
   left: 0;
 }
 .webp .choice {
-  background: url("../dump/ui/bg-choice.webp") no-repeat top center;
+  background-image: url("../dump/ui/bg-choice.webp");
+}
+.no-webp .choice {
+  background-image: url("../dump/ui/bg-choice.png");
 }
 .choice {
-  background: url("../dump/ui/bg-choice.png") no-repeat top center;
+  background: white no-repeat top center;
   text-align: center;
   height: 35px;
   line-height: 30px;
@@ -241,10 +309,13 @@ html.no-js #gotit {
   text-align: center;
 }
 .webp #context-menu {
-  background: url("../dump/ui/bg-gm.webp") no-repeat top center;
+  background-image: url("../dump/ui/bg-gm.webp");
+}
+.no-webp #context-menu {
+  background-image: url("../dump/ui/bg-gm.png");
 }
 #context-menu {
-  background: url("../dump/ui/bg-gm.png") no-repeat top center;
+  background: white no-repeat top center;
   margin-top: -210px;
   padding-top: 60px;
   position: absolute;
@@ -266,6 +337,11 @@ html.no-js #gotit {
 }
 
 /* main menu */
+#main-menu-buttons {
+  top: 377px;
+  position: absolute;
+  left: 81px;
+}
 #main-menu-buttons .button {
   margin: 4px;
 }
@@ -297,16 +373,17 @@ input[type="checkbox"] {
 .webp input[type="checkbox"] + span:before {
   background-image: url("../dump/ui/bt-cf-unchecked.webp");
 }
-input[type="checkbox"] + span:before {
+.no-webp input[type="checkbox"] + span:before {
   background-image: url("../dump/ui/bt-cf-unchecked.png");
+}
+input[type="checkbox"] + span:before {
   display: inline-block;
   height: 19px;
   width: 20px;
   content: "";
-  background-position: left bottom;
-  background-repeat: no-repeat;
+  background: white left bottom no-repeat;
 }
-input[type="checkbox"]:checked + span:before {
+.no-webp input[type="checkbox"]:checked + span:before {
   background-image: url("../dump/ui/bt-cf-checked.png");
 }
 .webp input[type="checkbox"]:checked + span:before {
diff --git a/www/index.html b/www/index.html
index 357cab6..600b52f 100644
--- a/www/index.html
+++ b/www/index.html
@@ -48,11 +48,11 @@
         </div>
         <div id="choices" class="centered"></div>
         <div id="centered" class="centered say"></div>
-        <img class="status" id="auto" src="dump/ui/sd-auto.png" alt="Auto">
-        <img class="status" id="skip" src="dump/ui/sd-skip.png" alt="Skip">
+        <span class="status" id="auto" alt="Auto">
+        <span class="status" id="skip" alt="Skip">
       </div>
       <div id="main-menu" style="display: none;">
-        <div id="main-menu-buttons" style="top: 377px; position: absolute; left: 81px;">
+        <div id="main-menu-buttons">
           <div id="start" class="button main_menu_start disabled"></div>
           <div id="load" class="button main_menu_load disabled"></div>
           <div id="extras" class="button main_menu_extra disabled"></div>
@@ -66,7 +66,7 @@
         </div>
       </div>
       <div id="dialogs" class="centered" style="display: none;">
-        <div id="options" style="padding: 10px 20px;">
+        <div id="options">
           <h2 class="config_page_caption"></h2>
           <label class="button"><input type="checkbox" class="option" id="hdisable"> <span class="hdisabled_label"></span></label>
           <label class="button"><input type="checkbox" class="option" id="skipUnread"> <span class="config_skip_unseen_label"></span></label>
@@ -76,14 +76,20 @@
           <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="autoModeDelay"> <span class="config_afmspeed_label"></span></label>
 
           <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="musicVolume"> <span class="config_musicvol_label"></span></label>
-          <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="sfxVolume"> <span class="config_sfxvol_label"></span> <span id="test-sound" class="button config_sfxtest_label"><img src="dump/ui/bt-musicplay.png" alt="Play"></span></label>
+          <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="sfxVolume"> <span class="config_sfxvol_label"></span> <span id="test-sound" class="button config_sfxtest_label"></span></label>
 
-          <label class="button disabled" id="language"><img src="dump/ui/bt-language.png"> <span class="config_language_sel"></span></label>
+          <label class="button disabled config_language_sel"></label>
         </div>
-        <label id="return" class="button" style="position: absolute; bottom: 15px; right: 20px;">
-          <img src="dump/ui/bt-return.png">
-          <span class="return_button_text"></span>
-        </label>
+        <div id="load_dlg">
+          <h2 class="load_page_caption"></h2>
+          <div class="saves"></div>
+        </div>
+        <div id="save_dlg">
+          <h2 class="save_page_caption"></h2>
+          <div class="saves"></div>
+          <div class="button new_save_button"></div>
+        </div>
+        <label id="return" class="button return_button_text"></label>
       </div>
       <div id="context" style="display: none;">
         <div id="context-menu" class="centered">
diff --git a/www/js/api.js b/www/js/api.js
index 12e8ecc..46e8f54 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -37,7 +37,6 @@ window.html5ks.api = {
   _loadMedia: function (el, src, types) {
     var i = 0;
     var _nextType = function () {
-      i++;
       for (; i < types.length; i++) {
         var type = types[i];
         if (el.canPlayType(type[0])) {
@@ -46,7 +45,6 @@ window.html5ks.api = {
           return true;
         }
       }
-      return false;
     };
 
     html5ks.spin(1);
@@ -58,7 +56,7 @@ window.html5ks.api = {
 
     el.onerror = function (e) {
       if (e.code === e.MEDIA_ERR_SRC_NOT_SUPPORTED) {
-        if (_nextType()) {
+        if (_nextType(++i)) {
           console.warn("browser claimed support for " + types[i-1] + " but failed");
         } else {
           console.error("no media formats supported");
diff --git a/www/js/menu.js b/www/js/menu.js
index 89eceef..eb87111 100644
--- a/www/js/menu.js
+++ b/www/js/menu.js
@@ -26,6 +26,8 @@ html5ks.menu = {
       dialogs: document.getElementById("dialogs"),
       dialog: {
         options: document.getElementById("options"),
+        load: document.getElementById("load_dlg"),
+        save: document.getElementById("save_dlg"),
         retn: document.getElementById("return")
       },
       mainMenu: document.getElementById("main-menu"),