some fixes for button groups

build/css/ox.ui.css

@@ -217,25 +217,37 @@ OxButtonGroup
 .OxButtonGroup > .OxButton:last-child {
     border-right-width: 1px;
 }
-.OxButtonGroup > .OxButton.OxSmall:first-child {
+.OxButtonGroup > .OxButton.OxLarge:first-child {
+    -moz-border-radius-topleft: 6px;
+    -moz-border-radius-bottomleft: 6px;
+    -webkit-border-top-left-radius: 6px;
+    -webkit-border-bottom-left-radius: 6px;
+}
+.OxButtonGroup > .OxButton.OxLarge:last-child {
+    -moz-border-radius-topright: 6px;
+    -moz-border-radius-bottomright: 6px;
+    -webkit-border-top-right-radius: 6px;
+    -webkit-border-bottom-right-radius: 6px;
+}
+.OxButtonGroup > .OxButton.OxMedium:first-child {
     -moz-border-radius-topleft: 4px;
     -moz-border-radius-bottomleft: 4px;
     -webkit-border-top-left-radius: 4px;
     -webkit-border-bottom-left-radius: 4px;
 }
-.OxButtonGroup > .OxButton.OxSmall:last-child {
+.OxButtonGroup > .OxButton.OxMedium:last-child {
     -moz-border-radius-topright: 4px;
     -moz-border-radius-bottomright: 4px;
     -webkit-border-top-right-radius: 4px;
     -webkit-border-bottom-right-radius: 4px;
 }
-.OxButtonGroup > .OxButton.OxXsmall:first-child {
+.OxButtonGroup > .OxButton.OxSmall:first-child {
     -moz-border-radius-topleft: 2px;
     -moz-border-radius-bottomleft: 2px;
     -webkit-border-top-left-radius: 2px;
     -webkit-border-bottom-left-radius: 2px;
 }
-.OxButtonGroup > .OxButton.OxXsmall:last-child {
+.OxButtonGroup > .OxButton.OxSmall:last-child {
     -moz-border-radius-topright: 2px;
     -moz-border-radius-bottomright: 2px;
     -webkit-border-top-right-radius: 2px;

build/js/ox.ui.js

@@ -1159,18 +1159,18 @@ requires
                 }, self)
                 .defaults({
                     selected: 0,
-                    values: []
+                    tabs: []
                 })
                 .options(options || {})
                 .addClass("OxTabbar");
 
         Ox.ButtonGroup({
+            buttons: self.options.tabs,
             group: true,
             selectable: true,
             selected: self.options.selected,
             size: "medium",
             style: "tab",
-            values: self.options.values
         }).appendTo(that);
 
         return that;
@@ -1309,15 +1309,22 @@ requires
     */
 
     Ox.Button = function(options, self) {
+        /*
+        events:
+        click       non-selectable button was clicked
+        deselect    selectable button was deselected
+        select      selectable button was selected
+        */
         var self = self || {},
             that = new Ox.Element("input", self)
                 .defaults({
                     disabled: false,
-                    group: false,
+                    group: null,
+                    id: "",
                     selectable: false,
                     selected: false,
                     size: "medium",
-                    style: "", // can be symbol or tab
+                    style: "default", // can be default, symbol or tab
                     type: "text",
                     value: "",
                     values: []
@@ -1364,8 +1371,14 @@ requires
             }
         }
         function click() {
-            if (self.options.selectable && !(self.options.group && self.options.selected)) {
+            if (!self.options.selectable) {
-                that.toggleSelected();
+                that.triggerEvent("click");
+            } else if (!self.options.group || !self.options.selected) {
+                if (self.options.group) {
+                    that.triggerEvent("select");
+                } else {
+                    that.toggleSelected();
+                }
             }
             if (self.options.values.length == 2) {
                 Ox.print("2 values")
@@ -1383,7 +1396,7 @@ requires
                 if (value != that.hasClass("OxSelected")) { // fixme: neccessary?
                     that.toggleClass("OxSelected");
                 }
-                that.triggerEvent(value ? "select" : "deselect", {});
+                that.triggerEvent("change");
             } else if (key == "value") {
                 Ox.print("OxButton onChange value", value)
                 if (self.options.type == "image") {
@@ -1393,9 +1406,6 @@ requires
                     });
                 } else {
                     that.val(value);
-                    that.triggerEvent("change", {
-                        value: value
-                    });
                 }
             }
         }
@@ -1421,38 +1431,46 @@ requires
 
     Ox.ButtonGroup = function(options, self) {
 
+        /*
+        events:
+        change  {id, value}     selection within a group changed
+        */
+
         var self = self || {},
             that = new Ox.Element({}, self)
                 .defaults({
+                    buttons: [],
                     group: false,
                     selectable: false,
                     selected: -1,
                     size: "medium",
                     style: "",
                     type: "text",
-                    values: []
                 })
                 .options(options || {})
                 .addClass("OxButtonGroup");
         self.position = {};
 
         that.$buttons = [];
-        $.each(self.options.values, function(position, value) {
+        $.each(self.options.buttons, function(position, button) {
             that.$buttons[position] = Ox.Button({
-                group: self.options.group,
+                disabled: button.disabled,
+                group: self.options.group ? that : null,
+                id: button.id,
                 selectable: self.options.selectable,
                 selected: position == self.options.selected,
                 size: self.options.size,
                 style: self.options.style,
                 type: self.options.type,
-                value: value
+                value: button.value
             }).appendTo(that);
             self.position[that.$buttons.id] = position;
-            Ox.print("binding", "select_" + that.$buttons[position].id);
+            that.bindEvent("select_" + that.$buttons[position].options("id"), function() {
-            that.bindEvent("select_" + that.$buttons[position].id, select);
+                selectButton(position);
+            });
         });
 
-        function select(event, data) {
+        function onChange(event, data) {
             console.log("event", event, "data", data)
             var id = event.split("_")[1];
             Ox.print("OK")
@@ -1464,7 +1482,13 @@ requires
                 value: id
             });
         }
-        
+
+        function selectButton(position) {
+            that.$buttons[self.options.selected].toggleSelected();
+            self.options.selected = position;
+            that.$buttons[self.options.selected].toggleSelected();
+        };
+
         return that;
     };
 
@@ -1825,6 +1849,25 @@ requires
 
     }
 
+    /*
+    ============================================================================
+    Lists
+    ============================================================================
+    */
+
+    Ox.List = function(options, self) {
+
+        var self = self || {},
+            that = new Ox.Container({}, self);
+
+        return that;
+
+    };
+
+    Ox.ListItem = function(options, self) {
+        
+    };
+
     /*
     ============================================================================
     Menus

demos/test/index.html

@@ -161,8 +161,13 @@
                 }).appendTo(sidePanel);
                 oxuijsPanel.$content.html("Core<br/>Bars<br/>Forms<br/>Panels")
 
-                $tabbar = Ox.Tabbar({
+                $tabbar = new Ox.Tabbar({
-                    values: ["Documentation", "Demo", "Source Code"]
+                    selected: 0, // fixme: should not be necessary
+                    tabs: [
+                        { id: "documentation", value: "Documentation" },
+                        { id: "demo", value: "Demo" },
+                        { id: "source_code", value: "Source Code" }
+                    ]
                 }).appendTo(mainPanel);
 
                 for (var i = 0; i < 5; i++) {
@@ -194,7 +199,11 @@
                     value: "Button, selectable=true"
                 }).addClass("margin").appendTo($toolbars[1]);
                 Ox.ButtonGroup({
-                    values: ["Button Group (0)", "Button Group (1)", "Button Group (2)"]
+                    buttons: [
+                        { id: "buttongroup0", value: "Button Group (0)" },
+                        { id: "buttongroup1", value: "Button Group (1)" },
+                        { id: "buttongroup2", value: "Button Group (2)" }
+                    ]
                 }).addClass("padding").appendTo($toolbars[1]);
                 $.each(["close", "add", "remove", ["play", "pause"]], function(i, v) {
                     Ox.Button({
@@ -222,11 +231,15 @@
                 }).addClass("margin").appendTo($toolbars[2]);
                 //*/
                 Ox.ButtonGroup({
+                    buttons: [
+                        { id: "close", value: "close" },
+                        { id: "add", value: "add" },
+                        { id: "remove", value: "remove" }
+                    ],
                     selectable: true,
                     selected: 0,
                     size: "medium",
                     type: "image",
-                    values: ["close", "add", "remove"]
                 }).addClass("padding").appendTo($toolbars[2]);
                 ///*
                 Ox.Input({