diff --git a/examples/ui/widget_design_patterns/js/example.js b/examples/ui/widget_design_patterns/js/example.js
index 8dfaca47..ced56338 100644
--- a/examples/ui/widget_design_patterns/js/example.js
+++ b/examples/ui/widget_design_patterns/js/example.js
@@ -182,7 +182,11 @@ Ox.load(['Image', 'UI'], function() {
     Ox.My.MetaBox = function(options, self) {
 
         self = self || {};
-        var that = Ox.My.Box(options || {}, self)
+        var that = Ox.My.Box({}, self);
+        that.defaults(Ox.extend(that.defaults(), {
+                color: [[[128, 128, 128]]]
+            }))
+            .options(options || {})
             .update({color: setColor});
 
         self.inverting = false;
@@ -199,12 +203,7 @@ Ox.load(['Image', 'UI'], function() {
                     })
                     .update({
                         inverted: function() {
-                            if (!self.inverting) {
-                                self.inverting = true;
-                                self.$boxes[y][x].invert();
-                                that.invert();
-                                return false;
-                            }
+                            return that.invert(x, y);
                         }
                     })
                     .appendTo(that);
@@ -219,14 +218,22 @@ Ox.load(['Image', 'UI'], function() {
             });
         }
 
-        that.invert = function() {
-            self.inverting = true;
-            self.$boxes.forEach(function(array) {
-                array.forEach(function($box) {
-                    $box.invert();
+        self.invertBox = function($box) {
+            $box.invert();
+        };
+
+        that.invert = function(x, y) {
+            if (!self.inverting) {
+                self.inverting = true;
+                arguments.length && self.$boxes[y][x].invert();
+                self.$boxes.forEach(function(array) {
+                    array.forEach(self.invertBox);
                 });
-            });
-            self.inverting = false;
+                self.inverting = false;
+                that.triggerEvent('invert')
+                return false;
+            }
+            return that; // fixme
         };
 
         return that;
@@ -236,29 +243,23 @@ Ox.load(['Image', 'UI'], function() {
     Ox.My.PixelBox = function(options, self) {
 
         self = self || {};
-        var that = Ox.My.Box(options || {}, self)
-            .update({
-                color: setColor
-            });
-
-        self.$pixel = Ox.My.MetaBox(Ox.extend(options, {
+        self.options = Ox.extend(Ox.My.Box().defaults(), options || {});
+        var that = Ox.My.MetaBox(Ox.extend(self.options, {
                 color: getColor()
             }), self)
-            .appendTo(that);
-
-        self.$pixel.invert = function() {
-            self.inverting = true;
-            self.$boxes.forEach(function(array) {
-                array.forEach(function($box, x) {
-                    $box.options({
-                        color: $box.options('color').map(function(value, i) {
-                            return i == x ? 255 - value : value
-                        })
-                    });
-                });
+            .update({
+                color: function() {
+                    setColor();
+                    return false;
+                }
+            });
+
+        self.invertBox = function($box, x) {
+            $box.options({
+                color: $box.options('color').map(function(value, i) {
+                    return i == x ? 255 - value : value
+                })
             });
-            self.inverting = false;
-            that.triggerEvent('invert');
         };
 
         function getColor() {
@@ -273,10 +274,6 @@ Ox.load(['Image', 'UI'], function() {
             self.$pixel.options({color: getColor()});
         }
 
-        that.invert = function() {
-            self.$pixel.invert();
-        };
-
         return that;
 
     };
@@ -284,9 +281,11 @@ Ox.load(['Image', 'UI'], function() {
     Ox.My.ImageBox = function(options, self) {
 
         self = self || {};
-        var that = Ox.My.Box(options || {}, self);
-
-        self.inverting = false;
+        var that = Ox.My.Box({}, self)
+        that.defaults({
+                image: null
+            })
+            .options(options || {});
 
         Ox.Image(self.options.image, function(image) {
             var size = image.getSize();
@@ -302,12 +301,7 @@ Ox.load(['Image', 'UI'], function() {
                         })
                         .bindEvent({
                             invert: function() {
-                                if (!self.inverting) {
-                                    self.inverting = true;
-                                    self.$boxes[y][x].invert();
-                                    that.invert();
-                                    return false;
-                                }
+                                return that.invert(x, y);
                             }
                         })
                         .appendTo(that);
@@ -315,15 +309,7 @@ Ox.load(['Image', 'UI'], function() {
             });
         });
 
-        that.invert = function() {
-            self.inverting = true;
-            self.$boxes.forEach(function(array) {
-                array.forEach(function($box) {
-                    $box.invert();
-                });
-            });
-            self.inverting = false;
-        };
+        that.invert = Ox.My.MetaBox(self.options, self).invert;
 
         return that;