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.AnnotationPanel.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.AnnotationPanel = function(options, self) {
 
     var self = self || {},

source/js/Ox.App.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /*
 ============================================================================
 Application

source/js/Ox.Bar.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /**
 */
 Ox.Bar = function(options, self) {

source/js/Ox.BlockTimeline.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.BlockTimeline = function(options, self) {
 
     var self = self || {},

source/js/Ox.Button.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Button = function(options, self) {
 
     /**

source/js/Ox.ButtonGroup.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.ButtonGroup = function(options, self) {
 
     /**

source/js/Ox.Calendar.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Calendar = function(options, self) {
 
     self = self || {};

source/js/Ox.CalendarDate.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.CalendarDate = function(options) {
 
     var self = {},

source/js/Ox.Checkbox.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Checkbox = function(options, self) {
 
     /**

source/js/Ox.CheckboxGroup.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.CheckboxGroup = function(options, self) {
 
     /**

source/js/Ox.Clipboard.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Clipboard = function() {
     /***
     Ox.Clipboard

source/js/Ox.CollapsePanel.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /**
 */
 Ox.CollapsePanel = function(options, self) {

source/js/Ox.ColorInput.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.ColorInput = function(options, self) {
 
     var self = $.extend(self || {}, {

source/js/Ox.ColorPicker.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.ColorPicker = function(options, self) {
 
     var self = self || {},

source/js/Ox.Container.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 // fixme: wouldn't it be better to let the elements be,
 // rather then $element, $content, and potentially others,
 // 0, 1, 2, etc, so that append would append 0, and appendTo

source/js/Ox.DateInput.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.DateInput = function(options, self) {
 
     /**

source/js/Ox.DateTimeInput.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.DateTimeInput = function(options, self) {
 
     var self = self || {},

source/js/Ox.Dialog.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Dialog = function(options, self) {
 
     // fixme: dialog should be derived from a generic draggable

source/js/Ox.Element.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 // check out http://ejohn.org/apps/learn/#36 (-#38, making fns work w/o new)
 
 Ox.Element = function() {

source/js/Ox.FilesView.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 // fixme: this is not necessarily part of OxUI
 
 /*

source/js/Ox.Filter.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Filter = function(options, self) {
 
     /***

source/js/Ox.Flipbook.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 // fixme: rename!
 
 Ox.Flipbook = function(options, self) {

source/js/Ox.Focus.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Focus = function() {
     /***
     Ox.Focus

source/js/Ox.Form.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Form = function(options, self) {
 
     /**

source/js/Ox.FormElementGroup.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.FormElementGroup = function(options, self) {
 
     var self = self || {},

source/js/Ox.FormItem.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.FormItem = function(options, self) {
 
     var self = self || {},

source/js/Ox.History.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /***
     Ox.History
 ***/

source/js/Ox.IconItem.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.IconItem = function(options, self) {
 
     //Ox.print('IconItem', options, self)

source/js/Ox.IconList.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.IconList = function(options, self) {
 
     var self = self || {},

source/js/Ox.Input.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Input = function(options, self) {
 
     /**

source/js/Ox.InputGroup.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.InputGroup = function(options, self) {
 
     /***

source/js/Ox.ItemInput.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.ItemInput = function(options, self) {
 
     var self = self || {},

source/js/Ox.JQueryElement.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 // Basic jQuery element
 Ox.JQueryElement = function($element) {
     var that = this;

source/js/Ox.Keyboard.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /***
     Ox.Keyboard
 ***/

source/js/Ox.Label.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Label = function(options, self) {
 
     var self = self || {},

source/js/Ox.LargeTimeline.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.LargeTimeline = function(options, self) {
 
     var self = self || {},

source/js/Ox.List.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.List = function(options, self) {
 
     /***

source/js/Ox.ListItem.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.ListItem = function(options, self) {
 
     var self = self || {},

source/js/Ox.ListMap.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.ListMap = function(options, self) {
 
     var self = self || {},

source/js/Ox.ListPage.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.ListPage = function(options, self) {
     var self = self || {},
         that = new Ox.Element({}, self)

source/js/Ox.LoadingIcon.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.LoadingIcon = function(options, self) {
     var self = self || {},
         that = new Ox.Element('img', self)

source/js/Ox.MainMenu.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /**
 */
 Ox.MainMenu = function(options, self) {

source/js/Ox.Map.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Map = function(options, self) {
 
     var self = self || {}

source/js/Ox.MapImage.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.MapImage = function(options, self) {
 
     /**

source/js/Ox.MapMarker.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.MapMarker = function(options) {
 
     var options = Ox.extend({

source/js/Ox.MapPlace.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.MapPlace = function(options) {
 
     options = Ox.extend({

source/js/Ox.MapRectangle.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.MapRectangle = function(options, self) {
 
     var options = Ox.extend({

source/js/Ox.MapRectangleMarker.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.MapRectangleMarker = function(options, self) {
 
     var options = Ox.extend({

source/js/Ox.Menu.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /**
     options
         element         the element the menu is attached to

source/js/Ox.MenuItem.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.MenuItem = function(options, self) {
 
     var self = self || {},

source/js/Ox.OptionGroup.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.OptionGroup = function(items, min, max, property) {
 
     /*

source/js/Ox.Panel.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /**
 */
 Ox.Panel = function(options, self) {

source/js/Ox.Picker.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Picker = function(options, self) {
 
     var self = self || {},

source/js/Ox.PlaceInput.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.PlaceInput = function(options, self) {
 
     var self = $.extend(self || {}, {

source/js/Ox.PlacePicker.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.PlacePicker = function(options, self) {
 
     var self = $.extend(self || {}, {

source/js/Ox.Progressbar.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /**
 Ox.Progressbar
 */

source/js/Ox.Range.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Range = function(options, self) {
 
     /**

source/js/Ox.Request.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Request = function(options) {
 
     /***

source/js/Ox.Resizebar.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /**
 */
 Ox.Resizebar = function(options, self) {

source/js/Ox.Select.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Select = function(options, self) {
 
     // fixme: selected item needs attribute "checked", not "selected" ... that's strange

source/js/Ox.SmallTimeline.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.SmallTimeline = function(options, self) {
 
     var self = self || {},

source/js/Ox.SplitPanel.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /**
     options:
         elements: [{            array of one, two or three elements

source/js/Ox.TabPanel.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.TabPanel = function(options, self) {
     
 };

source/js/Ox.Tabbar.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /**
 */
 Ox.Tabbar = function(options, self) {

source/js/Ox.TextList.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.TextList = function(options, self) {
 
     // fixme: rename to TableList

source/js/Ox.Theme.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 // fixme: this should be Ox.Theme, and provide Ox.Theme.set(), Ox.Theme.load, etc.
 /**
     if name is given as argument, switch to this theme.
@@ -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/Ox.TimeInput.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.TimeInput = function(options, self) {
 
     // fixme: seconds get set even if options.seconds is false

source/js/Ox.Toolbar.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /**
     fixme: no need for this
 */

source/js/Ox.Tooltip.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Tooltip = function(options, self) {
 
     var self = self || {},

source/js/Ox.TreeList.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.TreeList = function(options, self) {
 
     var self = self || {},

source/js/Ox.URL.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 /***
 Ox.URL
 ***/

source/js/Ox.VideoEditorPlayer.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.VideoEditorPlayer = function(options, self) {
 
     var self = self || {},

source/js/Ox.VideoElement.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.VideoElement = function(options, self) {
 
     var self = self || {},

source/js/Ox.VideoPanelPlayer.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.VideoPanelPlayer = function(options, self) {
 
     var self = self || {},

source/js/Ox.VideoPlayer.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.VideoEditor = function(options, self) {
 
     var self = self || {},

source/js/Ox.Window.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.Window = function(options, self) {
 
     self = self || {},

source/js/Ox.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 // todo: check http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
 
 Ox = function(val) {

source/js/OxUI.js

@@ -1,4 +1,4 @@
-//vim: et:ts=4:sw=4:sts=4:ft=js
+// vim: et:ts=4:sw=4:sts=4:ft=js
 
 /*
 OxUI Loader
@@ -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();
             });