add Ox.TabPanel()

source/Ox.UI/css/Ox.UI.css

@@ -1602,6 +1602,18 @@ Panels
 .OxSplitPanel_.OxVertical > .OxSeparator > .OxSpace {
     height: 2px;
 }
+
+.OxTabPanel > .OxBar {
+    text-align: center;
+}
+.OxTabPanel > .OxBar > .OxButtonGroup {
+    position: absolute;
+    left: 0;
+    top: 4px;
+    right: 0;
+    margin: auto;
+}
+
 /*
 ================================================================================
 Requests

source/Ox.UI/js/Panel/Ox.TabPanel.js

@@ -1,4 +1,50 @@
 // vim: et:ts=4:sw=4:sts=4:ft=javascript
 Ox.TabPanel = function(options, self) {
-    
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            content: null,
+            tabs: []
+        })
+        .options(options || {});
+
+    self.$bar = Ox.Bar({size: 24});
+
+    self.$tabs = Ox.ButtonGroup({
+            buttons: self.options.tabs,
+            id: 'tabs',
+            selectable: true,
+        })
+        .bindEvent({
+            change: function(event) {
+                var id = event.selected[0];
+                that.$element.replaceElement(1, self.options.content(id));
+                that.triggerEvent('change', {
+                    selected: id
+                });
+            }
+        })
+        .appendTo(self.$bar);
+
+    that.$element = Ox.SplitPanel({
+            elements: [
+                {
+                    element: self.$bar,
+                    size: 24
+                },
+                {
+                    element: self.options.content(
+                        self.options.tabs.filter(function(tab) {
+                            return tab.selected;
+                        })[0].id
+                    )
+                }
+            ],
+            orientation: 'vertical'
+        })
+        .addClass('OxTabPanel');
+
+    return that;
+
 };