remove unneeded Ox. prefix from path and file names

source/UI/js/Code/DocPage.js

@@ -0,0 +1,291 @@
+'use strict';
+
+/*@
+Ox.DocPage <f> DocPage
+    options <o> Options object
+        item <o> doc item
+        replace <[[]]|[]> See Ox.SyntaxHighlighter
+        stripComments <b|false> If true, strip comments in source code
+    self    <o> Shared private variable
+    ([options[, self]]) -> <o:Ox.SplitPanel> DocPage object
+        example <!> Fires when an example was selected
+            id <s> Id of the selected example
+@*/
+Ox.DocPage = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            item: {},
+            replace: []
+        })
+        .options(options || {})
+        .css({
+            overflow: 'auto'
+        });
+
+    self.$toolbar = Ox.Bar({size: 24});
+
+    self.$homeButton = Ox.Button({
+            title: 'home',
+            tooltip: Ox._('Home'),
+            type: 'image'
+        })
+        .css({float: 'left', margin: '4px 2px 4px 4px'})
+        .bindEvent({
+            click: function() {
+                that.triggerEvent('close');
+            }
+        })
+        .appendTo(self.$toolbar);
+
+    self.$title = Ox.Label({
+            style: 'square',
+            title: self.options.item.name
+        })
+        .addClass('OxMonospace')
+        .css({
+            float: 'left',
+            height: '13px',
+            paddingTop: '1px',
+            borderRadius: '4px',
+            margin: '4px 2px 4px 2px'
+        })
+        .appendTo(self.$toolbar)
+
+    if (self.options.item.examples) {
+        self.$examplesMenu = Ox.MenuButton({
+                items: self.options.item.examples,
+                title: Ox._('Examples...'),
+            })
+            .css({float: 'right', margin: '4px 4px 4px 2px'})
+            .bindEvent({
+                click: function(data) {
+                    that.triggerEvent('example', {id: data.id});
+                }
+            })
+            .appendTo(self.$toolbar);
+    }
+
+    self.$page = Ox.Container().addClass('OxDocPage OxDocument OxSelectable');
+
+    that.setElement(
+        Ox.SplitPanel({
+            elements: [
+                {element: self.$toolbar, size: 24},
+                {element: self.$page}
+            ],
+            orientation: 'vertical'
+        })
+        .addClass('OxDocPage')
+    );
+
+    getItem(self.options.item, 0).forEach(function($element) {
+        self.$page.append($element);
+    });
+
+    function getItem(item, level, name) {
+        Ox.Log('Core', 'getItem', item, level, name);
+        var $elements = [
+                Ox.$('<div>')
+                    .css({paddingLeft: (level ? level * 32 - 16 : 0) + 'px'})
+                    .html(
+                        '<code><b>' + (name || item.name) + '</b> '
+                        + '&lt;' + item.types.join('&gt;</code> or <code>&lt;') + '&gt; </code>'
+                        + (item['class'] ? '(class: <code>' + item['class'] + '</code>) ' : '')
+                        + (item['default'] ? '(default: <code>' + item['default'] + '</code>) ' : '')
+                        + Ox.sanitizeHTML(item.summary)
+                    )
+            ],
+            sections = ['description'].concat(
+                item.order || ['returns', 'arguments', 'properties']
+            ).concat(['events', 'tests', 'source']),
+            index = {
+                events: sections.indexOf('events') + 1 + (
+                    item.inheritedproperties ? item.inheritedproperties.length : 0
+                ),
+                properties: sections.indexOf('properties') + 1 || 1
+            };
+        ['properties', 'events'].forEach(function(key) {
+            var key_ = 'inherited' + key;
+            if (item[key_]) {
+                Array.prototype.splice.apply(sections, [index[key], 0].concat(
+                    item[key_].map(function(v, i) {
+                        var section = key + ' inherited from <code>'
+                            + v.name + '</code>';
+                        item[section] = v[key];
+                        return section;
+                    })
+                ));
+            }
+        });
+        sections.forEach(function(section) {
+            var className = 'OxLine' + Ox.uid(),
+                isExpanded = !Ox.contains(section, 'inherited');
+            if (item[section]) {
+                if (section == 'description') {
+                    $elements.push(Ox.$('<div>')
+                        .css({
+                            paddingTop: (level ? 0 : 8) + 'px',
+                            borderTopWidth: level ? 0 : '1px',
+                            marginTop: (level ? 0 : 8) + 'px',
+                            marginLeft: (level * 32) + 'px'
+                        })
+                        .html(Ox.sanitizeHTML(item.description))
+                    );
+                } else {
+                    $elements.push(Ox.$('<div>')
+                        .css({
+                            paddingTop: (level ? 0 : 8) + 'px',
+                            borderTopWidth: level ? 0 : '1px',
+                            marginTop: (level ? 0 : 8) + 'px',
+                            marginLeft: (level * 32) + 'px'
+                        })
+                        .append(
+                            Ox.$('<img>')
+                                .attr({
+                                    src: isExpanded
+                                        ? Ox.UI.getImageURL('symbolDown')
+                                        : Ox.UI.getImageURL('symbolRight')
+                                })
+                                .css({
+                                    width: '12px',
+                                    height: '12px',
+                                    margin: '0 4px -1px 0'
+                                })
+                                .on({
+                                    click: function() {
+                                        var $this = $(this),
+                                            isExpanded = $this.attr('src') == Ox.UI.getImageURL('symbolRight');
+                                        $this.attr({
+                                            src: isExpanded
+                                                ? Ox.UI.getImageURL('symbolDown')
+                                                : Ox.UI.getImageURL('symbolRight')
+                                        });
+                                        $('.' + className).each(function() {
+                                            var $this = $(this), isHidden = false;
+                                            $this[isExpanded ? 'removeClass' : 'addClass'](className + 'Hidden');
+                                            if (isExpanded) {
+                                                Ox.forEach(this.className.split(' '), function(v) {
+                                                    if (/Hidden$/.test(v)) {
+                                                        isHidden = true;
+                                                        return false; // break
+                                                    }
+                                                });
+                                                !isHidden && $this.show();
+                                            } else {
+                                                $this.hide();
+                                            }
+                                        });
+                                    }
+                                })
+                        )
+                        .append(
+                            Ox.$('<span>')
+                                .addClass('OxSection')
+                                .html(
+                                    Ox.contains(section, 'inherited')
+                                        ? section[0].toUpperCase() + section.slice(1)
+                                        : Ox.toTitleCase(
+                                            section == 'returns' ? 'usage' : section
+                                        )
+                                )
+                        )
+                    );
+                    if (section == 'tests') {
+                        item.tests.forEach(function(test) {
+                            var isAsync = test.expected && /(.+Ox\.test\()/.test(test.statement);
+                            $elements.push(
+                                Ox.$('<div>')
+                                    .addClass(className)
+                                    .css({marginLeft: (level * 32 + 16) + 'px'})
+                                    .html(
+                                        '<code><b>&gt;&nbsp;'
+                                        + Ox.encodeHTMLEntities(test.statement)
+                                            .replace(/ /g, '&nbsp;')
+                                            .replace(/\n/g, '<br>\n&nbsp;&nbsp;')
+                                        + '</b>'
+                                        + (
+                                            test.passed === false && isAsync
+                                                ? ' <span class="OxFailed"> // actual: '
+                                                    + Ox.encodeHTMLEntities(test.actual)
+                                                    + '</span>'
+                                                : ''
+                                        )
+                                        + '</code>'
+                                    )
+                            );
+                            if (test.expected) {
+                                $elements.push(
+                                    Ox.$('<div>')
+                                        .addClass(className)
+                                        .css({marginLeft: (level * 32 + 16) + 'px'})
+                                        .html(
+                                            '<code>'
+                                            + Ox.encodeHTMLEntities(
+                                                test.passed === false && !isAsync
+                                                    ? test.actual : test.expected
+                                            )
+                                            + (
+                                                test.passed === false && !isAsync
+                                                    ? ' <span class="OxFailed"> // expected: '
+                                                        + Ox.encodeHTMLEntities(test.expected)
+                                                        + '</span>'
+                                                    : ''
+                                            )
+                                            + '</code>'
+                                        )
+                                );
+                            }
+                        });
+                    } else if (section == 'source') {
+                        // fixme: not the right place to fix path
+                        $elements.push(Ox.$('<div>')
+                            .addClass(className)
+                            .css({marginLeft: 16 + 'px'})
+                            .html(
+                                '<code><b>'
+                                + self.options.item.file.replace(Ox.PATH, '')
+                                + '</b>:' + self.options.item.line + '</code>'
+                            )
+                        );
+                        $elements.push(
+                            Ox.SyntaxHighlighter({
+                                replace: self.options.replace,
+                                showLineNumbers: !self.options.stripComments,
+                                source: item.source,
+                                stripComments: self.options.stripComments,
+                                offset: self.options.item.line
+                            })
+                            .addClass(className)
+                            .css({
+                                borderWidth: '1px',
+                                marginTop: '8px'
+                            })
+                        );
+                    } else {
+                        item[section].forEach(function(v) {
+                            var name = section == 'returns' ?
+                                item.name + v.signature
+                                + ' </b></code>returns<code> <b>'
+                                + (v.name || '') : null;
+                            $elements = $elements.concat(
+                                Ox.map(getItem(v, level + 1, name), function($element) {
+                                    $element.addClass(className);
+                                    if (!isExpanded) {
+                                        $element.addClass(className + 'Hidden').hide();
+                                    }
+                                    return $element;
+                                })
+                            );
+                        });
+                    }
+                }
+            }
+        });
+        return $elements;
+    }
+
+    return that;
+
+};

source/UI/js/Code/DocPanel.js

@@ -0,0 +1,401 @@
+'use strict';
+
+/*@
+Ox.DocPanel <f> Documentation Panel
+    options <o> Options object
+        collapsible <b|false> If true, the list can be collabsed
+        element <e> Default content
+        expanded <b> If true, modules and sections are expanded in the list
+        files <a|[]> Files to parse for docs (alternative to items option)
+        getModule <f> Returns module for given item
+        getSection <f> Returns section for given item
+        items <a|[]> Array of doc items (alternative to files option)
+        path <s|''> Path prefix
+        references <r|null> RegExp to find references
+        replace <[[]]|[]> See Ox.SyntaxHighlighter
+        resizable <b|true> If true, list is resizable
+        resize <a|[128, 256, 384]> List resize positions
+        runTests <b|false> If true, run tests
+        selected <s|''> Id of the selected item
+        showLoading <b|false> If true, show loading icon when parsing files
+        showTests <b|false> If true, show test results in list
+        showTooltips <b|false> If true, show test result tooltips in list
+        size <s|256> Default list size
+        stripComments <b|false> If true, strip comments in source code
+    self <o> Shared private variable
+    ([options[, self]]) -> <o:Ox.SplitPanel> Documentation Panel
+        load <!> Fires once all docs are loaded
+            items [o] Array of doc items
+        tests <!> Fires once all tests finished
+            results [o] Array of results
+        select <!> select
+@*/
+
+Ox.DocPanel = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            collapsible: false,
+            element: null,
+            examples: [],
+            examplesPath: '',
+            expanded: false,
+            files: [],
+            getModule: function(item) {
+                return item.file.replace(self.options.path, '');
+            },
+            getSection: function(item) {
+                return item.section;
+            },
+            items: [],
+            path: '',
+            references: null,
+            replace: [],
+            resizable: false,
+            resize: [128, 256, 384],
+            results: null,
+            runTests: false,
+            selected: '',
+            showLoading: false,
+            showTests: false,
+            showTooltips: false,
+            size: 256,
+            stripComments: false
+        })
+        .options(options || {})
+        .update({
+            selected: function() {
+                selectItem(self.options.selected);
+            }
+        });
+
+    self.$list = Ox.Element();
+    self.$toolbar = Ox.Bar({size: 24}).css({textAlign: 'center'});
+    self.$sidebar = Ox.SplitPanel({
+        elements: [
+            {element: Ox.Element()},
+            {element: Ox.Element(), size: 24}
+        ],
+        orientation: 'vertical'
+    });
+    self.$page = Ox.Element();
+
+    self.$testsStatus = $('<div>')
+        .css({marginTop: '5px', textAlign: 'center'})
+        .appendTo(self.$toolbar);
+    if (!self.options.results) {
+        self.options.results = {};
+        self.$testsButton = Ox.Button({title: Ox._('Run Tests')})
+            .css({margin: '4px auto'})
+            .bindEvent({click: runTests})
+            .appendTo(self.$toolbar);
+        self.$testsStatus.hide();
+    } else {
+        self.$testsStatus.html(formatResults());
+    }
+
+    that.setElement(
+        self.$panel = Ox.SplitPanel({
+            elements: [
+                {
+                    collapsible: self.options.collapsible,
+                    element: self.$sidebar,
+                    resizable: self.options.resizable,
+                    resize: self.options.resize,
+                    size: self.options.size
+                },
+                {
+                    element: self.$page
+                }
+            ],
+            orientation: 'horizontal'
+        })
+    );
+
+    if (self.options.files && self.options.files.length) {
+        setTimeout(function() {
+            self.options.showLoading && showLoadingScreen();
+            self.options.files = Ox.makeArray(self.options.files);
+            self.options.items = Ox.doc(self.options.files.map(function(file) {
+                return self.options.path + file;
+            }), function(docItems) {
+                self.options.items = docItems;
+                getExamples(function() {
+                    self.options.showLoading && hideLoadingScreen();
+                    self.$sidebar.replaceElement(1, self.$toolbar);
+                    renderList();
+                    self.options.runTests && runTests();
+                    that.triggerEvent('load', {items: self.options.items});
+                });
+            });
+        }, 250); // 0 timeout may fail in Firefox
+    } else {
+        getExamples(function() {
+            self.$sidebar.replaceElement(1, self.$toolbar);
+            renderList();
+            self.options.runTests && runTests();
+        });
+    }
+
+    function formatResults() {
+        var results = self.options.results[''],
+            tests = results.passed + results.failed;
+        return tests + ' test' + (tests == 1 ? '' : 's') + ', '
+            + results.passed + ' passed, ' + results.failed + ' failed';
+    }
+
+    function getExamples(callback) {
+        var i = 0;
+        if (self.options.examples && self.options.examples.length) {
+            self.options.examples.forEach(function(example) {
+                var path = self.options.examplesPath + example;
+                Ox.get(path + '/index.html', function(html) {
+                    var match = html.match(/<title>(.+)<\/title>/),
+                        title = match ? match[1] : Ox._('Untitled');
+                    Ox.get(path + '/js/example.js', function(js) {
+                        var references = js.match(self.options.references);
+                        if (references) {
+                            Ox.unique(references).forEach(function(reference) {
+                                var item = getItemByName(reference);
+                                if (item) {
+                                    item.examples = (
+                                        item.examples || []
+                                    ).concat({
+                                        id: example.split('/').pop(),
+                                        title: title
+                                    });
+                                }
+                            });
+                        }
+                        if (++i == self.options.examples.length) {
+                            self.options.items.forEach(function(item) {
+                                if (item.examples) {
+                                    item.examples.sort(function(a, b) {
+                                        a = a.title.toLowerCase();
+                                        b = b.title.toLowerCase();
+                                        return a < b ? -1 : a > b ? 1 : 0;
+                                    });
+                                }
+                            });
+                            callback();
+                        }
+                    });
+                });
+            });
+        } else {
+            callback();
+        }
+    }
+
+    function getIcon(id, expanded) {
+        var $icon = null, results = self.options.results[id];
+        if (!Ox.isEmpty(self.options.results)) {
+            $icon = Ox.Theme.getColorImage(
+                'symbol' + (expanded === true ? 'Down' : expanded === false ? 'Right' : 'Center'),
+                !results ? '' : results.failed === 0 ? 'passed' : 'failed',
+                self.options.showTooltips ? getTooltip(results) : null
+            );
+        } else if (!Ox.endsWith(id, '/')) {
+            $icon = $('<img>').attr({src: Ox.UI.getImageURL('symbolCenter')});
+        }
+        return $icon;
+    }
+
+    function getItemByName(name) {
+        var item = null;
+        Ox.forEach(self.options.items, function(v) {
+            if (v.name == name) {
+                item = v;
+                return false; // break
+            }
+        });
+        return item;
+    }
+
+    function getTooltip(results) {
+        return results
+            ? results.passed + ' test'
+                + (results.passed == 1 ? '' : 's') + ' passed'
+                + (results.failed
+                    ? ', ' + results.failed + ' test'
+                        + (results.failed == 1 ? '' : 's') + ' failed'
+                    : ''
+                )
+            : 'No tests';
+    }
+
+    function hideLoadingScreen() {
+        self.$loadingIcon.stop().remove();
+        self.$loadingText.remove();
+    }
+
+    function parseFiles(callback) {
+        var counter = 0,
+            docItems = [],
+            length = self.options.files.length;
+        self.options.files.forEach(function(file) {
+            Ox.doc(self.options.path + file, function(fileItems) {
+                docItems = docItems.concat(fileItems);
+                ++counter == length && callback(docItems);
+            });
+        });
+    }
+
+    function renderList() {
+        var treeItems = [];
+        self.options.items.forEach(function(docItem) {
+            var moduleIndex, results, sectionIndex;
+            docItem.module = self.options.getModule(docItem);
+            moduleIndex = Ox.getIndexById(treeItems, docItem.module + '/');
+            if (moduleIndex == -1) {
+                treeItems.push({
+                    id: docItem.module + '/',
+                    items: [],
+                    title: docItem.module
+                });
+                moduleIndex = treeItems.length - 1;
+            }
+            docItem.section = self.options.getSection(docItem);
+            if (docItem.section) {
+                sectionIndex = Ox.getIndexById(
+                    treeItems[moduleIndex].items,
+                    docItem.module + '/' + docItem.section + '/'
+                );
+                if (sectionIndex == -1) {
+                    treeItems[moduleIndex].items.push({
+                        id: docItem.module + '/' + docItem.section + '/',
+                        items: [],
+                        title: docItem.section
+                    });
+                    sectionIndex = treeItems[moduleIndex].items.length - 1;
+                }
+            }
+            (
+                docItem.section
+                ? treeItems[moduleIndex].items[sectionIndex]
+                : treeItems[moduleIndex]
+            ).items.push({
+                id: docItem.module + '/' + (
+                    docItem.section ? docItem.section + '/' : ''
+                ) + docItem.name,
+                title: docItem.name
+            });
+        });
+        treeItems.sort(sortByTitle);
+        treeItems.forEach(function(item) {
+            item.items.sort(sortByTitle);
+            item.items.forEach(function(subitem) {
+                subitem.items.sort(sortByTitle);
+            });
+        });
+        self.$list = Ox.TreeList({
+                expanded: self.options.expanded,
+                icon: self.options.showTests
+                    ? getIcon
+                    : Ox.UI.getImageURL('symbolCenter'),
+                items: treeItems,
+                selected: self.options.selected ? [self.options.selected] : '',
+                width: self.options.size
+            })
+            .bindEvent({
+                select: function(data) {
+                    if (!data.ids[0] || !Ox.endsWith(data.ids[0], '/')) {
+                        selectItem(
+                            data.ids[0] ? data.ids[0].split('/').pop() : ''
+                        );
+                    }
+                }
+            });
+        self.$sidebar.replaceElement(0, self.$list);
+        selectItem(self.options.selected);
+    }
+
+    function runTests() {
+        self.$testsButton.remove();
+        self.$testsStatus.html('Running Tests...').show();
+        Ox.load({Geo: {}, Image: {}, Unicode: {}}, function() {
+            Ox.test(self.options.items, function(results) {
+                results.forEach(function(result) {
+                    var item = getItemByName(result.name),
+                        passed = result.passed ? 'passed' : 'failed';
+                    item.tests[Ox.indexOf(item.tests, function(test) {
+                        return test.statement == result.statement;
+                    })] = result;
+                    ['', item.module + '/'].concat(
+                        item.section ? item.module + '/' + item.section + '/' : [],
+                        item.module + '/' + (item.section ? item.section + '/' : '') + item.name
+                    ).forEach(function(key) {
+                        self.options.results[key] = self.options.results[key] || {passed: 0, failed: 0};
+                        self.options.results[key][passed]++;
+                    });
+                });
+                self.$testsStatus.html(formatResults());
+                renderList();
+                that.triggerEvent('tests', {results: self.options.results});
+            });
+        });
+    }
+
+    function selectItem(id) {
+        var item = id ? getItemByName(id) : null;
+        if (item) {
+            self.options.selected = id;
+            self.$list.options({
+                selected: [item.module + '/' + (
+                    item.section ? item.section + '/' : ''
+                ) + item.name]
+            });
+            self.$page = Ox.DocPage({
+                    item: item,
+                    replace: self.options.replace,
+                    stripComments: self.options.stripComments
+                })
+                .bindEvent({
+                    close: function() {
+                        selectItem();
+                    },
+                    example: function(data) {
+                        that.triggerEvent('example', data);
+                    }
+                });
+            self.$panel.replaceElement(1, self.$page);
+        } else {
+            self.options.selected = '';
+            self.$list.options({selected: []});
+            self.$page.empty().append(self.options.element || $('<div>'));
+        }
+        that.triggerEvent('select', {id: self.options.selected});
+    }
+
+    function showLoadingScreen() {
+        self.$loadingIcon = Ox.LoadingIcon({size: 16})
+            .css({
+                position: 'absolute',
+                left: (self.$page.width() - self.options.size) / 2 - 8,
+                top: self.$page.height() / 2 - 20
+            })
+            .appendTo(self.$page)
+            .start();
+        self.$loadingText = $('<div>')
+            .addClass('OxLight')
+            .css({
+                position: 'absolute',
+                left: (self.$page.width() - self.options.size) / 2 - 128,
+                top: self.$page.height() / 2 + 4,
+                width: 256,
+                textAlign: 'center'
+            })
+            .html(Ox._('Generating Documentation...'))
+            .appendTo(self.$page);
+    }
+
+    function sortByTitle(a, b) {
+        var a = Ox.stripTags(a.title).toLowerCase(),
+            b = Ox.stripTags(b.title).toLowerCase();
+        return a < b ? -1 : a > b ? 1 : 0;
+    }
+
+    return that;
+
+};

source/UI/js/Code/ExamplePage.js

@@ -0,0 +1,225 @@
+'use strict'
+
+/*@
+Ox.ExamplePage <f> Example Page
+    options <o> Options
+    self <o> Shared private variable
+    ([options[, self]]) -> <o:Ox.SplitPanel> Example Page
+        change <!> Change event 
+        close <!> Close event
+@*/
+
+Ox.ExamplePage = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            html: '',
+            js: '',
+            references: [],
+            replaceCode: [],
+            replaceComment: [],
+            selected: 'source',
+            title: ''
+        })
+        .options(options || {})
+        .update({
+            selected: function() {
+                self.$tabs.options({value: self.options.selected});
+            }
+        });
+
+    self.$toolbar = Ox.Bar({size: 24});
+
+    self.$homeButton = Ox.Button({
+            title: 'home',
+            tooltip: Ox._('Home'),
+            type: 'image'
+        })
+        .css({float: 'left', margin: '4px 2px 4px 4px'})
+        .bindEvent({
+            click: function() {
+                that.triggerEvent('close');
+            }
+        })
+        .appendTo(self.$toolbar)
+
+    self.$title = Ox.Label({
+            style: 'square',
+            title: self.options.title
+        })
+        .css({float: 'left', borderRadius: '4px', margin: '4px 2px 4px 2px'})
+        .appendTo(self.$toolbar);
+
+    self.$openButton = Ox.Button({
+            disabled: self.options.selected == 'source',
+            title: 'open',
+            tooltip: Ox._('Open in New Tab'),
+            type: 'image'
+        })
+        .css({float: 'right', margin: '4px 4px 4px 2px'})
+        .bindEvent({
+            click: function() {
+                window.open(self.options.html);
+            }
+        })
+        .appendTo(self.$toolbar);
+
+    self.$reloadButton = Ox.Button({
+            disabled: self.options.selected == 'source',
+            title: 'redo',
+            tooltip: Ox._('Reload'),
+            type: 'image'
+        })
+        .css({float: 'right', margin: '4px 2px 4px 2px'})
+        .bindEvent({
+            click: function() {
+                self.$frame.attr({src: self.options.html});
+            }
+        })
+        .appendTo(self.$toolbar);
+
+    self.$switchButton = Ox.Button({
+            disabled: self.options.selected == 'source',
+            title: 'switch',
+            tooltip: Ox._('Switch Theme'),
+            type: 'image'
+        })
+        .css({float: 'right', margin: '4px 2px 4px 2px'})
+        .bindEvent({
+            click: function() {
+                self.$frame[0].contentWindow.postMessage(
+                    'Ox && Ox.Theme && Ox.Theme('
+                    + 'Ox.Theme() == "oxlight" ? "oxmedium"'
+                    + ' : Ox.Theme() == "oxmedium" ? "oxdark"'
+                    + ' : "oxlight"'
+                    + ')',
+                    '*'
+                );
+            }
+        })
+        .appendTo(self.$toolbar);
+
+    self.$tabs = Ox.ButtonGroup({
+            buttons: [
+                {
+                    id: 'source',
+                    title: Ox._('View Source'),
+                    width: 80
+                },
+                {
+                    id: 'live',
+                    title: Ox._('View Live'),
+                    width: 80
+                }
+            ],
+            selectable: true,
+            value: self.options.selected
+        })
+        .css({float: 'right', margin: '4px 2px 4px 2px'})
+        .bindEvent({
+            change: function(data) {
+                var disabled = data.value == 'source';
+                self.options.selected = data.value;
+                self.hasUI && self.$switchButton.options({disabled: disabled});
+                self.$reloadButton.options({disabled: disabled});
+                self.$openButton.options({disabled: disabled});
+                self.$content.animate({
+                    marginLeft: self.options.selected == 'source'
+                        ? 0 : -self.options.width + 'px'
+                }, 250, function() {
+                    if (
+                        self.options.selected == 'live'
+                        && !self.$frame.attr('src')
+                    ) {
+                        self.$frame.attr({src: self.options.html});
+                    }
+                });
+                that.triggerEvent('change', data);
+            }
+        })
+        .appendTo(self.$toolbar);
+
+    self.$viewer = Ox.SourceViewer({
+            file: self.options.js,
+            replaceCode: self.options.replaceCode,
+            replaceComment: self.options.replaceComment
+        })
+        .css({
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: self.options.width + 'px',
+            height: self.options.height - 24 + 'px'
+        });
+    self.$frame = Ox.Element('<iframe>')
+        .css({
+            position: 'absolute',
+            left: self.options.width + 'px',
+            top: 0,
+            border: 0
+        })
+        .attr({
+            width: self.options.width,
+            height: self.options.height
+        });
+    self.$content = Ox.Element()
+        .css({
+            position: 'absolute',
+            width: self.options.width * 2 + 'px',
+            marginLeft: self.options.selected == 'source'
+                ? 0 : -self.options.width + 'px'
+        })
+        .append(self.$viewer)
+        .append(self.$frame);
+    self.$container = Ox.Element()
+        .append(self.$content);
+
+    that.setElement(
+        Ox.SplitPanel({
+            elements: [
+                {element: self.$toolbar, size: 24},
+                {element: self.$container}
+            ],
+            orientation: 'vertical'
+        })
+        .addClass('OxExamplePage')
+    );
+
+    Ox.get(self.options.js, function(js) {
+        self.hasUI = /Ox\.load\(.+UI.+,/.test(js);
+        !self.hasUI && self.$switchButton.options({disabled: true});
+    });
+
+    Ox.$window.on({
+        resize: function() {
+            setSize();
+        }
+    });
+
+    setTimeout(function() {
+        setSize();
+        if (self.options.selected == 'live') {
+            self.$frame.attr({src: self.options.html});
+        }
+    }, 100);
+
+    function setSize() {
+        self.options.width = that.width();
+        self.options.height = that.height();
+        self.$content.css({
+            width: self.options.width * 2 + 'px'
+        })
+        self.$viewer.css({
+            width: self.options.width + 'px',
+            height: self.options.height - 24 + 'px'
+        })
+        self.$frame.attr({
+            width: self.options.width,
+            height: self.options.height - 24
+        });
+    }
+
+    return that;
+
+};

source/UI/js/Code/ExamplePanel.js

@@ -0,0 +1,181 @@
+'use strict';
+
+/*@
+Ox.ExamplePanel <f> Example Panel
+    options <o> Options
+    self <o> Shared private variable
+    ([options[, self]]) -> <o:Ox.SplitPanel> Example Panel
+        change <!> Change event
+            value <s> 'source' or 'live'
+        load <!> Load event
+        select <!> Select event
+            id <s> selected example
+@*/
+
+Ox.ExamplePanel = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            element: '',
+            examples: [],
+            mode: 'source',
+            path: '',
+            references: null,
+            replaceCode: [],
+            replaceComment: [],
+            selected: '',
+            size: 256
+        })
+        .options(options || {})
+        .update({
+            mode: function() {
+                if (self.options.selected) {
+                    self.$page.options({selected: self.options.mode});
+                }
+            },
+            selected: function() {
+                self.options.mode = 'source';
+                selectItem(self.options.selected);
+            }
+        });
+
+    self.$list = Ox.Element();
+    self.$page = Ox.Element();
+
+    that.setElement(
+        self.$panel = Ox.SplitPanel({
+            elements: [
+                {
+                    element: self.$list,
+                    size: self.options.size
+                },
+                {
+                    element: self.$page
+                }
+            ],
+            orientation: 'horizontal'
+        })
+    );
+
+    loadItems(function(items) {
+        var treeItems = [];
+        self.items = items;
+        items.forEach(function(item) {
+            var sectionIndex = Ox.getIndexById(treeItems, item.section + '/');
+            if (sectionIndex == -1) {
+                treeItems.push({
+                    id: item.section + '/',
+                    items: [],
+                    title: item.sectionTitle
+                });
+                sectionIndex = treeItems.length - 1;
+            }
+            treeItems[sectionIndex].items.push(item);
+        });
+        self.$list = Ox.TreeList({
+                expanded: true,
+                icon: Ox.UI.getImageURL('symbolCenter'),
+                items: treeItems,
+                selected: self.options.selected ? [self.options.selected] : [],
+                width: self.options.size
+            })
+            .bindEvent({
+                select: function(data) {
+                    if (!data.ids[0] || !Ox.endsWith(data.ids[0], '/')) {
+                        self.options.mode = 'source';
+                        selectItem(
+                            data.ids[0] ? data.ids[0].split('/').pop() : ''
+                        );
+                    }
+                }
+            });
+        self.$panel.replaceElement(0, self.$list);
+        selectItem(self.options.selected);
+        that.triggerEvent('load', {items: self.items});
+    });
+
+    function getItemByName(name) {
+        var item = null;
+        Ox.forEach(self.items, function(v) {
+            if (v.id.split('/').pop() == name) {
+                item = v;
+                return false; // break
+            }
+        });
+        return item;
+    }
+
+    function loadItems(callback) {
+        var items = [];
+        self.options.examples.forEach(function(example) {
+            var item = {
+                html: self.options.path + example + '/index.html',
+                id: example,
+                js: self.options.path + example + '/js/example.js',
+                section: example.split('/').shift()
+            };
+            Ox.get(item.html, function(html) {
+                var match = html.match(/<title>(.+)<\/title>/);
+                item.title = match ? match[1] : 'Untitled';
+                match = html.match(/<meta http-equiv="Keywords" content="(.+)"\/>/);
+                item.sectionTitle = match ? match[1] : Ox._('Untitled');
+                Ox.get(item.js, function(js) {
+                    var references = js.match(self.options.references);
+                    item.references = references ? Ox.unique(references).sort(function(a, b) {
+                        a = a.toLowerCase();
+                        b = b.toLowerCase();
+                        return a < b ? -1 : a > b ? 1 : 0;
+                    }) : [];
+                    items.push(item);
+                    if (items.length == self.options.examples.length) {
+                        callback(items.sort(sortById));
+                    }
+                });
+            });
+        });
+    }
+
+    function selectItem(id) {
+        var item = id ? getItemByName(id) : null,
+            selected = self.options.selected;
+        if (item) {
+            self.options.selected = id;
+            self.$list.options({selected: [item.section + '/' + id]});
+            self.$page = Ox.ExamplePage({
+                    height: window.innerHeight,
+                    html: item.html,
+                    js: item.js,
+                    references: item.references,
+                    replaceCode: self.options.replaceCode,
+                    replaceComment: self.options.replaceComment,
+                    selected: self.options.mode,
+                    title: item.title,
+                    width: window.innerWidth - self.options.size
+                })
+                .bindEvent({
+                    change: function(data) {
+                        that.triggerEvent('change', data);
+                    },
+                    close: function() {
+                        selectItem();
+                    }
+                });
+            self.$panel.replaceElement(1, self.$page);
+        } else {
+            self.options.selected = '';
+            self.$list.options({selected: []});
+            self.$page.empty().append(self.options.element);
+        }
+        if (self.options.selected != selected) {
+            that.triggerEvent('select', {id: self.options.selected});
+        }
+    }
+
+    function sortById(a, b) {
+        return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
+    }
+
+    return that;
+
+};

source/UI/js/Code/SourceViewer.js

@@ -0,0 +1,95 @@
+'use strict';
+
+/*@
+Ox.SourceViewer <f> Source Viewer
+    options <o> Options
+    self <o> Shared private variable
+    ([options[, self]]) -> <o:Ox.Container> Source Viewer
+@*/
+
+Ox.SourceViewer = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Container({}, self)
+        .defaults({
+            file: '',
+            replaceCode: [],
+            replaceComment: []
+        })
+        .options(options)
+        .addClass('OxSourceViewer');
+
+    self.options.replaceComment.unshift(
+        // removes indentation inside <pre> tags
+        [
+            /<pre>([\s\S]+)<\/pre>/g,
+            function(pre, text) {
+                var lines = trim(text).split('\n'),
+                    indent = Ox.min(lines.map(function(line) {
+                        var match = line.match(/^\s+/);
+                        return match ? match[0].length : 0;
+                    }));
+                return '<pre>' + lines.map(function(line) {
+                    return line.slice(indent);
+                }).join('\n') + '</pre>';
+            }
+        ]
+    );
+
+    self.$table = $('<table>').appendTo(that.$content);
+
+    Ox.get(self.options.file, function(source) {
+        var sections = [{comment: '', code: ''}];
+        Ox.tokenize(source).forEach(function(token, i) {
+            // treat doc comments as code
+            var type = token.type == 'comment' && token.value[2] != '@'
+                ? 'comment' : 'code';
+            // remove '//' comments
+            if (!/^\/\/[^@]/.test(token.value)) {
+                if (type == 'comment' ) {
+                    i && sections.push({comment: '', code: ''});
+                    token.value = Ox.parseMarkdown(
+                        trim(token.value.slice(2, -2))
+                    );
+                    self.options.replaceComment.forEach(function(replace) {
+                        token.value = token.value.replace(
+                            replace[0], replace[1]
+                        );
+                    });
+                }
+                Ox.last(sections)[type] += token.value;
+            }
+        });
+        sections.forEach(function(section) {
+            var $section = $('<tr>')
+                    .appendTo(self.$table),
+                $comment = $('<td>')
+                    .addClass('OxComment OxSerif OxSelectable')
+                    .html(Ox.addLinks(section.comment, true))
+                    .appendTo($section),
+                $code = $('<td>')
+                    .addClass('OxCode')
+                    .append(
+                        Ox.SyntaxHighlighter({
+                            replace: self.options.replaceCode,
+                            source: trim(section.code)
+                        })
+                    )
+                    .appendTo($section);
+        });
+        setTimeout(function() {
+            var height = that.height();
+            if (self.$table.height() < height) {
+                self.$table.css({height: height + 'px'});
+            }
+        }, 100);
+    });
+
+    function trim(str) {
+        // removes leading or trailing empty line
+        return str.replace(/^\s*\n/, '').replace(/\n\s*$/, '');
+    }
+
+    return that;
+
+};

source/UI/js/Code/SyntaxHighlighter.js

@@ -0,0 +1,147 @@
+'use strict';
+
+/*@
+Ox.SyntaxHighlighter <f> Syntax Highlighter
+    options <o> Options
+        file <s|''> JavaScript file (alternative to `source` option)
+        lineLength <n|0> If larger than zero, show edge of page
+        offset <n|1> First line number
+        replace <[[]]|[]> Array of replacements
+            Each array element is an array of two arguments to be passed to the
+            replace function, like [str, str], [regexp, str] or [regexp, fn]
+        showLinebreaks <b|false> If true, show linebreaks
+        showLineNumbers <b|false> If true, show line numbers
+        showWhitespace <b|false> If true, show whitespace
+        showTabs <b|false> If true, show tabs
+        source <s|[o]|''> JavaScript source, or array of tokens
+        stripComments <b|false> If true, strip comments
+        tabSize <n|4> Number of spaces per tab
+    self <o> Shared private variable
+    ([options[, self]]) -> <o:Ox.Element> Syntax Highlighter
+@*/
+
+Ox.SyntaxHighlighter = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+            .defaults({
+                file: '',
+                lineLength: 0,
+                offset: 1,
+                replace: [],
+                showLinebreaks: false,
+                showLineNumbers: false,
+                showTabs: false,
+                showWhitespace: false,
+                source: '',
+                stripComments: false,
+                tabSize: 4
+            })
+            .options(options || {})
+            .update(renderSource)
+            .addClass('OxSyntaxHighlighter');
+
+    if (self.options.file) {
+        Ox.get(self.options.file, function(source) {
+           self.options.source = source;
+           renderSource(); 
+        });
+    } else {
+        renderSource();
+    }
+
+    function renderSource() {
+        var $lineNumbers, $line, $source, width,
+            lines, source = '', tokens,
+            linebreak = (
+                self.options.showLinebreaks
+                ? '<span class="OxLinebreak">\u21A9</span>' : ''
+            ) + '<br/>',
+            tab = (
+                self.options.showTabs ?
+                '<span class="OxTab">\u2192</span>' : ''
+            ) + Ox.repeat('&nbsp;', self.options.tabSize - self.options.showTabs),
+            whitespace = self.options.showWhitespace ? '\u00B7' : '&nbsp;';
+        tokens = Ox.isArray(self.options.source)
+            ? self.options.source
+            : Ox.tokenize(self.options.source);
+        tokens.forEach(function(token, i) {
+            var classNames,
+                type = token.type == 'identifier'
+                    ? Ox.identify(token.value) : token.type;
+            if (
+                !(self.options.stripComments && type == 'comment')
+            ) {
+                classNames = 'Ox' + Ox.toTitleCase(type);
+                if (self.options.showWhitespace && type == 'whitespace') {
+                    if (isAfterLinebreak() && hasIrregularSpaces()) {
+                        classNames += ' OxLeading';
+                    } else if (isBeforeLinebreak()) {
+                        classNames += ' OxTrailing';
+                    }
+                }
+                source += '<span class="' + classNames + '">' +
+                    Ox.encodeHTMLEntities(token.value)
+                    .replace(/ /g, whitespace)
+                    .replace(/\t/g, tab)
+                    .replace(/\n/g, linebreak) + '</span>';
+            }
+            function isAfterLinebreak() {
+                return i == 0 ||
+                    tokens[i - 1].type == 'linebreak';
+            }
+            function isBeforeLinebreak() {
+                return i == tokens.length - 1 ||
+                    tokens[i + 1].type == 'linebreak';
+            }
+            function hasIrregularSpaces() {
+                return token.value.split('').reduce(function(prev, curr) {
+                    return prev + (curr == ' ' ? 1 : 0);
+                }, 0) % self.options.tabSize;
+            }
+        });
+        lines = source.split('<br/>');
+        that.empty();
+        if (self.options.showLineNumbers) {
+            $lineNumbers = Ox.Element()
+                .addClass('OxLineNumbers')
+                .html(
+                    Ox.range(lines.length).map(function(line) {
+                        return (line + self.options.offset);
+                    }).join('<br/>')
+                )
+                .appendTo(that);
+        }
+
+        self.options.replace.forEach(function(replace) {
+            source = source.replace(replace[0], replace[1])
+        });
+        
+        $source = Ox.Element()
+            .addClass('OxSourceCode OxSelectable')
+            .html(source)
+            .appendTo(that);
+        if (self.options.lineLength) {
+            $line = Ox.Element()
+                .css({
+                    position: 'absolute',
+                    top: '-1000px'
+                })
+                .html(Ox.repeat('&nbsp;', self.options.lineLength))
+                .appendTo(that);
+            width = $line.width() + 4; // add padding
+            $line.remove();
+            ['moz', 'webkit'].forEach(function(browser) {
+                $source.css({
+                    background: '-' + browser +
+                        '-linear-gradient(left, rgb(255, 255, 255) ' +
+                        width + 'px, rgb(192, 192, 192) ' + width +
+                        'px, rgb(255, 255, 255) ' + (width + 1) + 'px)'
+                });
+            });
+        }
+    }
+
+    return that;
+
+};