improvements for list item preview

build/js/ox.ui.js

@@ -1582,7 +1582,9 @@ requires
                     height: 216,
                     minHeight: 144,
                     minWidth: 256,
+                    movable: true,
                     padding: 16,
+                    resizable: true,
                     width: 384
                 })
                 .options(options || {})
@@ -1593,6 +1595,11 @@ requires
                     }
                 });
 
+        $.extend(self, {
+            initialWidth: self.options.width,
+            initialHeight: self.options.height
+        })
+
         if (!Ox.isArray(self.options.buttons[0])) {
             self.options.buttons = [[], self.options.buttons];
         }
@@ -1601,9 +1608,10 @@ requires
                 size: 'medium'
             })
             .addClass('OxTitleBar')
-            .mousedown(drag)
-            .dblclick(center)
             .appendTo(that);
+        self.options.movable && that.$titlebar
+            .mousedown(drag)
+            .dblclick(center);
 
         that.$title = new Ox.Element()
             .addClass('OxTitle')
@@ -1635,11 +1643,13 @@ requires
                 .appendTo(that.$buttonsbar);
         });
 
+        if (self.options.resizable) {
             that.$resize = new Ox.Element()
                 .addClass('OxResize')
                 .mousedown(resize)
                 .dblclick(reset)
                 .appendTo(that.$buttonsbar);
+        }
 
         $.each(self.options.buttons[1].reverse(), function(i, button) {
             that.$buttons[that.$buttons.length] = new Ox.Button({
@@ -1726,12 +1736,17 @@ requires
         }
 
         function reset() {
+            $.extend(self.options, {
+                height: self.initialHeight,
+                width: self.initialWidth
+            });
             that/*.css({
                     left: Math.max(that.offset().left, 24 - that.width())
                 })*/
                 .width(self.options.width)
                 .height(self.options.height);
             that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
+            triggerResizeEvent();
         }
 
         function resize(event) {
@@ -1748,37 +1763,45 @@ requires
                     top: offset.top,
                     margin: 0
                 });
-                var width = Ox.limit(
+                self.options.width = Ox.limit(
                     elementWidth - x + event.clientX,
                     self.options.minWidth, Math.min(documentWidth, documentWidth - offset.left)
-                    ),
+                );
-                    height = Ox.limit(
+                self.options.height = Ox.limit(
                     elementHeight - y + event.clientY,
                     self.options.minHeight, documentHeight - offset.top
                 );
-                that.width(width);
+                that.width(self.options.width);
-                that.height(height);
+                that.height(self.options.height);
-                that.$content.height(height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
+                that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
+                triggerResizeEvent();
             });
             $window.one('mouseup', function() {
                 $window.unbind('mousemove');
             });
         }
 
+        function triggerResizeEvent() {
+            that.triggerEvent('resize', {
+                width: self.options.width,
+                height: self.options.height
+            });
+        }
+
         self.onChange = function(key, value) {
             if (key == 'height' || key == 'width') {
                 that.animate({
                     height: self.options.height + 'px',
                     width: self.options.width + 'px'
-                }, 250);
+                }, 100);
                 that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
             } else if (key == 'title') {
                 that.$title.animate({
                     opacity: 0
-                }, 250, function() {
+                }, 100, function() {
                     that.$title.html(value).animate({
                         opacity: 1
-                    }, 250);
+                    }, 100);
                 });
             }
         }
@@ -1786,7 +1809,11 @@ requires
         that.append = function($element) {
             that.$content.append($element);
             return that;
-        }
+        };
+
+        that.center = function() {
+            
+        };
 
         that.close = function(callback) {
             callback = callback || function() {};
@@ -1799,7 +1826,7 @@ requires
             });
             $window.unbind('mouseup', mouseupLayer)
             return that;
-        }
+        };
 
         that.disable = function() {
             // to be used on submit of form, like login
@@ -1841,6 +1868,25 @@ requires
             return that;
         };
 
+        that.resize = function(width, height, callback) {
+            $.extend(self, {
+                initialWidth: width,
+                initialHeight: height
+            });
+            $.extend(self.options, {
+                width: width,
+                height: height
+            });
+            // fixme: duplicated
+            that.animate({
+                height: self.options.height + 'px',
+                width: self.options.width + 'px'
+            }, 100, function() {
+                that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
+                callback();
+            });
+        }
+
         return that;
 
     }
@@ -5686,6 +5732,10 @@ requires
             }
         }
 
+        that.closePreview = function() {
+            that.$element.closePreview();
+        };
+
         that.sortList = function(key, operator) {
             self.options.sort = [{
                 key: key,
@@ -6554,6 +6604,10 @@ requires
             return that;
         };
 
+        that.closePreview = function() {
+            self.preview = false;
+        };
+
         that.reload = function() {
             clear();
             that.clearCache();
@@ -7072,7 +7126,7 @@ requires
         };
 
         that.closePreview = function() {
-            self.preview = false;
+            that.$body.closePreview();
         };
 
         that.resizeColumn = function(id, width) {