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

    Ox.getJSONC('../jsonc/countries.jsonc', function(geo) {

        var $map = $('<img>')
                .attr({
                    id: 'map',
                    src: '../png/map.png'
                }),
            $bar = Ox.Bar({size: 24}),
            $status = $('<div>')
                .css({margin: '5px 0 0 8px'})
                .appendTo($bar)
            $panel = Ox.SplitPanel({
                    elements: [
                        {
                            element: $map
                        },
                        {
                            element: $bar,
                            size: 24
                        }
                    ],
                    orientation: 'vertical'
                })
                .appendTo(Ox.UI.$body),
            errors = [],
            geocoder = new google.maps.Geocoder(),
            json = [],
            timeout = 2000;

        Ox.getJSON('../json/countries.json', function(countries) {
            var length = countries.length;
            callGetData();
            function callGetData() {
                getData(countries.shift(), function(country) {
                    addFlag(country);
                    json.push(country);
                    $status.html(json.length + '/' + length + ' ' + country.name);
                    if (countries.length) {
                        setTimeout(callGetData, timeout);
                    } else {
                        var $dialog = Ox.Dialog({
                                buttons: [
                                    Ox.Button({
                                        title: 'Close'
                                    })
                                    .bindEvent({
                                        click: function() {
                                            $dialog.close();
                                        }
                                    })
                                ],
                                content: $('<div>')
                                    .css({
                                        margin: '16px',
                                        MozUserSelect: 'text',
                                        WebkitUserSelect: 'text'
                                    })
                                    .html(
                                        '<code><pre>' + JSON.stringify(json, null, 4) + '</pre></code>'
                                    ),
                                height: window.innerHeight * 0.9 - 48,
                                title: 'Ox.Geo',
                                width: window.innerWidth * 0.9
                            }).open();
                        Ox.print('Errors:', errors);
                        $status.html(
                            errors.length
                            ? 'Done, see console for errors.'
                            : 'Done, no errors.'
                        );
                    }
                });
            }
        });

        function addFlag(country) {
            var $div,
                center = Ox.getXYByLatLng({lat: country.lat, lng: country.lng}),
                crossesDateline = country.west > country.east,
                height = $map.height(),
                northEast = Ox.getXYByLatLng({lat: country.north, lng: country.east}),
                southWest = Ox.getXYByLatLng({lat: country.south, lng: country.west}),
                width = $map.width();
            if (crossesDateline) {
                $div = [
                    $('<div>')
                        .addClass('rect')
                        .css({
                            left: '-16px',
                            top: (height * northEast.y) + 'px',
                            right: (width - width * northEast.x) + 'px',
                            bottom: (height - height * southWest.y) + 'px',
                        })
                        .hide()
                        .appendTo(Ox.UI.$body),
                    $('<div>')
                        .addClass('rect')
                        .css({
                            left: (width * southWest.x) + 'px',
                            top: (height * northEast.y) + 'px',
                            right: '-16px',
                            bottom: (height - height * southWest.y) + 'px',
                        })
                        .hide()
                        .appendTo(Ox.UI.$body),

                ];
            } else {
                $div = [
                    $('<div>')
                        .addClass('rect')
                        .css({
                            left: ($map.width() * southWest.x) + 'px',
                            top: ($map.height() * northEast.y) + 'px',
                            right: ($map.width() - $map.width() * northEast.x) + 'px',
                            bottom: ($map.height() - $map.height() * southWest.y) + 'px',
                        })
                        .hide()
                        .appendTo(Ox.UI.$body)
                ];
            }
            $('<img>')
                .attr({
                    src: '../png/icons/16/' + country.code + '.png',
                    title: country.name + ' ((' + country.south + ", " + country.west + "), (" + country.north + ", " + country.east + "))"
                })
                .addClass('flag')
                .css({
                    left: (center.x * 100) + '%',
                    top: (center.y * 100) + '%'
                })
                .mouseenter(function() {
                    $(this).css({
                        zIndex: Ox.uid()
                    });
                    $.each($div, function() {
                        $(this).show();
                    });
                })
                .mouseleave(function() {
                    $.each($div, function() {
                        $(this).hide();
                    });
                })
                .appendTo(Ox.UI.$body);
        }

        function geocode(address, country, callback) {
            var bounds;
            if (!Ox.isUndefined(country.north)) {
                bounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(country.south, country.west),
                    new google.maps.LatLng(country.north, country.east)
                );
                callback({
                    bounds: bounds,
                    location: bounds.getCenter()
                });
            } else {
                geocoder.geocode({
                    language: 'en',
                    address: address
                }, function(results, status) {
                    if (results && results.length) {
                        var result = results[0];
                        callback({
                            bounds: result.geometry.bounds || result.geometry.viewport,
                            location: result.geometry.location
                        })
                    } else {
                        errors.push([address, status])
                        callback(null);
                    }
                });
            }
        }

        function getData(country, callback) {
            if (country.lat) {
                callback(country);
                return;
            }
            var addresses = geo.geocode[country.name] || [country.name],
                length = addresses.length,
                union;
            getImageURLs(country, function(imageURLs) {
                // this might be too much data
                /*
                Ox.extend(country, {
                    imageURLs: imageURLs
                });
                */
                callGeocode();
            });
            function callGeocode() {
                geocode(addresses.shift(), country, function(data) {
                    var center, lat, lng,
                        northEast, southWest,
                        east, north, south, west;
                    if (data) {
                        union = !union ? data.bounds : union.union(data.bounds);
                        if (addresses.length == 0) {
                            if (length == 1) {
                                lat = data.location.lat();
                                lng = data.location.lng();
                            } else {
                                center = union.getCenter();
                                lat = center.lat();
                                lng = center.lng();
                            }
                            northEast = union.getNorthEast();
                            southWest = union.getSouthWest();
                            east = northEast.lng();
                            north = northEast.lat();
                            south = southWest.lat();
                            west = southWest.lng();
                            callback($.extend(country, {
                                area: Ox.getArea(
                                    {lat: south, lng: west},
                                    {lat: north, lng: east}
                                ),
                                east: toFixed(east),
                                lat: toFixed(lat),
                                lng: toFixed(lng),
                                north: toFixed(north),
                                south: toFixed(south),
                                west: toFixed(west)
                            }));
                        }
                    } else {
                        callback(country);
                    }
                });
                if (addresses.length) {
                    setTimeout(callGeocode, timeout);
                }
            }
        }

        function getImageURLs(country, callback) {
            var image = new Image();
            image.onload = function() {
                callback({
                    icon16: Ox.canvas(image).canvas.toDataURL()
                });
            };
            image.src = '../png/icons/16/' + country.code + '.png';
        }

        function toFixed(num) {
            return parseFloat(num.toFixed(8));
        }

    });

});