Add a close button in the new layout dialog

index.html

@@ -37,24 +37,29 @@
   <div id="layoutcontainer" class="initiallyhidden">
    <div id="layoutmask" class="mask"></div>
    <div id="layoutpicker" class="dialog">
-    <h2>Select a level</h2>
+    <button id="layoutclose" class="close">Cancel</button>
+    <div class="container">
+     <h2>Select a level</h2>
+    </div>
    </div>
   </div>
   <div id="savecontainer" class="initiallyhidden">
    <div id="savemask" class="mask"></div>
    <div id="savedialog" class="dialog">
-    <div id="save_inprogress">
-     <h2 style="margin-bottom: 50px;">Saving...</h2>
-     <p style="margin-bottom: 50px;"><img src="res/images/loading.gif" alt="Loading indicator"></p>
-     <p id="save_error" class="initiallyhidden error"></p>
-    </div>
-    <div id="save_done" class="initiallyhidden">
-     <h2>Saved</h2>
-     <p>
-      Your layout has been saved.
-      Share this link:
-     </p>
-     <p id="link"></p>
+    <div class="container">
+     <div id="save_inprogress">
+      <h2 style="margin-bottom: 50px;">Saving...</h2>
+      <p style="margin-bottom: 50px;"><img src="res/images/loading.gif" alt="Loading indicator"></p>
+      <p id="save_error" class="initiallyhidden error"></p>
+     </div>
+     <div id="save_done" class="initiallyhidden">
+      <h2>Saved</h2>
+      <p>
+       Your layout has been saved.
+       Share this link:
+      </p>
+      <p id="link"></p>
+     </div>
     </div>
    </div>
   </div>

res/js/viewer.js

@@ -150,7 +150,7 @@ $(function() {
     updateLayout({level: key + 1, towers:[]});
     closePicker();
    })
-   .appendTo($('#layoutpicker'));
+   .appendTo($('#layoutpicker .container'));
  });
 
  function showPicker() {
@@ -188,6 +188,7 @@ $(function() {
 
  $('#createlayout').click(showPicker);
  $('#layoutmask').click(closePicker);
+ $('#layoutclose').click(closePicker);
  $('#savelayout').click(saveLayout);
 
  function updateLayout(data) {

res/style.css

@@ -129,6 +129,10 @@ body .tower.ui-draggable-dragging { z-index: 101; }
  z-index: 201;
  overflow: auto;
  text-align: center;
+ padding: 0;
+}
+
+.dialog .container {
  padding: 50px;
 }
 
@@ -147,7 +151,7 @@ body .tower.ui-draggable-dragging { z-index: 101; }
  margin-left: -250px;
 }
 
-#layoutpicker button {
+#layoutpicker .container button {
  margin: 30px;
 }
 
@@ -169,3 +173,16 @@ body .tower.ui-draggable-dragging { z-index: 101; }
  color: red;
  font-weight: bold;
 }
+
+.dialog .close {
+ float: right;
+ margin: 0;
+ background: white url('images/close.png') no-repeat left center;
+ padding: 10px 10px 10px 25px;
+ border: 0;
+ cursor: pointer;
+}
+
+.dialog .close:hover {
+ text-decoration: underline;
+}