diff --git a/demos/form2/js/form.js b/demos/form2/js/form.js
index e8667197..b4fe972f 100644
--- a/demos/form2/js/form.js
+++ b/demos/form2/js/form.js
@@ -454,27 +454,35 @@ Ox.load('Geo', function() {
                 {
                     options: {
                         elements: [
-                            new Ox.Label({
+                            Ox.Label({
                                 title: "Match",
                                 overlap: "right",
-                            }),
-                            new Ox.Select({
-                                id: "select_",
-                                items: [
-                                    {id: "all", title: "all"},
-                                    {id: "any", title: "any"},
-                                ],
-                                overlap: "right",
                                 width: 48
                             }),
-                            new Ox.Label({
-                                title: "of the following conditions",
-                            }),
+                            Ox.FormElementGroup({
+                                elements: [
+                                    Ox.Select({
+                                        id: "select_",
+                                        items: [
+                                            {id: "all", title: "all"},
+                                            {id: "any", title: "any"},
+                                        ],
+                                        width: 48
+                                    }),
+                                    Ox.Label({
+                                        overlap: "left",
+                                        title: "of the following conditions",
+                                        width: 160
+                                    })
+                                ],
+                                float: 'right',
+                                width: 208
+                            })
                         ],
                         float: "left",
                         id: "formElementGroupLabels"
                     },
-                    title: "foo"
+                    title: "FormElementGroup (Select and Labels)"
                 },
                 {
                     options: {
@@ -1086,7 +1094,7 @@ Ox.load('Geo', function() {
                 {
                     options: {
                         id: "timeInput",
-                        width: 72
+                        //width: 72
                     },
                     title: "TimeInput"
                 },
@@ -1094,7 +1102,7 @@ Ox.load('Geo', function() {
                     options: {
                         id: "timeInputSeconds",
                         seconds: true,
-                        width: 112
+                        //width: 112
                     },
                     title: "TimeInput with Seconds"
                 },
@@ -1111,7 +1119,7 @@ Ox.load('Geo', function() {
                         ampm: true,
                         id: "timeInputAmPm",
                         seconds: true,
-                        width: 152
+                        //width: 152
                     },
                     title: "TimeInput with am/pm"
                 },
@@ -1119,8 +1127,8 @@ Ox.load('Geo', function() {
                     options: {
                         id: "timeInputValue",
                         seconds: true,
-                        value: "00:00:00",
-                        width: 112
+                        value: "23:59:59",
+                        //width: 112
                     },
                     title: "TimeInput with Value"
                 }
@@ -1154,27 +1162,27 @@ Ox.load('Geo', function() {
             } catch(error) {
                 
             }
-            $element = new Ox[object](element.options)
+            $element = Ox[object](element.options)
                 .addClass("margin")
                 .appendTo($div);
             if (object != "Button" && object != "Label") {
-                $button = new Ox.Button({
+                $button = Ox.Button({
                         id: "id" + Ox.uid(),
                         title: "Value"
                     })
                     .addClass("margin")
                     .bindEvent("click", function() {
                         var value = $element.options("value"),
-                            $dialog = new Ox.Dialog({
+                            $dialog = Ox.Dialog({
                                 buttons: [
-                                    new Ox.Button({
+                                    Ox.Button({
                                         id: 'close',
                                         title: 'Close'
                                     }).bindEvent({
                                         click: function() { $dialog.close(); }
                                     })
                                 ],
-                                content: Ox.isUndefined(value) ? "undefined" : value,
+                                content: $('<div>').html(Ox.isUndefined(value) ? "undefined" : value),
                                 height: 128,
                                 id: "value",
                                 title: "Value",
diff --git a/demos/image/js/image.js b/demos/image/js/image.js
index 4b403d81..53125a2d 100644
--- a/demos/image/js/image.js
+++ b/demos/image/js/image.js
@@ -7,19 +7,21 @@ Ox.load('Image', function() {
             select = Ox.element('<select>').appendTo(body);
         [
             'Method...', 'blur(1)', 'blur(2)', 'blur(3)',
-            'channel("r")', 'channel("g")', 'channel("b")', 
+            'channel("r")', 'channel("g")', 'channel("b")', 'channel("a")',
             'channel("h")', 'channel("s")', 'channel("l")',
             'contour()', 'edges()', 'emboss()',
             'encode("some secret stuff")', 'decode()',
             'encode("some secret stuff", true)', 'decode(true)',
             'encode("some secret stuff", 1)', 'decode(1)',
             'encode("some secret stuff", 127)', 'decode(127)',
-            'hue(0)', 'hue(120)', 'hue(240)',
+            'hue(-60)', 'hue(60)',
             'invert()',
             'lightness(-0.5)', 'lightness(0.5)',
             'motionBlur()', 'posterize()',
+            'resize(256, 256)', 'resize(512, 512)',
             'saturation(-0.5)', 'saturation(0.5)',
-            'sharpen()', 'solarize()', 'src("png/Lenna.png")'
+            'sharpen()', 'solarize()',
+            'src("png/Lenna.png")', 'src("png/OxJS.png")'
         ].forEach(function(filter) {
             Ox.element('<option>').html(filter).appendTo(select);
         });
diff --git a/source/Ox.Image/Ox.Image.js b/source/Ox.Image/Ox.Image.js
index c8f45ecd..9c35f78c 100644
--- a/source/Ox.Image/Ox.Image.js
+++ b/source/Ox.Image/Ox.Image.js
@@ -102,16 +102,18 @@ Ox.load.Image = function(options, callback) {
             ]);
         };
 
-        that.channel = function(c) {
-            c = c.toLowerCase();
+        that.channel = function(str) {
+            str = str[0].toLowerCase();
             return that.map(function(rgba) {
-                var i = ['r', 'g', 'b'].indexOf(c), rgb, val;
+                var i = ['r', 'g', 'b', 'a'].indexOf(str), rgb, val;
                 if (i > -1) {
                     return Ox.map(rgba, function(v, c) {
-                        return c == i || c == 3 ? v : 0;
+                        return str == 'a'
+                            ? (c < 3 ? rgba[3] : 255)
+                            : (c == i || c == 3 ? v : 0);
                     });
                 } else {
-                    i = ['h', 's', 'l'].indexOf(c);
+                    i = ['h', 's', 'l'].indexOf(str);
                     val = Ox.hsl([rgba[0], rgba[1], rgba[2]])[i];
                     rgb = i == 0 
                         ? Ox.rgb([val, 1, 0.5])
@@ -246,11 +248,15 @@ Ox.load.Image = function(options, callback) {
                         Ox.forEach(bits, function(bit) {
                             if ((
                                 mode < 1 
+                                // If 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
+                                // is not equal to the data bit
                             ) != bin[b++]) {
+                                // then flip the bit
                                 self.data[i] ^= 1 << bit;
                             }
                         })
diff --git a/source/Ox.UI/js/Form/Ox.DateInput.js b/source/Ox.UI/js/Form/Ox.DateInput.js
index f9c55119..5843cba6 100644
--- a/source/Ox.UI/js/Form/Ox.DateInput.js
+++ b/source/Ox.UI/js/Form/Ox.DateInput.js
@@ -7,17 +7,21 @@ Ox.DateInput <f:Ox.Element> DateInput Element
     (options, self) -> <f> DateInput Element
     options <o> Options object
         format <s|short> format can be short, medium, long
-        value <d> date value, defaults to now
+        value <d> date value, defaults to current date
         weekday <b|false> weekday
-        width: <o> width object with day, month, weekday, year width
+        width <o> width of individual input elements, in px
+            day <n> width of day input element
+            month <n> width of month input element
+            weekday <n> width of weekday input element
+            year <n> width of year input element
     self <o>    Shared private variable
     change <!> triggered on change of value   
 @*/
 Ox.DateInput = function(options, self) {
 
     var that;
-    self = $.extend(self || {}, {
-            options: $.extend({
+    self = Ox.extend(self || {}, {
+            options: Ox.extend({
                 format: 'short',
                 value: Ox.formatDate(new Date(), '%F'),
                 weekday: false,
@@ -30,7 +34,7 @@ Ox.DateInput = function(options, self) {
             }, options)
     });
 
-    $.extend(self, {
+    Ox.extend(self, {
         date: new Date(self.options.value.replace(/-/g, '/')),
         formats: {
             day: '%d',
@@ -59,11 +63,11 @@ Ox.DateInput = function(options, self) {
             .bindEvent('autocomplete', changeWeekday),
     } : {}, {
         day: Ox.Input({
-                autocomplete: $.map(Ox.range(1, Ox.getDaysInMonth(
+                autocomplete: Ox.range(1, Ox.getDaysInMonth(
                     parseInt(Ox.formatDate(self.date, '%Y'), 10),
                     parseInt(Ox.formatDate(self.date, '%m'), 10)
-                ) + 1), function(v, i) {
-                    return self.options.format == 'short' ? Ox.pad(v, 2) : v.toString();
+                ) + 1).map(function(i) {
+                    return self.options.format == 'short' ? Ox.pad(i, 2) : i.toString();
                 }),
                 autocompleteReplace: true,
                 autocompleteReplaceCorrect: true,
@@ -99,16 +103,16 @@ Ox.DateInput = function(options, self) {
             .bindEvent('autocomplete', changeMonthOrYear)
     });
 
-    that = Ox.InputGroup($.extend(self.options, {
+    that = Ox.InputGroup(Ox.extend(self.options, {
         id: self.options.id,
-        inputs: $.merge(self.options.weekday ? [
+        inputs: Ox.merge(self.options.weekday ? [
             self.$input.weekday
         ] : [], self.options.format == 'short' ? [
             self.$input.year, self.$input.month, self.$input.day
         ] : [
             self.$input.month, self.$input.day, self.$input.year
         ]),
-        separators: $.merge(self.options.weekday ? [
+        separators: Ox.merge(self.options.weekday ? [
             {title: self.options.format == 'short' ? '' : ',', width: 8},
         ] : [], self.options.format == 'short' ? [
             {title: '-', width: 8}, {title: '-', width: 8}
diff --git a/source/Ox.UI/js/Form/Ox.Filter.js b/source/Ox.UI/js/Form/Ox.Filter.js
index 7c7ba760..84cdd9c4 100644
--- a/source/Ox.UI/js/Form/Ox.Filter.js
+++ b/source/Ox.UI/js/Form/Ox.Filter.js
@@ -162,7 +162,7 @@ Ox.Filter = function(options, self) {
         ],
         separators: [
             {title: 'Limit to', width: 56},
-            {title: 'sorted by', width: 64},
+            {title: 'sorted by', width: 60}, // fixme: this is odd, should be 64
             {title: 'in', width: 32}
         ]
     });
@@ -201,9 +201,9 @@ Ox.Filter = function(options, self) {
 
     self.$form = Ox.Form({
         items: self.$items
-    });
+    }).appendTo(that);
     renderConditions();
-    that.$element = self.$form.$element;
+    //that.$element = self.$form.$element;
 
     function addCondition(pos, subpos, isGroup) {
         subpos = Ox.isUndefined(subpos) ? -1 : subpos;
@@ -280,7 +280,7 @@ Ox.Filter = function(options, self) {
     function removeCondition(pos, subpos) {
         Ox.print('removeCondition', pos, subpos)
         subpos = Ox.isUndefined(subpos) ? -1 : subpos;
-        if (subpos == -1) {
+        if (subpos == -1 || self.options.query.conditions[pos].conditions.length == 1) {
             self.options.query.conditions.splice(pos, 1);
         } else {
             self.options.query.conditions[pos].conditions.splice(subpos, 1);
@@ -298,7 +298,7 @@ Ox.Filter = function(options, self) {
                     title: 'remove',
                     type: 'image'
                 })
-                .css({margin: '0 4px 0 ' + (isGroup ? '296px' : '8px')})
+                .css({margin: '0 4px 0 ' + (isGroup ? '292px' : '8px')}) // fixme: 296 is probably correct, but labels seem to be too wide
                 .bindEvent({
                     click: function(data) {
                         Ox.print('remove...', data)
@@ -441,6 +441,7 @@ Ox.Filter = function(options, self) {
     }
 
     function renderInput(condition, index) {
+        Ox.print('renderInput', condition)
         var $input,
             findKey = Ox.getObjectById(self.options.findKeys, condition.key),
             isArray = Ox.isArray(condition.value),
@@ -448,6 +449,7 @@ Ox.Filter = function(options, self) {
             type = findKey.type == 'integer' ? 'int' : findKey.type,
             formatArgs, formatType, title;
         if (findKey.format) {
+            Ox.print('findKey.format', findKey.format)
             formatArgs = findKey.format.args
             formatType = findKey.format.type;
             if (formatType == 'color') {
@@ -475,6 +477,16 @@ Ox.Filter = function(options, self) {
                     //value: condition.value[index],
                     width: {day: 32, month: 32, year: 48}
                 });
+            } else if (formatType == 'duration') {
+                $input = Ox.TimeInput(!isArray ? {
+                    seconds: true,
+                    value: '00:00:00',
+                    width: {hours: 91, minutes: 91, seconds: 90}
+                } : {
+                    seconds: true,
+                    value: '00:00:00',
+                    width: {hours: 38, minutes: 37, seconds: 37}
+                });
             } else if ([
                 'currency', 'percent', 'unit', 'value'
             ].indexOf(formatType) > -1) {
@@ -571,7 +583,7 @@ Ox.Filter = function(options, self) {
                     width: 208
                 }),
             ], renderButtons(pos, subpos, true)),
-            float: 'left',
+            float: 'left'
         })
         .data({position: pos, subposition: subpos});
         return $condition;
diff --git a/source/Ox.UI/js/Form/Ox.InputGroup.js b/source/Ox.UI/js/Form/Ox.InputGroup.js
index 8880097a..058af532 100644
--- a/source/Ox.UI/js/Form/Ox.InputGroup.js
+++ b/source/Ox.UI/js/Form/Ox.InputGroup.js
@@ -89,23 +89,23 @@ Ox.InputGroup = function(options, self) {
     }
 
     function getWidth() {
-        return Ox.sum($.map(self.options.inputs, function(v, i) {
+        return Ox.sum(self.options.inputs.map(function(v) {
             return v.options('width');
-        })) + Ox.sum($.map(self.options.separators, function(v, i) {
+        })) + Ox.sum(self.options.separators.map(function(v) {
             return v.width;
-        })) + 2; // fixme: why + 2?
+        }));// + 2; // fixme: why + 2?
     }
 
     function setWidths() {
         var length = self.options.inputs.length,
             inputWidths = Ox.divideInt(
-                self.options.width - Ox.sum($.map(self.options.separators, function(v, i) {
+                self.options.width - Ox.sum(self.options.separators.map(function(v) {
                     return v.width;
                 })), length
             );
         self.options.inputs.forEach(function(v) {
             v.options({
-                width: inputWidths[1]
+                width: inputWidths[1] // fixme: 1?? i?
             });
         });
     }
diff --git a/source/Ox.UI/js/Form/Ox.Label.js b/source/Ox.UI/js/Form/Ox.Label.js
index 307bdcbf..8525cdf8 100644
--- a/source/Ox.UI/js/Form/Ox.Label.js
+++ b/source/Ox.UI/js/Form/Ox.Label.js
@@ -26,7 +26,7 @@ Ox.Label = function(options, self) {
                 ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : '')
             )
             .css($.extend(self.options.width == 'auto' ? {} : {
-                width: (self.options.width - 14) + 'px'
+                width: self.options.width - 14 + 'px' // fixme: why 14????
             }, {
                 textAlign: self.options.textAlign
             }))
diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js
index 69dbdd3c..af4c88f0 100644
--- a/source/Ox.UI/js/Form/Ox.Select.js
+++ b/source/Ox.UI/js/Form/Ox.Select.js
@@ -50,7 +50,7 @@ Ox.Select = function(options, self) {
                 Ox.toTitleCase(self.options.overlap))
             )
             .css(self.options.width == 'auto' ? {} : {
-                width: self.options.width + 'px'
+                width: self.options.width - 2 + 'px'
             })
             .bindEvent({
                 key_escape: loseFocus,
@@ -93,7 +93,8 @@ Ox.Select = function(options, self) {
         self.$title = $('<div>')
             .addClass('OxTitle')
             .css({
-                width: (self.options.width - 22 - (
+                // fixme: used to be 22. obscure
+                width: (self.options.width - 24 - (
                     self.options.label ? self.options.labelWidth : 0
                 )) + 'px'
             })
diff --git a/source/Ox.UI/js/Form/Ox.TimeInput.js b/source/Ox.UI/js/Form/Ox.TimeInput.js
index b53a8464..8a3ad5c5 100644
--- a/source/Ox.UI/js/Form/Ox.TimeInput.js
+++ b/source/Ox.UI/js/Form/Ox.TimeInput.js
@@ -9,7 +9,7 @@ Ox.TimeInput <f:Ox.Element> TimeInput Object
         ampm <b|false> 24h/ampm
         seconds <b|false> show seconds
         milliseconds <b|false> show milliseconds
-        value <d> value, defaults to now
+        value <d> value, defaults to current time
     self    <o> shared private variable
 @*/
 
@@ -23,7 +23,7 @@ Ox.TimeInput = function(options, self) {
                 seconds: false,
                 milliseconds: false,
                 value: Ox.formatDate(new Date(), '%T'),
-                /*
+                ///*
                 width: {
                     hours: 32,
                     minutes: 32,
@@ -31,7 +31,7 @@ Ox.TimeInput = function(options, self) {
                     milliseconds: 40,
                     ampm: 32
                 }
-                */
+                //*/
             })
             .options(options || {});
 
@@ -47,48 +47,48 @@ Ox.TimeInput = function(options, self) {
 
     self.$input = {
         hours: Ox.Input({
-            autocomplete: $.map(self.options.ampm ? Ox.range(1, 13) : Ox.range(0, 24), function(v) {
-                return Ox.pad(v, 2);
+            autocomplete: (self.options.ampm ? Ox.range(1, 13) : Ox.range(0, 24)).map(function(i) {
+                return Ox.pad(i, 2);
             }),
             autocompleteReplace: true,
             autocompleteReplaceCorrect: true,
             id: 'hours',
             textAlign: 'right',
             value: self.values.hours,
-            width: 32//self.options.width.hours
+            width: self.options.width.hours
         }),
         minutes: Ox.Input({
-            autocomplete: $.map(Ox.range(0, 60), function(v) {
-                return Ox.pad(v, 2);
+            autocomplete: Ox.range(0, 60).map(function(i) {
+                return Ox.pad(i, 2);
             }),
             autocompleteReplace: true,
             autocompleteReplaceCorrect: true,
             id: 'minutes',
             textAlign: 'right',
             value: self.values.minutes,
-            width: 32//self.options.width.minutes
+            width: self.options.width.minutes
         }),
         seconds: Ox.Input({
-            autocomplete: $.map(Ox.range(0, 60), function(v) {
-                return Ox.pad(v, 2);
+            autocomplete: Ox.range(0, 60).map(function(i) {
+                return Ox.pad(i, 2);
             }),
             autocompleteReplace: true,
             autocompleteReplaceCorrect: true,
             id: 'seconds',
             textAlign: 'right',
             value: self.values.seconds,
-            width: 32//self.options.width.seconds
+            width: self.options.width.seconds
         }),
         milliseconds: Ox.Input({
-            autocomplete: $.map(Ox.range(0, 1000), function(v) {
-                return Ox.pad(v, 3);
+            autocomplete: Ox.range(0, 1000).map(function(i) {
+                return Ox.pad(i, 3);
             }),
             autocompleteReplace: true,
             autocompleteReplaceCorrect: true,
             id: 'milliseconds',
             textAlign: 'right',
             value: self.values.milliseconds,
-            width: 40//self.options.width.milliseconds
+            width: self.options.width.milliseconds
         }),
         ampm: Ox.Input({
             autocomplete: ['AM', 'PM'],
@@ -96,30 +96,31 @@ Ox.TimeInput = function(options, self) {
             autocompleteReplaceCorrect: true,
             id: 'ampm',
             value: self.values.ampm,
-            width: 32//self.options.width.seconds
+            width: self.options.width.ampm
         })
     };
 
-    that = Ox.InputGroup($.extend(self.options, {
-            inputs: $.merge($.merge($.merge([
+    that = Ox.InputGroup(Ox.extend(self.options, {
+            inputs: Ox.merge([
                 self.$input.hours,
                 self.$input.minutes,
             ], self.options.seconds ? [
                 self.$input.seconds
-            ] : []), self.options.milliseconds ? [
+            ] : [], self.options.milliseconds ? [
                 self.$input.milliseconds
-            ] : []), self.options.ampm ? [
+            ] : [], self.options.ampm ? [
                 self.$input.ampm
             ] : []),
-            separators: $.merge($.merge($.merge([
+            separators: Ox.merge([
                 {title: ':', width: 8},
             ], self.options.seconds ? [
                 {title: ':', width: 8}
-            ] : []), self.options.milliseconds ? [
+            ] : [], self.options.milliseconds ? [
                 {title: '.', width: 8}
-            ] : []), self.options.ampm ? [
+            ] : [], self.options.ampm ? [
                 {title: '', width: 8}
             ] : []),
+            width: 0
             //width: self.options.width || 128
         }), self)
         .bindEvent('change', setValue);