$(function() {

    var width = window.innerWidth - 256,
        height = window.innerHeight,
        map = new Ox.Map({
                clickable: true,
                height: height,
                /*
                places: Ox.COUNTRIES.map(function(country) {
                    return country.name;
                }),
                */
                places: [
                    {
                        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
                    },
                    {
                        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({
                selectplace: function(event, data) {
                    panel.replaceElement(1, list = new Ox.TreeList({
                        data: {
                            components: data.components,
                            countryCode: data.countryCode,
                            crossesDateline: data.crossesDateline,
                            east: data.east,
                            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,
                            types: data.types
                        }
                    }));
                }
            }),
        list = new Ox.TreeList({
                data: []
            })
        panel = new Ox.SplitPanel({
                elements: [
                    {
                        element: map
                    },
                    {
                        element: list,
                        size: 256
                    }
                ],
                orientation: 'horizontal'
            })
            .appendTo($('body'));
            
    map.gainFocus();

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

});