/*
 * Initializes all Google Maps API code.
 */
if (GBrowserIsCompatible()) {

	var map = null;
	var geocoder = null;
	var point = null;
	var infoOverlay = null;
	var currentMarker = null;
	var marker = null;
	var html = null;

	/**
	 * Creates a marker for the given point (which has been previously selected for the passed address).
	 * @param point object of type GLatLng
	 * @return created GMarker object
	 */
	function createMarker(point) {
		
		var icon = new GIcon(G_DEFAULT_ICON);
		icon.image = "/scripts/maps/marker-pink-1.gif";
		// Set up our GMarkerOptions object
		var markerOptions = { icon:icon };
		marker = new GMarker(point, markerOptions);
		GEvent.addListener(marker, "click", openOverlay);
		return marker;
	}
	
	/**
	 * Opens an overlay for the marker.
	 */
	function openOverlay()
	{
		if (typeof Infowin !== 'undefined') 
		{
			if (currentMarker) 
			{
				closeOverlay();
		    }
			if (!this.overlay) 
			{
				// just recording this for use in the closeOverlay function
				this.overlay = new Infowin(this, html);
		    }
		    currentMarker = this;
		    map.panTo(new GLatLng(this.getPoint().lat(), this.getPoint().lng()));
		    map.addOverlay(this.overlay);
		}
		else 
		{
			marker.openInfoWindowHtml(html);
		}
	}
	
	/**
	 * Closes last open overlay.
	 */
	function closeOverlay() 
	{
		if (currentMarker) 
		{
			map.removeOverlay(currentMarker.overlay);
			currentMarker = null;
		}
	}

	/**
	 * Handles all actions of expanding and collapsing the map size.
	 */
	function initializeMapExpand()
	{
		updateLegalNotice();
		
		var a = $('#expandA');
		$(a).click(function() {
			/* should we expand the map and show 'collapse' link? */
			if (a.hasClass('expand'))
			{
				expand();
			}
			/* or should we collapse the map and show 'expand' link? */
			else
			{
				collapse();
			}
		});
	}
	
	function collapse()
	{
		var gallery = $('#galleryWrapper');
		var a = $('#expandA');
		
		a.toggleClass('expand');
		a.toggleClass('collapse');
		a.text('expand map');
		$("#gMap-expand").show();
		closeOverlay();
		$('#gMap').animate({ 
	        width: $('#gMap').attr('oldWidth')
	      },
	      500,
	      'linear',
	      function() {
	    	  $('#gMapWrapper').width($('#gMapWrapper').attr('oldWidth') + 'px');
	    	  $(a).width($(a).attr('oldWidth') + 'px');
	    	  gallery.fadeIn('500');
	    	  
	    	  $('a.mapCollapseArrow').hide();
	    	  $('a.mapCollapseArrow').width($('#gMapWrapper').width());
	    	  
	    	  map.checkResize();
	    	  map.panTo(point);
	    	  updateLegalNotice();
	      }
		);
	}
	
	function expand()
	{
		var gallery = $('#galleryWrapper');
		var a = $('#expandA');
		
		a.toggleClass('expand');
		a.toggleClass('collapse');
		a.text('collapse map');
		$("#gMap-expand").hide();
		gallery.fadeOut('500', function() {
			
			$('#gMapWrapper').attr('oldWidth', $('#gMapWrapper').width());
			$('#gMap').attr('oldWidth', $('#gMap').width());
			$(a).attr('oldWidth', $(a).width());
			
			$('#gMapWrapper').width('100%');
			$('#gMap').animate({ 
					width: "100%"
				}, 
				500,
				'linear',
				function() {
					$('a.mapCollapseArrow').width($('#gMapWrapper').width());
					$('a.mapCollapseArrow').show();
					
					map.checkResize();
					openOverlay.call(marker, null);
					updateLegalNotice();
				}
			);
		});
	}
	
	/**
	 * When we initialy show the map in the narrow mode Google's legal notices
	 * are shown outside the area we have for the map.
	 * That's why I hide them, and when the user expands the map, I show them again.
	 */
	function updateLegalNotice()
	{
		var legalClass = 'legalInformation';
		var legal = $('#logocontrol + div:first');
		if (legal != null && legal.html() != null)
		{
			$(legal).addClass(legalClass);
		}
		
		/* we are in narrow mode */
		if ($('#expandA').hasClass('expand'))
		{
			$('.' + legalClass).hide();
		}
		/* we are in wide mode */
		else
		{
			$('.' + legalClass).show();
		}
	}

	/**
	 * Initializes Google Map API for the passed address string.
	 * @param address the string, which is passed to the Google Maps API to be searched
	 * @param addressHtml the HTML code, which should be shown in the info window; the text can be anything
	 * 
	 */
	function initializeMap(address, addressHtml) {
		map = new GMap2(document.getElementById("gMap"));
		map.setCenter(new GLatLng(37.4419, -122.1419), 13);
		map.addControl(new GSmallMapControl());
		geocoder = new GClientGeocoder();
		
		if (geocoder) {
			geocoder.getLatLng(address, function(p) {
				point = p;
				if (!point) 
				{
					alert(address + " not found");
				} 
				else 
				{
					$("#gMap-expand").hover(
						function() {
							$(this).addClass("expandOver");
						}, 
						function() {
							$(this).removeClass("expandOver");
						}
					);
					$("#gMap-expand").click(
						function() {
							$('#expandA').click();
						}
					);
					$('a.mapCollapseArrow').click(
						function() {
							collapse();
						}
					);
					
					initializeMapExpand();
					
					map.setCenter(point, 13);
					html = addressHtml;
					var marker = createMarker(point);
					map.addOverlay(marker);
					
					// uncomment for testing the map
//					$('#expandA').click();
				}
			});
		}
	}
}