3 files changed, 38 insertions, 39 deletions

diff --git a/www/css/index.css b/www/css/index.css
index c0d1191..66f0b32 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -33,8 +33,7 @@ body {
   width: 100%;
 }
 h2 {
-  font-size: 20px
-  line-height: 24px; /* yes, h2 has *smaller* font */
+  line-height: 24px;
   font-weight: bold;
 }
 
@@ -189,19 +188,17 @@ html.no-js #gotit {
   -webkit-animation: blink 2s infinite linear;
   animation: blink 2s infinite linear;
 }
-.apng .ctc {
-  background-image: url("../dump/ui/ctc_anim.png");
+.apng .ctc, .webpanimation .ctc {
   -o-animation: none;
   -moz-animation: none;
   -webkit-animation: none;
   animation: none;
 }
+.apng .ctc {
+  background-image: url("../dump/ui/ctc_anim.png");
+}
 .webpanimation .ctc {
   background-image: url("../dump/ui/ctc_anim.webp");
-  -o-animation: none;
-  -moz-animation: none;
-  -webkit-animation: none;
-  animation: none;
 }
 #nvlctc {
   bottom: 25px;
diff --git a/www/js/api.js b/www/js/api.js
index 6ab0963..1c28f74 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -83,8 +83,10 @@ window.html5ks.api = new (function () {
 
     switch (channel) {
       case "music":
-        src += "bgm/" + html5ks.data.music[name];
+        var fname = html5ks.data.music[name];
+        src += "bgm/" + fname;
         volume = html5ks.persistent.musicVolume;
+        document.getElementById("current-music-track").innerHTML = fname.replace(/_/g, " ");
         break;
       case "ambient":
       case "sound":
@@ -221,14 +223,14 @@ window.html5ks.api = new (function () {
     switch (action) {
       case true:
       case "show":
+        html5ks.state.window = true;
         windw.style.display = "block";
         break;
       case false:
       case "hide":
+        html5ks.state.window = false;
         windw.style.display = "none";
         break;
-      default:
-        return windw.style.display !== "none";
     }
     return when.resolve();
   },
@@ -507,14 +509,14 @@ window.html5ks.api = new (function () {
   nvl: function (action, transition) {
     var nvl = html5ks.elements.nvl;
     switch (action) {
-    case "status":
-      return nvl.style.display === "block";
     case true:
     case "show":
+      html5ks.state.nvl = true;
       nvl.style.display = "block";
       break;
     case false:
     case "hide":
+      html5ks.state.nvl = false;
       nvl.style.display = "none";
       break;
     case "clear":
diff --git a/www/js/menu.js b/www/js/menu.js
index 00d40b7..ee05fdd 100644
--- a/www/js/menu.js
+++ b/www/js/menu.js
@@ -106,37 +106,37 @@
         e.preventDefault();
       }.bind(this), true);
 
-      document.getElementById("context-return").addEventListener("click", function () {
-        html5ks.menu.context(false);
-      }, false);
+      var contextButtonFactory = function (id, fn, nooff) {
+        document.getElementById(id).addEventListener("click", function (e) {
+          if (!nooff) html5ks.menu.context(false);
+          if (fn) fn(e);
+        }, false);
+      };
+
+      contextButtonFactory("context-return");
 
-      document.getElementById("show-image").addEventListener("click", function () {
-        var state = html5ks.menu._state;
-        html5ks.menu._state = {};
-        html5ks.menu.context(false);
+      contextButtonFactory("show-image", function () {
+        html5ks.menu.context("showImage");
         var done = function () {
           this.removeEventListener("click", done, true);
-          html5ks.menu._state = state;
           html5ks.menu.context(true);
         };
         html5ks.elements.container.addEventListener("click", done, true);
-      }, false);
+      }, true);
 
-      document.getElementById("skip-mode").addEventListener("click", function () {
-        html5ks.menu.context(false);
+      contextButtonFactory("skip-mode", function () {
         html5ks.api.speed("skip", true);
         html5ks.next();
-      }, false);
+      });
 
-      document.getElementById("auto-mode").addEventListener("click", function () {
-        html5ks.menu.context(false);
+      contextButtonFactory("auto-mode", function () {
         html5ks.api.speed("auto", true);
         html5ks.next();
-      }, false);
+      });
 
-      document.getElementById("goto-main-menu").addEventListener("click", function () {
+      contextButtonFactory("goto-main-menu", function () {
         html5ks.menu.mainMenu();
-      }, false);
+      });
     },
 
     initOptions: function () {
@@ -188,8 +188,8 @@
           // return early if context already on
           if (this.context("status")) return;
           this._state = this._state || {
-            window: html5ks.api.window(),
-            nvl: html5ks.api.nvl("status"),
+            window: html5ks.state.window,
+            nvl: html5ks.state.nvl,
             status: html5ks.state.status
           };
           html5ks.api.window("hide");
@@ -198,15 +198,15 @@
           html5ks.elements.gray.style.display = "block";
           this.elements.context.style.display = "block";
           break;
-        case false:
+        case "showImage":
           this.elements.context.style.display = "none";
           html5ks.elements.gray.style.display = "none";
-          if (this._state) {
-            html5ks.api.window(this._state.window);
-            html5ks.api.nvl(this._state.nvl);
-            html5ks.state.status = this._state.status;
-            this._state = null;
-          }
+          /* falls through */
+        case false:
+          if (!this._state) return;
+          html5ks.api.window(this._state.window);
+          html5ks.api.nvl(this._state.nvl);
+          html5ks.state.status = this._state.status;
           break;
         case "status":
           return this.elements.context.style.display === "block";