set theme on load

demos/calendar/js/calendar.js

@@ -2,12 +2,12 @@ console.log('calling Ox.UI()')
 //console.log('Ox =', Ox)
 //console.log('Ox.UI =', Ox.UI)
 
-Ox.UI({display: 'modern'}, function() {
+Ox.UI({display: 'icon', theme: 'modern'}, function() {
 
     console.log('running Ox.UI()')
     //console.log('Ox =', Ox)
 
-    Ox.theme('modern');
+    // Ox.theme('modern');
 
     //Ox.print('$$$$', Ox.Calendar)
 

source/js/Ox.Theme.js

@@ -10,6 +10,39 @@
         set theme to 'foo'
 */
 
+Ox.Theme = function(theme) {
+
+    return theme ? setTheme(theme) : getTheme();
+
+    function getTheme() {
+        var theme = '';
+        Ox.forEach(Ox.UI.$body.attr('class').split(' '), function(className) {
+            if (Ox.startsWith(className, 'OxTheme')) {
+                theme = className.replace('OxTheme', '').toLowerCase();
+                return false;
+            }
+        });
+        return theme;
+    }
+
+    function setTheme(theme) {
+        var currentTheme = getTheme();
+        if (theme != currentTheme) {
+            Ox.UI.$body.addClass('OxTheme' + Ox.toTitleCase(theme));
+            $('img').add('input[type=image]').each(function() {
+                var $this = $(this);
+                $this.attr({
+                    src: $this.attr('src')
+                        .replace('ox.ui.' + currentTheme, 'ox.ui.' + theme)
+                });
+            });
+        }
+        return Ox.Theme;
+    }
+
+};
+
+/*
 Ox.UI.ready(function() {
     
     Ox.theme = function() {
@@ -63,4 +96,4 @@ Ox.UI.ready(function() {
 
 
 });
-
+*/

source/js/OxUI.js

@@ -22,13 +22,19 @@ Provides function Ox.UI([options], callback) that fires when
         head = document.getElementsByTagName('head')[0],
         logs = [],
         oxUICallback = function() {},
-        oxUIDefaults = {
-            // 'classic', 'modern', 'console' or 'none'
-            display: 'classic'
-        },
         oxUIFunction = function(options, callback) {
+            var key;
             oxUICallback = arguments.length == 2 ? callback : options;
-            oxUIOptions = arguments.length == 2 && options ? options : oxUIDefaults;
+            if (arguments.length == 2) {
+                for (key in oxUIOptions) {
+                    oxUIOptions[key] = options[key] || oxUIOptions[key];
+                }
+            }
+        },
+        oxUIOptions = {
+            // 'icon', 'console' or 'none'
+            display: 'none',
+            theme: 'classic'
         };
     
     files.forEach(function(file, i) {
@@ -200,10 +206,9 @@ Provides function Ox.UI([options], callback) that fires when
                 {name: 'Chrome', url: 'http://www.google.com/chrome/', version: 10},
                 {name: 'Firefox', url: 'http://www.mozilla.org/firefox/', version: 4},
                 {name: 'Safari', url: 'http://www.apple.com/safari/', version: 5}
-            ],
+            ]
-            options = oxUIOptions || oxUIDefaults;
 
-        if (options.display != 'none') {
+        if (oxUIOptions.display != 'none') {
             body = getElement('body');
             css = {
                 position: 'absolute',
@@ -216,7 +221,7 @@ Provides function Ox.UI([options], callback) that fires when
                 WebkitUserSelect: 'none'
             };
             div = getElement('<div>')
-                .addClass(options.display == 'console' ? 'console' : '')
+                .addClass(oxUIOptions.display == 'console' ? 'console' : '')
                 .css({
                     position: 'absolute',
                     left: 0,
@@ -225,10 +230,10 @@ Provides function Ox.UI([options], callback) that fires when
                     bottom: 0,
                     padding: '4px',
                     background: 'rgb(' + (
-                        options.display == 'classic' ? '240, 240, 240' : '16, 16, 16')
+                        oxUIOptions.theme == 'classic' ? '240, 240, 240' : '16, 16, 16')
                     + ')',
                     opacity: 1,
-                    overflow: options.display == 'console' ? 'auto' : 'hidden',
+                    overflow: oxUIOptions.display == 'console' ? 'auto' : 'hidden',
                     zIndex: 1000
                 })
                 .appendTo(body);
@@ -255,11 +260,11 @@ Provides function Ox.UI([options], callback) that fires when
 
         function start() {
             var image, src;
-            if (options.display == 'console') {
+            if (oxUIOptions.display == 'console') {
                 log('Loading additional scripts and images...')
-            } else {
+            } else if (oxUIOptions.display == 'icon') {
                 image = new Image(),
-                src = path + 'svg/ox.ui.' + options.display + '/symbolLoading.svg';
+                src = path + 'svg/ox.ui.' + oxUIOptions.theme + '/symbolLoading.svg';
                 image.onload = function() {
                     getElement('<img>')
                         .attr({
@@ -287,11 +292,11 @@ Provides function Ox.UI([options], callback) that fires when
                         i == userAgents.length - 2 ? ' or' : ','
                     );
                 }).join(' ');
-            if (options.display == 'none') {
+            if (oxUIOptions.display == 'none') {
                 throw new Error(message);
             } else {
                 div.addClass('error');
-                if (options.display == 'console') {
+                if (oxUIOptions.display == 'console') {
                     log(message);
                     log = function() {};
                 } else {
@@ -421,6 +426,7 @@ Provides function Ox.UI([options], callback) that fires when
             Ox.UI.$document = $(document);
             Ox.UI.$head = $('head');
             Ox.UI.$window = $(window);
+            Ox.UI.$body.addClass('OxTheme' + Ox.toTitleCase(oxUIOptions.theme));
             documentReadyCallbacks.forEach(function(callback) {
                 callback();
             });