<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            body {
                margin: 0;
                overflow: hidden;
                -moz-user-select: none;
                -webkit-user-select: none;
            }
            .map {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                width: 1024px;
                height: 640px;
                margin: auto;
            }
            .flag {
                position: absolute;
                width: 8px;
                height: 8px;
                margin-left: -4px;
                margin-top: -4px;
                -moz-border-radius: 1px;
                -webkit-border-radius: 1px;
                -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 128);
            }
            .flag.hover,
            .flag:hover {
                width: 16px;
                height: 15px;
                margin-left: -8px;
                margin-top: -8px;
                -moz-border-radius: 2px;
                -webkit-border-radius: 2px;
                -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 128);
                z-index: 1000;
            }
        </style>
        <script src="../../build/js/jquery-1.3.2.js"></script>
        <script src="../../build/js/ox.js"></script>
        <script src="../../build/js/ox.data.js"></script>
        <script src="../../build/js/ox.geo.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script>
            $(function() {
                var $body = $("body"),
                    places = Ox.getCountries(true);
                var $map = $("<img/>")
                    .attr({
                        src: "map.png"
                    })
                    .addClass("map")
                    .appendTo("body")
                    .click(function(e) {
                        var offset = $(this).offset(),
                            left = offset.left,
                            top = offset.top,
                            width = $(this).width(),
                            height = $(this).height(),
                            latLng = Ox.getLatLng((e.clientX - left) / width, (e.clientY - top) / height);
                        Ox.getPlacemarks(latLng.lat, latLng.lng, function(data) {
                            var length = data.results.length;
                            Ox.print(data)
                            if (length && data.results[length - 1].types[0] == "country") {
                                var $img = $("#" + data.results[length - 1].address_components[0].short_name);
                                if (!$img.length) {
                                    Ox.getPlacemarks(data.results[length - 1].formatted_address, function(data) {
                                        if (data.results.length) {
                                            var location = data.results[0].geometry.location,
                                                xy = Ox.getXY(location.lat(), location.lng());
                                            //Ox.print(+new Date, place.name, location, xy);
                                            var $img = $("<img/>")
                                                .attr({
                                                    id: data.results[0].address_components[0].short_name,
                                                    src: "../../tools/flags/png/square/" + data.results[0].address_components[0].short_name + ".png",
                                                    title: data.results[0].formatted_address
                                                })
                                                .addClass("flag hover")
                                                .css({
                                                    left: left + (xy.x * width) + "px",
                                                    top: top + (xy.y * height) + "px"
                                                })
                                                .mouseenter(function() {
                                                    $(this).css({
                                                        zIndex: Ox.uid()
                                                    });
                                                })
                                                .dblclick(function() {
                                                    $(this).remove();
                                                })
                                                .appendTo($body);
                                            setTimeout(function() {
                                                $img.removeClass("hover");
                                            }, 1000);
                                        } else {
                                            //Ox.print("no results", place, data)
                                        }
                                    });
                                } else {
                                    $img.addClass("hover");
                                    setTimeout(function() {
                                        $img.removeClass("hover");
                                    }, 1000);
                                }
                            }
                        });
                    });
                // /*
                var aliases = {
                    "Ascension Island": "Ascension Island, Saint Helena",
                    "England": "England, United Kingdom",
                    "Georgia": "Georgia, Europe",
                    "Holy See": "Vatican City",
                    "Palestine": "West Bank",
                    "Saint Martin": "Sint Maarten",
                    "Scotland": "Scotland, United Kingdom",
                    "Svalbard and Jan Mayen": "Svalbard",
                    "Wales": "Wales, United Kingdom",
                    "Yugoslavia": "Serbia"
                };
                var json = [];
                setTimeout(function() {
                    getPlacemarks(places);
                }, 1000);
                function getPlacemarks(places) {
                    var place = places.shift();
                    Ox.getPlacemarks(aliases[place.name] || place.name, function(data) {
                        if (data.results.length) {
                            var location = data.results[0].geometry.location,
                                xy = Ox.getXY(location.lat(), location.lng()),
                                offset = $map.offset(),
                                left = offset.left,
                                top = offset.top,
                                width = $map.width(),
                                height = $map.height();
                            $("<img/>")
                                .attr({
                                    src: "../../tools/flags/png/square/" + (place.flag.indexOf("-") == 2 ? place.flag.substr(0, 2) + "/" : "") + place.flag + ".png",
                                    title: place.code + " " + place.name
                                })
                                .addClass("flag")
                                .css({
                                    left: left + (xy.x * width) + "px",
                                    top: top + (xy.y * height) + "px"
                                })
                                .mouseenter(function() {
                                    $(this).css({
                                        zIndex: Ox.uid()
                                    });
                                })
                                .appendTo($body);
                            d = {
                                name: data.results[0].formatted_address,
                                center: {
                                    lat: data.results[0].geometry.viewport.getCenter().lat().toFixed(10),
                                    lng: data.results[0].geometry.viewport.getCenter().lng().toFixed(10)
                                },
                                southWest: {
                                    lat: data.results[0].geometry.viewport.getSouthWest().lat().toFixed(10),
                                    lng: data.results[0].geometry.viewport.getSouthWest().lng().toFixed(10)
                                },
                                northEast: {
                                    lat: data.results[0].geometry.viewport.getNorthEast().lat().toFixed(10),
                                    lng: data.results[0].geometry.viewport.getNorthEast().lng().toFixed(10)
                                }
                            };
                            Ox.print(JSON.stringify(d))
                            json.push(d);
                        } else {
                            Ox.print("no results", place, data)
                        }
                    });
                    if (places.length) {
                        setTimeout(function() {
                            getPlacemarks(places);
                        }, 1000);
                    }
                }
                $("body").append($("<div/>").html(JSON.stringify(json)));
                // */
            });
        </script>
    </head>
    <body>
    </body>
</html>