var map;
var geocoder;
var markersArray = [];
var infoWindow;

var usmlocator = {
	map_canvas: null,

	initialize: function() {
		(function($) {
			usmlocator.map_canvas = $("#map_canvas");

			geocoder = new google.maps.Geocoder();

			var latlng = new google.maps.LatLng(43.5164221, -84.9057943);
			var options = {
				zoom: 5,
				center: latlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};

			map = new google.maps.Map(document.getElementById("map_canvas"), options);

			$("#btnGo").bind("click", usmlocator.searchClick);
		})(jQuery);
	},

	searchClick: function(e) {
		(function($) {
			e.preventDefault();

			var loc = $("input[id$='txtStreetAddress']").val() + " " + $("input[id$='txtCityState']").val() + " " + $("input[id$='txtZipCode']").val();

			geocoder.geocode({ address: loc }, usmlocator.geocodeCallback);
		})(jQuery);
	},

	geocodeCallback: function(results, status) {
		(function($) {
			var radius = $("select[$='ddlRadius'] option:selected").val()
			var message = $("#message").html("<p>Searching... Please wait.</p>");
			var resultpane = $("#results-pane").html("");

			switch (status) {
				case google.maps.GeocoderStatus.OK:
					map.setCenter(results[0].geometry.location);
					var locData = {
						latitude: results[0].geometry.location.lat(),
						longitude: results[0].geometry.location.lng(),
						radius: radius
					}

					$.ajax({
						type: "POST",
						contentType: "application/json; charset=utf-8",
						url: "/Modules/GoogleMaps/GService.asmx/GetLocations",
						data: $.toJSON(locData),
						dataType: "json",
						success: usmlocator.ajaxCallback,
					});
					break;
				default:
					message.html("<p>Geocode was not successful for the following reason: " + status + "</p>");
					break;
			}
		})(jQuery);
	},

	ajaxCallback: function(response) {
		(function($) {
			usmlocator.deleteOverlays();

			var data = $.evalJSON(response.d);

			var message = $("#message").html("");
			var resultsPane = $("#results-pane").html("<ul></ul>");

			if (data && data.length > 0) {
				if (data.length >= 20) {
					message.append("<p class='results'>Top " + data.length + " closest results found.</p>").effect("highlight", {}, 2000);
				} else {
					message.append("<p class='results'>" + data.length + " results found.</p>").effect("highlight", {}, 2000);
				}

				var bounds = new google.maps.LatLngBounds();

				for (var i = 0; i < data.length; i++) {
					if (i == 0)
						usmlocator.addMarker(data[i], true);
					else
						usmlocator.addMarker(data[i], false);

					bounds.extend(new google.maps.LatLng(data[i].Lat, data[i].LongX));
				}

				map.fitBounds(bounds);
				map.panTo(bounds.getCenter());

				if (map.getZoom() > 15)
					map.setZoom(15);

				usmlocator.showOverlays();
			} else {
				message.append("<p class='error'>No results found.  Please expand your search radius.</p>").effect("highlight", { color: 'red' }, 2000);
			}
		})(jQuery);
	},

	addMarker: function(item, first) {
		(function($) {
			var point = new google.maps.LatLng(item.Lat, item.LongX);
			var marker = new google.maps.Marker({
				position: point,
				map: map,
				title: item.CustomerName
			});
			
			var fromQuery = escape($("input[id$='txtStreetAddress']").val() + " " + $("input[id$='txtCityState']").val() + " " + $("input[id$='txtZipCode']").val());
			var directionsQuery = escape(item.Address1 + " " + item.City + ", " + item.State + "  " + item.Zip + "  (" + item.Name + ")");
			var markerHtml = "<div class='bubble-content'>" +
				"<h3>" + item.Name + "</h3>" +
				"<p class='address'>" + item.Address1 + "<br />" +
				item.City + ", " + item.State + "&nbsp;&nbsp;" + item.Zip + "</p>";
			
			if (item.Phone != '' && item.Phone != null) 
			{
				markerHtml += "<p class='phone'>Phone: " + item.Phone + "</p>";
			}	
			if (item.Web != '' && item.Web != null)
			{
				var linkHref = item.Web;
				if (item.Web.indexOf("http://") == -1)
				{
					linkHref = "http://" + item.Web;
				}
				markerHtml += "<p class='website'><a target='_blank' href='" + linkHref + "'>" + item.Web + "</a></p>";
			}
			
			markerHtml += "<p class='directions'><a href='http://maps.google.com/maps?saddr=" + fromQuery + "&daddr=" + directionsQuery + "&hl=en' target='_blank'>Get directions to here.</a></p>";

			markerHtml += "</div>";
			
			google.maps.event.addListener(marker, "click", function() {
				if (infoWindow) {
					infoWindow.close();
					infoWindow = null;
				}

				infoWindow = new google.maps.InfoWindow({
					'size': new google.maps.Size(292, 120)
				});
				infoWindow.setContent(markerHtml);
				infoWindow.open(map, marker);

				map.panTo(point);
			});
			
			$('div#results-pane ul:last').append(markerHtml);

			markersArray.push(marker);
		})(jQuery);
	},

	clearOverlays: function() {
		if (markersArray && markersArray.length > 0) {
			for (var i in markersArray) {
				if (!jQuery.isFunction(markersArray[i]))
					markersArray[i].setMap(null);
			}
		}
	},

	showOverlays: function() {
		if (markersArray && markersArray.length > 0) {
			for (var i in markersArray) {
				if (!jQuery.isFunction(markersArray[i]))
					markersArray[i].setMap(map);
			}
		}
	},

	deleteOverlays: function() {
		if (markersArray && markersArray.length > 0) {
			for (i in markersArray) {
				if (!jQuery.isFunction(markersArray[i]))
					markersArray[i].setMap(null);
			}

			markersArray.length = 0;
		}
	}
};

(function($) {
	$(document).ready(function() {
		usmlocator.initialize();

		$("span.enlarge").bind("click", function() {
			var $me = $(this);
			var html = $me.html();

			if (html == "View Larger Map") {
				$me.html("View Smaller Map");
				usmlocator.map_canvas.css("height", "300px");
			} else {
				$me.html("View Larger Map");
				usmlocator.map_canvas.css("height", "160px");
			}
		});
	});
})(jQuery);

/*

function log(str)
{
	//console.log(str);
}

var geocoder;
var map;

google.load("maps", "2");
google.setOnLoadCallback(initialize);

function initialize()
{
	map = new google.maps.Map2(document.getElementById("map_canvas"));
	geocoder = new google.maps.ClientGeocoder();
	map.enableScrollWheelZoom();
	map.addControl(new google.maps.MapTypeControl());
	map.addControl(new google.maps.SmallMapControl());
	map.setCenter(new google.maps.LatLng(43.5164221, -84.9057943), 5);
}

jQuery(function() {

	jQuery("span.enlarge").click(function()
	{
		if (jQuery(this).html() == "View Larger Map")
		{
			jQuery(this).html('View Smaller Map');
			jQuery("#map_canvas").css('height', '300px');
		}
		else
		{
			jQuery(this).html('View Larger Map');
			jQuery("#map_canvas").css('height', '160px');
		}
	});

	jQuery("button[id$='btnGo']").click(function() {
		var loc = jQuery("input[id$='txtStreetAddress']").val() + " " +  jQuery("input[id$='txtCityState']").val() + " " +  jQuery("input[id$='txtZipCode']").val();
		var radius = jQuery("select[$='ddlRadius'] option:selected").val()

		geocoder.getLatLng(
			loc,
			function(point)
			{
				if (point)
				{
				
				    jQuery("div#message").html("");
				    jQuery("<p>Searching... Please wait.</p>").appendTo("div#message");
				    jQuery('div#results-pane').html("");
				                        
					var locData = {
						latitude	: point.lat(),
						longitude	: point.lng(),
						radius		: radius
					}
					
					jQuery.ajax({
						type: "POST",
						contentType: "application/json; charset=utf-8",
						url: "modules/GoogleMaps/GService.asmx/GetLocations",
						data: jQuery.toJSON(locData),
						dataType: "json",
						success: function(response)
						{
							map.clearOverlays();
							var data = jQuery.evalJSON(response.d);

							jQuery("div#message").html("");

							var bounds = new GLatLngBounds;
							if (data.length > 0)
							{
							    if (data.length >= 20)
							    {
								    jQuery("<p class='results'>Top " + data.length + " closest results found.</p>").appendTo("div#message").effect("highlight", {}, 2000);
								}
								else
                                {
                                    jQuery("<p class='results'>" + data.length + " results found.</p>").appendTo("div#message").effect("highlight", {}, 2000);
                                }    
                                
								for (var i = 0; i < data.length; i++)
								{
									addToMap(data[i]);
									bounds.extend(new GLatLng(data[i].Lat, data[i].LongX));
								}
								
								bounds.extend(point);
								map.setZoom(map.getBoundsZoomLevel(bounds));
								map.panTo(bounds.getCenter());
							}
							else
							{
								// show none found message.
								jQuery("<p class='error'>No results found.  Please expand your search radius.</p>").appendTo("div#message").effect("highlight", { color: 'red' }, 2000);
							}
						}
					});
				}
				else
				{
				    jQuery("div#message").html("");
					jQuery("<p class='error'>No results found.  Please adjust your search criteria and try again.</p>").appendTo("div#message").effect("highlight", { color: 'red' }, 2000);
				}
			}
		);
		return false;
	});

});

function addToMap(item) {

    var point = new google.maps.LatLng(item.Lat, item.LongX);
    var marker = new google.maps.Marker(point);
    var fromQuery = escape(jQuery("input[id$='txtStreetAddress']").val() + " " + jQuery("input[id$='txtCityState']").val() + " " + jQuery("input[id$='txtZipCode']").val());
    var directionsQuery = escape(item.Address1 + " " + item.City + ", " + item.State + "  " + item.Zip + "  (" + item.Name + ")");
	var markerHtml = "<div class='bubble-content'>" +
		"<h3>" + item.Name + "</h3>" +
		"<p class='address'>" + item.Address1 + "<br />" +
		item.City + ", " + item.State + "&nbsp;&nbsp;" + item.Zip + "</p>";
	
	if (item.Phone != '' && item.Phone != null) 
	{
	    markerHtml += "<p class='phone'>Phone: " + item.Phone + "</p>";
	}	
	if (item.Web != '' && item.Web != null)
	{
		var linkHref = item.Web;
		if (item.Web.indexOf("http://") == -1)
		{
			linkHref = "http://" + item.Web;
		}
		markerHtml += "<p class='website'><a target='_blank' href='" + linkHref + "'>" + item.Web + "</a></p>";
	}
	
	markerHtml += "<p class='directions'><a href='http://maps.google.com/maps?saddr=" + fromQuery + "&daddr=" + directionsQuery + "&hl=en' target='_blank'>Get directions to here.</a></p>";

	markerHtml += "</div>";
	GEvent.addListener(marker, 'click', function() 
	{
		marker.openInfoWindowHtml(markerHtml);
		map.panTo(point);
	});
	map.addOverlay(marker);
	jQuery('div#results-pane').append(markerHtml);
}


*/