diff --git a/examples/ui/widget_design_patterns/js/example.js b/examples/ui/widget_design_patterns/js/example.js
index ced56338..4816a2e3 100644
--- a/examples/ui/widget_design_patterns/js/example.js
+++ b/examples/ui/widget_design_patterns/js/example.js
@@ -173,6 +173,7 @@ Ox.load(['Image', 'UI'], function() {
 
         that.invert = function() {
             that.options({inverted: !self.options.inverted});
+            return that;
         };
 
         return that;
@@ -187,9 +188,13 @@ Ox.load(['Image', 'UI'], function() {
                 color: [[[128, 128, 128]]]
             }))
             .options(options || {})
-            .update({color: setColor});
+            .update({color: setColor})
+            .bindEvent({
+                doubleclick: function() {
+                    that.invert();
+                }
+            });
 
-        self.inverting = false;
         self.sizes = [
             Ox.splitInt(self.options.size[0], self.options.color[0].length),
             Ox.splitInt(self.options.size[1], self.options.color.length)
@@ -201,11 +206,7 @@ Ox.load(['Image', 'UI'], function() {
                         color: color,
                         size: [self.sizes[0][x], self.sizes[1][y]]
                     })
-                    .update({
-                        inverted: function() {
-                            return that.invert(x, y);
-                        }
-                    })
+                    .unbindEvent('doubleclick')
                     .appendTo(that);
             });
         });
@@ -222,18 +223,12 @@ Ox.load(['Image', 'UI'], function() {
             $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;
-                that.triggerEvent('invert')
-                return false;
-            }
-            return that; // fixme
+        that.invert = function() {
+            self.$boxes.forEach(function(array) {
+                array.forEach(self.invertBox);
+            });
+            that.triggerEvent('invert');
+            return that;
         };
 
         return that;
@@ -299,11 +294,7 @@ Ox.load(['Image', 'UI'], function() {
                             color: image.pixel(x, y).slice(0, 3),
                             size: [self.sizes[0][x], self.sizes[1][y]]
                         })
-                        .bindEvent({
-                            invert: function() {
-                                return that.invert(x, y);
-                            }
-                        })
+                        .unbindEvent('doubleclick')
                         .appendTo(that);
                 });
             });