var TOIcon = new GIcon(G_DEFAULT_ICON, '/res/images/icon.png');
TOIcon.iconSize = new GSize(20, 20);
TOIcon.shadowSize = new GSize(0,0);
TOIcon.iconAnchor = new GPoint(10, 10);

var StartP;
var Width, Height;

var Markers = [];


function getDirections(lat, lng) {
	var e = document.getElementById('drive_from');
   	window.open("http://maps.google.com?q=" + e.value + '+to+' + lat + ',' + lng);
}

$(document).ready( function() {
  if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("loc_map"));
       	map.addControl( new GSmallZoomControl3D() );
	Width = $('#loc_map').width();
	Height = $('#loc_map').height();

	$('#map_zoom_btn').click( function() {
		var loc = $('#map_zoom_text').val();
		new GClientGeocoder().getLatLng(loc, function(point) {
			if(point) {
				map.setCenter( point, 13 );			
			}
		});
	});

	// Center on the default location
	$('#map_zoom_btn').click();

	
	GEvent.addListener(map, 'movestart', function() {
		if( map.isLoaded() ) {
			StartP = map.getCenter();
		}
	});

	GEvent.addListener(map, 'infowindowclose', function() {
		//$('#fullPhone').fadeIn();
		//$('#loc_map').addClass('phone_overlay').removeClass('loc_map_large');
	});


	function createMarker(p, title, html) {
		var m = new GMarker(p, {icon: TOIcon, title: title} );
		
		GEvent.addListener(m, 'click', function() {
			$('#fullPhone').fadeOut();	
			$('#loc_map').addClass('loc_map_large').removeClass('phone_overlay');
			map.checkResize();
			map.panTo(m.getLatLng());
			map.setZoom(16);
			m.openInfoWindow(html);
		});

		return m;
	}

	// Query for locations
	GEvent.addListener(map, 'moveend', function() {
		var center = map.getCenter();	
	
		// Only update if the map has moved > 10km	
		if(StartP) {
			if(center.distanceFrom(StartP) < 10000) return;
		}
		Markers = [];
		map.clearOverlays();
		$('#loc_select').html(' ');


		var url = '/services/req/venue/locate/15/' + center.lat() + '/' + center.lng() + '/';
		$.get(url, function(data) {
			$(data).find('venue_info').each( function() {
				var longname = $(this).find('longname').attr('value');
				var loc = $(this).find('location');
				var addr = $(this).find('address');			

				var lat = loc.attr('latitude');
				var lng = loc.attr('longitude');

				var p = new GLatLng(lat, lng);
			
				var html = '<b>' + longname + '</b><br>';
				html += $(addr).attr('value') + '<br>' + $(addr).attr('city') + ', ' + $(addr).attr('state'); 
				html += '<br><br><input id="drive_from" /"><br>';
				html += '<input type="button" value="Get Directions" onclick="getDirections(' + lat + ',' + lng + ');">';
	
				var marker = createMarker(p, longname, html);
				Markers.push(marker);
				map.addOverlay( marker );
			
				$('#loc_select').append('<option>' + longname + '</option>');

			});
		});

	});


      }

	$('#loc_select').bind('change', function() {
		GEvent.trigger(Markers[this.selectedIndex], "click");
	});

});