From 5407f77a593360aa1d48ad5935c393a8f137efaf Mon Sep 17 00:00:00 2001
From: Alex Xu <alex_y_xu@yahoo.ca>
Date: Fri, 2 Aug 2013 21:46:32 -0400
Subject: add context menu binding code, fix misc. bugs

---
 www/css/index.css |  11 +++++-
 www/index.html    |  10 ++---
 www/js/api.js     |   1 +
 www/js/html5ks.js |  21 +++++-----
 www/js/menu.js    | 116 +++++++++++++++++++++++++++++++++++++++++-------------
 5 files changed, 112 insertions(+), 47 deletions(-)

diff --git a/www/css/index.css b/www/css/index.css
index c1ae018..3f6e64c 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -53,7 +53,7 @@ html.no-js #warn-container {
   position: absolute;
   top: 10%;
   width: 600px;
-  z-index: 10;
+  z-index: 100;
 }
 html.no-js          #warn li { display: none; }
 html.js             #warn noscript { display: none; }
@@ -95,7 +95,10 @@ html.no-js #gotit {
   height: 100%;
   background-color: rgb(0, 0, 0);
   opacity: 0.5;
-  z-index: 9;
+  z-index: 10;
+}
+#dialogs {
+  z-index: 50;
 }
 #show {
   height: 100%;
@@ -154,6 +157,10 @@ html.no-js #gotit {
 #nvlctc {
   bottom: 25px;
 }
+#centered {
+  text-align: center;
+  width: 100%;
+}
 .centered {
   position: absolute;
   margin: auto;
diff --git a/www/index.html b/www/index.html
index 8c4a615..92a2611 100644
--- a/www/index.html
+++ b/www/index.html
@@ -53,13 +53,13 @@
         <img id="nvlctc" src="dump/ui/ctc_rotated.png">
       </div>
       <div id="choices" class="centered"></div>
-      <div id="centered" class="centered say"></div>
+      <div id="centered" class="say"></div>
       <div id="main-menu" style="display: none;">
         <div id="main-menu-buttons" style="top: 377px; position: absolute; left: 81px;">
           <div id="start" class="button">Start</div>
           <div id="load" class="button disabled">Load</div>
           <div id="extras" class="button disabled">Extras</div>
-          <div id="options-button" class="button">Options</div>
+          <div class="options-button button">Options</div>
           <div class="quit button disabled">Quit</div>
         </div>
         <div id="version" style="">
@@ -97,10 +97,10 @@
           <div id="text-history" class="button disabled">Text history</div>
           <div id="skip-mode" class="button">Skip mode</div>
           <div id="auto-mode" class="button">Auto mode</div>
-          <div id="options" class="button">Options</div>
+          <div class="options-button button">Options</div>
           <div id="save" class="button">Save</div>
-          <div id="load" class="button">Load</div>
-          <div id="main-menu" class="button">Main menu</div>
+          <div class="load button">Load</div>
+          <div id="goto-main-menu" class="button">Main menu</div>
           <div class="quit button disabled">Quit</div>
         </div>
         <div id="context-info">
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");
       }
     }
   };
-- 
cgit v1.2.3-70-g09d2