# This is just a test

Foo bar baz.

foo: `// this is some code`

> blockquote

    /*

    */

    'use strict';

    /*
    We have to load the Geo module to get Ox.COUNTRIES
    */
    Ox.load({UI: {}, Geo: {}}, function() {

        var countries = Ox.COUNTRIES.filter(function(country) {
                /*
                We filter out some types of countries that we're not interested in.
                */
                return !country.disputed
                    && !country.dissolved
                    && !country.exception
                    && country.code.length == 2
            }).map(function(country) {
                /*
                For independent countries, the dependency property is undefined. We
                want an empty array though, so that the type of this column gets
                correctly detected as array.
                */
                country.dependency = country.dependency || [];
                /*
                When sorting the list by region, we want the regions to be grouped
                by continent. To get this sort order, we set the value for region to
                'Continent, Region'. Later, a format function for the region column
                will remove the continent part again.
                */
                country.region = country.continent + ', ' + country.region;
                return country;
            }),
            api = Ox.api(countries, {sort: ['+name'], unique: 'code'}),
            $list = Ox.TextList({
                    columns: [
                        {
                            /*
                            The format function of a column has a second argument
                            which contains the values of all columns. This allows us
                            to format a value dependent on other values. In this
                            case, we want to display a flag, and while our items
                            don't have a flag property, the Geo module allows us to
                            derive it from the name property. The flag image needs a
                            tooltip (which is why we can't use an $('') here),
                            and gets some CSS adjustments.
                            */
                            format: function(value, data) {
                                return Ox.Element({
                                        element: '',
                                        tooltip:
                                            ''
                                    })
                                    .attr({
                                        src: Ox.getFlagByGeoname(data.name, 16)
                                    })
                                    .css({
                                        width: '14px',
                                        height: '14px',
                                        marginLeft: '-3px'
                                    })
                            },
                            /*
                            As the actual key for the column, we use the country
                            code, not the country name, since we still want to
                            display the name in its own column.
                            */
                            id: 'flagURL',
                            operator: '+',
                            removable: false,
                            /*
                            We want the column title to be a flag symbol, so we
                            specify this as the titleImage. We can pick anything
                            from the collection of symbols that comes with Ox.UI.
                            The column still needs a textual title that will be
                            displayed in the menu that allows to show or hide
                            specific columns.
                            */
                            title: 'Flag',
                            titleImage: 'flag',
                            /*
                            The country code is the unique key of our country table.
                            In consequence, whenever the list fires a select event,
                            it will reference this value as the item's id.
                            */
                            unique: true,
                            visible: true,
                            width: 16
                        },
                        {
                            id: 'code',
                            operator: '+',
                            title: 'Code',
                            unique: true,
                            visible: true,
                            width: 64
                        },
                        {
                            id: 'name',
                            /*
                            The operator indicates that we want the default sort
                            order of this column to be ascending.
                            */
                            operator: '+',
                            /*
                            As it wouldn't make much sense to display the list
                            without the name column, we make it non-removable.
                            */
                            removable: false,
                            title: 'Name',
                            visible: true,
                            width: 256
                        },
                        {
                            id: 'continent',
                            operator: '+',
                            title: 'Continent',
                            visible: true,
                            width: 96
                        },
                        {
                            /*
                            To tweak the sort order for this column, we had changed
                            the value for region to 'Continent, Region'. The format
                            function now reverts that change.
                            */
                            format: function(value) {
                                return value.split(', ')[1];
                            },
                            id: 'region',
                            operator: '+',
                            title: 'Region',
                            visible: true,
                            width: 160
                        },
                        {
                            /*
                            As the value is a number, it should be right-aligned.
                            */
                            align: 'right',
                            /*
                            To get from square meters to something human-readable,
                            we use one of the built-in format functions.
                            */
                            format: function(value) {
                                return Ox.formatArea(value);
                            },
                            id: 'area',
                            operator: '-',
                            title: 'Area',
                            visible: true,
                            width: 112
                        },
                        {
                            format: function(value) {
                                return Ox.formatDegrees(value, 'lat');
                            },
                            align: 'right',
                            id: 'lat',
                            operator: '-',
                            title: 'Latitude',
                            visible: true,
                            width: 80
                        },
                        {
                            format: function(value) {
                                return Ox.formatDegrees(value, 'lng');
                            },
                            align: 'right',
                            id: 'lng',
                            operator: '+',
                            title: 'Longitude',
                            visible: true,
                            width: 80
                        },
                        /*
                        For the next four columns, which seem less important, we
                        omit the 'visible' option, which defaults to false. They can
                        still be made visible, they're just not visible by default.
                        */
                        {
                            align: 'right',
                            format: function(value) {
                                return Ox.formatDegrees(value, 'lat');
                            },
                            id: 'south',
                            operator: '-',
                            title: 'South',
                            width: 80
                        },
                        {
                            align: 'right',
                            format: function(value) {
                                return Ox.formatDegrees(value, 'lat');
                            },
                            id: 'north',
                            operator: '-',
                            title: 'North',
                            width: 80
                        },
                        {
                            align: 'right',
                            format: function(value) {
                                return Ox.formatDegrees(value, 'lng');
                            },
                            id: 'west',
                            operator: '-',
                            title: 'West',
                            width: 80
                        },
                        {
                            align: 'right',
                            format: function(value) {
                                return Ox.formatDegrees(value, 'lng');
                            },
                            id: 'east',
                            operator: '-',
                            title: 'East',
                            width: 80
                        },
                        {
                            /*
                            The dependency property is an array of country names,
                            for each of which we want to display a flag. So we use a
                            similar constuction as above, and wrap the images in a
                            $('') element.
                            */
                            format: function(value) {
                                var ret = '';
                                if (value) {
                                    var ret = $('').css({marginLeft: '-4px'});
                                    value.forEach(function(country) {
                                        Ox.Element({
                                                element: '',
                                                tooltip: country
                                            })
                                            .attr({
                                                src: Ox.getFlagByGeoname(country, 16)
                                            })
                                            .css({
                                                width: '14px',
                                                height: '14px',
                                                margin: '1px'
                                            })
                                            .appendTo(ret);
                                    });
                                }
                                return ret;
                            },
                            id: 'dependency',
                            operator: '+',
                            title: 'Dependency of',
                            visible: true,
                            width: 112
                        }
                    ],
                    /*
                    This allows the user to move the columns around
                    */
                    columnsMovable: true,
                    /*
                    This enables the UI to show or hide specific columns
                    */
                    columnsRemovable: true,
                    /*
                    This makes sure the column titles get displayed
                    */
                    columnsVisible: true,
                    items: api,
                    /*
                    Pagination is useful when a list is so big that only parts of it
                    can be requested or displayed. Since this is not the case here,
                    we set the page length to a sufficiently large number.
                    */
                    pageLength: Ox.COUNTRIES.length,
                    scrollbarVisible: true,
                    /*
                    We have to specify the default sort order.
                    */
                    sort: [{key: 'name', operator: '+'}]
                })
                .bindEvent({
                    /*
                    The init event of a list fires when the items function has
                    returned the total number of items. If we're dealing with a
                    remote API, a complex query, a huge dataset or a range request
                    for paginated results according to a non-trivial sort order,
                    this may happen quite a bit before any items are returned. Here,
                    we simply display the number of items in the status bar.
                    */
                    init: function(data) {
                        $status.html(
                            (data.items || 'No') + ' countr'
                            + (data.items == 1 ? 'y' : 'ies')
                        );
                    }
                }),
            /*
            We want the user to be able to pick if dependent countries are included
            in the list or not. So we add a checkbox, and bind the find function to
            its change event.
            */
            $include = Ox.Checkbox({
                    title: 'Include Dependencies',
                    value: true
                })
                .css({float: 'left', margin: '4px'})
                .bindEvent({
                    change: find
                }),
            /*
            We want a search field with find-as-you-type, so we use an input element
            and set its changeOnKeypress option to true.
            */
            $find = Ox.Input({
                    changeOnKeypress: true,
                    placeholder: 'Find',
                    width: 192
                })
                .css({float: 'right', margin: '4px'})
                .bindEvent({
                    change: find
                }),
            /*
            ...
            */
            $toolbar = Ox.Bar({size: 24}).append($include).append($find),
            $status = $('').css({
                marginTop: '2px',
                fontSize: '9px',
                textAlign: 'center'
            }),
            $statusbar = Ox.Bar({size: 16}).append($status),
            $panel = Ox.SplitPanel({
                    elements: [
                        {element: $toolbar, size: 24},
                        {element: $list},
                        {element: $statusbar, size: 16}
                    ],
                    orientation: 'vertical'
                })
                .appendTo(Ox.$body);

        function find() {
            /*
            The find function is bound to the change events of the $include checkbox
            and the $find input field. In both cases, the value will be passed, but
            since we need both values, we disregard it and query both elements for
            their value. If the $include box is not checked, we add a second
            condition that matches only independent countries.
            */
            var conditions = [
                {key: 'name', operator: '=', value: $find.options('value')},
            ];
            !$include.options('value') && conditions.push(
                {key: 'dependency', operator: '=', value: void 0}
            );
            /*
            ...
            */
            api({
                keys: [],
                query: {conditions: conditions, operator: '&'}
            }, function(result) {
                $list.options({
                    items: Ox.api(
                        result.data.items, {sort: '+name', unique: 'code'}
                    )
                });
            });
        }

    });