add context menu binding code, fix misc. bugs

3 files changed, 98 insertions, 40 deletions

diff --git a/www/js/api.js b/www/js/api.js
index 316c9a6..4c5a48f 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -124,6 +124,7 @@ window.html5ks.api = {
 
 
   iscene: function (target, is_h, is_end) {
+    html5ks.state.status = "scene";
     var deferred = when.defer(),
         label = html5ks.data.script[html5ks.persistent.language + "_" + target],
         i = 0;
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index 4f38a42..4f54844 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -133,19 +133,16 @@ window.html5ks = {
   initEvents: function () {
     window.onresize = html5ks.scale;
     this.elements.container.addEventListener("mouseup", function (e) {
-      switch (e.button) {
-        case 0:
-          html5ks.next();
-          break;
-        case 1:
-          html5ks.menu.showImage();
-          break;
+      if (html5ks.state.status === "scene") {
+        switch (e.button) {
+          case 0:
+            html5ks.next();
+            break;
+          case 1:
+            html5ks.menu.showImage();
+            break;
+        }
       }
-      e.preventDefault();
-    }, false);
-    this.elements.container.addEventListener("contextmenu", function (e) {
-      html5ks.menu.context();
-      e.preventDefault();
     }, false);
     window.addEventListener("dragstart", function (e) {
       e.preventDefault();
diff --git a/www/js/menu.js b/www/js/menu.js
index c39f037..c8e9bd4 100644
--- a/www/js/menu.js
+++ b/www/js/menu.js
@@ -9,6 +9,7 @@
       html5ks.api.play("music", "music_menus");
       html5ks.api.show("url", "ui/main/bg-main.png");
       this.elements.mainMenu.style.display = "block";
+      html5ks.state.status = "menu";
     },
 
     activeDialog: null,
@@ -17,6 +18,8 @@
       this.activeDialog = this.elements.dialog[name];
       this.activeDialog.style.display = "block";
       this.elements.dialogs.style.display = "block";
+      this.elements.context.style.display = "none";
+      html5ks.elements.gray.style.display = "block";
     },
 
     initElements: function () {
@@ -28,12 +31,11 @@
         },
         mainMenu: document.getElementById("main-menu"),
         main: {
-          start: document.getElementById("start"),
-          optionsButton: document.getElementById("options-button"),
+          start: document.getElementById("start")
         },
         context: document.getElementById("context"),
         contextMenu: document.getElementById("context-menu"),
-        contextInfo: document.getElementById("context-info"),
+        contextInfo: document.getElementById("context-info")
       };
     },
 
@@ -72,8 +74,82 @@
       options[0].parentNode.parentNode.addEventListener("change", change, false);
       options[0].parentNode.parentNode.addEventListener("input", change, false);
 
-      this.elements.main.optionsButton.addEventListener("click", function () {
-        html5ks.menu.dialog("options");
+      var optionsButton = document.getElementsByClassName("options-button");
+
+      for (var i = optionsButton.length - 1; i >= 0; i--) {
+        optionsButton[i].addEventListener("click", function (e) {
+          html5ks.menu.dialog("options");
+          e.stopPropagation();
+        }, false);
+      }
+
+      html5ks.elements.container.addEventListener("contextmenu", function (e) {
+        switch (html5ks.state.status) {
+          case "scene":
+          case "context":
+            html5ks.state.skip = false;
+            html5ks.state.auto = false;
+            this.context();
+        }
+        e.preventDefault();
+      }.bind(this), false);
+
+      this.elements.dialog.return.addEventListener("click", function (e) {
+        html5ks.menu.activeDialog.style.display = "none";
+        html5ks.menu.activeDialog = null;
+        html5ks.menu.elements.dialogs.style.display = "none";
+        if (html5ks.state.status === "context") {
+          html5ks.menu.context(true);
+        } else {
+          html5ks.elements.gray.style.display = "none";
+        }
+        e.stopPropagation();
+      }, false);
+
+      ["AppleWebKit", "MSIE", "Trident"].forEach(function (ua) {
+        if (navigator.userAgent.indexOf(ua) > -1) {
+          var quit = document.getElementsByClassName("quit");
+          for (var i = quit.length - 1; i >= 0; i++) {
+            quit[i].className = quit.className.replace("disabled", "");
+            quit[i].addEventListener("click", function () {
+              window.close();
+              top.open('','_self','');
+              top.close();
+            }, false);
+          }
+          return false;
+        }
+      }, this);
+
+      document.getElementById("context-return").addEventListener("click", function () {
+        html5ks.menu.context(false);
+      }, false);
+
+      document.getElementById("show-image").addEventListener("click", function () {
+        html5ks.menu.context(false);
+        html5ks.elements.window.style.display = "none";
+        html5ks.elements.container.addEventListener("click", function click() {
+          this.removeEventListener("click", click, true);
+          html5ks.menu.context(true);
+        }, true);
+      }, false);
+
+      document.getElementById("skip-mode").addEventListener("click", function () {
+        html5ks.menu.context(false);
+        html5ks.state.skip = true;
+        html5ks.next();
+      }, false);
+
+      document.getElementById("auto-mode").addEventListener("click", function () {
+        html5ks.menu.context(false);
+        html5ks.state.auto = true;
+        html5ks.next();
+      }, false);
+
+      document.getElementById("goto-main-menu").addEventListener("click", function () {
+        html5ks.next = function () {};
+        html5ks.menu.context(false);
+        html5ks.menu.mainMenu();
       }, false);
     },
 
@@ -116,42 +192,26 @@
         start.className = start.className.replace("disabled", "");
         this._imachine_loaded = true;
       }.bind(this));
-
-      this.elements.dialog.return.addEventListener("click", function () {
-        html5ks.menu.activeDialog.style.display = "none";
-        html5ks.menu.elements.dialogs.style.display = "none";
-      }, false);
-
-      ["AppleWebKit", "MSIE", "Trident"].forEach(function (ua) {
-        if (navigator.userAgent.indexOf(ua) > -1) {
-          var quit = document.getElementsByClassName("quit");
-          for (var i = quit.length - 1; i >= 0; i++) {
-            quit[i].className = quit.className.replace("disabled", "");
-            quit[i].addEventListener("click", function () {
-              window.close();
-              top.open('','_self','');
-              top.close();
-            }, false);
-          }
-          return false;
-        }
-      }, this);
     },
 
-    context: function (show) {
+    context: function (show, transitional) {
       switch (show) {
         case true:
+          html5ks.state.status = "context";
           html5ks.elements.gray.style.display = "block";
           html5ks.elements.window.style.display = "none";
           this.elements.context.style.display = "block";
           break;
         case false:
+          html5ks.state.status = "scene";
           html5ks.elements.gray.style.display = "none";
-          html5ks.elements.window.style.display = "block";
+          if (html5ks.state.status === "scene") {
+            html5ks.elements.window.style.display = "block";
+          }
           this.elements.context.style.display = "none";
           break;
         default:
-          this.context(html5ks.elements.gray.style.display !== "block");
+          this.context(this.elements.context.style.display !== "block");
       }
     }
   };