var g_map;
var or_latln;
var info_w;

jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function    
    var map_canvas = $('.map_canvas');
    
    or_latln= new google.maps.LatLng(WP_Params.lat, WP_Params.lng);
    var or_maptype;
    switch (WP_Params.mapType){
	case 'ROADMAP':
	    or_maptype = google.maps.MapTypeId.ROADMAP;
	    break;
	case 'HYBRID':
	    or_maptype = google.maps.MapTypeId.HYBRID;
	    break;
	case 'TERRAIN':
	    or_maptype = google.maps.MapTypeId.TERRAIN;
	    break;
	case 'SATELLITE':
	    or_maptype = google.maps.MapTypeId.SATELLITE;
	    break;	
    }    
    map_canvas.after('<div id="hidden-markers-content" style ="display:hidden;"></div>')
    info_w = false;
    if (map_canvas){
        markers_map = $('.map_canvas').gmap({'center': or_latln, 'zoom' : Number(WP_Params.zoom),'mapTypeId': or_maptype}).bind('init', function(event, map){
		if (typeof onMapFinished == 'function'){
                    onMapFinished(map);
                }
                
                g_map=map;
               
		info_w = new google.maps.InfoWindow({content: ' '});                
	    	var data = {                    
		    action: 'soundmap_JSON_load_markers',
                    markers: WP_Params.markers
                    
		};
		$.post(WP_Params.ajaxurl, data, function(response) {
		    result = $.parseJSON(response);
		    if (result){
                        		    /////////////_ICON
		     var image = new google.maps.MarkerImage(WP_Params.pluginURL + '/img/map_icons/marker.png',
                        // This marker is 20 pixels wide by 32 pixels tall.
                        new google.maps.Size(19, 30),
                        // The origin for this image is 0,0.
                        new google.maps.Point(0,0),
                        // The anchor for this image is the base of the flagpole at 0,32.
                        new google.maps.Point(9, 30));
                    var shadow = new google.maps.MarkerImage(WP_Params.pluginURL + '/img/map_icons/marker_shadow.png',
                        // The shadow image is larger in the horizontal dimension
                        // while the position and offset are the same as for the main image.
                        new google.maps.Size(34, 30),
                        new google.maps.Point(0,0),
                        new google.maps.Point(9, 30));
                    // Shapes define the clickable region of the icon.
                    // The type defines an HTML <area> element 'poly' which
                    // traces out a polygon as a series of X,Y points. The final
                    // coordinate closes the poly by connecting to the first
                    // coordinate.
                    var shape = {
                            coord: [9, 0, 19, 9, 12, 17, 9 , 30, 6, 17, 0, 9, 9, 0],
                           type: 'poly'
                    };
                    //////////////_ICON
                    ajax_url = WP_Params.ajaxurl;
                        
		    $.each( result, function(i, m) {
			$('.map_canvas').gmap('addMarker', { id: m.id.toString(), 'position': new google.maps.LatLng(m.lat, m.lng), 'shadow': shadow, 'icon': image, 'shape': shape }).click(function(){
			    id=this.id; //$(this).data('postid');
			    marker = this;//$(this).get(0);
			    
			    var data = {
				action: 'soundmap_load_infowindow',
				marker: id,
                                lang: WP_Params.language
			    };
			    
			    $.post(ajax_url, data, function(response){
				info_w.close();
				$("#hidden-markers-content").append(response);								
				info_w.setContent($("#hidden-markers-content").children().get(0));
				info_w.open(g_map, marker);
                                //jQuery('.map_canvas').gmap('openInfoWindow', { 'content': response }, marker);
			    });			    
			})			    			    			    
		    });
		    }
		});
            }
        );    
    }
        
	
});