WIP: use es-modules

source/Ox.compat.js

@@ -0,0 +1,18 @@
+const init = [], initLoad = [];
+window.Ox = function(value) {
+    console.log("delay stuff until we are done")
+    init.push(value)
+};
+window.Ox.load = function() {
+    initLoad.push(arguments)
+};
+
+(async () => {
+  const module = await import('./Ox/index.js');
+  console.log("Ox was loaded", init);
+  init.forEach(value => Ox(value))
+  delete init
+  initLoad.forEach(arguments => Ox.load.apply(null, arguments))
+  delete initLoad
+})();
+

source/Ox/index.js

@@ -0,0 +1,65 @@
+'use strict';
+
+import Ox from './js/Namespace.js';
+
+import * as OxCore from './js/Core.js';
+import * as OxFunction from './js/Function.js';
+import * as OxPolyfill from './js/Polyfill.js';
+import * as OxArray from './js/Array.js';
+import * as OxString from './js/String.js';
+import * as OxCollection from './js/Collection.js';
+import * as OxMath from './js/Math.js';
+
+
+import * as OxAsync from './js/Async.js';
+import * as OxColor from './js/Color.js';
+import * as OxConstants from './js/Constants.js';
+import * as OxDate from './js/Date.js';
+import * as OxDOM from './js/DOM.js';
+import * as OxEncoding from './js/Encoding.js';
+import * as OxFormat from './js/Format.js';
+import * as OxGeo from './js/Geo.js';
+import * as OxHash from './js/Hash.js';
+import * as OxHTML from './js/HTML.js';
+import * as OxJavaScript from './js/JavaScript.js';
+import * as OxLocale from './js/Locale.js';
+import * as OxObject from './js/Object.js';
+import * as OxRegExp from './js/RegExp.js';
+import * as OxRequest from './js/Request.js';
+import * as OxType from './js/Type.js';
+import * as OxVideo from './js/Video.js';
+
+
+export default Ox;
+export { Ox };
+
+// For backward compatibility with global usage
+if (typeof globalThis !== 'undefined') {
+    globalThis.Ox = Ox;
+
+    /*@
+    Ox.documentReady <function> Calls a callback function once the DOM is ready
+        (callback) -> <b> If true, the document was ready
+        callback <f> Callback function
+    @*/
+    Ox.documentReady = (function() {
+        var callbacks = [];
+        document.onreadystatechange = globalThis.onload = function() {
+            if (document.readyState == 'complete') {
+                callbacks.forEach(function(callback) {
+                    callback();
+                });
+                document.onreadystatechange = globalThis.onload = null;
+            }
+        };
+        return function(callback) {
+            if (document.readyState == 'complete') {
+                callback();
+                return true;
+            } else {
+                callbacks.push(callback);
+                return false;
+            }
+        };
+    }());
+}

source/Ox/js/Array.js

@@ -1,5 +1,7 @@
 'use strict';
 
+import Ox from './Namespace.js';
+
 /*@
 Ox.api <f> Turns an array into a list API
     `Ox.api` takes an array and returns a function that allows you to run

source/Ox/js/Async.js

@@ -1,5 +1,7 @@
 'use strict';
 
+import Ox from './Namespace.js';
+
 (function() {
 
     function asyncMap(forEach, collection, iterator, that, callback) {

source/Ox/js/Collection.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.avg <f> Returns the average of an array's values, or an object's properties

source/Ox/js/Color.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.hsl <f> Takes RGB values and returns HSL values

source/Ox/js/Constants.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 //@ Ox.AMPM <[s]> ['AM', 'PM']
 Ox.AMPM = ['AM', 'PM'];
@@ -101,6 +102,8 @@ Ox.PATH = (function() {
             return src.replace(regexp, '');
         }
     }
+    // FIXME: fix path detection
+    return './source/';
 }());
 //@ Ox.MODE <s> Mode ('dev' or 'min')
 Ox.MODE = Ox.PATH.slice(0, -1).split('/').pop();

source/Ox/js/Core.js

@@ -2,15 +2,7 @@
 
 'use strict';
 
-/*@
+import Ox from './Namespace.js';
-Ox <f> The `Ox` object
-    See `Ox.wrap` for details.
-    (value) -> <o> wrapped value
-    value <*> Any value
-@*/
-this.Ox = function(value) {
-    return Ox.wrap(value);
-};
 
 /*@
 Ox.load <f> Loads OxJS and, optionally, one or more modules
@@ -76,20 +68,17 @@ Ox.load = function() {
         if (!length) {
             callback(true);
         } else {
-            Ox.forEach(modules, function(options, module) {
+            Ox.forEach(modules, async function(options, module) {
-                Ox.getFile(
+                console.log("load module!", module, options)
-                    Ox.PATH + module + '/' + module + '.js?' + Ox.VERSION,
+                const obj = await import('../../' + module + '/index.js?' + Ox.VERSION);
-                    function() {
+                Ox.load[module](options, function(success) {
-                        Ox.load[module](options, function(success) {
+                    succeeded += success;
-                            succeeded += success;
+                    if (++loaded == length) {
-                            if (++loaded == length) {
+                        Ox.setLocale(Ox.LOCALE, function() {
-                                Ox.setLocale(Ox.LOCALE, function() {
+                            callback(succeeded == length);
-                                    callback(succeeded == length);
-                                });
-                            }
                         });
                     }
-                );
+                });
             });
         }
     });
@@ -114,7 +103,7 @@ Ox.localStorage = function(namespace) {
     var localStorage;
     try {
         // this will fail if third party cookies/storage is not allowed
-        localStorage = window.localStorage || {};
+        localStorage = globalThis.localStorage || {};
         // FF 3.6 can't assign to or iterate over localStorage
         for (var key in localStorage) {}
         // In Safari (OS X or iOS) is in private browsing mode,
@@ -206,7 +195,7 @@ Ox.Log = (function() {
             args.unshift(
                 Ox.formatDate(date, '%H:%M:%S.') + (+date).toString().slice(-3)
             );
-            window.console && window.console.log && window.console.log.apply(window.console, args);
+            globalThis.console && globalThis.console.log && globalThis.console.log.apply(globalThis.console, args);
             ret = args.join(' ');
         }
         return ret;
@@ -268,7 +257,7 @@ Ox.print = function() {
     args.unshift(
         date.toString().split(' ')[4] + '.' + (+date).toString().slice(-3)
     );
-    window.console && window.console.log.apply(window.console, args);
+    globalThis.console && globalThis.console.log.apply(globalThis.console, args);
     return args.join(' ');
 };
 

source/Ox/js/DOM.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.$ <f> Generic HTML element, mimics jQuery
@@ -828,12 +829,12 @@ Ox.documentReady <function> Calls a callback function once the DOM is ready
 @*/
 Ox.documentReady = (function() {
     var callbacks = [];
-    document.onreadystatechange = window.onload = function() {
+    document.onreadystatechange = globalThis.onload = function() {
         if (document.readyState == 'complete') {
             callbacks.forEach(function(callback) {
                 callback();
             });
-            document.onreadystatechange = window.onload = null;
+            document.onreadystatechange = globalThis.onload = null;
         }
     };
     return function(callback) {

source/Ox/js/Date.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 //@ Ox.getDate <f> Get the day of a date, optionally UTC
 // see Ox.setSeconds for source code

source/Ox/js/Encoding.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.encodeBase26 <b> Encode a number as bijective base26

source/Ox/js/Format.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.formatArea <f> Formats a number of meters as square meters or kilometers

source/Ox/js/Function.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.cache <f> Memoize a function

source/Ox/js/Geo.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 (function() {
 

source/Ox/js/HTML.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 (function() {
 

source/Ox/js/Hash.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.oshash <f> Calculates oshash for a given file or blob object. Async.

source/Ox/js/JavaScript.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.doc <f> Generates documentation for annotated JavaScript

source/Ox/js/Locale.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 (function() {
 

source/Ox/js/Math.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.acosh <f> Inverse hyperbolic cosine

source/Ox/js/Namespace.js

@@ -0,0 +1,14 @@
+'use strict';
+
+
+/*@
+Ox <f> The `Ox` object
+    See `Ox.wrap` for details.
+    (value) -> <o> wrapped value
+    value <*> Any value
+@*/
+export const Ox = function(value) {
+    return Ox.wrap(value)
+};
+
+export default Ox;

source/Ox/js/Object.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.extend <function> Extends an object with one or more other objects

source/Ox/js/Polyfill.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 (function(window) {
 
@@ -427,4 +428,4 @@
         }
     }
 
-}(this));
+}(globalThis));

source/Ox/js/RegExp.js

@@ -1,3 +1,5 @@
+import Ox from './Namespace.js';
+
 /*@
 Ox.escapeRegExp <f> Escapes a string for use in a regular expression
     (str) -> <r> Escaped string

source/Ox/js/Request.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.get <f> Get a remote resource

source/Ox/js/String.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.char <f> Alias for String.fromCharCode
@@ -265,17 +266,30 @@ Ox.parseURL <f> Takes a URL, returns its components
     '?a=0&b=1'
 @*/
 Ox.parseURL = (function() {
-    var a = document.createElement('a'),
+    const keys = [
-        keys = ['hash', 'host', 'hostname', 'origin',
+        'hash', 'host', 'hostname', 'origin',
-            'pathname', 'port', 'protocol', 'search'];
+        'pathname', 'port', 'protocol', 'search'
-    return function(string) {
+    ];
-        var ret = {};
+    if (typeof document == 'undefined') {
-        a.href = string;
+        return function(string) {
-        keys.forEach(function(key) {
+            const a = new URL(string);
-            ret[key] = a[key];
+            var ret = {};
-        });
+            keys.forEach(function(key) {
-        return ret;
+                ret[key] = a[key];
-    };
+            });
+            return ret;
+        }
+    } else {
+        var a = document.createElement('a');
+        return function(string) {
+            var ret = {};
+            a.href = string;
+            keys.forEach(function(key) {
+                ret[key] = a[key];
+            });
+            return ret;
+        };
+    }
 }());
 
 // FIXME: can we get rid of this?

source/Ox/js/Type.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.checkType <f> Throws a TypeError if a value is not of a given type

source/Ox/js/Video.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './Namespace.js';
 
 /*@
 Ox.getVideoFormat <f> Get supported video format

source/UI/UI.js

@@ -69,7 +69,9 @@ Ox.load.UI = function(options, callback) {
         }
     });
 
-    Ox.UI = {};
+    console.log("this happens?")
+
+    //Ox.UI = Ox.UI || {};
 
     Ox.UI.LoadingScreen = (function() {
 

source/UI/index.js

@@ -0,0 +1,429 @@
+'use strict';
+
+import Ox from './../Ox/js/Namespace.js';
+Ox.UI = Ox.UI || {};
+
+import * as AudioAudioElement from './js/Audio/AudioElement.js';
+import * as AudioAudioPlayer from './js/Audio/AudioPlayer.js';
+import * as BarBar from './js/Bar/Bar.js';
+import * as BarProgressbar from './js/Bar/Progressbar.js';
+import * as BarResizebar from './js/Bar/Resizebar.js';
+import * as BarTabbar from './js/Bar/Tabbar.js';
+import * as CalendarCalendarEditor from './js/Calendar/CalendarEditor.js';
+import * as CalendarCalendar from './js/Calendar/Calendar.js';
+import * as CodeDocPage from './js/Code/DocPage.js';
+import * as CodeDocPanel from './js/Code/DocPanel.js';
+import * as CodeExamplePage from './js/Code/ExamplePage.js';
+import * as CodeExamplePanel from './js/Code/ExamplePanel.js';
+import * as CodeSourceViewer from './js/Code/SourceViewer.js';
+import * as CodeSyntaxHighlighter from './js/Code/SyntaxHighlighter.js';
+import * as CoreAPI from './js/Core/API.js';
+import * as CoreApp from './js/Core/App.js';
+import * as CoreClipboard from './js/Core/Clipboard.js';
+import * as CoreContainer from './js/Core/Container.js';
+import * as CoreCookies from './js/Core/Cookies.js';
+import * as CoreElement from './js/Core/Element.js';
+import * as CoreEvent from './js/Core/Event.js';
+import * as CoreFocus from './js/Core/Focus.js';
+import * as CoreFullscreen from './js/Core/Fullscreen.js';
+import * as CoreGarbageCollection from './js/Core/GarbageCollection.js';
+import * as CoreHistory from './js/Core/History.js';
+import * as CoreLoadingIcon from './js/Core/LoadingIcon.js';
+import * as CoreLoadingScreen from './js/Core/LoadingScreen.js';
+import * as CoreRequest from './js/Core/Request.js';
+import * as CoreTheme from './js/Core/Theme.js';
+import * as CoreUI from './js/Core/UI.js';
+import * as CoreURL from './js/Core/URL.js';
+import * as FormArrayEditable from './js/Form/ArrayEditable.js';
+import * as FormArrayInput from './js/Form/ArrayInput.js';
+import * as FormButtonGroup from './js/Form/ButtonGroup.js';
+import * as FormButton from './js/Form/Button.js';
+import * as FormCheckboxGroup from './js/Form/CheckboxGroup.js';
+import * as FormCheckbox from './js/Form/Checkbox.js';
+import * as FormColorInput from './js/Form/ColorInput.js';
+import * as FormColorPicker from './js/Form/ColorPicker.js';
+import * as FormDateInput from './js/Form/DateInput.js';
+import * as FormDateTimeInput from './js/Form/DateTimeInput.js';
+import * as FormEditableContent from './js/Form/EditableContent.js';
+import * as FormEditable from './js/Form/Editable.js';
+import * as FormFileButton from './js/Form/FileButton.js';
+import * as FormFileInput from './js/Form/FileInput.js';
+import * as FormFilter from './js/Form/Filter.js';
+import * as FormFormElementGroup from './js/Form/FormElementGroup.js';
+import * as FormFormItem from './js/Form/FormItem.js';
+import * as FormForm from './js/Form/Form.js';
+import * as FormFormPanel from './js/Form/FormPanel.js';
+import * as FormInputGroup from './js/Form/InputGroup.js';
+import * as FormInput from './js/Form/Input.js';
+import * as FormInsertHTMLDialog from './js/Form/InsertHTMLDialog.js';
+import * as FormLabel from './js/Form/Label.js';
+import * as FormObjectArrayInput from './js/Form/ObjectArrayInput.js';
+import * as FormObjectInput from './js/Form/ObjectInput.js';
+import * as FormOptionGroup from './js/Form/OptionGroup.js';
+import * as FormPicker from './js/Form/Picker.js';
+import * as FormPlaceInput from './js/Form/PlaceInput.js';
+import * as FormPlacePicker from './js/Form/PlacePicker.js';
+import * as FormRange from './js/Form/Range.js';
+import * as FormSelectInput from './js/Form/SelectInput.js';
+import * as FormSelect from './js/Form/Select.js';
+import * as FormSpreadsheet from './js/Form/Spreadsheet.js';
+import * as FormTimeInput from './js/Form/TimeInput.js';
+import * as ImageImageElement from './js/Image/ImageElement.js';
+import * as ImageImageViewer from './js/Image/ImageViewer.js';
+import * as ListChart from './js/List/Chart.js';
+import * as ListColumnList from './js/List/ColumnList.js';
+import * as ListCustomList from './js/List/CustomList.js';
+import * as ListIconItem from './js/List/IconItem.js';
+import * as ListIconList from './js/List/IconList.js';
+import * as ListInfoList from './js/List/InfoList.js';
+import * as ListListItem from './js/List/ListItem.js';
+import * as ListList from './js/List/List.js';
+import * as ListSortList from './js/List/SortList.js';
+import * as ListTableList from './js/List/TableList.js';
+import * as ListTreeList from './js/List/TreeList.js';
+import * as MapMapEditor from './js/Map/MapEditor.js';
+import * as MapMapImage from './js/Map/MapImage.js';
+import * as MapMap from './js/Map/Map.js';
+import * as MapMapMarkerImage from './js/Map/MapMarkerImage.js';
+import * as MapMapMarker from './js/Map/MapMarker.js';
+import * as MapMapPlace from './js/Map/MapPlace.js';
+import * as MapMapRectangle from './js/Map/MapRectangle.js';
+import * as MapMapRectangleMarker from './js/Map/MapRectangleMarker.js';
+import * as MenuMainMenu from './js/Menu/MainMenu.js';
+import * as MenuMenuButton from './js/Menu/MenuButton.js';
+import * as MenuMenuItem from './js/Menu/MenuItem.js';
+import * as MenuMenu from './js/Menu/Menu.js';
+import * as PanelCollapsePanel from './js/Panel/CollapsePanel.js';
+import * as PanelSlidePanel from './js/Panel/SlidePanel.js';
+import * as PanelSplitPanel from './js/Panel/SplitPanel.js';
+import * as PanelTabPanel from './js/Panel/TabPanel.js';
+import * as VideoAnnotationFolder from './js/Video/AnnotationFolder.js';
+import * as VideoAnnotationPanel from './js/Video/AnnotationPanel.js';
+import * as VideoBlockVideoTimeline from './js/Video/BlockVideoTimeline.js';
+import * as VideoClipPanel from './js/Video/ClipPanel.js';
+import * as VideoLargeVideoTimeline from './js/Video/LargeVideoTimeline.js';
+import * as VideoSmallVideoTimelineImage from './js/Video/SmallVideoTimelineImage.js';
+import * as VideoSmallVideoTimeline from './js/Video/SmallVideoTimeline.js';
+import * as VideoVideoAnnotationPanel from './js/Video/VideoAnnotationPanel.js';
+import * as VideoVideoEditPanel from './js/Video/VideoEditPanel.js';
+import * as VideoVideoElement from './js/Video/VideoElement.js';
+import * as VideoVideoPlayer from './js/Video/VideoPlayer.js';
+import * as VideoVideoPlayerMenu from './js/Video/VideoPlayerMenu.js';
+import * as VideoVideoPlayerPanel from './js/Video/VideoPlayerPanel.js';
+import * as VideoVideoPreview from './js/Video/VideoPreview.js';
+import * as VideoVideoTimelinePanel from './js/Video/VideoTimelinePanel.js';
+import * as VideoVideoTimelinePlayer from './js/Video/VideoTimelinePlayer.js';
+import * as VideoYouTubeElement from './js/Video/YouTubeElement.js';
+import * as WindowDialog from './js/Window/Dialog.js';
+import * as WindowLayer from './js/Window/Layer.js';
+import * as WindowSortDialog from './js/Window/SortDialog.js';
+import * as WindowTooltip from './js/Window/Tooltip.js';
+
+
+
+export const UI = Ox.UI;
+export default UI;
+
+if (typeof globalThis !== 'undefined') {
+    Ox.load.UI = function(options, callback) {
+
+        options = Ox.extend({
+            hideScreen: true,
+            loadCSS: true,
+            loadThemes: true,
+            showScreen: false,
+            theme: 'oxlight'
+        }, options);
+
+        var browsers = [
+                {
+                    name: 'Chrome Frame',
+                    url: 'http://www.google.com/chromeframe/'
+                },
+                {
+                    name: 'Chrome',
+                    regexp: /Chrome\/(\d+)\./,
+                    url: 'http://www.google.com/chrome/',
+                    version: 10
+                },
+                {
+                    name: 'Firefox',
+                    regexp: /Firefox\/(\d+)\./,
+                    url: 'http://www.mozilla.org/firefox/',
+                    version: 4
+                },
+                {
+                    name: 'Safari',
+                    regexp: /Version\/(\d+).*? Safari/,
+                    url: 'http://www.apple.com/safari/',
+                    version: 5
+                },
+                {
+                    name: 'WebKit',
+                    regexp: /AppleWebKit\/(\d+)\./,
+                    version: 534
+                },
+                {
+                    name: 'Googlebot',
+                    regexp: /Googlebot\/(\d+)\./,
+                    version: 2
+                },
+                {
+                    name: 'YandexBot',
+                    regexp: /YandexBot\/(\d+)\./,
+                    version: 3
+                },
+                {
+                    name: 'YandexMobileBot',
+                    regexp: /YandexMobileBot\/(\d+)\./,
+                    version: 3
+                },
+                {
+                    name: 'Internet Explorer',
+                    url: 'http://windows.microsoft.com/en-US/internet-explorer/products/ie/home',
+                    version: 9
+                }
+            ],
+            browserSupported = false,
+            isInternetExplorer = /MSIE/.test(navigator.userAgent);
+
+        browsers.forEach(function(browser) {
+            var match = browser.regexp && browser.regexp.exec(navigator.userAgent);
+            if (match && match[1] >= browser.version) {
+                browserSupported = true;
+            }
+        });
+
+        Ox.UI.LoadingScreen = (function() {
+
+            var $body = Ox.$('body'),
+                $screen = Ox.$('<div>')
+                    .addClass('OxLoadingScreen')
+                    .css({
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        padding: '4px',
+                        background: 'rgb(' + (
+                            options.theme == 'oxlight' ? '240, 240, 240'
+                                : options.theme == 'oxmedium' ? '144, 144, 144'
+                                : '16, 16, 16'
+                        ) + ')',
+                        opacity: 1,
+                        zIndex: 1000
+                    }),
+                css = {
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    margin: 'auto',
+                    MozUserSelect: 'none',
+                    WebkitUserSelect: 'none'
+                },
+                loadingInterval,
+                $icon,
+                deg = 0;
+
+            browserSupported ? showIcon() : showWarning();
+
+            function showIcon() {
+                /*
+                // SVG transform performs worse than CSS transform
+                var src = Ox.PATH + 'UI/themes/' + options.theme + '/svg/symbolLoadingAnimated.svg'
+                Ox.getFile(src, function() {
+                    Ox.$('<img>')
+                        .attr({
+                            src: src
+                        })
+                        .css(Ox.extend({
+                            width: '32px',
+                            height: '32px'
+                        }, css))
+                        .on({
+                            mousedown: function(e) {
+                                e.preventDefault();
+                            }
+                        })
+                        .appendTo(div);
+                });
+                */
+                var src = Ox.PATH + 'UI/themes/' + options.theme + '/svg/symbolLoading.svg'
+                Ox.getFile(src, function() {
+                    $icon = Ox.$('<img>')
+                        .attr({
+                            src: src
+                        })
+                        .css(Ox.extend({
+                            width: '32px',
+                            height: '32px'
+                        }, css))
+                        .on({
+                            mousedown: function(e) {
+                                e.preventDefault()
+                            }
+                        })
+                        .appendTo($screen);
+                });
+            }
+
+            function showWarning() {
+                var counter = 0;
+                browsers = browsers.filter(function(browser) {
+                    return browser.url;
+                });
+                isInternetExplorer ? browsers.pop() : browsers.shift();
+                browsers.forEach(function(browser) {
+                    browser.src = Ox.PATH + 'UI/png/browser' + browser.name.replace(' ', '') + '128.png';
+                    Ox.getFile(browser.src, function() {
+                        ++counter == browsers.length && showIcons();
+                    });
+                });
+                function showIcons() {
+                    var $box = Ox.$('<div>')
+                        .css(Ox.extend({
+                            width: (browsers.length * 72) + 'px',
+                            height: '72px'
+                        }, css))
+                        .appendTo($screen);
+                    browsers.forEach(function(browser, i) {
+                        Ox.$('<a>')
+                            .attr({
+                                href: browser.url,
+                                title: (
+                                    browser.name == 'Chrome Frame'
+                                    ? Ox._('Install') : Ox._('Download')
+                                ) + ' ' + browser.name
+                            })
+                            .css({
+                                position: 'absolute',
+                                left: (i * 72) + 'px',
+                                width: '72px',
+                                height: '72px'
+                            })
+                            .append(
+                                Ox.$('<img>')
+                                    .attr({
+                                        src: browser.src
+                                    })
+                                    .css(Ox.extend({
+                                        width: '64px',
+                                        height: '64px',
+                                        border: 0,
+                                        cursor: 'pointer'
+                                    }, css))
+                                    .on({
+                                        mousedown: function(e) {
+                                            e.preventDefault();
+                                        }
+                                    })
+                            )
+                            .appendTo($box);
+                    });
+                }
+            }
+
+            return {
+                hide: function() {
+                    $('.OxLoadingScreen').animate({
+                        opacity: browserSupported ? 0 : 0.9
+                    }, 1000, function() {
+                        if (browserSupported) {
+                            clearInterval(loadingInterval);
+                            loadingInterval = null;
+                            $screen.remove();
+                        } else {
+                            $screen.on({
+                                click: function() {
+                                    $screen.remove();
+                                }
+                            });
+                        }
+                    });
+                },
+                show: function() {
+                    if (!loadingInterval) {
+                        loadingInterval = setInterval(function() {
+                            if ($icon) {
+                                deg = (deg + 30) % 360;
+                                $icon.css({
+                                    MozTransform: 'rotate(' + deg + 'deg)',
+                                    OTransform: 'rotate(' + deg + 'deg)',
+                                    WebkitTransform: 'rotate(' + deg + 'deg)',
+                                    transform: 'rotate(' + deg + 'deg)'
+                                });
+                            }
+                        }, 83);
+                    }
+                    $screen.appendTo($body);
+                }
+            };
+
+        }());
+
+        Ox.documentReady(function() {
+            Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(options.theme));
+            options.showScreen && Ox.UI.LoadingScreen.show();
+        });
+
+        loadUI();
+
+        function loadUI() {
+
+            var path = Ox.PATH + 'UI/jquery/jquery.js?' + Ox.VERSION;
+            Ox.getFile(path, function() {
+                path = Ox.PATH + 'UI/json/UI.json?' + Ox.VERSION;
+                Ox.getJSON(path, function(data) {
+                    var counter = 0, length;
+                    if (!options.loadCSS) {
+                        data.files = data.files.filter(function(file) {
+                            return !Ox.endsWith(file, '.css');
+                        });
+                    }
+                    if (!options.loadThemes) {
+                        data.files = data.files.filter(function(file) {
+                            return !Ox.contains(file, '/themes/');
+                        });
+                    }
+                    length = data.files.length;
+                    Ox.UI.IMAGES = data.images;
+                    Ox.UI.THEMES = {};
+                    data.files.forEach(function(file) {
+                        path = Ox.PATH + file + '?' + Ox.VERSION;
+                        if (/\.jsonc$/.test(file)) {
+                            Ox.getJSONC(path, function(data) {
+                                var theme = /\/themes\/(\w+)\/json\//.exec(file)[1];
+                                Ox.UI.THEMES[theme] = data;
+                                ++counter == length && initUI();
+                            });
+                        } else {
+                            Ox.getFile(path, function() {
+                                ++counter == length && initUI();
+                            });
+                        }
+                    });
+                });
+            });
+
+        }
+
+        function initUI() {
+
+            Ox.documentReady(function() {
+                // fixme: is this the right place to do this?
+                $.browser.mozilla && Ox.$document.on('dragstart', function() {
+                     return false;
+                });
+                if (options.showScreen && options.hideScreen) {
+                    Ox.UI.LoadingScreen.hide();
+                }
+                callback(browserSupported);
+            });
+
+        }
+
+    };
+}

source/UI/js/Audio/AudioElement.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.AudioElement <f> AudioElement Object

source/UI/js/Audio/AudioPlayer.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.AudioPlayer <f> Generic Audio Player

source/UI/js/Bar/Bar.js

@@ -1,4 +1,6 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
+
 /*@
 Ox.Bar <f> Bar
     options <o> Options object

source/UI/js/Bar/Progressbar.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Progressbar <f> Progress Bar

source/UI/js/Bar/Resizebar.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 /*@
 Ox.Resizebar <f> Resizebar
     options <o> Options object

source/UI/js/Bar/Tabbar.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 /*@
 Ox.Tabbar <f> Tabbar
     options <o> Options object

source/UI/js/Calendar/Calendar.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Calendar <f> Basic calendar object

source/UI/js/Calendar/CalendarEditor.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.CalendarEditor <f> Calendar Editor

source/UI/js/Code/DocPage.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.DocPage <f> DocPage

source/UI/js/Code/DocPanel.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.DocPanel <f> Documentation Panel

source/UI/js/Code/ExamplePage.js

@@ -1,4 +1,5 @@
 'use strict'
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.ExamplePage <f> Example Page

source/UI/js/Code/ExamplePanel.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.ExamplePanel <f> Example Panel

source/UI/js/Code/SourceViewer.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.SourceViewer <f> Source Viewer

source/UI/js/Code/SyntaxHighlighter.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.SyntaxHighlighter <f> Syntax Highlighter

source/UI/js/Core/API.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.API <f> Remote API controller

source/UI/js/Core/App.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.App <f> Basic application instance that communicates with a JSON API
@@ -75,12 +76,12 @@ Ox.App = function(options) {
             screen: screen,
             time: (+new Date() - self.time) / 1000,
             window: {
-                innerHeight: window.innerHeight,
+                innerHeight: globalThis.innerHeight,
-                innerWidth: window.innerWidth,
+                innerWidth: globalThis.innerWidth,
-                outerHeight: window.outerHeight,
+                outerHeight: globalThis.outerHeight,
-                outerWidth: window.outerWidth,
+                outerWidth: globalThis.outerWidth,
-                screenLeft: window.screenLeft,
+                screenLeft: globalThis.screenLeft,
-                screenTop: window.screenTop
+                screenTop: globalThis.screenTop
             }
         };
     }

source/UI/js/Core/Clipboard.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Clipboard <o> Basic clipboard handler

source/UI/js/Core/Container.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 // fixme: wouldn't it be better to let the elements be,
 // rather then $element, $content, and potentially others,

source/UI/js/Core/Cookies.js

@@ -1,3 +1,5 @@
+import Ox from './../../../Ox/js/Namespace.js';
+
 Ox.Cookies = function() {
     var name, value, cookies;
     if (arguments.length == 1) {

source/UI/js/Core/Element.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 (function(_) {
     var noTooltipEvents = {};

source/UI/js/Core/Event.js

@@ -1,3 +1,5 @@
+import Ox from './../../../Ox/js/Namespace.js';
+
 (function() {
 
     var chars = {

source/UI/js/Core/Focus.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Focus <o> Basic focus controller

source/UI/js/Core/Fullscreen.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Fullscreen <o> Fullscreen controller

source/UI/js/Core/GarbageCollection.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.GarbageCollection <f> GarbageCollection

source/UI/js/Core/History.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 Ox.History = function(options) {
 

source/UI/js/Core/LoadingIcon.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.LoadingIcon <f> Loading Icon Element

source/UI/js/Core/LoadingScreen.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.LoadingScreen <f> Simple loading screen

source/UI/js/Core/Request.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Request <o> Basic request controller

source/UI/js/Core/Theme.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Theme <f> get/set theme

source/UI/js/Core/UI.js

@@ -1,4 +1,8 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
+
+Ox.UI = Ox.UI || {};
+console.log("Ox", Ox, Ox.UI)
 
 Ox.documentReady(function() {
     // FIXME: use Ox.$foo everywhere!
@@ -16,10 +20,11 @@ Ox.documentReady(function() {
 Ox.$elements = {};
 
 //@ Ox.UI.DIMENSIONS <o> Names of horizontal and vertical dimensions
-Ox.DIMENSIONS = Ox.UI.DIMENSIONS = {
+Ox.UI.DIMENSIONS = {
     horizontal: ['width', 'height'],
     vertical: ['height', 'width']
 };
+Ox.DIMENSIONS = Ox.UI.DIMENSIONS;
 
 //@ Ox.UI.EDGES <o> Names of horizontal and vertical edges
 Ox.EDGES = Ox.UI.EDGES = {

source/UI/js/Core/URL.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.URL <f> URL controller

source/UI/js/Form/ArrayEditable.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.ArrayEditable <f> Array Editable

source/UI/js/Form/ArrayInput.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.ArrayInput <f> Array input

source/UI/js/Form/Button.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Button <f> Button Object

source/UI/js/Form/ButtonGroup.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.ButtonGroup <f> ButtonGroup Object

source/UI/js/Form/Checkbox.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Checkbox <f> Checkbox Element

source/UI/js/Form/CheckboxGroup.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.CheckboxGroup <f> CheckboxGroup Object

source/UI/js/Form/ColorInput.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.ColorInput <f> ColorInput Element

source/UI/js/Form/ColorPicker.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.ColorPicker <f> ColorPicker Element

source/UI/js/Form/DateInput.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.DateInput <f> DateInput Element

source/UI/js/Form/DateTimeInput.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.DateTimeInput <f> DateTimeInput Element

source/UI/js/Form/Editable.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Editable <f> Editable element

source/UI/js/Form/EditableContent.js

@@ -1,3 +1,5 @@
+import Ox from './../../../Ox/js/Namespace.js';
+
 Ox.EditableContent = function(options, self) {
 
     self = self || {};

source/UI/js/Form/FileButton.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.FileButton <f> File Button

source/UI/js/Form/FileInput.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.FileInput <f> File Input

source/UI/js/Form/Filter.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Filter <f> Filter Object

source/UI/js/Form/Form.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Form <f> Form Object

source/UI/js/Form/FormElementGroup.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.FormElementGroup <f> FormElementGroup Element

source/UI/js/Form/FormItem.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.FormItem <f> FormItem Element, wraps form element with an error message

source/UI/js/Form/FormPanel.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.FormPanel <f> Form Panel

source/UI/js/Form/Input.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Input <f> Input Element

source/UI/js/Form/InputGroup.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.InputGroup <f> InputGroup Object

source/UI/js/Form/InsertHTMLDialog.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.InsertHTMLDialog <f> Insert HTML Dialog

source/UI/js/Form/Label.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Label <f> Label element

source/UI/js/Form/ObjectArrayInput.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.ObjectArrayInput <f> Object Array Input

source/UI/js/Form/ObjectInput.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.ObjectInput <f> Object Input

source/UI/js/Form/OptionGroup.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.OptionGroup <f> OptionGroup

source/UI/js/Form/Picker.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Picker <f> Picker Object

source/UI/js/Form/PlaceInput.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.PlaceInput <f> PlaceInput Object

source/UI/js/Form/PlacePicker.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.PlacePicker <f> PlacePicker Object

source/UI/js/Form/Range.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Range <f> Range Object

source/UI/js/Form/Select.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Select <f> Select Object

source/UI/js/Form/SelectInput.js

@@ -1,4 +1,6 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
+
 //FIXME: does not work without options
 /*@
 Ox.SelectInput <f> Select Input

source/UI/js/Form/Spreadsheet.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Spreadsheet <f> Spreadsheet

source/UI/js/Form/TimeInput.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.TimeInput <f> TimeInput Object

source/UI/js/Image/ImageElement.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.ImageElement <f> Simple image element with loading indication

source/UI/js/Image/ImageViewer.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.ImageViewer <f> Image Viewer

source/UI/js/List/Chart.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.Chart <f> Bar Chart

source/UI/js/List/ColumnList.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.ColumnList <f> Column List Widget

source/UI/js/List/CustomList.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.CustomList <f> Custom List Widget

source/UI/js/List/IconItem.js

@@ -1,4 +1,5 @@
 'use strict';
+import Ox from './../../../Ox/js/Namespace.js';
 
 /*@
 Ox.IconItem <f> IconItem Object