Ox.load('UI', {
    debug: true,
    theme: 'classic'
}, function() {

    var $button = Ox.Button({
            title: 'Run',
            width: 256
        })
        .css({
            marginTop: '256px'
        })
        .click(function() {
            $syntaxHighlighter.options({
                source: $textarea.value()
            });
        }),
        $options = Ox.Element()
            .append(
                Ox.FormElementGroup({
                    elements: ['showLineNumbers', 'showLinebreaks', 'showTabs', 'showWhitespace'].map(function(v, i) {
                        return Ox.Checkbox({
                            overlap: 'right',
                            title: Ox.toDashes(v).split('-').map(function(v) { return Ox.toTitleCase(v); }).join(' '),
                            width: 160
                        }).bindEvent({
                            change: function(event) {
                                $syntaxHighlighter.options(v, event.checked);
                            }
                        })
                    })
                })
            ),
        $syntaxHighlighter = Ox.SyntaxHighlighter(),
        $textarea = Ox.Input({
            height: 256,
            type: 'textarea',
            width: 256
        })
        .css({
            fontFamily: 'Menlo, Monaco, Courier, Courier New' 
        });

    Ox.SplitPanel({
        elements: [
            {
                element: Ox.Element()
                    .append($textarea)
                    .append($button),
                resizable: true,
                resize: [128, 256, 384],
                size: 256
            },
            {
                element: Ox.Container()
                    .append($options)
                    .append($syntaxHighlighter)
            }
        ],
        orientation: 'horizontal'
    }).appendTo(Ox.UI.$body)

});