var bounds;
var map;

$("map").ready(function() {
	
	// Setup map
	var myLatlng = new google.maps.LatLng(52.25, 5.25);
	var myOptions = {
		zoom: 8,
		mapTypeControl: true,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	
	map = new google.maps.Map(document.getElementById("map"), myOptions);
	bounds = new google.maps.LatLngBounds();
	
	// get pins
	$('.call').each(function(index) {
		var item = $(this);
		var lng = $(this).attr('longitude');
		var lat = $(this).attr('latitude');
		var service = $(this).attr('service');
		if (lng !== undefined && lng != 0 ) {
			var marker;

			if(service == "Brandweer") {
				doticon = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png';
			} else if(service == "Politie") {
				doticon = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
			} else if(service == "Ambulance") {
				doticon = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png';
			}				
			
			marker = new google.maps.Marker({
				position: new google.maps.LatLng(lat,lng), 
				map: map,
				icon: doticon,
				shadow: "/static/gfx/marker-shadow.png",
				flat: false,
				bouncy: true
			});
			bounds.extend(new google.maps.LatLng(lat,lng));
			
			google.maps.event.addListener(marker, 'mouseover', function() {
				marker.hasMouse = true;
				window.setTimeout(function() {
					scrollToElement(item);
				}, 500);
			});
			
			google.maps.event.addListener(marker, 'mouseout', function() {
				marker.hasMouse = false;
			});
			
			google.maps.event.addListener(marker, 'click', function() {
				scrollToElement(item);
			});
			
			item.marker = marker;
			
			$(item).mouseenter(function() {
				item.css("background-color",'#F2F2F2');
				item.marker.setAnimation(google.maps.Animation.BOUNCE);
			});
			$(item).mouseleave(function() {
				item.css("background-color",'white');
				item.marker.setAnimation(null);
			});
			
		}
		
	});
	
	var detail = $("#calldetail");
	if(detail.length != 0) {
		
		var lng = detail.attr('longitude');
		var lat = detail.attr('latitude');
		var service = detail.attr('service');
		if (lng !== undefined && lng != 0 ) {
			if(service == "Brandweer") {
				doticon = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png';
			} else if(service == "Politie") {
				doticon = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
			} else if(service == "Ambulance") {
				doticon = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png';
			}
			
			marker = new google.maps.Marker({
				position: new google.maps.LatLng(lat,lng), 
				map: map,
				icon: doticon,
				shadow: "/static/gfx/marker-shadow.png",
				flat: false,
				bouncy: true
			});
			bounds.extend(new google.maps.LatLng(lat,lng));
			
			marker.setAnimation(google.maps.Animation.BOUNCE);
			
			
			var panoramaElement = $("#panorama");
			if(panoramaElement.length != 0) {
			
				var streetViewLocation = new google.maps.LatLng(lat,lng); 
				var nearestLatLng = null; 
				var nearestPano = null; 
				var client = new google.maps.StreetViewService();
				
				// must be smaller than 100! need double check 50, 100, 150, 200
				
				client.getPanoramaByLocation(streetViewLocation, 100, function(result, status) { 
					if (status == google.maps.StreetViewStatus.OK) { 
						nearestPano = result.location.pano; 
						nearestLatLng = result.location.latLng;
					}
				
				
					var bryantPark = null; 
					if(nearestLatLng) {
						 bryantPark = nearestLatLng;
					} else {
						 bryantPark = new google.maps.LatLng(lat,lng);
					}
					
					var panoramaOptions = {
						position:bryantPark,
						addressControl:false,
						linksControl: false,
						navigationControlOptions: {
						   style: google.maps.NavigationControlStyle.SMALL
						},
						visible:true,
						pov: {
							heading: 165,
							pitch:0,
							zoom:1
						}
					};
					var myPano = new google.maps.StreetViewPanorama(document.getElementById("panorama"), panoramaOptions);
					myPano.setVisible(true);
				}); 
			}
		}
	}
	
	map.fitBounds(bounds);
	
});

var scrollToElement = function(item) {

	if(item.marker.hasMouse) {
	
		$('html,body').animate({ scrollTop: ($(item).offset().top - 20) }, { duration: 'slow', easing: 'swing'});
					
		$('.call').css("background-color",'white');
		item.css("background-color",'#F2F2F2');
					
		item.marker.setAnimation(google.maps.Animation.BOUNCE);
		item.marker.setAnimation(null);
		
	}
}

$(window).scroll(function () { 
	$('#fix').css("position",'fixed');
	$('#fix').css("width",'35%');
	$('#fix').css("height",'90%');
//	$('#fixadd').css("position",'fixed');
//	$('#fixadd').css("width",'35%');
//	$('#fixadd').css("height",'90%');
});