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() {