diff --git a/demos/image/js/image.js b/demos/image/js/image.js
index d973bf8a..5e99a54f 100644
--- a/demos/image/js/image.js
+++ b/demos/image/js/image.js
@@ -9,7 +9,9 @@ Ox.load('Image', function() {
             'Method...', 'blur(1)', 'blur(5)',
             'channel("r")', 'channel("g")', 'channel("b")', 'channel("a")',
             'channel("h")', 'channel("s")', 'channel("l")',
-            'contour()', 'depth(1)', 'depth(4)', 'edges()', 'emboss()',
+            'contour()',
+            'depth(1)', 'depth(2)', 'depth(4)',
+            'edges()', 'emboss()',
             'encode("secret")', 'decode()',
             'encode("secret", false)', 'decode(false)',
             'encode("secret", 1)', 'decode(1)',
@@ -18,9 +20,10 @@ Ox.load('Image', function() {
             'hue(-60)', 'hue(60)',
             'invert()',
             'lightness(-0.5)', 'lightness(0.5)',
-            'motionBlur()', 'posterize()',
+            'mosaic(4)', 'motionBlur()', 'photocopy()', 'posterize()',
             'resize(256, 256)', 'resize(512, 512)',
             'saturation(-0.5)', 'saturation(0.5)',
+            'scale(0.5, -1)',
             'sharpen()', 'solarize()',
             'src("png/Lenna.png")', 'src("png/OxJS.png")'
         ].forEach(function(filter) {
@@ -41,7 +44,7 @@ Ox.load('Image', function() {
                     image[fn].apply(null, Ox.merge(args, function(image) {
                         Ox.element('#filter').attr({
                             src: image.src()
-                        });
+                        }).css({width: '512px', height: '512px'});
                     }));
                 } else if (fn == 'decode') {
                     image[fn].apply(null, Ox.merge(args, function(str) {
diff --git a/demos/image2/index.html b/demos/image2/index.html
index 6973f406..86630991 100644
--- a/demos/image2/index.html
+++ b/demos/image2/index.html
@@ -8,19 +8,21 @@
 Ox.load('Image', function() {
     var fixmeOxelement;
     var body = Ox.element('body'),
-        button = Ox.element('<input>').attr({type: 'button', value: 'encode'}).click(function() {
+        button = Ox.element('<input>').attr({type: 'button', value: 'Encode'}).click(function() {
             button.attr({disabled: 'disabled'})
-            if (button.attr('value') == 'encode') {
-                button.attr({value: 'encoding...'});
+            if (button.attr('value') == 'Encode') {
+                button.attr({value: 'Encoding...'});
                 encode(function(image) {
                     fixmeOxelement = image;
-                    button.removeAttr('disabled').attr({value: 'decode'});
+                    button.removeAttr('disabled').attr({value: 'Decode'});
                 });                
             } else {
-                button.attr({value: 'decoding...'});
-                decode(fixmeOxelement, function() {
-                    button.attr({value: 'done'})
-                });
+                button.attr({value: 'Decoding...'});
+                setTimeout(function() {
+                    decode(fixmeOxelement, function() {
+                        button.attr({value: 'Done'})
+                    });
+                }, 0);
             }
         }).appendTo(body);
     Ox.element('<br>').appendTo(body);
diff --git a/source/Ox.Image/Ox.Image.js b/source/Ox.Image/Ox.Image.js
index a7b8ed40..91fa83ea 100644
--- a/source/Ox.Image/Ox.Image.js
+++ b/source/Ox.Image/Ox.Image.js
@@ -4,6 +4,8 @@ Ox.load.Image = function(options, callback) {
 
     /*@
     Ox.Image <f> Generic image object
+        To render the image as an image element, use its <code>src()</code>
+        method, to render it as a canvas, use its <code>canvas</code> property.
         (src, callback) -> <u> undefined
         (width, height, callback) -> <u> undefined
         (width, height, background, callback) -> <u> undefined
@@ -26,7 +28,8 @@ Ox.load.Image = function(options, callback) {
         } else {
             self.width = arguments[0];
             self.height = arguments[1];
-            self.background = arguments.length == 4 ? arguments[2] : [0, 0, 0, 0];
+            self.background = arguments.length == 4
+                ? arguments[2] : [0, 0, 0, 0];
             init();
         }
 
@@ -66,19 +69,21 @@ Ox.load.Image = function(options, callback) {
                 self.width = self.image.width;
                 self.height = self.image.height;
             }
-            self.canvas = Ox.element('<canvas>').attr({
+            that.canvas = Ox.element('<canvas>').attr({
                 width: self.width,
                 height: self.height
             });
-            self.context = self.canvas[0].getContext('2d');
+            that.context = that.canvas[0].getContext('2d');
             if (self.image) {
-                self.context.drawImage(self.image, 0, 0);
+                that.context.drawImage(self.image, 0, 0);
             } else if (Ox.sum(self.background)) {
-                that.fillStyle(self.background);
-                that.fillRect(0, 0, self.width, self.height);
+                that.context.fillStyle(self.background);
+                that.context.fillRect(0, 0, self.width, self.height);
             }
-            self.imageData = self.context.getImageData(0, 0, self.width, self.height);
-            self.data = self.imageData.data;
+            that.imageData = that.context.getImageData(
+                0, 0, self.width, self.height
+            );
+            self.data = that.imageData.data;
             self.callback(that);
         }
 
@@ -92,6 +97,11 @@ Ox.load.Image = function(options, callback) {
             });
         }
 
+        /*@
+        blur <f> Apply blur filter
+            (val) -> <o> The image object
+            val <n> Amount of blur (1 to 5, more is slow)
+        @*/
         that.blur = function(val) {
             var filter = [],
                 size = val * 2 + 1;
@@ -111,6 +121,13 @@ Ox.load.Image = function(options, callback) {
             return that.filter(filter);
         };
 
+        //@ canvas <o> Canvas object
+
+        /*@
+        channel <f> Reduce the image to one channel
+            (channel) -> <o> The image object
+            channel <str> 'r', 'g', 'b', 'a', 'h', 's' or 'l'
+        @*/
         that.channel = function(str) {
             str = str[0].toLowerCase();
             return that.map(function(rgba) {
@@ -134,6 +151,12 @@ Ox.load.Image = function(options, callback) {
             });
         }
 
+        //@ context <o> 2D drawing context
+
+        /*@
+        contour <f> Apply contour filter
+            () -> <o> The image object
+        @*/
         that.contour = function(val) {
             return that.filter([
                 +1, +1, +1,
@@ -142,15 +165,24 @@ Ox.load.Image = function(options, callback) {
             ]);
         };
 
+        /*@
+        depth <f> Reduce the bit depth
+            (depth) -> <o> The image object
+            depth <n> Bits per channel (1 to 7)
+        @*/
         that.depth = function(val) {
             var pow = Math.pow(2, 8 - val);
             return that.map(function(rgba) {
                 return rgba.map(function(v, i) {
-                    return i < 3 ? Math.floor(v / pow) * pow : v
+                    return i < 3 ? Math.floor(v / pow) * pow/* * 255 / val*/ : v;
                 });
             });
-        }
+        };
 
+        /*@
+        edges <f> Apply edges filter
+            () -> <o> The image object
+        @*/
         that.edges = function(val) {
             return that.filter([
                 -1, -1, -1,
@@ -159,6 +191,10 @@ Ox.load.Image = function(options, callback) {
             ]).saturation(-1);
         };
 
+        /*@
+        emboss <f> Apply emboss filter
+            () -> <o> The image object
+        @*/
         that.emboss = function(val) {
             return that.filter([
                 -1, -1, +0,
@@ -171,8 +207,8 @@ Ox.load.Image = function(options, callback) {
         encode <f> Encodes a string into the image
             For most purposes, deflate and mode should be omitted, since the
             defaults make the existence of the message harder to detect. A valid
-            use case for deflate and mode would be to encode, additionally to
-            the secret string, a more easily detected decoy string: <code>
+            use case for deflate and mode would be to first encode a more easily
+            detected decoy string, and only then the secret string: <code>
             image.encode(decoy, false, 1, function(image) { image.encode(secret,
             -1, callback); })</code>.
             (str, callback) -> <o> The image object (unmodified)
@@ -183,7 +219,7 @@ Ox.load.Image = function(options, callback) {
             str <s> The string to be encoded
             callback <f> Callback function
                 image <o> The image object (modified)
-            deflate <b|true> If true, compress string with deflate
+            deflate <b|true> If true, encode the string with deflate
             mode <n|0> Encoding mode
                 If mode is between -7 and 0, the string will be encoded one bit
                 per byte, as the number of bits within that byte set to 1,
@@ -199,6 +235,7 @@ Ox.load.Image = function(options, callback) {
                 mode = Ox.isNumber(arguments[1]) ? arguments[1]
                     : Ox.isNumber(arguments[2]) ? arguments[2] : 0,
                 b = 0, bin,
+                // Array of bits per byte to be modified (0 is LSB)
                 bits = mode < 1 ? [-mode] : Ox.map(Ox.range(8), function(bit) {
                     return mode & 1 << bit ? bit : null;
                 }),
@@ -226,6 +263,7 @@ Ox.load.Image = function(options, callback) {
                 if (rgba[3] == 255) {
                     var index = getIndex(xy);
                     Ox.loop(3, function(c) {
+                        // fixme: use: var data = that.context.imageData.data[i + c]
                         var i = index + c;
                         Ox.forEach(bits, function(bit) {
                             if ((
@@ -245,11 +283,23 @@ Ox.load.Image = function(options, callback) {
                     });
                 }
             });
-            self.context.putImageData(self.imageData, 0, 0);
+            that.context.putImageData(that.imageData, 0, 0);
             callback(that);
             return that;
         };
 
+        /*@
+        decode <f> Decode encoded string
+            (callback) -> <o> The image object (unmodified)
+            (deflate, callback) -> <o> The image object (unmodified)
+            (mode, callback) -> <o> The image object (unmodified)
+            (deflate, mode, callback) -> <o> The image object (unmodified)
+            (mode, deflate, callback) -> <o> The image object (unmodified)
+            deflate <b|true> If true, decode the string with deflate
+            mode <n|0> See encode method
+            callback <f> Callback function
+                image <o> The image object (modified)
+        @*/
         that.decode = function() {
             var callback = arguments[arguments.length - 1],
                 deflate = Ox.isBoolean(arguments[0]) ? arguments[0]
@@ -257,6 +307,7 @@ Ox.load.Image = function(options, callback) {
                 mode = Ox.isNumber(arguments[0]) ? arguments[0]
                     : Ox.isNumber(arguments[1]) ? arguments[1] : 0,
                 bin = '',
+                // Array of bits per byte to be modified (0 is LSB)
                 bits = mode < 1 ? [-mode] : Ox.map(Ox.range(8), function(b) {
                     return mode & 1 << b ? b : null;
                 }),
@@ -268,35 +319,41 @@ Ox.load.Image = function(options, callback) {
                         var i = index + c;
                         Ox.forEach(bits, function(bit) {
                             bin += mode < 1
+                                // Read the number of bits set to 1, mod 2
                                 ? Ox.sum(Ox.range(8).map(function(bit) {
                                     return +!!(self.data[i] & 1 << bit);
                                 })) % 2
+                                // or the one bit in question
                                 : +!!(self.data[i] & 1 << bit);
                             if (bin.length == 8) {
+                                // Every 8 bits, add one byte to the string
                                 str += Ox.char(parseInt(bin, 2));
                                 bin = '';
                                 if (str.length == len) {
                                     if (++done == 1) {
+                                        // After 4 bytes, parse string as length
                                         len = Ox.decodeBase256(str);
-                                        Ox.print("LEN", len)
-                                        len + 4 > getCapacity(bits.length)
-                                            && error('decode');
+                                        if (
+                                            len <= 0 ||
+                                            len > getCapacity(bits.length) - 4
+                                        ) {
+                                            error('decode');
+                                        }
                                         str = '';
                                     } else {
+                                        // After length more bytes, break
                                         return false;
                                     }
                                 }
                             }
                         });
+                        return done != 2;
                     });
-                    if (done == 2) {
-                        return false;
-                    }
+                    return done != 2;
                 }
             });
             try {
                 if (deflate) {
-                    Ox.print('DEFLATE')
                     Ox.decodeDeflate(str, callback);
                 } else {
                     callback(Ox.decodeUTF8(str));
@@ -306,28 +363,22 @@ Ox.load.Image = function(options, callback) {
             }
         }
 
-        that.fillRect = function(x, y, w, h) {
-            self.context.fillRect(x, y, w, h);
-            return that;
-        };
-
-        that.fillStyle = function() {
-            if (arguments.length == 0) {
-                return self.context.fillStyle;
-            } else {
-                self.context.fillStyle = arguments[0];
-                return that;
-            }
-        };
-
+        /*@
+        filter <f> Pixel-wise filter function
+            Undocumented, see source code
+            (filter) -> <o> The image object
+            (filter, bias) -> <o> The image object
+            filter <[n]> Filter matrix
+            bias <n> Bias
+        @*/
         that.filter = function(filter, bias) {
             bias = bias || 0;
             var filterSize = Math.sqrt(filter.length),
                 d = (filterSize - 1) / 2,
-                imageData = self.context.createImageData(self.width, self.height),
+                imageData = that.context.createImageData(self.width, self.height),
                 data = [];
-            self.imageData = self.context.getImageData(0, 0, self.width, self.height);
-            self.data = self.imageData.data;
+            that.imageData = that.context.getImageData(0, 0, self.width, self.height);
+            self.data = that.imageData.data;
             Ox.loop(0, self.data.length, 4, function(i) {
                 var filterIndex = 0,
                     xy = getXY(i);
@@ -351,8 +402,8 @@ Ox.load.Image = function(options, callback) {
                         : self.data[i + c];
                 });
             });
-            self.context.putImageData(imageData, 0, 0);
-            self.imageData = imageData;
+            that.context.putImageData(imageData, 0, 0);
+            that.imageData = imageData;
             self.data = data;
             return that;
         };
@@ -383,12 +434,23 @@ Ox.load.Image = function(options, callback) {
             });
         };
 
+        //@ imageData <o> Image data object
+
+        /*@
+        invert <f> Apply invert filter
+            () -> <o> The image object
+        @*/
         that.invert = function() {
             return that.map(function(rgba) {
                 return [255 - rgba[0], 255 - rgba[1], 255 - rgba[2], rgba[3]];
             });
         };
 
+        /*@
+        lightness <f> Apply lightness filter
+            (val) -> <o> The image object
+            val <n> Amount, from -1 (darkest) to 1 (lightest)
+        @*/
         that.lightness = function(val) {
             return setSL('l', val);
         };
@@ -401,8 +463,8 @@ Ox.load.Image = function(options, callback) {
             xy <[n]> XY coordinates
         @*/
         that.map = function(fn) {
-            self.imageData = self.context.getImageData(0, 0, self.width, self.height);
-            self.data = self.imageData.data;
+            that.imageData = that.context.getImageData(0, 0, self.width, self.height);
+            self.data = that.imageData.data;
             Ox.loop(0, self.data.length, 4, function(i) {
                 fn([
                     self.data[i], self.data[i + 1],
@@ -411,10 +473,44 @@ Ox.load.Image = function(options, callback) {
                     self.data[i + c] = val;
                 });
             })
-            self.context.putImageData(self.imageData, 0, 0);
+            that.context.putImageData(that.imageData, 0, 0);
             return that;
         };
 
+        /*@
+        mosaic <f> Apply mosaic filter
+            (size) -> <o> The image object
+            size <n> Mosaic size
+        @*/
+        that.mosaic = function(size) {
+            that.forEach(function(rgba, xy) {
+                if (xy[0] % size == 0 && xy[1] % size == 0) {
+                    Ox.loop(size, function(x) {
+                        Ox.loop(size, function(y) {
+                            var hsl, rgb;
+                            if ((x == 0 || y == 0) && !(x == size - 1 || y == size - 1)) {
+                                that.pixel(xy[0] + x, xy[1] + y, rgba.map(function(c, i) {
+                                    return i < 3 ? Math.min(c + 16, 255) : c;
+                                }));
+                            } else if ((x == size - 1 || y == size - 1) && !(x == 0 || y == 0)) {
+                                that.pixel(xy[0] + x, xy[1] + y, rgba.map(function(c, i) {
+                                    return i < 3 ? Math.max(c - 16, 0) : c;
+                                }));
+                            } else {
+                                that.pixel(xy[0] + x, xy[1] + y, rgba);
+                            }
+                        });
+                    });
+                }
+            });
+            that.context.putImageData(that.imageData, 0, 0);
+            return that;
+        }
+
+        /*@
+        motionBlur <f> Apply motion blur filter
+            () -> <o> The image object
+        @*/
         that.motionBlur = function() {
             return that.filter([
                 0.2, 0.0, 0.0, 0.0, 0.0,
@@ -425,6 +521,22 @@ Ox.load.Image = function(options, callback) {
             ]);
         };
 
+        /*@
+        photocopy <f> Apply photocopy filter
+            () -> <o> The image object
+        @*/
+        that.photocopy = function(val) {
+            return that.saturation(-1).depth(1).blur(1);
+        };
+
+        /*@
+        pixel <f> Get or set pixel values
+            (x, y) -> <[n]> RGBA values
+            (x, y, val) -> <o> The image object
+            x <n> X coordinate
+            y <n> Y coordinate
+            val <[n]> RGBA values
+        @*/
         that.pixel = function(x, y, val) {
             var i = getIndex(x, y);
             if (!val) {
@@ -438,6 +550,10 @@ Ox.load.Image = function(options, callback) {
             }
         }
 
+        /*@
+        posterize <f> Apply posterize filter
+            () -> <o> The image object
+        @*/
         that.posterize = function() {
             return that.blur(3).map(function(rgba) {
                 return [
@@ -450,17 +566,27 @@ Ox.load.Image = function(options, callback) {
         };
 
         that.resize = function(width, height) {
-            self.canvas.attr({
+            // fixme: may not work this way
+            that.canvas.attr({
                 width: width,
                 height: height
             });
             return that;
         }
 
+        /*@
+        saturation <f> Apply saturation filter
+            (val) -> <o> The image object
+            val <n> Amount, from -1 (lowest) to 1 (highest)
+        @*/
         that.saturation = function(val) {
             return setSL('s', val);
         };
 
+        /*@
+        sharpen <f> Apply sharpen filter
+            () -> <o> The image object
+        @*/
         that.sharpen = function(val) {
             return that.filter([
                 -1, -1, -1,
@@ -469,6 +595,10 @@ Ox.load.Image = function(options, callback) {
             ]);
         };
 
+        /*@
+        solarize <f> Apply solarize filter
+            () -> <o> The image object
+        @*/
         that.solarize = function() {
             return that.map(function(rgba) {
                 return [
@@ -480,9 +610,15 @@ Ox.load.Image = function(options, callback) {
             });
         }
 
+        /*@
+        src <f> Get or set the image source
+            () -> <s> Data URL
+            (src) -> <o> Image object, with new source
+            src <s> Image source (local, remote or data URL)
+        @*/
         that.src = function() {
             if (arguments.length == 0) {
-                return self.canvas[0].toDataURL();
+                return that.canvas[0].toDataURL();
             } else {
                 var callback = arguments[1];
                 self.src = arguments[0];
@@ -490,13 +626,13 @@ Ox.load.Image = function(options, callback) {
                 self.image.onload = function() {
                     self.width = self.image.width;
                     self.height = self.image.height;
-                    self.canvas.attr({
+                    that.canvas.attr({
                         width: self.width,
                         height: self.height
                     });
-                    self.context.drawImage(self.image, 0, 0);
-                    self.imageData = self.context.getImageData(0, 0, self.width, self.height);
-                    self.data = self.imageData.data;
+                    that.context.drawImage(self.image, 0, 0);
+                    that.imageData = that.context.getImageData(0, 0, self.width, self.height);
+                    self.data = that.imageData.data;
                     callback && callback(that);
                 }
                 self.image.src = self.src;
@@ -504,8 +640,6 @@ Ox.load.Image = function(options, callback) {
             }
         };
 
-        that.toDataURL = that.src;
-
     };
 
     callback(true);
diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css
index 9d65a829..16da90a2 100644
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/source/Ox.UI/css/Ox.UI.css
@@ -1105,25 +1105,23 @@ Lists
     //-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
     //-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
 }
-.OxTextList .OxBar .OxHead {
+.OxTextList .OxHead {
     position: absolute;
     left: 0;
     height: 16px;
     overflow: hidden;
     white-space: nowrap;
 }
-.OxTextList .OxBar .OxCell {
+.OxTextList .OxHead .OxHeadCell {
     float: left;
-    padding: 2px 4px 2px 4px;
-    height: 12px;
 }
-.OxTextList .OxBar .OxCell:nthChild(1) {
-    margin-left: 0;
+.OxTextList .OxHead .OxHeadCell:first-child {
+    padding-left: 2px;
 }
-.OxTextList .OxBar .OxTitle {
+.OxTextList .OxHead .OxTitle {
     float: left;
-    height: 15px;
-    padding: 1px 2px 0 2px;
+    height: 14px;
+    padding: 2px 2px 0 2px;
     font-weight: bold;
     font-size: 10px;
     text-overflow: ellipsis;
@@ -1131,47 +1129,34 @@ Lists
     overflow: hidden;
     white-space: nowrap;
 }
-.OxTextList .OxBar .OxTitle img {
-    width: 16px;
-    height: 16px;
-    margin: -1px 0 0 -4px;
-}
-.OxTextList .OxBar .OxTitle:first-child {
-    padding-left: 4px;
-}
-.OxTextList .OxBar .OxOrder {
-    float: left;
+.OxTextList .OxHead .OxTitle img {
     width: 10px;
-    height: 13px;
-    padding: 3px 0 0 6px;
-    font-size: 7px;
+    height: 10px;
+    margin: 1px 0 0 -1px;
+}
+.OxTextList .OxHead .OxOrder {
+    float: left;
     display: none;
 }
-.OxTextList .OxBar .OxOrder.OxSelected {
+.OxTextList .OxHead .OxHeadCell.OxSelected .OxOrder {
     //cursor: pointer;
     display: block;
 }
-.OxTextList .OxBar .OxResize {
+.OxTextList .OxHead .OxResize {
     float: left;
     width: 5px;
     height: 16px;
 }
-.OxTextList .OxBar .OxResize.OxResizable {
+.OxTextList .OxHead .OxResize.OxResizable {
     cursor: ew-resize;
 }
-.OxTextList .OxBar .OxResize .OxLeft,
-.OxTextList .OxBar .OxResize .OxCenter,
-.OxTextList .OxBar .OxResize .OxRight {
+.OxTextList .OxHead .OxResize div {
     float: left;
+    width: 2px;
     height: 16px;
 }
-.OxTextList .OxBar .OxResize .OxLeft,
-.OxTextList .OxBar .OxResize .OxRight {
-    width: 2px;
-}
-.OxTextList .OxBar .OxResize .OxCenter {
+.OxTextList .OxHead .OxResize div.OxCenter {
     width: 1px;
-    background: rgb(24, 24, 24);
 }
 .OxTextList .OxBar .OxSelect {
     position: absolute;
diff --git a/source/Ox.UI/js/Core/Ox.Clipboard.js b/source/Ox.UI/js/Core/Ox.Clipboard.js
index 36f7fff7..b1438309 100644
--- a/source/Ox.UI/js/Core/Ox.Clipboard.js
+++ b/source/Ox.UI/js/Core/Ox.Clipboard.js
@@ -1,13 +1,10 @@
 // vim: et:ts=4:sw=4:sts=4:ft=javascript
 /*@
 Ox.Clipboard <o> Basic clipboard handler
-    copy <f> copy to clipbloard
-        (data) -> <u> set clipboard to data
-    paste <f> paste from clipbload
-        () -> <o> get clipboard data
-    _print <f> debug function
-        () -> <u> print clipboard contents to console
-    data <o> clipboard object
+    copy <f> Copy data to clipboard
+        (data) -> <u> undefined
+    paste <f> Paste data from clipboard
+        () -> <*> Clipboard data
 @*/
 Ox.Clipboard = function() {
     var clipboard = {};
diff --git a/source/Ox.UI/js/List/Ox.List.js b/source/Ox.UI/js/List/Ox.List.js
index 1a551e6f..975335e9 100644
--- a/source/Ox.UI/js/List/Ox.List.js
+++ b/source/Ox.UI/js/List/Ox.List.js
@@ -309,6 +309,8 @@ Ox.List = function(options, self) {
     }
 
     function copyItems() {
+        // fixme: both copy and paste should just deal with Ox.Clipboard,
+        // and use a "type"
         self.options.selected.length && that.triggerEvent('copy', {
             ids: self.options.selected
         });
@@ -653,7 +655,7 @@ Ox.List = function(options, self) {
         if (self.$items.length == 0) {
             return self.options.selected;
         } else {
-            return $.map(self.selected, function(pos) {
+            return self.selected.map(function(pos) {
                 return self.$items[pos].options('data')[self.options.unique];
             });
         }
@@ -826,7 +828,7 @@ Ox.List = function(options, self) {
             });
         that.triggerEvent('move', {
             //id: id,
-            ids: $.map(self.$items, function($item) {
+            ids: self.$items.map(function($item) {
                 return $item.options('data')[self.options.unique];
             })
             //position: pos
diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js
index eb0e16e9..b67bdc0e 100644
--- a/source/Ox.UI/js/List/Ox.TextList.js
+++ b/source/Ox.UI/js/List/Ox.TextList.js
@@ -81,59 +81,59 @@ Ox.TextList = function(options, self) {
                 keys: find
             });
 
-    self.options.columns.forEach(function(v) { // fixme: can this go into a generic ox.js function?
+    self.options.columns.forEach(function(column) { // fixme: can this go into a generic ox.js function?
         // fixme: and can't these just remain undefined?
-        if (Ox.isUndefined(v.align)) {
-            v.align = 'left';
+        if (Ox.isUndefined(column.align)) {
+            column.align = 'left';
         }
-        if (Ox.isUndefined(v.clickable)) {
-            v.clickable = false;
+        if (Ox.isUndefined(column.clickable)) {
+            column.clickable = false;
         }
-        if (Ox.isUndefined(v.editable)) {
-            v.editable = false;
+        if (Ox.isUndefined(column.editable)) {
+            column.editable = false;
         }
-        if (Ox.isUndefined(v.unique)) {
-            v.unique = false;
+        if (Ox.isUndefined(column.unique)) {
+            column.unique = false;
         }
-        if (Ox.isUndefined(v.visible)) {
-            v.visible = false;
+        if (Ox.isUndefined(column.visible)) {
+            column.visible = false;
         }
-        if (v.unique) {
-            self.unique = v.id;
+        if (column.unique) {
+            self.unique = column.id;
         }
     });
 
-    $.extend(self, {
+    Ox.extend(self, {
         columnPositions: [],
-        defaultColumnWidths: $.map(self.options.columns, function(v) {
-            return v.defaultWidth || v.width;
+        defaultColumnWidths: self.options.columns.map(function(column) {
+            return column.defaultWidth || column.width;
         }),
         itemHeight: 16,
         page: 0,
         pageLength: 100,
         scrollLeft: 0,
         selectedColumn: getColumnIndexById(self.options.sort[0].key),
-        visibleColumns: $.map(self.options.columns, function(v) {
-            return v.visible ? v : null;
+        visibleColumns: self.options.columns.filter(function(column) {
+            return column.visible;
         })
     });
     // fixme: there might be a better way than passing both visible and position
-    self.options.columns.forEach(function(v) {
-        if (!Ox.isUndefined(v.position)) {
-            self.visibleColumns[v.position] = v;
+    self.options.columns.forEach(function(column) {
+        if (!Ox.isUndefined(column.position)) {
+            self.visibleColumns[column.position] = column;
         }
     });
-    $.extend(self, {
-        columnWidths: $.map(self.visibleColumns, function(v, i) {
-            return v.width;
+    Ox.extend(self, {
+        columnWidths: self.visibleColumns.map(function(column) {
+            return column.width;
         }),
         pageHeight: self.options.pageLength * self.itemHeight
     });
 
     self.format = {};
-    self.options.columns.forEach(function(v, i) {
-        if (v.format) {
-            self.format[v.id] = v.format;
+    self.options.columns.forEach(function(column) {
+        if (column.format) {
+            self.format[column.id] = column.format;
         }
     });
 
@@ -147,7 +147,8 @@ Ox.TextList = function(options, self) {
         that.$head = Ox.Container()
             .addClass('OxHead')
             .css({
-                right: self.options.scrollbarVisible ? Ox.UI.SCROLLBAR_SIZE + 'px' : 0
+                right: self.options.scrollbarVisible
+                    ? Ox.UI.SCROLLBAR_SIZE + 'px' : 0
             })
             .appendTo(that.$bar);
         that.$head.$content.addClass('OxTitles');
@@ -155,13 +156,13 @@ Ox.TextList = function(options, self) {
         if (self.options.columnsRemovable) {
             that.$select = Ox.Select({
                     id: self.options.id + 'SelectColumns',
-                    items: $.map(self.options.columns, function(v, i) {
+                    items: self.options.columns.map(function(column) {
                         return {
-                            checked: v.visible,
-                            disabled: v.removable === false,
-                            id: v.id,
-                            title: v.title
-                        }
+                            checked: column.visible,
+                            disabled: column.removable === false,
+                            id: column.id,
+                            title: column.title
+                        };
                     }),
                     max: -1,
                     min: 1,
@@ -195,7 +196,7 @@ Ox.TextList = function(options, self) {
             sortable: self.options.sortable,
             type: 'text',
             unique: self.unique
-        }, $.extend({}, self)) // pass event handler
+        }, Ox.extend({}, self)) // pass event handler
         .addClass('OxBody')
         .css({
             top: (self.options.columnsVisible ? 16 : 0) + 'px',
@@ -305,83 +306,87 @@ Ox.TextList = function(options, self) {
     }
 
     function constructHead() {
-        var offset = 0;
-        that.$titles = [];
-        self.columnOffsets = [];
-        self.visibleColumns.forEach(function(v, i) {
-            var $order, $resize, $left, $center, $right;
-            offset += self.columnWidths[i];
-            self.columnOffsets[i] = offset - self.columnWidths[i] / 2;
-            that.$titles[i] = Ox.Element()
-                .addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
-                .css({
-                    width: (self.columnWidths[i] - 9) + 'px',
-                    textAlign: v.align
-                })
-                .html(v.title)
+        self.$heads = [];
+        self.$titles = [];
+        self.$orderButtons = [];
+        self.visibleColumns.forEach(function(column, i) {
+            var $resize;
+            self.$heads[i] = Ox.Element()
+                .addClass('OxHeadCell OxColumn' + Ox.toTitleCase(column.id))
+                .css({width: self.columnWidths[i] - 5 + 'px'})
                 .appendTo(that.$head.$content.$element);
             // if sort operator is set, bind click event
-            if (v.operator) {
-                that.$titles[i].bindEvent({
-                    anyclick: function(event, e) {
-                        clickColumn(v.id);
+            if (column.operator) {
+                self.$heads[i].bindEvent({
+                    anyclick: function() {
+                        clickColumn(column.id);
                     }
                 });
             }
             // if columns are movable, bind drag events
             if (self.options.columnsMovable) {
-                that.$titles[i].bindEvent({
+                self.$heads[i].bindEvent({
                     dragstart: function(event, e) {
-                        dragstartColumn(v.id, e);
+                        dragstartColumn(column.id, e);
                     },
                     drag: function(event, e) {
-                        dragColumn(v.id, e);
+                        dragColumn(column.id, e);
                     },
                     dragend: function(event, e) {
-                        dragendColumn(v.id, e);
+                        dragendColumn(column.id, e);
                     }
                 })
             }
-            $order = $('<div>')
-                .addClass('OxOrder')
-                .html(Ox.UI.symbols['triangle_' + (
-                    v.operator == '+' ? 'up' : 'down'
-                )])
-                .click(function() {
-                    $(this).prev().trigger('click')
+            self.$titles[i] = Ox.Element()
+                .addClass('OxTitle')
+                .css({
+                    width: self.columnWidths[i] - 9 + 'px',
+                    textAlign: column.align
                 })
-                .appendTo(that.$head.$content.$element);
+                .html(column.title)
+                .appendTo(self.$heads[i]);
+            self.$orderButtons[i] = Ox.Button({
+                    style: 'symbol',
+                    title: column.operator == '+' ? 'up' : 'down',
+                    type: 'image'
+                })
+                .addClass('OxOrder')
+                .css({marginTop: (column.operator == '+' ? 1 : -1) + 'px'})
+                .click(function() {
+                    $(this).parent().trigger('click');
+                })
+                .appendTo(self.$heads[i]);
             $resize = Ox.Element()
                 .addClass('OxResize')
                 .appendTo(that.$head.$content.$element);
+            $('<div>').appendTo($resize);
+            $('<div>').addClass('OxCenter').appendTo($resize);
+            $('<div>').appendTo($resize);
             // if columns are resizable, bind click and drag events
             if (self.options.columnsResizable) {
                 $resize.addClass('OxResizable')
                     .bindEvent({
                         doubleclick: function(event, e) {
-                            resetColumn(v.id, e);
+                            resetColumn(column.id, e);
                         },
                         dragstart: function(event, e) {
-                            dragstartResize(v.id, e);
+                            dragstartResize(column.id, e);
                         },
                         drag: function(event, e) {
-                            dragResize(v.id, e);
+                            dragResize(column.id, e);
                         },
                         dragend: function(event, e) {
-                            dragendResize(v.id, e);
+                            dragendResize(column.id, e);
                         }
                     });
             }
-            $left = $('<div>').addClass('OxLeft').appendTo($resize.$element);
-            $center = $('<div>').addClass('OxCenter').appendTo($resize.$element);
-            $right = $('<div>').addClass('OxRight').appendTo($resize.$element);
         });
         that.$head.$content.css({
             width: (Ox.sum(self.columnWidths) + 2) + 'px'
         });
         if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var
             toggleSelected(self.options.columns[self.selectedColumn].id);
-            that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
+            self.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
                 width: (self.options.columns[self.selectedColumn].width - 25) + 'px'
             });
         }
@@ -419,56 +424,39 @@ Ox.TextList = function(options, self) {
         return $item;
     }
 
-    function formatValue(key, value, data) {
-        // fixme: this may be obscure...
-        // since the format of a value may depend on another value,
-        // we pass all data as a second parameter to the supplied format function
-        var format = self.format[key];
-        if (value === null) {
-            value = '';
-        } else if (format) {
-            value = Ox.isObject(format) ?
-                Ox['format' + Ox.toTitleCase(format.type)]
-                .apply(this, Ox.merge([value], format.args || [])) :
-                format(value, data);
-        } else if (Ox.isArray(value)) {
-            value = value.join(', ');
-        }
-        return value;
-    }
-
     function dragstartColumn(id, e) {
         self.drag = {
-            startX: e.clientX,
+            columnOffsets: getColumnOffsets(),
+            // fixme: doesn't take into account horizontal scroll
+            listOffset: that.$element.offset().left,
             startPos: getColumnPositionById(id)
         }
-        $.extend(self.drag, {
-            stopPos: self.drag.startPos,
-            offsets: $.map(self.visibleColumns, function(v, i) {
-                return self.columnOffsets[i] - self.columnOffsets[self.drag.startPos]
-            })
-        });
-        $('.OxColumn' + Ox.toTitleCase(id)).css({
-            opacity: 0.25
-        });
-        that.$titles[self.drag.startPos].addClass('OxDrag').css({ // fixme: why does the class not work?
+        self.drag.stopPos = self.drag.startPos;
+        $('.OxColumn' + Ox.toTitleCase(id)).css({opacity: 0.25});
+        self.drag.startPos > 0 && self.$heads[self.drag.startPos].prev().children().eq(2).css({opacity: 0.25});
+        self.$heads[self.drag.startPos].next().children().eq(0).css({opacity: 0.25});
+        self.$heads[self.drag.startPos].addClass('OxDrag').css({ // fixme: why does the class not work?
             cursor: 'move'
         });
+        //Ox.print('columnOffsets', self.drag.columnOffsets)
     }
 
     function dragColumn(id, e) {
-        var d = e.clientX - self.drag.startX,
-            pos = self.drag.stopPos;
-        Ox.forEach(self.drag.offsets, function(v, i) {
-            if (d < 0 && d < v) {
+        var pos = self.drag.stopPos;
+        Ox.forEach(self.drag.columnOffsets, function(offset, i) {
+            var x = self.drag.listOffset + offset + self.columnWidths[i] / 2;
+            if (i < self.drag.startPos && e.clientX < x) {
                 self.drag.stopPos = i;
                 return false;
-            } else if (d > 0 && d > v) {
+            } else if (i > self.drag.startPos && e.clientX > x) {
                 self.drag.stopPos = i;
             }
         });
         if (self.drag.stopPos != pos) {
             moveColumn(id, self.drag.stopPos);
+            self.drag.columnOffsets = getColumnOffsets();
+            self.drag.startPos = self.drag.stopPos;
+            //Ox.print('columnOffsets', self.drag.columnOffsets)
         }
     }
 
@@ -479,10 +467,8 @@ Ox.TextList = function(options, self) {
         self.columnWidths.splice(self.drag.stopPos, 0, width);
         that.$head.$content.empty();
         constructHead();
-        $('.OxColumn' + Ox.toTitleCase(id)).css({
-            opacity: 1
-        });
-        that.$titles[self.drag.stopPos].removeClass('OxDrag').css({
+        $('.OxColumn' + Ox.toTitleCase(id)).css({opacity: 1});
+        self.$heads[self.drag.stopPos].removeClass('OxDrag').css({
             cursor: 'pointer'
         });
         that.$body.clearCache();
@@ -492,14 +478,13 @@ Ox.TextList = function(options, self) {
     function dragstartResize(id, e) {
         var pos = getColumnPositionById(id);
         self.drag = {
-            startX: e.clientX,
             startWidth: self.columnWidths[pos]
         };
     }
 
     function dragResize(id, e) {
         var width = Ox.limit(
-                self.drag.startWidth - self.drag.startX + e.clientX,
+                self.drag.startWidth + e.clientDX,
                 self.options.columnWidth[0],
                 self.options.columnWidth[1]
             );
@@ -531,6 +516,24 @@ Ox.TextList = function(options, self) {
         });
     }
 
+    function formatValue(key, value, data) {
+        // fixme: this may be obscure...
+        // since the format of a value may depend on another value,
+        // we pass all data as a second parameter to the supplied format function
+        var format = self.format[key];
+        if (value === null) {
+            value = '';
+        } else if (format) {
+            value = Ox.isObject(format) ?
+                Ox['format' + Ox.toTitleCase(format.type)]
+                .apply(this, Ox.merge([value], format.args || [])) :
+                format(value, data);
+        } else if (Ox.isArray(value)) {
+            value = value.join(', ');
+        }
+        return value;
+    }
+
     function getCell(id, key) {
         Ox.print('getCell', id, key)
         var $item = getItem(id);
@@ -538,6 +541,14 @@ Ox.TextList = function(options, self) {
         return $($item.find('.OxCell.OxColumn' + Ox.toTitleCase(key))[0]);
     }
 
+    function getColumnOffsets() {
+        return self.visibleColumns.map(function(column, i) {
+            return Ox.sum(self.visibleColumns.map(function(column_, i_) {
+                return i_ < i ? self.columnWidths[i_] : 0;
+            }));
+        });
+    }
+
     function getColumnIndexById(id) {
         return Ox.getPositionById(self.options.columns, id);
     }
@@ -549,10 +560,10 @@ Ox.TextList = function(options, self) {
     function getItem(id) {
         //Ox.print('getItem', id)
         var $item = null;
-        $.each(that.find('.OxItem'), function(i, v) {
-            $v = $(v);
-            if ($v.data('id') == id) {
-                $item = $v;
+        that.find('.OxItem').each(function() {
+            $this = $(this);
+            if ($this.data('id') == id) {
+                $item = $this;
                 return false;
             }
         });
@@ -579,37 +590,50 @@ Ox.TextList = function(options, self) {
     }
 
     function moveColumn(id, pos) {
-        // fixme: column head should be one element, not three
         //Ox.print('moveColumn', id, pos)
         var startPos = getColumnPositionById(id),
             stopPos = pos,
-            startClassName = '.OxColumn' + Ox.toTitleCase(id),
-            stopClassName = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id),
+            startSelector = '.OxColumn' + Ox.toTitleCase(id),
+            stopSelector = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id),
             insert = startPos < stopPos ? 'insertAfter' : 'insertBefore'
-            $column = $('.OxTitle' + startClassName),
-            $order = $column.next(),
-            $resize = $order.next();
-        //Ox.print(startClassName, insert, stopClassName)
-        $column.detach()[insert](insert == 'insertAfter' ? $('.OxTitle' + stopClassName).next().next() : $('.OxTitle' + stopClassName));
-        $order.detach().insertAfter($column);
-        $resize.detach().insertAfter($order);
-        $.each(that.$body.find('.OxItem'), function(i, v) {
-            var $v = $(v);
-            $v.children(startClassName).detach()[insert]($v.children(stopClassName));
+            $column = $('.OxHeadCell' + startSelector),
+            $resize = $column.next();
+        //Ox.print(startSelector, insert, stopSelector)
+        $column.detach()[insert](insert == 'insertAfter'
+            ? $('.OxHeadCell' + stopSelector).next()
+            : $('.OxHeadCell' + stopSelector));
+        $resize.detach().insertAfter($column);
+        that.$body.find('.OxItem').each(function() {
+            var $this = $(this);
+            $this.children(startSelector).detach()[insert](
+                $this.children(stopSelector)
+            );
         });
-        var column = self.visibleColumns.splice(startPos, 1)[0],
-            width = self.columnWidths.splice(startPos, 1)[0];
-        self.visibleColumns.splice(stopPos, 0, column);
-        self.columnWidths.splice(stopPos, 0, width);
+        var $head = self.$heads.splice(startPos, 1)[0],
+            columnWidth = self.columnWidths.splice(startPos, 1)[0],
+            visibleColumn = self.visibleColumns.splice(startPos, 1)[0];
+        self.$heads.splice(stopPos, 0, $head);
+        self.columnWidths.splice(stopPos, 0, columnWidth);
+        self.visibleColumns.splice(stopPos, 0, visibleColumn);
+        var pos = getColumnPositionById(self.options.columns[self.selectedColumn].id);
+        if (pos > -1) {
+            that.$element.find('.OxResize .OxSelected').removeClass('OxSelected');
+            pos > 0 && self.$heads[pos].prev().children().eq(2).addClass('OxSelected');
+            self.$heads[pos].next().children().eq(0).addClass('OxSelected');
+            if (pos == stopPos) {
+                pos > 0 && self.$heads[pos].prev().children().eq(2).css({opacity: 0.25});
+                self.$heads[pos].next().children().eq(0).css({opacity: 0.25});
+            }
+        }
     }
 
     function removeColumn(id) {
         //Ox.print('removeColumn', id);
-        var className = '.OxColumn' + Ox.toTitleCase(id),
-            index = getColumnIndexById(id),
+        var index = getColumnIndexById(id),
             itemWidth,
             position = getColumnPositionById(id),
-            $column = $('.OxTitle' + className),
+            selector = '.OxColumn' + Ox.toTitleCase(id),
+            $column = $('.OxHeadCell ' + selector),
             $order = $column.next(),
             $resize = $order.next();
         self.options.columns[index].visible = false;
@@ -618,19 +642,17 @@ Ox.TextList = function(options, self) {
         that.$head.$content.empty();
         constructHead();
         itemWidth = getItemWidth();
-        $.each(that.$body.find('.OxItem'), function(i, v) {
-            var $v = $(v);
-            $v.children(className).remove();
-            $v.css({
-                width: itemWidth + 'px'
-            });
+        that.$body.find('.OxItem').each(function() {
+            var $this = $(this);
+            $this.children(selector).remove();
+            $this.css({width: itemWidth + 'px'});
         });
         that.$body.$content.css({
             width: itemWidth + 'px'
         });
         that.$body.options({
             keys: Ox.merge(self.visibleColumns.map(function(column) {
-                return colum.id;
+                return column.id;
             }), self.options.keys)
         });
         //that.$body.clearCache();
@@ -654,12 +676,15 @@ Ox.TextList = function(options, self) {
             that.$head.$content.css({
                 width: (Ox.sum(self.columnWidths) + 2) + 'px'
             });
-            that.$titles[pos].css({
-                width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + 'px'
+            self.$heads[pos].css({
+                width: width - 5 + 'px'
+            });
+            self.$titles[pos].css({
+                width: width - 9 - (i == self.selectedColumn ? 16 : 0) + 'px'
             });
         }
         that.$element.find('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({
-            width: (width - (self.options.columnsVisible ? 9 : 8)) + 'px'
+            width: width - (self.options.columnsVisible ? 9 : 8) + 'px'
         });
         setWidth();
     }
@@ -678,13 +703,12 @@ Ox.TextList = function(options, self) {
         var pos = getColumnPositionById(id);
         if (pos > -1) {
             updateOrder(id);
-            pos > 0 && that.$titles[pos].prev().children().eq(2).toggleClass('OxSelected');
-            that.$titles[pos].toggleClass('OxSelected');
-            that.$titles[pos].next().toggleClass('OxSelected');
-            that.$titles[pos].next().next().children().eq(0).toggleClass('OxSelected');
-            that.$titles[pos].css({
+            pos > 0 && self.$heads[pos].prev().children().eq(2).toggleClass('OxSelected');
+            self.$heads[pos].toggleClass('OxSelected');
+            self.$heads[pos].next().children().eq(0).toggleClass('OxSelected');
+            self.$titles[pos].css({
                 width: (
-                    that.$titles[pos].width() + (that.$titles[pos].hasClass('OxSelected') ? -16 : 16)
+                    self.$titles[pos].width() + (self.$heads[pos].hasClass('OxSelected') ? -16 : 16)
                 ) + 'px'
             });
         }
@@ -692,8 +716,8 @@ Ox.TextList = function(options, self) {
 
     function triggerColumnChangeEvent() {
         that.triggerEvent('columnchange', {
-            ids: $.map(self.visibleColumns, function(v, i) {
-                return v.id;
+            ids: self.visibleColumns.map(function(column) {
+                return column.id;
             })
         });
     }
@@ -713,11 +737,14 @@ Ox.TextList = function(options, self) {
     }
 
     function updateOrder(id) {
-        var pos = getColumnPositionById(id);
+        var operator = self.options.sort[0].operator,
+            pos = getColumnPositionById(id);
         if (pos > -1) {
-            that.$titles[pos].next().html(Ox.UI.symbols[
-                'triangle_' +  (self.options.sort[0].operator == '+' ? 'up' : 'down')
-            ]);
+            self.$orderButtons[pos].options({
+                title: operator == '+' ? 'up' : 'down'
+            }).css({
+                marginTop: (operator == '+' ? 1 : -1) + 'px'
+            });
         }
     }
 
diff --git a/source/Ox.UI/js/Menu/Ox.MainMenu.js b/source/Ox.UI/js/Menu/Ox.MainMenu.js
index 74352949..5ba0a513 100644
--- a/source/Ox.UI/js/Menu/Ox.MainMenu.js
+++ b/source/Ox.UI/js/Menu/Ox.MainMenu.js
@@ -61,8 +61,8 @@ Ox.MainMenu = function(options, self) {
 
     function click(event) {
         var $target = $(event.target),
-            position = typeof $target.data('position') != 'undefined' ?
-                    $target.data('position') : -1;
+            position = typeof $target.data('position') != 'undefined'
+                ? $target.data('position') : -1;
         clickTitle(position);
     }
 
@@ -84,8 +84,8 @@ Ox.MainMenu = function(options, self) {
     function mousemove(event) {
         var $target = $(event.target),
             focused,
-            position = typeof $target.data('position') != 'undefined' ?
-                    $target.data('position') : -1;
+            position = typeof $target.data('position') != 'undefined'
+                ? $target.data('position') : -1;
         if (self.focused && position != self.selected) {
             if (position > -1) {
                 clickTitle(position);
@@ -125,25 +125,23 @@ Ox.MainMenu = function(options, self) {
             itemId = ids.pop(),
             menuId = ids.join('_');
         that.getMenu(menuId).checkItem(itemId);
+        return that;
     };
 
     /*@
     disableItem <f> disableItem
     @*/
     that.disableItem = function(id) {
-        that.getItem(id).options({
-            disabled: true
-        });
+        that.getItem(id).options({disabled: true});
+        return that;
     };
 
     /*@
     enableItem <f> enableItem
     @*/
     that.enableItem = function(id) {
-        Ox.print('ENABLE ITEM', id)
-        that.getItem(id).options({
-            disabled: false
-        });
+        that.getItem(id).options({disabled: false});
+        return that;
     };
 
     /*@
@@ -180,7 +178,6 @@ Ox.MainMenu = function(options, self) {
         } else {
             menu = that.getMenu(ids.shift()).getSubmenu(ids.join('_'));
         }
-        //Ox.print('getMenu', id, menu);
         return menu;
     };
 
@@ -195,6 +192,7 @@ Ox.MainMenu = function(options, self) {
         if (self.selected < self.options.menus.length - 1) {
             clickTitle(self.selected + 1);
         }
+        return that;
     };
 
     /*@
@@ -204,15 +202,15 @@ Ox.MainMenu = function(options, self) {
         if (self.selected) {
             clickTitle(self.selected - 1);
         }
+        return that;
     };
 
     /*@
     uncheckItem <f> uncheckItem
     @*/
     that.uncheckItem = function(id) {
-        that.getItem(id).options({
-            checked: false
-        });
+        that.getItem(id).options({checked: false});
+        return that;
     };
 
     return that;
diff --git a/source/Ox.UI/js/Menu/Ox.Menu.js b/source/Ox.UI/js/Menu/Ox.Menu.js
index 1614e013..c1f4bf2f 100644
--- a/source/Ox.UI/js/Menu/Ox.Menu.js
+++ b/source/Ox.UI/js/Menu/Ox.Menu.js
@@ -178,8 +178,8 @@ Ox.Menu = function(options, self) {
         self.optionGroups = {};
         items.forEach(function(item, i) {
             if (item.group) {
-                items[i] = $.map(item.items, function(v, i) {
-                    return $.extend(v, {
+                items[i] = item.items.map(function(v, i) {
+                    return Ox.extend(v, {
                         group: item.group
                     });
                 });
@@ -196,7 +196,7 @@ Ox.Menu = function(options, self) {
         items.forEach(function(item) {
             var position;
             if ('id' in item) {
-                that.items.push(Ox.MenuItem($.extend(item, {
+                that.items.push(Ox.MenuItem(Ox.extend(item, {
                     menu: that,
                     position: position = that.items.length
                 })).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
@@ -281,10 +281,7 @@ Ox.Menu = function(options, self) {
 
     function constructSpace() {
         return $('<tr>').append(
-            $('<td>', {
-                'class': 'OxSpace',
-                colspan: 5
-            })
+            $('<td>', {'class': 'OxSpace', colspan: 5})
         );
     }
 
@@ -720,10 +717,10 @@ Ox.Menu = function(options, self) {
     };
 
     /*@
-    toggelMenu <f> toggleMenu
+    toggleMenu <f> toggleMenu
     @*/
     that.toggleMenu = function() {
-        that.is(':hidden') ? that.showMenu() : that.hideMenu();
+        return that.is(':hidden') ? that.showMenu() : that.hideMenu();
     };
 
     return that;
diff --git a/source/Ox.UI/js/Menu/Ox.MenuItem.js b/source/Ox.UI/js/Menu/Ox.MenuItem.js
index 763d107e..ced2d346 100644
--- a/source/Ox.UI/js/Menu/Ox.MenuItem.js
+++ b/source/Ox.UI/js/Menu/Ox.MenuItem.js
@@ -36,7 +36,7 @@ Ox.MenuItem = function(options, self) {
                 position: 0,
                 title: [],
             })
-            .options($.extend(options, {
+            .options(Ox.extend(options, {
                 keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
                 title: Ox.toArray(options.title || self.defaults.title)
             }))
@@ -63,10 +63,8 @@ Ox.MenuItem = function(options, self) {
             that.$icon = $('<td>', {
                 'class': 'OxCell OxIcon'
             })
-            .append(self.options.icon ?
-                $('<img>', {
-                    src: self.options.icon
-                }) : null
+            .append(self.options.icon
+                ? $('<img>', {src: self.options.icon}) : null
             )
         )
         .append(
@@ -78,17 +76,19 @@ Ox.MenuItem = function(options, self) {
         .append(
             $('<td>', {
                 'class': 'OxCell OxModifiers',
-                html: $.map(self.options.keyboard.modifiers, function(modifier) {
+                html: self.options.keyboard.modifiers.map(function(modifier) {
                     return Ox.UI.symbols[modifier];
                 }).join('')
             })
         )
         .append(
             $('<td>', {
-                'class': 'OxCell Ox' + (self.options.items.length ? 'Submenu' : 'Key'),
-                html: self.options.items.length ? Ox.UI.symbols.triangle_right :
-                        Ox.UI.symbols[self.options.keyboard.key] ||
-                        self.options.keyboard.key.toUpperCase()
+                'class': 'OxCell Ox'
+                    + (self.options.items.length ? 'Submenu' : 'Key'),
+                html: self.options.items.length
+                    ? Ox.UI.symbols.triangle_right
+                    : Ox.UI.symbols[self.options.keyboard.key]
+                    || self.options.keyboard.key.toUpperCase()
             })
         );
 
@@ -108,7 +108,7 @@ Ox.MenuItem = function(options, self) {
         if (key == 'checked') {
             that.$status.html(value ? Ox.UI.symbols.check : '')
         } else if (key == 'disabled') {
-            that.toggleClass('OxDisabled'); // fixme: this will only work if onChange is only invoked on actual change
+            that.toggleClass('OxDisabled');
         } else if (key == 'title') {
             self.options.title = Ox.toArray(value);
             that.$title.html(self.options.title[0]);
@@ -120,12 +120,11 @@ Ox.MenuItem = function(options, self) {
     };
 
     /*@
-    toggelChecked <f> toggleChecked
+    toggleChecked <f> toggleChecked
     @*/
     that.toggleChecked = function() {
-        that.options({
-            checked: !self.options.checked
-        });
+        that.options({checked: !self.options.checked});
+        return that;
     };
 
     that.toggleDisabled = function() {
@@ -133,13 +132,11 @@ Ox.MenuItem = function(options, self) {
     };
     
     /*@
-    toggelTitle <f> toggleTitle
+    toggleTitle <f> toggleTitle
     @*/
     that.toggleTitle = function() {
-        //Ox.print('s.o.t', self.options.title)
-        that.options({
-            title: self.options.title.reverse()
-        });
+        that.options({title: self.options.title.reverse()});
+        return that;
     };
 
     return that;
diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css
index d0272da7..a4105b43 100644
--- a/source/Ox.UI/themes/classic/css/classic.css
+++ b/source/Ox.UI/themes/classic/css/classic.css
@@ -378,24 +378,18 @@ Lists
 .OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(even) {
     background: rgb(206, 206, 206);
 }
-.OxThemeClassic .OxTextList .OxBar {
-    background: -moz-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208));
-    background: -o-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208));
-    background: -webkit-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208));
-}
-.OxThemeClassic .OxTextList .OxBar .OxSelected {
-    background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
-    background: -o-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
-    background: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
-    //color: rgb(0, 0, 0);
-}
-.OxThemeClassic .OxTextList .OxBar .OxOrder {
+
+
+.OxThemeClassic .OxTextList .OxHead .OxSelected  {
+    background: -moz-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176));
+    background: -o-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176));
+    background: -webkit-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176));
     color: rgb(0, 0, 0);
 }
-.OxThemeClassic .OxTextList .OxBar .OxResize .OxCenter {
+.OxThemeClassic .OxTextList .OxHead .OxResize .OxCenter {
     background: rgb(192, 192, 192);
 }
-.OxThemeClassic .OxTextList .OxBar .OxSelect {
+.OxThemeClassic .OxTextList .OxHead .OxSelect {
     border-color: rgb(192, 192, 192);
 }
 .OxThemeClassic .OxTextList .OxBody .OxItem .OxCell {
diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css
index d4312f60..74b2c00e 100644
--- a/source/Ox.UI/themes/modern/css/modern.css
+++ b/source/Ox.UI/themes/modern/css/modern.css
@@ -369,28 +369,23 @@ Lists
     //background: rgb(66, 66, 82);
 }
 .OxThemeModern .OxTextList .OxItem.OxDroppable.OxDrop:nth-child(odd) .OxCell {
-    background: rgb(78, 78, 94);
     background: rgb(78, 78, 78);
 }
 .OxThemeModern .OxTextList .OxItem.OxDroppable.OxDrop:nth-child(even) .OxCell {
-    background: rgb(82, 82, 98);
     background: rgb(82, 82, 82);
 }
 
 
-.OxThemeModern .OxTextList .OxBar .OxSelected {
+.OxThemeModern .OxTextList .OxHead .OxSelected {
     background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
     background: -o-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
     background: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
     color: rgb(255, 255, 255);
 }
-.OxThemeModern .OxTextList .OxBar .OxOrder {
-    color: rgb(255, 255, 255);
-}
-.OxThemeModern .OxTextList .OxBar .OxResize .OxCenter {
+.OxThemeModern .OxTextList .OxHead .OxResize .OxCenter {
     background: rgb(24, 24, 24);
 }
-.OxThemeModern .OxTextList .OxBar .OxSelect {
+.OxThemeModern .OxTextList .OxHead .OxSelect {
     border-color: rgb(24, 24, 24);
 }
 .OxThemeModern .OxTextList .OxBody .OxItem .OxCell {