var currentIndex = -1;
var infowindows = [];
var markers = [];
var directions = [];
var searchNearby = [];
var gmLinks;
var map;
var sidebarHtml = $( document.createElement('ul') );


jQuery.fn.createMap = function(centerLat, centerLng, zoom, xmlFileName, sidebarDivId)
{
	var latlng = new google.maps.LatLng(centerLat, centerLng);
	var myOptions = {
	  zoom: zoom,
	  center: latlng,
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	map = new google.maps.Map(this.get(0), myOptions);
	
	$.get(xmlFileName, function(xmlDoc){
		
		var i = 0;
		var iconLink = 'http://maps.gstatic.com/intl/en_us/mapfiles/ms/micons/'
		$(xmlDoc).find('marker').each(function()
		{
			// obtain the attribues of each marker
			var lat = parseFloat($(this).attr('lat'));
			var lng = parseFloat($(this).attr('lng'));
			var point = new google.maps.LatLng(lat,lng);
			var label = $(this).attr("label");
			var address = $(this).attr("address");
			var city = $(this).attr("city");
			var state = $(this).attr("state");
			var zip = $(this).attr("zip");
			var phone1 = $(this).attr("phone1");
			var iconColor = $(this).attr('icon');
			
			gmLinks = '<div class="gmLinks"><a class="gmDirections" onclick="mapClick(this)" href="javascript:void(0)">Directions</a> <a onclick="mapClick(this)" class="gmSearchNearby" href="javascript:void(0)">Search Nearby</a></div>'
			
			directions[i] = '<div class="dirInputs" style="visibility:none"><b>Start address:</b>'+
			   '<form style="margin-top:0px;" action="http://maps.google.com/maps" method="get" target="_blank">' +
			   '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
			   '<INPUT class="mainText" value="Get Directions" TYPE="SUBMIT">' +
			   '<input type="hidden" name="daddr" value="' + address + ',' + city + " " + state + " " + zip + "(" + label + ")" + '"/></form></div>';
			
			searchNearby[i] = '<div style="visibility:none">Search nearby: e.g. "pizza"<br />' + 
					   '<form action="http://maps.google.com/maps" method="get" target="_blank">' +
					   '<input type="text" name="q" class="q" value="" />' +
					   '<input value="Go" type="submit" />' + 
					   '<input type="hidden" name="near" value="' + label +
					   ' @' + point.lat() + ',' + point.lng() + '" /></form></div>';
		  
			var contentHtml =  '<div id="gmContent" style="width: 290px; height: 130px; overflow: hidden"><h3>' + label + '</h3>' + 
				'<p>' + 
				  address + '<br />' +
				  city + ', ' + state + ' ' + zip + '<br />' + 
				  phone1 + '</p><div class="gmDynamic">' + gmLinks + '</div>'
				  '</div>'; 
		  				
			infowindows[i] = new google.maps.InfoWindow({
				content: contentHtml
			});
			
			markers[i] = new google.maps.Marker({
				position: point,
				map: map,
				title: label,
				icon: iconLink + iconColor + '-dot.png'
			});
			
			sidebarHtml.append('<li><img src=' + iconLink + iconColor + '-dot.png /><a href="javascript:showWindow(' + i + ')">' + label + '</a></li>');

			google.maps.event.addListener(markers[i], 'click', function() {
				currentIndex = $(markers).index(this);
				showWindow(currentIndex);							
			});	
			i++;
		});
		$('#' + sidebarDivId).append(sidebarHtml);
	});
}

function mapClick(element)
{
	var backHtml = '<a onclick="mapClick(this)" class="gmBack" href="javascript:void(0)">&lt;-- Back</a>';
	if ($(element).hasClass('gmSearchNearby'))
	{
		$('.gmDynamic').html(searchNearby[currentIndex] + backHtml);
		$('#gmContent').css('height', '170px');
	}
	else if($(element).hasClass('gmDirections'))
	{
		$('.gmDynamic').html(directions[currentIndex] + backHtml);
		$('#gmContent').css('height', '200px');
	}
	else if($(element).hasClass('gmBack'))
	{
		$('.gmDynamic').html(gmLinks);
		$('#gmContent').css('height', '120px');
	}
	
	infowindows[currentIndex].set_content($('#gmContent').get(0));
}

function showWindow(iwIndex)
{
	$(infowindows).each(function()
	{
		this.close();
	});
	currentIndex = iwIndex;
	infowindows[currentIndex].open(map,markers[currentIndex]);
	
}