From a103ef8f7ddb80f8aba13414ff14a4c4cd9d3709 Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Wed, 17 Aug 2011 14:59:37 +0000
Subject: [PATCH] add Ox.TabPanel()

---
 source/Ox.UI/css/Ox.UI.css           | 12 +++++++
 source/Ox.UI/js/Panel/Ox.TabPanel.js | 48 +++++++++++++++++++++++++++-
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css
index 245c21ba..b5038a4e 100644
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/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
diff --git a/source/Ox.UI/js/Panel/Ox.TabPanel.js b/source/Ox.UI/js/Panel/Ox.TabPanel.js
index 032ea3c5..29e44c05 100644
--- a/source/Ox.UI/js/Panel/Ox.TabPanel.js
+++ b/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;
+
 };