function createMarker(point, hasBank, hasATM, branchName) {
// Create a new icon based on the default icon
	var iconLocation = new GIcon(G_DEFAULT_ICON);
	//baseIcon.shadow = "";
	iconLocation.iconSize = new GSize(32, 25);
	iconLocation.shadowSize = new GSize(0,0);
	iconLocation.iconAnchor = new GPoint(16, 0);
	iconLocation.infoWindowAnchor = new GPoint(16, 0);
	
// Allow for different markers for Banks (and ATMs) and ATMs (only)
	var iconBranch = branchName.replace(/ /g,"");
	var iconType = "banks";
	if ((hasBank.toLowerCase() == "no") && (hasATM.toLowerCase() == "yes")) { iconType = "atms"; }

	iconLocation.image = "/ClassLibrary/com/LocationFinder/_images/"+iconBranch+"-"+iconType+".png";

	markerOptions = { icon:iconLocation };	
	
// Create a new marker at the geographical point with the custom options
	var marker = new GMarker(point, markerOptions); 
	return marker;
}

function placeMarkers(data, map){
	var markers = data.documentElement.getElementsByTagName("location");
	$("#popuphead").append(" ("+markers.length+" locations)");
	$.each(markers, function(i, n){
	// For marker placement
		var lat = $(this).children("latitude").text();
		var lng = $(this).children("longitude").text();
		
	// For marker color
		var hasBank = $(this).attr("hasbank");
		var hasATM = $(this).attr("hasatm");
		var branchName = $(this).children("branchname").text();
		
	// For InfoWindowHtml information
		var name = $(this).children("localname").text();
		if (!name.length) { name = branchName; }
		
		var address = "";
		$(this).children("address").children().each(function(){
			var sep = " ";
			var text = $(this).text();
			var nname = this.nodeName;
			
			if((nname.toLowerCase() == "street1") || (nname.toLowerCase() == "street2")) { sep = "<br />"; }
			if(text.length) { address = address + text + sep; }
		});
		
		var contact = "";
		$(this).children("contactinfo").children().each(function(){
			var text = $(this).text();
			var nname = this.nodeName;
			
			if(nname.toLowerCase() == "email") { text = "<a href=\"mailto:" + text + "\" title=\"Send email to " + text + "\">" + text + "</a>"; }
			if(text.length) { contact = contact + text + "<br />"; }
		});

	// Creating the geographical point
		var point = new GLatLng(lat, lng);
	// Creating the marker from the point
		var marker = createMarker(point, hasBank, hasATM, branchName);
	// Giving the marker a value
		marker.value = $(this).attr("id");

	// Adding the "click" call, to display the InfoWindowHtml
		GEvent.addListener(marker, "click", function() {
		// Choose what to display
			var display = "<strong>" + name + "</strong><br />" + address + "<br /><br />" + contact;
		// Assign the display HTML to the point
			map.openInfoWindowHtml(point, display);
		// Google analytics
			pageTracker._trackPageview("/locationfinder/locationballoon/"+name+"/lat:"+lat+"/lng:"+lng+"/");
		});
	// Bind a marker's click to an item of a similar name
		$("#show_"+marker.value).click(function(ev){
			ev.preventDefault();
			
			var top = 500;
			var mapid = map.getContainer().getAttribute("id");
			var offset = $("#"+mapid).offset();

			top = offset.top;
			$(document).scrollTop(top-46);
			GEvent.trigger(marker,"click");
		});
	// Add marker to the map, check bounds and zoom out if necessary
		var mapBounds = map.getBounds();
		if (!mapBounds.containsLatLng(point)) { map.zoomOut(); }
		map.addOverlay(marker);
	});
}

function placeCenter(point, map){
// Center the map around the search result
	map.setCenter(point, 15);
}

function getMidPoint(data) {
// Get the very first latitude and longitude in the data
	var $latitudes = $(data).children("locations").children("location").children("latitude");
	var $longitudes = $(data).children("locations").children("location").children("longitude");

	if ($latitudes.length && $longitudes.length) {
		var latitudes = new Array();
		var longitudes = new Array();
		
		$latitudes.each(function(){
			var val = $(this).text();
			var n = latitudes.length;
			if (val !== "") {
				latitudes[n] = val;
			}
		});
		$longitudes.each(function(){
			var val = $(this).text();
			var n = longitudes.length;
			if (val !== "") {
				longitudes[n] = val;
			}
		});
		
		// Simple technique by John Resig (http://ejohn.org/blog/fast-javascript-maxmin/)
		var latitudeMax = Math.max.apply(Math, latitudes);
		var latitudeMin = Math.min.apply(Math, latitudes);
		var longitudeMax = Math.max.apply(Math, longitudes);
		var longitudeMin = Math.min.apply(Math, longitudes);

	// Make it into a point
		var lower_left = new GLatLng(latitudeMin,longitudeMin);
		var upper_right = new GLatLng(latitudeMax,longitudeMax);
	// Make a new bounds with that point as upper left and lower right coordinates
		var bnd = new GLatLngBounds(lower_left,upper_right);
		
	// Return the center of this new bounds to center our map upon
		return bnd.getCenter();
	}
}

function populateMap(valZip, valLocation){
//Start the map
	var map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallZoomControl3D());

//Get the locations and place their markers AFTER centering the map
	$.get("/ClassLibrary/com/LocationFinder/functions.cfml?function=mark&zip="+encodeURI(valZip)+"&location="+encodeURI(valLocation),
			function(data,textStatus){
			var results = data.documentElement.getElementsByTagName("location").length;
			if (textStatus == "success" && results) {
				var point = getMidPoint(data);
				placeCenter(point, map);
				placeMarkers(data, map);
			}},
			"xml");
}

function populateBanner(data, textStatus, bannerId){
if (textStatus == "success") {
// Select the banner element
	banner = document.getElementById(bannerId);
// And insert the banner code from the InfoBanners banner set
	$(banner).html(data);
}
}

function showLocations(valZip, valLocation){
	var mainHTML = "";
	var headHTML = "";
	var footHTML = "";
	var mapHeight = 230;
	var mapWidth = 440;
	
// Set our header html and footer html
	headHTML = "<strong>"+valZip+"</strong>";
	footHTML = "<img src=\"/ClassLibrary/com/LocationFinder/_images/marker-banks.jpg\" />Banks &amp; ATMs <img src=\"/ClassLibrary/com/LocationFinder/_images/marker-atms.jpg\" />ATMs Only <a href=\"/locations?search="+valZip.replace(/ /g, '+')+"&amp;location="+encodeURI(valLocation)+"\" title=\"Find Other Locations\"><img src=\"/_files/images/bt_findotherlocations.jpg\" alt=\"Find Other Locations\" border=\"0\" class=\"hover\" /></a>";
	
// Create a main <div> (for convenience), the #banner, and the #map
	$main = $("<div></div>");
	$banner = $("<div id=\"popupbanner\"></div>").css({ float:"right", clear:"right" });
	$map = $("<div id=\"map\"></div>").css({ height:mapHeight, width:mapWidth });

// Append everything together
	$main.append($banner).append($map);
	mainHTML = $main.html();

// Pop our modal window
	newWindow(mainHTML, headHTML, footHTML);

// Get our banner set HTML
	$.get("/ClassLibrary/com/LocationFinder/functions.cfml?function=banner",
			function(data,textStatus){ populateBanner(data, textStatus, $banner.attr("id")); },
			"html");
// Populate our map
	populateMap(valZip, valLocation);
}