From fb7152cb1043f9150db99e0058a90e663eb0cfc8 Mon Sep 17 00:00:00 2001
From: Matthew Kastor <matthewkastor@gmail.com>
Date: Sun, 31 Mar 2013 20:22:35 -0400
Subject: [PATCH] prettified generic menu

---
 lib/ace/ext/overlay_page.js | 71 +++++++++++++++----------------------
 1 file changed, 29 insertions(+), 42 deletions(-)

diff --git a/lib/ace/ext/overlay_page.js b/lib/ace/ext/overlay_page.js
index 25dcbbd7..3cd7efec 100644
--- a/lib/ace/ext/overlay_page.js
+++ b/lib/ace/ext/overlay_page.js
@@ -37,50 +37,37 @@ define(function(require, exports, module) {
  * @param {string|number} left absolute position value.
  */
 module.exports.overlayPage = function overlayPage (contentElement, top, right, bottom, left) {
-    var div = document.createElement('div');
+    top = (top) ? 'top: ' + top + ';' : '';
+    bottom = (bottom) ? 'bottom: ' + bottom + ';' : '';
+    right = (right) ? 'right: ' + right + ';' : '';
+    left = (left) ? 'left: ' + left + ';' : '';
+    
+    var closer = document.createElement('div');
     var contentContainer = document.createElement('div');
-    contentContainer.style.cssText = 'margin: 0px; padding: 0px; border: 0px;' +
-        'overflow: auto;';
-    contentElement.style.cssText = contentElement.style.cssText + 'overflow: auto;';
-    contentContainer.appendChild(contentElement);
-
-    var cl = document.createElement('img');
-    if (top) {
-        top = 'top: ' + top + ';';
-    } else {
-        top = '';
-    }
-    if (right) {
-        right = 'right: ' + right + ';';
-    } else {
-        right = '';
-    }
-    if (bottom) {
-        bottom = 'bottom: ' + bottom + ';';
-    } else {
-        bottom = '';
-    }
-    if (left) {
-        left = 'left: ' + left + ';';
-    } else {
-        left = '';
-    }
-
-    cl.src = '/BigRedX.png';
-    cl.style.cssText = 'margin: 5px 5px 0 0; padding: 0; ' +
-        'float: right; width: 25px; height: 25px; border: 1px solid black;';
-    div.style.cssText = 'margin:0; padding:0; position: absolute;' +
-        top + right + bottom + left +
-        'z-index:9999; background-color:white; color:black; overflow: auto;';
-
-    div.appendChild(cl);
-    div.appendChild(contentContainer);
-    document.body.appendChild(div);
-
-    cl.addEventListener('click', function () {
-        div.parentNode.removeChild(div);
-        div = null;
+    
+    closer.style.cssText = 'margin: 0; padding: 0; ' +
+        'position: absolute; top:0; bottom:0; left:0; right:0;' +
+        'z-index: 9990; ' +
+        'background-color: rgba(0, 0, 0, 0.1);';
+    closer.addEventListener('click', function () {
+        closer.parentNode.removeChild(closer);
+        closer = null;
     });
+    
+    contentContainer.style.cssText = 'margin: 0; padding: 0; ' +
+        'position: absolute;' +
+        top + right + bottom + left +
+        'z-index: 9991; ' +
+        'box-shadow: rgba(126, 126, 126, 0.25) -20px 10px 25px; ' +
+        'background-color: rgba(255, 255, 255, 0.6);' +
+        'color: black; overflow: auto;';
+    contentContainer.addEventListener('click', function (e) {
+        e.stopPropagation();
+    });
+    
+    contentContainer.appendChild(contentElement);
+    closer.appendChild(contentContainer);
+    document.body.appendChild(closer);
 };
 
 });
\ No newline at end of file