//<![CDATA[
var map = null;
var geocoder = null;
var manager = null;
var currentMarker = 0;
var markers = new Array( 1 );

function directionsDefault(event)
{
	var textbox = document.getElementById('directionsTextBox');
	var button = document.getElementById('directionsButton');
	var defaultValue = 'Enter Address...';
	switch(event)
	{
		case 'blur':
			if(textbox.value == '')
			{
				textbox.value = defaultValue;
				//textbox.style = 'color: #666; font-style: italic';
			}
			break;
		case 'focus':
			if (textbox.value == defaultValue)
			{
				textbox.value = '';
				//textbox.style = 'color: #000; font-style: normal';
			}
			break;
		case 'change':
//			button.disabled = (textbox.value == '' || textbox.value == defaultValue);
			break;
	};
}

function load() {
	if (GBrowserIsCompatible())
	{
		map = new GMap2(document.getElementById("map"));
		geocoder = new GClientGeocoder();
		map.enableScrollWheelZoom();
		map.enableContinuousZoom();
		map.setCenter( new GLatLng( 0, 0 ), 13 );
		map.addControl( new GSmallMapControl() );
		showAddress( "3181 Beaumont Centre Circle Lexington, KY USA",
			"<span class=\"hotelname\">Al&#250;re Salon and Day Spa</span>\n<br />\n" +
			"<span class=\"address\">3181 Beaumont Centre Circle<br />Lexington, KY 40513</span>\n<br />" +
			"<form method=\"get\" action=\"http://maps.google.com/maps\"><input type=\"hidden\" name=\"daddr\" value=\"3181 Beaumont Centre Cir. Lexington, KY\" /><input width=\"75\" name=\"saddr\" value=\"Enter Address...\" id=\"directionsTextBox\" onblur=\"directionsDefault('blur')\" onfocus=\"directionsDefault('focus')\" onchange=\"directionsDefault('change')\" onkeyup=\"directionsDefault('change')\" /><input type=\"submit\" id=\"directionsButton\" value=\"Get Directions\" /></form>", "default" );
  	}
}

function showAddress( address, tooltip, markerType ) 
{
	if( markerType == "default" )
	{
		showAddressDefault( address, tooltip );
		return;
	}
	if( geocoder )
	{
		geocoder.getLatLng( address, function( point )
		{
			if( !point )
			{
				var nameStart = tooltip.indexOf( "\">" ) + 2;
				var nameEnd = tooltip.indexOf( "</span>" );
				var name = tooltip.substring( nameStart, nameEnd );
	  			alert( name + " not found." );
			} 
			else
			{
	       	  	var icon = new GIcon();
			  	icon.image = "img/markertype_" + markerType + ".png";
				icon.shadow = "img/markertype_shadow.png";
			  	icon.iconSize = new GSize(24, 40);
			  	icon.shadowSize = new GSize(44, 40);
			  	icon.iconAnchor = new GPoint(12, 40);
			  	icon.infoWindowAnchor = new GPoint(11, 1);

				markers[ currentMarker ] = point;
				currentMarker++;
			  	var marker = new GMarker( point, icon );
			  	map.addOverlay( marker );
			  	marker.openInfoWindowHtml( tooltip );
			  	GEvent.addListener( marker, "click", function() { marker.openInfoWindowHtml( tooltip ); });
				if( currentMarker == 1 )
				{
					setAbsoluteCenter();
					currentMarker = 0;
				}
			}
		} );
	}
}
	
function showAddressDefault( address, tooltip )
{
	if( geocoder )
	{
		geocoder.getLatLng( address, function( point )
		{
			if( !point )
			{
				var nameStart = tooltip.indexOf( "\">" ) + 2;
				var nameEnd = tooltip.indexOf( "</span>" );
				var name = tooltip.substring( nameStart, nameEnd );
				alert( name + " not found." );
			}
			else
			{
				markers[ currentMarker ] = point;
				currentMarker++;
				var marker = new GMarker(point);
			  	map.addOverlay(marker);
			  	marker.openInfoWindowHtml(tooltip);
			  	GEvent.addListener( marker, "click", function() { marker.openInfoWindowHtml( tooltip ); });
				if( currentMarker == 1 )
				{
					setAbsoluteCenter();
					currentMarker = 0;
				}
			}
		} );
	}
}

function MarkerNavigationControl() {}
MarkerNavigationControl.prototype = new GControl();

MarkerNavigationControl.prototype.initialize = function( map )
{
  	var container = document.createElement( "div" );
//	container.style.marginLeft = "auto";
//	container.style.marginRight = "auto";
//	container.style.textAlign = "center";
	container.style.marginLeft = "275px";

	var prevMarkerDiv = document.createElement( "div" );
  	this.setButtonStyle_( prevMarkerDiv );
  	container.appendChild( prevMarkerDiv );
  	prevMarkerDiv.appendChild( document.createTextNode( "Previous Location" ) );
  	GEvent.addDomListener( prevMarkerDiv, "click", function()
	{
		if( currentMarker > markers.length - 1 )
		{
			currentMarker = markers.length - 1;
		}
		if( currentMarker > 0 )
		{
			currentMarker = (currentMarker - 1) % markers.length;
			map.panTo( markers[ currentMarker ] );
		}
	} );

	var nextMarkerDiv = document.createElement( "div" );
  	this.setButtonStyle_( nextMarkerDiv );
  	container.appendChild( nextMarkerDiv );
  	nextMarkerDiv.appendChild( document.createTextNode( "Next Location" ) );
  	GEvent.addDomListener( nextMarkerDiv, "click", function()
	{
		if( currentMarker < 0 )
		{
			currentMarker = 0;
		}
		if( currentMarker < markers.length - 1 )
		{
			currentMarker = (currentMarker + 1) % markers.length;
			map.panTo( markers[ currentMarker ] );
		}
	});
	
  	map.getContainer().appendChild( container );
  	return container;
}

MarkerNavigationControl.prototype.getDefaultPosition = function()
{
	return new GControlPosition( G_ANCHOR_BOTTOM_LEFT, new GSize( 7, 7 ) );
}

MarkerNavigationControl.prototype.setButtonStyle_ = function( button )
{
	button.style.textDecoration = "none";
	button.style.color = "#000000";
	button.style.backgroundColor = "white";
	button.style.font = "small Arial";
	button.style.border = "1px solid black";
	button.style.padding = "2px";
	button.style.marginBottom = "3px";
	button.style.marginLeft = "3px";
	button.style.textAlign = "center";
	button.style.width = "6em";
	button.style.cursor = "pointer";
	button.style.verticalAlign = "middle";
	button.style.display = "inline";
}

function setAbsoluteCenter()
{
	var centerX;
	var centerY;
	var totalX = 0;
	var totalY = 0;
	for( var i = 0; i < markers.length; i++ )
	{
		totalX = totalX + markers[i].lng();
		totalY = totalY + markers[i].lat();
	}
	centerX = totalX / markers.length;
	centerY = totalY / markers.length;
	map.setCenter( new GLatLng( centerY, centerX ), 13 );
	var bounds = map.getBounds();
	for( var i = 0; i < markers.length; i++ )
	{
		bounds.extend( markers[i] );
	}
	map.setZoom( map.getBoundsZoomLevel( bounds ) );
}
//]]>