var Map;
var Marker;
var SmallMarker = new Array();

function LoadGoogleMaps() {
	var LatLong = new google.maps.LatLng(52.276219, 10.53237);
	var myOptions = {
		zoom: 8,
		center: LatLong,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		navigationControl: true,
		navigationControlOptions: {
			style: google.maps.NavigationControlStyle.ZOOM_PAN,
			position: google.maps.ControlPosition.TOP_LEFT
		},
	};
	Map = new google.maps.Map(document.getElementById("map"), myOptions);
	
	LoadPhotoPins();
	SetMouseEvents();
}

function LoadPhotoPins()
{
	var flightPlanCoordinates = [];
	var LatLongBounds = new google.maps.LatLngBounds();
	var InputFields = document.getElementsByTagName('input');
	var image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
	
	for(var i = 0; i < InputFields.length; i++)
	{
		var Photo = InputFields[i].getAttribute('id').match(/photo_([0-9]+)_latitude/);
		if(Photo && Photo[1])
		{
			var CurrentLatLong = new google.maps.LatLng(document.getElementById('photo_'+Photo[1]+'_latitude').value, document.getElementById('photo_'+Photo[1]+'_longitude').value);
			
			var marker = new google.maps.Marker({
				position: CurrentLatLong,
				map: Map,
				icon: image,
				PhotoId: Photo[1]
			});
			google.maps.event.addListener(marker, 'mouseover', function() {
				var PhotoObject = document.getElementById('Photo'+this.PhotoId);
					PhotoObject.style.border = '2px solid #0000FF';
			});
			google.maps.event.addListener(marker, 'mouseout', function() {
				var PhotoObject = document.getElementById('Photo'+this.PhotoId);
					PhotoObject.style.border = '2px solid transparent';
			});
			
			LatLongBounds.extend(CurrentLatLong);
			flightPlanCoordinates.push(CurrentLatLong);
		}
	}
	
	Map.fitBounds(LatLongBounds);
	
	var flightPath = new google.maps.Polyline({
		path: flightPlanCoordinates,
		strokeColor: "#0000FF",
		strokeOpacity: 1.0,
		strokeWeight: 2
	});

	flightPath.setMap(Map);
}

function SetMouseEvents()
{
	var Images = document.getElementsByTagName('img');
	for(var i = 0; i < Images.length; i++)
	{
		if(Images[i].getAttribute('id', 0) && Images[i].getAttribute('id', 0).search(/Photo/) != -1)
		{
			Images[i].PhotoId = Images[i].getAttribute('id', 0).replace('Photo', '');
			Images[i].onmouseover = function() {
				var PhotoObject = document.getElementById('Photo'+this.PhotoId);
					PhotoObject.style.border = '2px solid #0000FF';
				
				var MarkerPoint = new google.maps.LatLng(document.getElementById('photo_'+this.PhotoId+'_latitude').value, document.getElementById('photo_'+this.PhotoId+'_longitude').value);
				this.marker = new google.maps.Marker({
					position: MarkerPoint,
					map: Map,
					icon: "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png"
				});
			}
			Images[i].onmouseout = function() {
				var PhotoObject = document.getElementById('Photo'+this.PhotoId);
					PhotoObject.style.border = '2px solid transparent';
				this.marker.setMap(null);
			}
		}
	}
}