From 6bde6d53d7d8f8e41c799ef20a4c6770f85821d7 Mon Sep 17 00:00:00 2001
From: Rolux <rolux@Rolux.local>
Date: Sun, 21 Feb 2010 12:39:32 +0530
Subject: [PATCH] make layer opaque on click

---
 build/css/ox.ui.classic.css |  4 ++--
 build/css/ox.ui.css         |  3 +++
 build/js/ox.ui.js           | 20 +++++++++++++++++---
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css
index fe4c215..5ee3942 100644
--- a/build/css/ox.ui.classic.css
+++ b/build/css/ox.ui.classic.css
@@ -34,8 +34,8 @@ Dialog
 */
 
 .OxThemeClassic .OxDialog {
-    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
-    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
+    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
+    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
 }
 
 .OxThemeClassic .OxDialog .OxBar {
diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css
index 583efd7..8dd8ec7 100644
--- a/build/css/ox.ui.css
+++ b/build/css/ox.ui.css
@@ -66,6 +66,7 @@ Dialog
     //right: 0;
     //bottom: 0;
     //margin: auto;
+    z-index: 11;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
@@ -396,6 +397,8 @@ Layers
     position: absolute;
     width: 100%;
     height: 100%;
+    background: rgb(0, 0, 0);
+    opacity: 0;
     overflow: hidden;
     z-index: 10;
 }
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index d59541b..08943f0 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -1299,8 +1299,10 @@ requires
                 .appendTo(that.$buttonsbar);
         });
         that.$buttons[0].focus();
-        that.$layer = new Ox.Element()
-            .addClass("OxLayer");
+        that.$layer = new Ox.Element() // fixme: Layer widget, that would handle click?
+            .addClass("OxLayer")
+            .mousedown(mousedownLayer)
+            .mouseup(mouseupLayer);
 
         function center() {
             that.css({
@@ -1348,6 +1350,18 @@ requires
             
         }
 
+        function mousedownLayer() {
+            that.$layer.stop().animate({
+                opacity: 0.5
+            }, 100);
+        }
+
+        function mouseupLayer() {
+            that.$layer.stop().animate({
+                opacity: 0
+            }, 100);
+        }
+
         function reset() {
             that.width(self.options.width);
             that.height(self.options.height);
@@ -1432,7 +1446,7 @@ requires
             reset();
             that.css({
                 opacity: 0
-            }).appendTo(that.$layer).animate({
+            }).appendTo($body).animate({
                 opacity: 1
             }, 200);
             return that;