better filesystem structure for modules and themes; 'minified' ui if debug option not set; dynamially generated map markers

source/Ox.UI/js/Form/Ox.Checkbox.js

@@ -0,0 +1,105 @@
+// vim: et:ts=4:sw=4:sts=4:ft=js
+Ox.Checkbox = function(options, self) {
+
+    /**
+        options
+            disabled        boolean, if true, checkbox is disabled
+            id              element id
+            group           boolean, if true, checkbox is part of a group
+            checked         boolean, if true, checkbox is checked
+            title           string, text on label
+            width           integer, width in px
+        methods:
+            toggleChecked   function()
+                            toggles checked property
+                            returns that
+        events:
+            change          triggered when checked property changes
+                            passes {checked, id, title}
+    */
+
+    var self = self || {},
+        that = new Ox.Element('div', self)
+            .defaults({
+                disabled: false,
+                id: '',
+                group: false,
+                checked: false,
+                overlap: 'none',
+                title: '',
+                width: 'auto'
+            })
+            .options(options || {})
+            .addClass('OxCheckbox' + 
+                (self.options.overlap == 'none' ? '' : ' OxOverlap' +
+                Ox.toTitleCase(self.options.overlap))
+            )
+            .attr(self.options.disabled ? {
+                disabled: 'disabled'
+            } : {});
+
+    if (self.options.title) {
+        self.options.width != 'auto' && that.css({
+                width: self.options.width + 'px'
+            });
+        self.$title = new Ox.Label({
+                disabled: self.options.disabled,
+                id: self.options.id + 'Label',
+                overlap: 'left',
+                title: self.options.title,
+                width: self.options.width - 16
+            })
+            .css({
+                float: 'right'
+            })
+            .click(clickTitle)
+            .appendTo(that);
+    }
+
+    self.$button = new Ox.Button({
+            disabled: self.options.disabled,
+            id: self.options.id + 'Button',
+            title: [
+                {id: 'none', title: 'none', selected: !self.options.checked},
+                {id: 'check', title: 'check', selected: self.options.checked}
+            ],
+            type: 'image'
+        })
+        .addClass('OxCheckbox')
+        .click(clickButton)
+        .appendTo(that);
+
+    function clickButton() {
+        self.options.checked = !self.options.checked;
+        // click will have toggled the button,
+        // if it is part of a group, we have to revert that
+        self.options.group && that.toggleChecked();
+        that.triggerEvent('change', {
+            checked: self.options.checked,
+            id: self.options.id,
+            title: self.options.title
+        });
+    }
+
+    function clickTitle() {
+        !self.options.disabled && self.$button.trigger('click');
+    }
+
+    self.onChange = function(key, value) {
+        if (key == 'checked') {
+            that.toggleChecked();
+        }
+    };
+
+    that.checked = function() {
+        return self.options.checked;
+    }
+
+    that.toggleChecked = function() {
+        self.$button.toggleTitle();
+        return that;
+    }
+
+    return that;
+
+};