Ox.load({UI: {theme: 'modern'}, Geo: {}}, function() {

    var $list = Ox.IconList({
            //borderRadius: 32,
            item: function(data, sort, size) {
                return {
                    height: size,
                    id: data.code,
                    info: data.region,
                    title: data.name + ' (' + data.code + ')',
                    url: Ox.getFlagByGeoname(data.name, 256),
                    width: size
                }
            },
            items: Ox.COUNTRIES.sort(function(a, b) {
                return a.code < b.code ? -1 : a.code > b.code ? 1 : 0;
            }),
            sort: [{key: 'code', operator: '+'}]
        });

    Ox.SplitPanel({
            elements: [
                {
                    element: Ox.Bar(),
                    size: 24
                },
                {
                    element: $list
                }
            ],
            orientation: 'vertical'
        })
        .appendTo(Ox.UI.$body);

    /*
    Ox.UI.$window.resize(function() {
        $list.size();
    });
    */
    
});