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

    $.getJSON('json/countries.json', function(data) {
        
        var width = window.innerWidth - 256,
            height = window.innerHeight,
            map = new Ox.Map({
                    clickable: true,
                    editable: true,
                    height: height,
                    places: data.map(function(place) {
                        return Ox.extend({
                            countryCode: place.code,
                            editable: true,
                            flag: place.code,
                            geoname: place.name,
                            name: place.name,
                            size: place.size,
                            type: 'Country',
                            lat: place.lat,
                            lng: place.lng,
                            south: place.south,
                            west: place.west,
                            north: place.north,
                            east: place.east
                        });
                    }),
                    /*
                    [
                        {
                            editable: true,
                            flag: 'UK',
                            geoname: 'Westminster, London, UK',
                            name: 'London',
                            //lat: 51.5001524,
                            lat: 51.52670875,
                            lng: -0.1262362,
                            south: 51.3493528,
                            west: -0.378358,
                            north: 51.7040647,
                            east: 0.1502295
                        },
                        {
                            editable: false,
                            flag: 'FR',
                            geoname: 'Paris, France',
                            name: 'Paris',
                            lat: 48.8566667,
                            lng: 2.3509871,
                            south: 48.8155414,
                            west: 2.2241006,
                            north: 48.9021461,
                            east: 2.4699099,
                        }
                    ],
                    */
                    statusbar: true,
                    toolbar: true,
                    width: width,
                    zoombar: true
                })
                .bindEvent({
                    resize: function(event, data) {
                        map.resizeMap();
                    },
                    selectplace: function(event, data) {
                        Ox.print('DATA', data)
                        panel.replaceElement(1, list = new Ox.TreeList({
                            data: Ox.isEmpty(data) ? [] : {
                                components: data.components,
                                countryCode: data.countryCode,
                                crossesDateline: data.crossesDateline(),
                                east: data.east,
                                fullGeoname: data.fullGeoname,
                                geoname: data.geoname,
                                lat: data.lat,
                                lng: data.lng,
                                name: data.name,
                                north: data.north,
                                size: data.size,
                                sizeEastWest: data.sizeEastWest,
                                sizeNorthSouth: data.sizeNorthSouth,
                                south: data.south,
                                west: data.west,
                                type: data.type
                            }
                        }));
                    }
                });

            list = new Ox.TreeList({
                    data: [],
                    width: 256
                })
            panel = new Ox.SplitPanel({
                    elements: [
                        {
                            element: map
                        },
                        {
                            element: list,
                            resizable: true,
                            resize: [128, 256, 384],
                            size: 256
                        }
                    ],
                    orientation: 'horizontal'
                })
                .appendTo($('body'));


        //setTimeout(function() {
            //map.appendTo($('body'));
            map.gainFocus();
        //}, 2000)


        /*
        $(window).resize(function() {
            map.options({
                height: window.innerHeight,
                width: window.innerWidth - 256
            });
        });
        */

    });

});