var g_mapGooglMap = null;
var mapWidth = 529;
var mapHeight = 332;

$().ready(function() {
    $('#googleMapDialog').jqm({
        onShow: mapdDialogOpen,
        onHide: mapdDialogHide
    });

 });


google.load("maps", "2");
function initialize() {
    $('#map').css({ height: mapHeight, width: mapWidth });
    $('#map').show();
    if (GBrowserIsCompatible()) {
        //Load Map for the first time:
        if (g_mapGooglMap == null) {
            g_mapGooglMap = new google.maps.Map2($('#map').get(0));
            g_mapGooglMap.setCenter(new google.maps.LatLng(0, 0), 1);
            g_mapGooglMap.setMapType(G_NORMAL_MAP)
            g_mapGooglMap.enableScrollWheelZoom();
            //g_mapGooglMap.enableDoubleClickZoom();
            var bounds = g_mapGooglMap.getBounds();
            var southWest = bounds.getSouthWest();
            var northEast = bounds.getNorthEast();
            var lngSpan = northEast.lng() - southWest.lng();
            var latSpan = northEast.lat() - southWest.lat();

            var baseIcon = new GIcon(G_DEFAULT_ICON);
            baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
            baseIcon.iconSize = new GSize(16, 16);
            baseIcon.shadowSize = new GSize(16, 16);
            baseIcon.iconAnchor = new GPoint(16, 16);
            baseIcon.infoWindowAnchor = new GPoint(9, 2);


            function createMarker(dataPoint) {
                var lat = dataPoint.geometry.lat;
                var lng = dataPoint.geometry.lng;
                var latlng = new GLatLng(lat, lng);
                var type = dataPoint.address_component.type;
                var long_name = dataPoint.address_component.long_name;
                var caption = dataPoint.address_component.caption;

                // Create a lettered icon for this point using our icon class
                var pinIcon = new GIcon(baseIcon);
                pinIcon.image = "images/map-icons/flag_" + long_name.toLowerCase() + ".png";

                // Set up our GMarkerOptions object
                markerOptions = { icon: pinIcon };
                
                var marker = new GMarker(latlng, markerOptions);
                marker.title = caption;

                GEvent.addListener(marker, "click", function() {
                    if (window.map_onclick)
                        window.map_onclick(dataPoint)
                });

                GEvent.addListener(marker, "mouseover", function() {
                    try {
                        $(event.srcElement).attr('title', marker.title);
                    } catch (e) {
                    }
                });
                
                return marker;
            }

            function processData(data) {
                var results = data.results;
                for (var i = 0; i < results.length; i++) {
                    var dataPoint = results[i];

                    //Marker:

                    marker = createMarker(dataPoint);
                    g_mapGooglMap.addOverlay(marker);
                }
            }

            $.getJSON("scripts/data.js", processData);
        }
    }

    g_mapGooglMap.setCenter(g_mapGooglMap.getCenter());
    
    //$('#maskLayer').fadeOut();
    //$('.mapLogo').show();
}

function mapdDialogHide(sender) {
    //$('#maskLayer').css({ height: 0, width: 0 });
    $('#map').hide();
    $('.mapLogo').hide();
    $('#maskLayer').fadeOut();
    sender.w.fadeOut();
    sender.o.remove();
}

function mapdDialogOpen(sender) {
    sender.w.show();
    //var leftPos = ($(document).width() - mapWidth) / 2 + "px";
    var leftPos = $('.body .content .player').offset().left + "px";
    $('#googleMapDialog').css({ left: leftPos, top: "185px" });
    $('#maskLayer').animate({ width: "547px", height: "378px"}, 250, initialize);
}


function map_onclick(dataPoint) {
    self.location.href = dataPoint.action;
}