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

Ox.load('Geo', function() {

    Ox.getJSON('json/cities100000.json', function(cities) {

        var listmap = new Ox.ListMap({
                height: window.innerHeight,
                places: Ox.map(cities, function(city, id) {
                    var countryCode = city.country_code == 'XK' ? 'RS-KO' : city.country_code,
                        marker = city.population > 20000000 ? {size: 24, color: [255, 0, 0]} :
                            city.population > 10000000 ? {size: 22, color: [255, 32, 0]} :
                            city.population > 5000000 ? {size: 20, color: [255, 64, 0]} :
                            city.population > 2000000 ? {size: 18, color: [255, 96, 0]} :
                            city.population > 1000000 ? {size: 16, color: [255, 128, 0]} :
                            city.population > 500000 ? {size: 14, color: [255, 160, 0]} :
                            city.population > 200000 ? {size: 12, color: [255, 192, 0]} :
                            city.population > 100000 ? {size: 10, color: [255, 224, 0]} :
                            {size: 8, color: [255, 255, 0]},
                        area = Math.sqrt(city.population * 100),
                        latSize = area / Ox.EARTH_CIRCUMFERENCE * 360,
                        lngSize = area * Ox.getDegreesPerMeter(city.latitude);
                    return city.population > 600000/*400000*/ ? {
                        area: city.population * 100,
                        countryCode: countryCode,
                        editable: true,
                        flag: countryCode,
                        geoname: city.name + ', ' + Ox.getCountryByCode(countryCode).name,
                        id: Ox.encodeBase32(id),
                        markerColor: marker.color,
                        markerSize: marker.size,
                        name: city.name,
                        type: 'city',
                        lat: city.latitude,
                        lng: city.longitude,
                        south: city.latitude - latSize / 2,
                        west: city.longitude - lngSize / 2,
                        north: city.latitude + latSize / 2,
                        east: city.longitude + lngSize / 2
                    } : null;
                }),
                width: window.innerWidth
            })
            .bindEvent({
                geocode: function(event, data) {
                    Ox.print(event)
                    Ox.print(JSON.stringify(data))
                }
            })
            .appendTo(Ox.UI.$body);

        $(window).resize(function() {
            Ox.print('RESIZE', window.innerHeight)
            listmap.options({
                height: window.innerHeight,
                width: window.innerWidth
            });
        });

        window.listmap = listmap;

    });
    
});
});