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

    Ox.loadJSON('json/cities100000.json', function(data) {

        var listmap = new Ox.ListMap({
                height: window.innerHeight,
                places: data.map(function(city) {
                    var 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]},
                        size = Math.sqrt(city.population * 100),
                        latSize = size / Ox.EARTH_CIRCUMFERENCE * 360,
                        lngSize = size * Ox.getDegreesPerMeter(city.latitude);
                    return Ox.extend({
                        countryCode: city.country_code == 'XK' ? 'RS-KO' : city.country_code,
                        editable: true,
                        flag: city.country_code,
                        geoname: city.name,
                        markerColor: marker.color,
                        markerSize: marker.size,
                        name: city.name,
                        size: city.population * 100,
                        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
                    });
                }),
                width: window.innerWidth
            })
            .bindEvent({
                geocode: function(event, data) {
                    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;
    });
});