Ox.ColorInput = function(options, self) { var self = $.extend(self || {}, { options: $.extend({ id: '', value: '0, 0, 0' }, options) }), that; self.values = self.options.value.split(', '); self.$inputs = []; ['red', 'green', 'blue'].forEach(function(v, i) { self.$inputs[i] = new Ox.Input({ id: v, max: 255, type: 'integer', value: self.values[i], width: 36 }) .bindEvent('autovalidate', change); }); self.$inputs[3] = new Ox.Label({ id: 'color', width: 36 }) .css({ background: 'rgb(' + self.options.value + ')' }); self.$inputs[4] = new Ox.ColorPicker({ id: 'picker' }) .bindEvent('change', function(event, data) { //Ox.print('change function called'); self.options.value = data.value; self.values = data.value.split(', '); Ox.range(3).forEach(function(i) { self.$inputs[i].options({ value: self.values[i] }); }); }) .options({ width: 16 // this is just a hack to make the InputGroup layout work }); that = new Ox.InputGroup({ id: self.options.id, inputs: self.$inputs, separators: [ {title: ',', width: 8}, {title: ',', width: 8}, {title: '', width: 8}, {title: '', width: 8} ], value: self.options.value // fixme: it'd be nicer if this would be taken care of by passing self }, self) .bindEvent('change', change); function change() { self.options.value = $.map(self.$inputs, function(v, i) { return v.options('value'); }).join(', '); self.$inputs[3].css({ background: 'rgb(' + self.options.value + ')' }); } return that; };