add unified Ox.Layer object for dialogs and menus

source/Ox.UI/js/Window/Ox.Dialog.js

@@ -61,12 +61,7 @@ Ox.Dialog = function(options, self) {
         + (self.options.maximizeButton ? 20 : 0);
 
     if (self.options.focus) {
-        self.$layer = Ox.Element() // fixme: Layer widget that would handle click?
-            .addClass('OxLayer')
-            .mousedown(mousedownLayer)
-            .mouseup(mouseupLayer)
-            .hide()
-            .appendTo(Ox.UI.$body);
+        self.$layer = Ox.Layer({type: 'dialog'});
     }
 
     self.$box = $('<div>')
@@ -303,18 +298,6 @@ Ox.Dialog = function(options, self) {
         });
     }
 
-    function mousedownLayer() {
-        self.$layer.stop().animate({
-            opacity: 0.5
-        }, 0);
-    }
-
-    function mouseupLayer() {
-        self.$layer.stop().animate({
-            opacity: 0
-        }, 0);
-    }
-
     function reset(animate) {
         var offset, left, top;
         if (!self.centered) {
@@ -665,8 +648,8 @@ Ox.Dialog = function(options, self) {
     that.close = function(callback) {
         that.animate({
             opacity: 0
-        }, 100, function() {
-            //that.removeElement();
+        }, 250, function() {
+            // that.removeElement();
             that.hide();
             callback && callback();
         });
@@ -677,7 +660,6 @@ Ox.Dialog = function(options, self) {
         if (self.options.focus) {
             self.$layer.hide();
             that.loseFocus();
-            Ox.UI.$window.unbind({mouseup: mouseupLayer});                
         }
         that.triggerEvent('close');
         return that;
@@ -715,11 +697,10 @@ Ox.Dialog = function(options, self) {
             opacity: 0
         }).show().animate({
             opacity: 1
-        }, 100);
+        }, 250);
         if (self.options.focus) {
             self.$layer.show();
             that.gainFocus();
-            Ox.UI.$window.bind({mouseup: mouseupLayer});
         }
         Ox.UI.$window.bind({
             resize: function() {

source/Ox.UI/js/Window/Ox.Layer.js

@@ -0,0 +1,55 @@
+// vim: et:ts=4:sw=4:sts=4:ft=javascript
+
+/*@
+Ox.Layer <o> Background layer for dialogs and menus
+    (options, self) -> <o> Layer
+    options <o> Options
+        type <s|'dialog'> Layer type ('dialog' or 'menu')
+    self <o> Shared private variable
+@*/
+
+Ox.Layer = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            type: 'dialog'
+        })
+        .options(options || {})
+        .addClass('OxLayer Ox' + Ox.toTitleCase(self.options.type) + 'Layer')
+        .bind(self.options.type == 'dialog' ? {
+            mousedown: mousedown,
+        } : {
+            click: click
+        });
+
+    function click() {
+        Ox.print('CLICK!!!!!!!')
+        that.triggerEvent('click').removeElement();
+    }
+
+    function mousedown() {
+        that.stop().animate({opacity: 0.5}, 0);
+    }
+
+    function mouseup() {
+        that.stop().animate({opacity: 0}, 250);
+    }
+
+    that.hide = function() {
+        if (self.options.type == 'dialog') {
+            Ox.UI.$window.unbind({mouseup: mouseup});
+        }
+        that.removeElement();
+    };
+
+    that.show = function() {
+        if (self.options.type == 'dialog') {
+            Ox.UI.$window.bind({mouseup: mouseup});
+        }
+        that.appendTo(Ox.UI.$body);
+    }
+
+    return that;
+
+}