/* CSS styles for map display  */
jQuery('head').append('<style>#googleMap {width:100%;height:400px;overflow:hidden;}</style>');
jQuery('head').append('<style>.info_content {height:auto;margin:10px;padding:5px;padding-right:10px;}');
jQuery('head').append('<style>.info_content h4 {margin:0;padding:0;color:#0060a8; font-weight:bold;font-size:1.1em;margin-bottom:10px;}</style>');
jQuery('head').append('<style>.info_content table {width:100%;border 1px solid #ccc;border-collapse:collapse;}')
jQuery('head').append('<style>.info_content td, .info_content th {border-collapse:collapse;margin:0;padding:3px;color:#000; border:1px solid #ccc}');
jQuery('head').append('<style>.info_content th {background:#eee;}</style>');
jQuery('head').append('<style>.name_tooltip {border:1px solid #888;background:#ffffff;font-weight:bold;color:#000000;padding:4px}</style>');

var MapEngine=function(){
    var mapApp="map.php";
    var mapDiv="googleMap";
    var mMap;
    var mMarkers=new Array();
    var mBounds;
    var mOverlay;
    var mCreateMarker=function(id,name,lat,lng,description,color){
        var drop = new google.maps.Marker({
            map: mMap,
            position: new google.maps.LatLng(lat,lng),
            icon: mapApp + '?c=get-marker-img&color='+color
        });
        // boubble
        var contentString = '<div class="info_content"><h4>' + name + '</h4>'
            + description
            +'</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        google.maps.event.addListener(drop, 'click', function() {
            infowindow.open(mMap,drop);
        });
        // tooltip like mini popup
        var div = $(mMap.getDiv()).offset();
        var $namewindow = $(document.createElement("div"));
        $namewindow.append('<div class="name_tooltip">'+name+'</div>')
                   .css({"position":"absolute"})
                   .hide();
        jQuery('body').append($namewindow);
        google.maps.event.addListener(drop, 'mouseover', function(e) {
            var containerPixel = mOverlay.getProjection().fromLatLngToContainerPixel(drop.getPosition());
            $namewindow.css({
                "left":(div.left+containerPixel.x)+"px",
                "top":(div.top+containerPixel.y)+"px"
            }).show();
        });
        google.maps.event.addListener(drop, 'mouseout', function() {
            $namewindow.hide();
        });
    };
    return {
        mapInit:function(){
            var bounds = new google.maps.LatLngBounds(
                new google.maps.LatLng(mBounds[0],mBounds[1]),
                new google.maps.LatLng(mBounds[2],mBounds[3])
            );
            var myOptions = {
              mapTypeId: google.maps.MapTypeId.ROADMAP, // .HYBRID,
              center: bounds.getCenter(),
              mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
              }
            };
            mMap = new google.maps.Map(document.getElementById(mapDiv), myOptions);
            mMap.fitBounds(bounds);
            mOverlay = new google.maps.OverlayView();
            mOverlay.draw = function(){};
            mOverlay.setMap(mMap);
        },
        initialize:function(){
            var ref=eval('(' + $("#" + mapDiv).attr('ref') + ')');
            if(ref){
                $.ajax({type:"GET",url:mapApp+"?c=get-bounds",data:ref,dataType:"json",success:function(response){
                    if(response && response.status=="OK"){
                        mBounds = response.bounds;
                        MapEngine.mapInit();
                        MapEngine.markLocations(ref);
                    }
                }});
            }
        },
        getMap:function(){
            return mMap;
        },
        markLocations:function(ref){
            $.ajax({type:"GET",url:mapApp+"?c=get-locations",data:ref,dataType:"json",success:function(response){
                if(response && response.status=="OK"){
                    if(response.data==null){
                        $("#"+mapDiv).hide();
                    } else
                        for(var r in response.data){
                            var lat = response.data[r].coordinates.lat;
                            var lng = response.data[r].coordinates.lng;
                            var description = response.data[r].description;
                            var color = response.data[r].color;
                            var marker = mCreateMarker(response.data[r].id,response.data[r].name,lat,lng,description,color);
                            mMarkers.push(marker);
                        }
                }
            }});
        }
    };
}();

$(document).ready(function(){
    MapEngine.initialize();
});