From e1bab25ab7ec1b4c2055b87de45153cfe191e00d Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Sun, 15 Apr 2012 14:40:56 +0200
Subject: [PATCH] in symbol example, add theme switch

---
 examples/symbols/css/example.css | 11 ++++++++++-
 examples/symbols/js/example.js   | 29 +++++++++++++++++++++++++----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/examples/symbols/css/example.css b/examples/symbols/css/example.css
index 3316cba6..4b2b3004 100644
--- a/examples/symbols/css/example.css
+++ b/examples/symbols/css/example.css
@@ -1,3 +1,7 @@
+#switch {
+    float: right;
+    margin: 4px;
+}
 .OxButtonGroup {
     margin: 4px;
 }
@@ -8,6 +12,11 @@
     float: left;
     width: 256px;
     height: 256px;
-    border: 1px solid rgb(208, 208, 208);
     margin: 8px;
+}
+.OxThemeClassic .symbol {
+    border: 1px solid rgb(208, 208, 208);
+}
+.OxThemeModern .symbol {
+    border: 1px solid rgb(48, 48, 48);
 }
\ No newline at end of file
diff --git a/examples/symbols/js/example.js b/examples/symbols/js/example.js
index 7f932f4a..8217937c 100644
--- a/examples/symbols/js/example.js
+++ b/examples/symbols/js/example.js
@@ -2,9 +2,9 @@
 ...
 */
 
-Ox.load('UI', function() {
+'use strict';
 
-    Ox.$body.css({margin: '8px', overflowY: 'scroll'});
+Ox.load('UI', function() {
 
     var groups = [
             ['add', 'remove', 'close', 'center', 'bracket'],
@@ -36,8 +36,20 @@ Ox.load('UI', function() {
             ['icon', 'clock', 'user']
         ],
         symbols = Ox.flatten(groups),
-        $buttons = $('<div>').addClass('buttons').appendTo(Ox.$body);
-        $symbols = $('<div>').addClass('symbols').appendTo(Ox.$body);
+        $menu = Ox.Bar({size: 24}),
+        $switch = Ox.Button({
+                title: 'Switch Theme'
+            })
+            .attr({id: 'switch'})
+            .bind({
+                click: function() {
+                    Ox.Theme(Ox.Theme() == 'classic' ? 'modern' : 'classic');
+                }
+            })
+            .appendTo($menu),
+        $main = Ox.Container(),
+        $buttons = $('<div>').addClass('buttons').appendTo($main),
+        $symbols = $('<div>').addClass('symbols').appendTo($main);
 
     groups.forEach(function(symbols) {
         Ox.ButtonGroup({
@@ -66,4 +78,13 @@ Ox.load('UI', function() {
             .appendTo($symbols);
     });
 
+    Ox.SplitPanel({
+            elements: [
+                {element: $menu, size: 24},
+                {element: $main}
+            ],
+            orientation: 'vertical'
+        })
+        .appendTo(Ox.$body);
+    
 });