better syntax highlighter demo, some bugfixes

demos/syntax/js/syntax.js

@@ -3,48 +3,61 @@ Ox.load('UI', {
     theme: 'classic'
 }, function() {
 
-    Ox.Theme('classic');
+    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' 
+        });
 
-    var $body = $('body'),
-        $textarea = new Ox.Input({
-                height: 400,
-                type: 'textarea',
-                width: 400
-            })
-            .css({
-                fontFamily: 'Menlo, Monaco, Courier, Courier New' 
-            })
-            .appendTo($body),
-        $button = new Ox.Button({
-                title: 'Run',
-                width: 40
-            })
-            .css({
-                position: 'absolute',
-                left: '8px',
-                top: '416px',
-            })
-            .bindEvent({
-                click: function() {
-                    $div.empty();
-                    new Ox.SyntaxHighlighter({
-                        showLinebreaks: true,
-                        showTabs: true,
-                        showWhitespace: true,
-                        source: $textarea.value(),
-                        //stripComments: true,
-                        //stripLinebreaks: true,
-                        //stripWhitespace: true,
-                    }).appendTo($div);
-                }
-            })
-            .appendTo($body),
-        $div = $('<div>')
-            .css({
-                position: 'absolute',
-                left: '416px',
-                top: '8px'
-            })
-            .appendTo($body);
+    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)
 
 });