Add main menu

public_html/css/run.css

@@ -83,4 +83,21 @@ body {
     background-color: rgba(200, 200, 200, 0.5);
     cursor: pointer;
     color: #fff;
+}
+
+#mainMenuButton {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    width: 48px;
+    height: 48px;
+    background: url(../images/menu.png) no-repeat center center;
+    opacity: 0.25;
+    -moz-opacity: 0.25;
+    -khtml-opacity: 0.25;
+}
+#mainMenuButton:hover {
+    opacity: 1;
+    -moz-opacity: 1;
+    -khtml-opacity: 1;
 }

public_html/index.html

@@ -26,6 +26,7 @@
                 <div id="textAuthor"></div>
                 <div id="textContent"></div>
             </div>
+            <div id="mainMenuButton"></div>
             <div id="menu">
                 <p id="menuTitle">Title</p>
                 <ul id="menuChoose">

public_html/js/Main.js

@@ -6,11 +6,8 @@ function run(data) {
     var tokens = new Lexer(data).process().getTokens();
     var parser = new Parser(tokens);
     ViewActivity = new Views(parser);
+    ViewActivity.init();
     parser.next();
-
-    document.addEventListener('click', function (e) {
-        ViewActivity.getInstance().onTouch(e);
-    });
 }
 
 $(document).ready(function() {

public_html/js/Views.js

@@ -32,10 +32,18 @@ function Views(parser) {
         Views.blockTap = false;
         if (!Views.cancelNextStep) parser.next();
     };
-    
-    $('#menu').hide();
 }
 
+Views.prototype.init = function () {
+    $('#menu').hide();
+    $('#mainMenuButton').click(function () {
+        ViewActivity.getInstance().showMainMenu();
+    });
+    document.addEventListener('click', function (e) {
+        ViewActivity.getInstance().onTouch(e);
+    });
+};
+
 Views.prototype.NO_FADE = new FadeInfo();
 
 Views.prototype.getInstance = function () {
@@ -45,6 +53,8 @@ Views.prototype.getInstance = function () {
 Views.prototype.onTouch = function (e) {
     if (this.blockTap) return;
     if ($('#menu').is(":visible")) return;
+    if ($(e.target).is('li')) return;
+    if ($(e.target).is('#mainMenuButton')) return;
     
     this.cancelNextStep = true;
     this.parser.next();
@@ -358,7 +368,20 @@ Views.prototype.createMenuItemClickFunction = function (index, menu) {
     };
 };
 
-Views.prototype.showGameMenuDialog = function (menu) {
+Views.prototype.showMainMenu = function () {
+    $('#menuTitle').text('Меню');
+    
+    var views = this;
+    $('#menuChoose').empty();
+    this.addMainMenuItem("Закрыть", function() {
+        $('#menu').hide();
+    });
+    $('#menu').show();
+};
+Views.prototype.addMainMenuItem = function(name, func) {
+    var li = $('<li>', {text: name});
+    li.click(func);
+    li.appendTo($('#menuChoose'));
 };
 
 Views.prototype.addMusicToQueue = function (name) {