Ox.load(), and adding moved files

source/css/Ox.UI.css

@@ -1,6 +1,6 @@
-@import url("OxUI.classic.css");
-@import url("OxUI.modern.css");
-@import url("OxUI.future.css");
+@import url("Ox.UI.classic.css");
+@import url("Ox.UI.modern.css");
+@import url("Ox.UI.future.css");
 
 /*
 ================================================================================

source/js/Ox.UI/Calendar/Ox.Calendar.js

@@ -31,65 +31,65 @@ Ox.Calendar = function(options, self) {
             id: 'millennium',
             seconds: 365242.5 * 86400,
             date: function(i) {
-                return new Date((i + 1) + '000');
+                return '01/01/' + (i + 1) + '000 UTC';
             },
             name: function(i) {
                 return Ox.formatOrdinal(i + 2) + ' millennium';
             },
             value: function(date) {
-                return Math.floor(date.getFullYear() / 1000) - 1;
+                return Math.floor(date.getUTCFullYear() / 1000) - 1;
             }
         },
         {
             id: 'century',
             seconds: 36524.25 * 86400,
             date: function(i) {
-                return new Date((i + 19) + '00');
+                return '01/01/' + (i + 19) + '00 UTC';
             },
             name: function(i) {
                 return Ox.formatOrdinal(i + 20) + ' century';
             },
             value: function(date) {
-                return Math.floor(date.getFullYear() / 100) - 19;
+                return Math.floor(date.getUTCFullYear() / 100) - 19;
             }
         },
         {
             id: 'decade',
             seconds: 3652.425 * 86400,
             date: function(i) {
-                return (i + 197) + '0'
+                return '01/01/' + (i + 197) + '0 UTC'
             },
             name: function(i) {
                 return (i + 197) + '0s'
             },
             value: function(date) {
-                return Math.floor(date.getFullYear() / 10) - 197;
+                return Math.floor(date.getUTCFullYear() / 10) - 197;
             }
         },
         {
             id: 'year',
             seconds: 365.2425 * 86400,
             date: function(i) {
-                return (i + 1970) + '';
+                return '01/01/' + (i + 1970) + ' UTC';
             },
             name: function(i) {
                 return (i + 1970) + '';
             },
             value: function(date) {
-                return date.getFullYear() - 1970;
+                return date.getUTCFullYear() - 1970;
             }
         },
         {
             id: 'month',
             seconds: 365.2425 / 12 * 86400,
             date: function(i) {
-                return (Math.floor(i / 12) + 1970) + '-' + (Ox.mod(i, 12) + 1);
+                return (Ox.mod(i, 12) + 1) + '/01/' + (Math.floor(i / 12) + 1970) + ' UTC';
             },
             name: function(i) {
                 return Ox.SHORT_MONTHS[Ox.mod(i, 12)] + ' ' + Math.floor(i / 12 + 1970)
             },
             value: function(date) {
-                return (date.getFullYear() - 1970) * 12 + date.getMonth();
+                return (date.getUTCFullYear() - 1970) * 12 + date.getUTCMonth();
             }
         },
         {
@@ -102,19 +102,17 @@ Ox.Calendar = function(options, self) {
                 return Ox.formatDate(new Date((i * 7 - 3) * 86400000), '%a, %b %e');
             },
             value: function(date) {
-                return Math.floor((+date / 86400000 + 4) / 7);
+                return Math.floor((date / 86400000 + 4) / 7);
             }
         },
         {
             id: 'day',
             seconds: 86400,
             date: function(i) {
-                // adjust for timezone difference
-                // fixme: may still be off
-                return i * 86400000 + Ox.TIMEZONE_OFFSET;
+                return i * 86400000;
             },
             name: function(i) {
-                return Ox.formatDate(new Date(i * 86400000), '%b %e, %Y');
+                return Ox.formatDate(new Date(i * 86400000), '%b %e, %Y', true);
             },
             value: function(date) {
                 return Math.floor(date / 86400000);
@@ -124,13 +122,13 @@ Ox.Calendar = function(options, self) {
             id: 'six_hours',
             seconds: 21600,
             date: function(i) {
-                return i * 21600000 + Ox.TIMEZONE_OFFSET;
+                return i * 21600000;
             },
             name: function(i) {
-                return Ox.formatDate(new Date(i * 21600000 + Ox.TIMEZONE_OFFSET), '%b %e, %H:00');
+                return Ox.formatDate(new Date(i * 21600000), '%b %e, %H:00', true);
             },
             value: function(date) {
-                return Math.floor((date - Ox.TIMEZONE_OFFSET) / 21600000);
+                return Math.floor(date / 21600000);
             }
         },
         {
@@ -140,7 +138,7 @@ Ox.Calendar = function(options, self) {
                 return i * 3600000;
             },
             name: function(i) {
-                return Ox.formatDate(new Date(i * 3600000), '%b %e, %H:00');
+                return Ox.formatDate(new Date(i * 3600000), '%b %e, %H:00', true);
             },
             value: function(date) {
                 return Math.floor(date / 3600000);
@@ -153,7 +151,7 @@ Ox.Calendar = function(options, self) {
                 return i * 300000;
             },
             name: function(i) {
-                return Ox.formatDate(new Date(i * 300000), '%b %e, %H:%M');
+                return Ox.formatDate(new Date(i * 300000), '%b %e, %H:%M', true);
             },
             value: function(date) {
                 return Math.floor(date / 300000);
@@ -166,7 +164,7 @@ Ox.Calendar = function(options, self) {
                 return i * 60000;
             },
             name: function(i) {
-                return Ox.formatDate(new Date(i * 60000), '%b %e, %H:%M');
+                return Ox.formatDate(new Date(i * 60000), '%b %e, %H:%M', true);
             },
             value: function(date) {
                 return Math.floor(date / 60000);
@@ -179,7 +177,7 @@ Ox.Calendar = function(options, self) {
                 return i * 5000;
             },
             name: function(i) {
-                return Ox.formatDate(new Date(i * 5000), '%H:%M:%S');
+                return Ox.formatDate(new Date(i * 5000), '%H:%M:%S', true);
             },
             value: function(date) {
                 return Math.floor(date / 5000);
@@ -192,7 +190,7 @@ Ox.Calendar = function(options, self) {
                 return i * 1000;
             },
             name: function(i) {
-                return Ox.formatDate(new Date(i * 1000), '%H:%M:%S');
+                return Ox.formatDate(new Date(i * 1000), '%H:%M:%S', true);
             },
             value: function(date) {
                 return Math.floor(date / 1000);
@@ -623,7 +621,7 @@ Ox.Calendar = function(options, self) {
         renderTimelines();
         renderDates();
         self.$statusbar.html(
-            Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S %s')
+            Ox.formatDate(self.options.date, '%a, %b %e, %Y, %H:%M:%S (%s)', true)
         );
     }
 

source/js/Ox.UI/Core/Ox.JQueryElement.js

@@ -1,5 +1,9 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-// Basic jQuery element
+
+/***
+Basic jQuery element
+***/
+
 Ox.JQueryElement = function($element) {
     var that = this;
     that.id = Ox.uid();
@@ -10,6 +14,7 @@ Ox.JQueryElement = function($element) {
     Ox.UI.elements[that.id] = that;
     return that;
 };
+
 Ox.forEach($('<div>'), function(val, key) {
     if (Ox.isFunction(val)) {
         Ox.JQueryElement.prototype[key] = function() {
@@ -30,4 +35,4 @@ Ox.forEach($('<div>'), function(val, key) {
                     Ox.UI.elements[id] : ret;
         };
     }
-});
+});

source/js/Ox.UI/Core/Ox.Keyboard.js

@@ -181,6 +181,7 @@
             bufferTime = time;
         }
         focused !== null && Ox.UI.elements[focused].triggerEvent('key_' + key);
+        // fixme: oxdb context browser suggests we should add left and right keys here
         if (['down', 'space', 'up'].indexOf(key) > -1 && !Ox.UI.elements[focused].hasClass('OxInput')) {
             // prevent chrome from scrolling
             return false;

source/js/Ox.UI/Ox.UI.js

@@ -0,0 +1,299 @@
+Ox.load.UI = function(options, callback) {
+
+    options = Ox.extend({
+        hideScreen: true,
+        showScreen: false,
+        theme: 'classic'
+    }, options);
+
+    var browsers = [
+            {
+                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
+            }
+        ],
+        browserSupported = false;
+
+    browsers.forEach(function(browser) {
+        var match = browser.regexp(navigator.userAgent);
+        if (match && match[1] >= browser.version) {
+            browserSupported = true;
+        }
+    });
+
+    Ox.documentReady(function() {
+        options.showScreen && showScreen();
+    });
+
+    loadFiles();
+
+    function showScreen() {
+
+        Ox.print('showScreen')
+
+        var body = Ox.element('body')
+                .addClass('OxTheme' + Ox.toTitleCase(options.theme)),
+            css = {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0,
+                margin: 'auto',
+                MozUserSelect: 'none',
+                WebkitUserSelect: 'none'
+            },
+            div = Ox.element('<div>')
+                .addClass('OxLoadingScreen')
+                .css({
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    padding: '4px',
+                    background: 'rgb(' + (
+                        options.theme == 'classic' ? '240, 240, 240' : '16, 16, 16')
+                    + ')',
+                    opacity: 1,
+                    zIndex: 1000
+                })
+                .appendTo(body);
+
+        browserSupported ? showIcon() : showWarning(); 
+
+        function showIcon() {
+            // fixme: directory should be 'Ox.UI. ...'
+            var src = Ox.PATH + 'svg/ox.ui.' + options.theme + '/symbolLoading.svg'
+            Ox.loadFile(src, function() {
+                Ox.element('<img>')
+                    .attr({
+                        src: src
+                    })
+                    .css(Ox.extend({
+                        width: '32px',
+                        height: '32px',
+                    }, css))
+                    .mousedown(function(e) {
+                        e.preventDefault()
+                    })
+                    .appendTo(div);
+            });
+        }
+
+        function showWarning() {
+            Ox.print('showWarning')
+            var counter = 0,
+                message = 'Browser not supported, use ' + browsers.map(function(browser, i) {
+                    return browser.name + (
+                        i == browsers.length - 1 ? '.' :
+                        i == browsers.length - 2 ? ' or' : ','
+                    );
+                }).join(' ');
+            div.addClass('OxError');
+            browsers.forEach(function(browser) {
+                browser.src = Ox.PATH + 'png/ox.ui/browser' + browser.name + '128.png';
+                Ox.loadFile(browser.src, function() {
+                    Ox.print(counter)
+                    ++counter == browsers.length && showIcons();
+                });
+            });
+            function showIcons() {
+                var box = Ox.element('<div>')
+                    .css(Ox.extend({
+                        width: (browsers.length * 72) + 'px',
+                        height: '72px'
+                    }, css))
+                    .appendTo(div);
+                browsers.forEach(function(browser, i) {
+                    var link = Ox.element('<a>')
+                        .attr({
+                            href: browser.url,
+                            title: browser.name + ' ' + browser.version
+                        })
+                        .css({
+                            position: 'absolute',
+                            left: (i * 72) + 'px',
+                            width: '72px',
+                            height: '72px',
+                        })
+                        .appendTo(box);
+                    Ox.element('<img>')
+                        .attr({
+                            src: browser.src
+                        })
+                        .css(Ox.extend({
+                            width: '64px',
+                            height: '64px',
+                            border: 0,
+                            cursor: 'pointer'
+                        }, css))
+                        .mousedown(function(e) {
+                            e.preventDefault();
+                        })
+                        .appendTo(link);
+                });
+            }
+            
+        }
+
+    }
+
+    function loadFiles() {
+
+        Ox.loadFile(Ox.PATH + 'js/jquery/jquery.js', function() {
+            initUI();
+            $.getJSON(Ox.PATH + 'json/Ox.UI.json', function(files) {
+                var counter = 0;
+                files.forEach(function(file) {
+                    Ox.loadFile(Ox.PATH + file, function() {
+                        ++counter == files.length && Ox.documentReady(function() {
+                            var $div;
+                            if (browserSupported && options.hideScreen) {
+                                $div = $('.OxLoadingScreen');
+                                //$div.find('img').remove();
+                                $div.animate({
+                                    opacity: 0
+                                }, 1000, function() {
+                                    $div.remove();
+                                });
+                            }
+                            callback(browserSupported);
+                        });
+                    });
+                });
+            });            
+        });
+        
+    }
+
+    function initUI() {
+
+        Ox.UI = {};
+
+        Ox.UI.ready = (function() {
+            var callbacks = [];
+            $(function() {
+                Ox.UI.$body = $('body');
+                Ox.UI.$document = $(document);
+                Ox.UI.$head = $('head');
+                Ox.UI.$window = $(window);
+                callbacks.forEach(function(callback) {
+                    callback();
+                });
+                delete callbacks;
+            });
+            return function(callback) {
+                if (Ox.UI.$window) {
+                    callback();
+                } else {
+                    callbacks.push(callback);            
+                }
+            }
+        }());
+
+        Ox.UI.elements = {};
+        Ox.UI.DEFAULT_THEME = 'classic'; // fixme: needed?
+        Ox.UI.DIMENSIONS = {
+            horizontal: ['width', 'height'],
+            vertical: ['height', 'width']
+        };
+        Ox.UI.EDGES = {
+            horizontal: ['left', 'right', 'top', 'bottom'],
+            vertical: ['top', 'bottom', 'left', 'right']
+        };
+        Ox.UI.getImagePath = function(filename) {
+            // fixme: not the best idea to do this here
+            if (filename == 'symbolPlay.svg') {
+                filename = 'symbolRight.svg';
+            }
+            return Ox.UI.PATH + filename.split('.').pop() +
+                '/Ox.UI.' + Ox.Theme() + '/' + filename;
+        };
+        Ox.UI.IMAGE_CACHE = [];
+
+        Ox.UI.ready = function(callback) {
+
+        }
+        Ox.UI.SCROLLBAR_SIZE = $.browser.mozilla ? 16 : 12;
+        // fixme: the follwing should be deprecated
+        Ox.UI.getBarSize = function(size) {
+            var sizes = {
+                small: 20,
+                medium: 24,
+                large: 28
+            };
+            return sizes[size];
+        };
+        Ox.UI.symbols = {
+            alt: '\u2325',
+            apple: '\uF8FF',
+            arrow_down: '\u2193',
+            arrow_left: '\u2190',
+            arrow_right: '\u2192',
+            arrow_up: '\u2191',
+            backspace: '\u232B',
+            backup: '\u2707',
+            ballot: '\u2717',
+            black_star: '\u2605',
+            burn: '\u2622',
+            caps_lock: '\u21EA',
+            check: '\u2713',
+            //clear: '\u2327',
+            clear: '\u00D7',
+            click: '\uF803',
+            close: '\u2715',
+            command: '\u2318',
+            control: '\u2303',
+            cut: '\u2702',
+            'delete': '\u2326',
+            diamond: '\u25C6',
+            edit: '\uF802',
+            eject: '\u23CF',
+            escape: '\u238B',
+            end: '\u2198',
+            enter: '\u2324',
+            fly: '\u2708',
+            gear: '\u2699',
+            home: '\u2196',
+            info: '\u24D8',
+            navigate: '\u2388',
+            option: '\u2387',
+            page_up: '\u21DE',
+            page_down: '\u21DF',
+            redo: '\u21BA',
+            'return': '\u21A9',
+            //select: '\u21D5',
+            select: '\u25BE',
+            shift: '\u21E7',
+            sound: '\u266B',
+            space: '\u2423',
+            tab: '\u21E5',
+            trash: '\u267A',
+            triangle_down: '\u25BC',
+            triangle_left: '\u25C0',
+            triangle_right: '\u25BA',
+            triangle_up: '\u25B2',
+            undo: '\u21BB',
+            voltage: '\u26A1',
+            warning: '\u26A0',
+            white_star: '\u2606'
+        };
+        
+    }
+
+};

source/js/Ox.js

@@ -74,7 +74,6 @@ Ox.SYMBOLS = {
     EDIT: '\uF802', CLICK: '\uF803', APPLE: '\uF8FF'
 };
 // local timezone offset in milliseconds
-Ox.TIMEZONE_OFFSET = +new Date().getTimezoneOffset() * 60000;
 Ox.TYPES = [
     'Arguments', 'Array', 'Boolean', 'Date', 'Element', 'Function', 'Infinity',
     'NaN', 'Null', 'Number', 'Object', 'RegExp', 'String', 'Undefined'
@@ -144,6 +143,109 @@ Ox.getset = function(obj, args, callback, context) {
     return ret;
 }
 
+Ox.PATH = Array.prototype.slice.apply(
+    document.getElementsByTagName('script')
+).filter(function(element) {
+    return /Ox\.js$/.test(element.src);
+})[0].src.replace('js/Ox.js', '');
+
+Ox.load = (function() {
+    /***
+    loads Ox modules
+    ***/
+    var cache = {};
+    return function(module, options, callback) {
+        callback = arguments[arguments.length - 1];
+        options = arguments.length == 3 ? arguments[1] : {};
+        Ox.loadFile(Ox.PATH + 'js/Ox.' + module + '/Ox.' + module + '.js', function() {
+            Ox.load[module](options, callback);
+        });
+    };
+}());
+
+Ox.loadFile = (function() {
+    /***
+    loads stylesheets, scripts and images
+    ***/
+    var cache = {};
+    return function (file, callback) {
+        var element, request,
+            type = file.split('.').pop();
+        if (!cache[file]) {
+            if (type == 'css' || type == 'js') {
+                if (!findFileInHead()) {
+                    element = document.createElement(type == 'css' ? 'link' : 'script');
+                    element[type == 'css' ? 'href' : 'src'] = file;
+                    element.type = type == 'css' ? 'text/css' : 'text/javascript';
+                    if (type == 'css') {
+                        element.rel = 'stylesheet';
+                        waitForCSS();
+                    } else {
+                        element.onload = addFileToCache;
+                    }
+                    document.head.appendChild(element);
+                } else {
+                    addFileToCache();
+                }
+            } else {
+                element = new Image();
+                element.onload = addFileToCache;
+                element.src = file;
+            }
+        } else {
+            callback();
+        }
+        function addFileToCache() {
+            if (type == 'css' || type == 'js') {
+                cache['file'] = true;
+                callback();
+            } else {
+                cache['file'] = element;
+                callback({
+                    width: element.width,
+                    height: element.heigth
+                });
+            }
+        }
+        function findFileInHead() {
+            return Array.prototype.slice.apply(
+                document.getElementsByTagName(type == 'css' ? 'link' : 'script')
+            ).map(function(element) {
+                return element[type == 'css' ? 'href' : 'src'] == file;
+            }).reduce(function(prev, curr) {
+                return prev || curr; 
+            }, false);
+        }
+        function waitForCSS() {
+            var error = false;
+            try {
+                element.sheet.cssRule;
+            } catch(e) {
+                error = true;
+                setTimeout(function() {
+                    waitForCSS();
+                }, 25);
+            }
+            !error && addFileToCache();
+        }
+    };
+}());
+
+Ox.loadJSON = function(url, callback) {
+    var req = new XMLHttpRequest();
+    req.open('GET', url, true);
+    req.onreadystatechange = function() {
+        if (req.readyState == 4) {
+            if (req.status == 200) {
+                callback(JSON.parse(req.responseText));
+            } else {
+                throw new Error('URL ' + url + ', status ' + req.status);
+            }
+        }
+    };
+    req.send();                
+};
+
 Ox.print = function() {
     /*
     */
@@ -1041,6 +1143,10 @@ Ox.getTime = function() {
     return +new Date();
 }
 
+Ox.getTimezoneOffset = function() {
+    return new Date().getTimezoneOffset() * 60000;
+}
+
 Ox.getTimezoneOffsetString = function(date) {
     /*
     Time zone offset string ('-1200' - '+1200')
@@ -1091,7 +1197,8 @@ Ox.makeYear = function(date, utc) {
 };
 
 [
-    'FullYear', 'Month', 'Date', 'Day', 'Hours', 'Minutes', 'Seconds'
+    'FullYear', 'Month', 'Date', 'Day',
+    'Hours', 'Minutes', 'Seconds', 'Milliseconds'
 ].forEach(function(noun) {
     Ox['get' + noun] = function(date, utc) {
         return Ox.makeDate(date)['get' + (utc ? 'UTC' : '') + noun]()
@@ -1102,9 +1209,9 @@ Ox.makeYear = function(date, utc) {
         return new Date(
             Ox.makeDate(date)
         )['set' + (utc ? 'UTC' : '') + noun](num);
+        // fixme: maybe we _want_ set to have side effects?
     }
 });
-    
 
 /*
 ================================================================================
@@ -1118,7 +1225,7 @@ Ox.canvas = function() {
         image = isImage ? arguments[0] : {
             width: arguments[0], height: arguments[1]
         };
-    c.context = (c.canvas = Ox.element('canvas').attr({
+    c.context = (c.canvas = Ox.element('<canvas>').attr({
         width: image.width, height: image.height
     })[0]).getContext('2d');
     isImage && c.context.drawImage(image, 0, 0);
@@ -1128,28 +1235,74 @@ Ox.canvas = function() {
     return c;
 };
 
+Ox.documentReady = (function() {
+    var callbacks = [];
+    document.addEventListener('DOMContentLoaded', ready, false);
+    function ready() {
+        document.removeEventListener('DOMContentLoaded', ready, false);
+        callbacks.forEach(function(callback) {
+            callback();
+        });
+        delete callbacks;
+    }
+    return function(callback) {
+        if (document.readyState == 'complete') {
+            callback();
+        } else {
+            callbacks.push(callback);            
+        }
+    }
+}());
+
 Ox.element = function(str) {
     /*
+    Generic HTML element, mimics jQuery
     >>> Ox.element('div').attr({id: 'foo'}).attr('id')
     'foo'
     >>> Ox.element('div').html('foo').html()
     'foo'
     */
     return {
-        0: str[0] == '#' ? document.getElementById(str.substr(1)) :
-                document.createElement(str),
+        0: str[0] == '<' ? document.createElement(str.substr(1, str.length - 2)) :
+            str[0] == '.' ? document.getElementsByClassName(str.substr(1))[0] :
+            str[0] == '#' ? document.getElementById(str.substr(1)) :
+            document.getElementsByTagName(str)[0],
+        addClass: function(str) {
+            this[0].className += (this[0].className ? ' ' : '') + str;
+            return this;
+        },
+        append: function(element) {
+            this[0].appendChild(element[0]);
+            return this;
+        },
+        appendTo: function(element) {
+            element[0].appendChild(this[0]);
+            return this;
+        },
         attr: function() {
-            var args, ret, that = this;
+            var ret, that = this;
             if (arguments.length == 1 && Ox.isString(arguments[0])) {
                 ret = this[0].getAttribute(arguments[0]);
             } else {
-                Ox.forEach(Ox.makeObject.apply(this, arguments), function(v, k) {
+                Ox.forEach(Ox.makeObject.apply(null, arguments), function(v, k) {
                     that[0].setAttribute(k, v);
                 });
                 ret = this;
             }
             return ret;
         },
+        css: function() {
+            var ret, that = this;
+            if (arguments.length == 1 && Ox.isString(arguments[0])) {
+                ret = this[0].style[arguments[0]];
+            } else {
+                Ox.forEach(Ox.makeObject.apply(null, arguments), function(v, k) {
+                    that[0].style[k] = v;
+                });
+                ret = this;
+            }
+            return ret;
+        },
         html: function(str) {
             var ret;
             if (Ox.isUndefined(str)) {
@@ -1159,6 +1312,10 @@ Ox.element = function(str) {
                 ret = this;
             }
             return ret;
+        },
+        mousedown: function(fn) {
+            this[0].onmousedown = fn;
+            return this;
         }
     }
 };
@@ -1370,7 +1527,7 @@ Encoding functions
         */
         // relies on dom, but shorter than using this:
         // http://www.w3.org/TR/html5/named-character-references.html 
-        return Ox.element('div').html(str)[0].childNodes[0].nodeValue;
+        return Ox.element('<div>').html(str)[0].childNodes[0].nodeValue;
         //return $('<div/>').html(str)[0].childNodes[0].nodeValue;
     };
 
@@ -2203,7 +2360,7 @@ Ox.parseHTML = (function() {
         // close extra opening (and remove extra closing) tags
         // return $('<div>').html(html).html();
         // fixme: this converts '&quot;' to '"' 
-        return Ox.element('div').html(html).html();
+        return Ox.element('<div>').html(html).html();
     }
 
 }());
@@ -2461,6 +2618,7 @@ Ox.pad = function(str, len, pad, pos) {
 
 Ox.repeat = function(str, num) {
     /*
+    fixme: make this work for arrays, like in python
     >>> Ox.repeat(1, 3)
     "111"
     >>> Ox.repeat("foo", 3)

source/js/OxUI.js

@@ -1,534 +0,0 @@
-// vim: et:ts=4:sw=4:sts=4:ft=js
-
-/*
-OxUI Loader
-
-Provides function Ox.UI([options], callback) that fires when
-    OxUI.css, Ox.js und jquery.js have loaded
-    all images have loaded
-    the document is ready
-*/
-
-(function() {
-
-    var files = ['css/OxUI.css', 'js/Ox.js', 'js/jquery.js'],
-        path = Array.prototype.slice.apply(
-            document.getElementsByTagName('script')
-        ).filter(function(element) {
-            return /OxUI\.js$/.test(element.src);
-        })[0].src.replace('js/OxUI.js', ''),
-        documentReady = false,
-        documentReadyCallbacks = [],
-        head = document.getElementsByTagName('head')[0],
-        logs = [],
-        oxUICallback = function() {},
-        oxUIFunction = function(options, callback) {
-            var key;
-            oxUICallback = arguments.length == 2 ? callback : options;
-            if (arguments.length == 2) {
-                for (key in oxUIOptions) {
-                    oxUIOptions[key] = options[key] || oxUIOptions[key];
-                }
-            }
-        },
-        oxUIOptions = {
-            app: false,
-            display: 'none', // 'icon', 'console' or 'none'
-            theme: 'classic' // 'classic' or 'modern
-        };
-    
-    files.forEach(function(file, i) {
-        files[i] = {
-            ready: isIncluded(file),
-            src: file
-        };
-    });
-
-    Ox = typeof Ox != 'undefined' ? Ox : function() {};    
-    Ox.UI = oxUIFunction;
-
-    log('Loading essential scripts and stylesheets...')
-    waitForDocument();
-    waitForFiles();
-
-    files.forEach(function(file) {
-        var element,
-            isCSS = isFileType(file.src, 'css');
-        if (!file.ready) {
-            element = document.createElement(isCSS ? 'link' : 'script');
-            element[isCSS ? 'href' : 'src'] = path + file.src;
-            element.type = isCSS ? 'text/css' : 'text/javascript';
-            if (isCSS) {
-                element.rel = 'stylesheet';
-                waitForCSS();
-            } else {
-                element.onload = onload;
-            }
-            head.appendChild(element);
-        }
-        function onload() {
-            file.ready = true;
-            log(file.src.split('/').pop() + ' loaded.')
-            if (file.src == 'js/Ox.js') {
-                Ox.UI = oxUIFunction;
-            }
-            waitForFiles();                    
-        }
-        function waitForCSS() {
-            try {
-                element.sheet.cssRule;
-                onload();
-            } catch(e) {
-                setTimeout(waitForCSS, 25);
-            }
-        }
-    });
-
-    function getElement(str) {
-        // Generic HTML Element Object (mimics jQuery)
-        return {
-            0: str[0] == '<' ? document.createElement(str.substr(1, str.length - 2)) :
-                str[0] == '.' ? document.getElementsByClassName(str.substr(1))[0] :
-                str[0] == '#' ? document.getElementById(str.substr(1)) :
-                document.getElementsByTagName(str)[0],
-            addClass: function(str) {
-                this[0].className += (this[0].className ? ' ' : '') + str;
-                return this;
-            },
-            append: function(element) {
-                this[0].appendChild(element[0]);
-                return this;
-            },
-            appendTo: function(element) {
-                element[0].appendChild(this[0]);
-                return this;
-            },
-            attr: function(obj) {
-                for (var key in obj) {
-                    this[0].setAttribute(key, obj[key]);
-                }
-                return this;
-            },
-            css: function(obj) {
-                for (var key in obj) {
-                    this[0].style[key] = obj[key];
-                }
-                return this;
-            },
-            html: function(str) {
-                this[0].innerHTML = str;
-                return this;
-            },
-            mousedown: function(fn) {
-                this[0].onmousedown = fn;
-                return this;
-            }
-        };
-    }
-
-    function isFileType(src, type) {
-        return new RegExp('\.' + type + '$').test(src);
-    }
-
-    function isIncluded(src) {
-        var isCSS = isFileType(src);
-        return Array.prototype.slice.apply(
-            document.getElementsByTagName(isCSS ? 'link' : 'script')
-        ).map(function(element) {
-            return element[isCSS ? 'href' : 'src'] == path + src;
-        }).reduce(function(prev, curr) {
-            return prev || curr; 
-        }, false);
-    }
-
-    function log(str) {
-        var date = new Date(),
-            element = getElement('.console'),
-        str = [
-            date.getHours(), date.getMinutes(), date.getSeconds()
-        ].map(function(num) {
-            return pad(num, 2)
-        }).join(':') + '.' + pad(date.getTime() % 1000, 3) + ' ' + str;
-        logs.push(str);
-        if (element[0]) {
-            logs.forEach(function(str) {
-                getElement('<div>')
-                    .css({
-                        height: '16px',
-                        fontFamily: [
-                            'Menlo', 'Monaco',
-                            'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
-                            'Consolas', 'Lucida Console'
-                        ].join(', '),
-                        fontSize: '12px',
-                        color: 'rgb(' + (
-                            oxUIOptions.theme == 'classic' ? '16, 16, 16' : '240, 240 240'
-                        ) + ')'
-                    })
-                    .html(str)
-                    .appendTo(element);
-                element[0].scrollTop = 1000000;
-            });
-            logs = [];
-        }
-        function pad(num, len) {
-            var str = num.toString();
-            while (str.length < len) {
-                str = '0' + str;
-            }
-            return str;
-        }
-        console.log(str);
-    }
-
-    function waitForDocument() {
-        document.addEventListener('DOMContentLoaded', onload, false);
-        function onload() {
-            log('Document ready.')
-            document.removeEventListener('DOMContentLoaded', onload, false);
-            documentReady = true;
-            bootOxUI();
-        }
-    }
-
-    function waitForFiles() {
-        files.map(function(file) {
-            return file.ready;
-        }).reduce(function(pre, cur) {
-            return pre && cur;
-        }) && loadOxUI();
-    }
-
-    function bootOxUI() {
-
-        // runs when the document is ready
-
-        var body, css, div,
-            browsers = [
-                {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}
-            ]
-
-        if (oxUIOptions.display != 'none') {
-            body = getElement('body');
-            css = {
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                right: 0,
-                bottom: 0,
-                margin: 'auto',
-                MozUserSelect: 'none',
-                WebkitUserSelect: 'none'
-            };
-            div = getElement('<div>')
-                .addClass(oxUIOptions.display == 'console' ? 'console' : '')
-                .css({
-                    position: 'absolute',
-                    left: 0,
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                    padding: '4px',
-                    background: 'rgb(' + (
-                        oxUIOptions.theme == 'classic' ? '240, 240, 240' : '16, 16, 16')
-                    + ')',
-                    opacity: 1,
-                    overflow: oxUIOptions.display == 'console' ? 'auto' : 'hidden',
-                    zIndex: 1000
-                })
-                .appendTo(body);
-        }
-
-        checkBrowser() ? start() : stop();
-
-        function checkBrowser() {
-            var i, isSupported = false;
-            for (i in browsers) {
-                var browser = browsers[i],
-                    version;
-                if (navigator.userAgent.indexOf(browser.name) > -1) {
-                    if (new RegExp((
-                        browser.name == 'Safari' ? 'Version' : browser.name
-                    ) + '\\/(\\d+)\\.')(navigator.userAgent)[1] >= browser.version) {
-                        isSupported = true;
-                        break;
-                    }
-                }
-            }
-            return isSupported;
-        }
-
-        function start() {
-            var image, src;
-            if (oxUIOptions.display == 'console') {
-                log('Loading additional scripts and images...')
-            } else if (oxUIOptions.display == 'icon') {
-                image = new Image(),
-                src = path + 'svg/ox.ui.' + oxUIOptions.theme + '/symbolLoading.svg';
-                image.onload = function() {
-                    getElement('<img>')
-                        .attr({
-                            src: src,
-                        })
-                        .css(css)
-                        .css({
-                            width: '32px',
-                            height: '32px'
-                        })
-                        .mousedown(function(e) {
-                            e.preventDefault()
-                        })
-                        .appendTo(div);
-                };
-                image.src = src;
-            }
-        }
-
-        function stop() {
-            var counter = 0,
-                message = 'Browser not supported, use ' + browsers.map(function(browser, i) {
-                    return browser.name + (
-                        i == browsers.length - 1 ? '.' :
-                        i == browsers.length - 2 ? ' or' : ','
-                    );
-                }).join(' ');
-            if (oxUIOptions.display == 'none') {
-                throw new Error(message);
-            } else {
-                div.addClass('error');
-                if (oxUIOptions.display == 'console') {
-                    log(message);
-                    log = function() {};
-                } else {
-                    userAgents.forEach(function(userAgent) {
-                        var image = new Image();
-                        userAgent.src = path + 'png/ox.ui/browser' + userAgent.name + '128.png';
-                        image.onload = function() {
-                            ++counter == userAgents.length && showImages();
-                        }
-                        image.src = userAgent.src;
-                    });
-                }
-            }
-            function showImages() {
-                var box = getElement('<div>')
-                    .css(css)
-                    .css({
-                        width: (userAgents.length * 72) + 'px',
-                        height: '72px'
-                    })
-                    .appendTo(div);
-                userAgents.forEach(function(userAgent, i) {
-                    var link = getElement('<a>')
-                        .attr({
-                            href: userAgent.url,
-                            title: userAgent.name
-                        })
-                        .css({
-                            position: 'absolute',
-                            left: (i * 72) + 'px',
-                            width: '72px',
-                            height: '72px',
-                        })
-                        .appendTo(box);
-                    getElement('<img>')
-                        .attr({
-                            src: userAgent.src
-                        })
-                        .css(css)
-                        .css({
-                            width: '64px',
-                            height: '64px',
-                            border: 0,
-                            cursor: 'pointer'
-                        })
-                        .mousedown(function(e) {
-                            e.preventDefault();
-                        })
-                        .appendTo(link);
-                });
-            }
-        }
-
-    }
-
-    function loadOxUI() {
-
-        // runs when css and js files have loaded
-
-        documentReady && initDocument();
-
-        $.getJSON(path + 'json/OxUI.json', function(data) {
-
-            var $head = $('head'),
-                promises = Ox.UI.$window ? [] : [waitForDocument()];
-
-            log('OxUI.json loaded.')
-
-            // fixme: find a better way to not wait for flags
-            data = data.filter(function(image) {
-                return !Ox.startsWith(image, 'svg/ox.map/');
-            });
-            data.forEach(function(src) {
-                promises.push(loadFile(src));
-            });
-
-            $.when.apply(null, promises)
-                .done(function() {
-                    var $div, error = $('.error').length;
-                    if (!error && !oxUIOptions.app) {
-                        $div = $('div');
-                        $('img').remove();
-                        $div.animate({
-                            opacity: 0
-                        }, 1000, function() {
-                            $div.remove();
-                        });
-                    }
-                    oxUICallback();
-                })
-                .fail(function() {
-                    throw new Error('File not found.');
-                });
-
-            function loadFile(src) {
-                var dfd = new $.Deferred(),
-                    isJS = isFileType(src, 'js'),
-                    element = isJS ? document.createElement('script') : new Image();
-                element.onload = function() {
-                    log(src.split('/').pop() + ' loaded.');
-                    dfd.resolve();
-                }
-                element.src = path + src;
-                if (isJS) {
-                    element.type = 'text/javascript';
-                    head.appendChild(element)
-                } else {
-                    // need to keep a reference to keep image in cache
-                    Ox.UI.IMAGE_CACHE.push(src);
-                }
-                return dfd.promise();
-            }
-
-            function waitForDocument() {
-                var dfd = new $.Deferred();
-                $(function() {
-                    initDocument();
-                    dfd.resolve();
-                });    
-                return dfd.promise();
-            }
-
-        });
-
-        function initDocument() {
-            Ox.UI.$body = $('body');
-            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();
-            });
-        }
-
-        Ox.UI.ready = function(callback) {
-            if (!Ox.UI.$window) {
-                documentReadyCallbacks.push(callback);
-            } else {
-                callback();
-            }
-        };
-
-        Ox.UI.elements = {};
-        Ox.UI.DEFAULT_THEME = 'classic'; // fixme: needed?
-        Ox.UI.DIMENSIONS = {
-            horizontal: ['width', 'height'],
-            vertical: ['height', 'width']
-        };
-        Ox.UI.EDGES = {
-            horizontal: ['left', 'right', 'top', 'bottom'],
-            vertical: ['top', 'bottom', 'left', 'right']
-        };
-        Ox.UI.getImagePath = function(filename) {
-            // fixme: not the best idea to do this here
-            if (filename == 'symbolPlay.svg') {
-                filename = 'symbolRight.svg';
-            }
-            return Ox.UI.PATH + filename.split('.').pop() +
-                '/ox.ui.' + Ox.Theme() + '/' + filename;
-        };
-        Ox.UI.IMAGE_CACHE = [];
-        Ox.UI.PATH = $('script[src*="OxUI.js"]')
-            .attr('src').replace('js/OxUI.js', '');
-        Ox.UI.SCROLLBAR_SIZE = $.browser.mozilla ? 16 : 12;
-        // fixme: the follwing should be deprecated
-        Ox.UI.getBarSize = function(size) {
-            var sizes = {
-                small: 20,
-                medium: 24,
-                large: 28
-            };
-            return sizes[size];
-        };
-        Ox.UI.symbols = {
-            alt: '\u2325',
-            apple: '\uF8FF',
-            arrow_down: '\u2193',
-            arrow_left: '\u2190',
-            arrow_right: '\u2192',
-            arrow_up: '\u2191',
-            backspace: '\u232B',
-            backup: '\u2707',
-            ballot: '\u2717',
-            black_star: '\u2605',
-            burn: '\u2622',
-            caps_lock: '\u21EA',
-            check: '\u2713',
-            //clear: '\u2327',
-            clear: '\u00D7',
-            click: '\uF803',
-            close: '\u2715',
-            command: '\u2318',
-            control: '\u2303',
-            cut: '\u2702',
-            'delete': '\u2326',
-            diamond: '\u25C6',
-            edit: '\uF802',
-            eject: '\u23CF',
-            escape: '\u238B',
-            end: '\u2198',
-            enter: '\u2324',
-            fly: '\u2708',
-            gear: '\u2699',
-            home: '\u2196',
-            info: '\u24D8',
-            navigate: '\u2388',
-            option: '\u2387',
-            page_up: '\u21DE',
-            page_down: '\u21DF',
-            redo: '\u21BA',
-            'return': '\u21A9',
-            //select: '\u21D5',
-            select: '\u25BE',
-            shift: '\u21E7',
-            sound: '\u266B',
-            space: '\u2423',
-            tab: '\u21E5',
-            trash: '\u267A',
-            triangle_down: '\u25BC',
-            triangle_left: '\u25C0',
-            triangle_right: '\u25BA',
-            triangle_up: '\u25B2',
-            undo: '\u21BB',
-            voltage: '\u26A1',
-            warning: '\u26A0',
-            white_star: '\u2606'
-        };
-
-    }
-
-}());
-