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

    var $items = [
            Ox.Input({
                id: 'name',
                label: 'Name',
                labelWidth: 64,
                width: 240
            }),
            Ox.Input({
                id: 'geoname',
                label: 'Geoname',
                labelWidth: 64,
                width: 240
            }),
            Ox.ArrayInput({
                id: 'alternativeNames',
                label: 'Alternative Names',
                max: 10,
                //sort: true,
                values: [],
                width: 240
            }),
            Ox.Input({
                decimals: 8,
                id: 'lat',
                label: 'Latitude',
                labelWidth: 80,
                max: Ox.MAX_LATITUDE,
                min: Ox.MIN_LATITUDE,
                type: 'float',
                width: 240
            }),
            Ox.Input({
                decimals: 8,
                id: 'lng',
                label: 'Longitude',
                labelWidth: 80,
                max: 180,
                min: -180,
                type: 'float',
                width: 240
            })
        ],
        $bar = Ox.Bar({
                size: 24
            }),
        $button = Ox.Button({
                id: 'submit',
                title: 'check',
                type: 'image'
            })
            .css({
                float: 'right',
                margin: '4px'
            })
            .bindEvent({
                click: function() {
                    $foo.html(JSON.stringify($form.values()))
                }
            })
            .appendTo($bar),
        $container = Ox.Container(),
        $foo = Ox.Element(),
        $form = Ox.Form({
                items: $items
            })
            .css({
                padding: '8px'
            })
            .appendTo($container);

    Ox.SplitPanel({
        elements: [
            {
                collapsible: true,
                element: Ox.SplitPanel({
                    elements: [
                        {
                            element: $container
                        },
                        {
                            element: $bar,
                            size: 24
                        }
                    ],
                    orientation: 'vertical'
                })
                .bindEvent({
                    resize: function(foo, size) {
                        $items.forEach(function($item) {
                            $item.options({width: size - 16});
                        });
                    }
                }),
                resizable: true,
                resize: [128, 256, 384],
                size: 256
            },
            {
                element: $foo
            }
        ],
        orientation: 'horizontal'
    }).appendTo(Ox.UI.$body);

});