var memberMaps = new Class({
    initialize: function()
	{
		this.wrapper = null;
		this.map = null;
		this.section = null;
		this.page = null;
	},
	createMap: function(wrapper, width, height)
	{
		if (! GBrowserIsCompatible()) {
			return;
		}
		this.wrapper = wrapper;
		this.map = new GMap2(wrapper, {size:new GSize(width, height)});
		this.map.addControl(new GSmallMapControl());
		this.map.addControl(new GOverviewMapControl());
		this.map.addControl(new GMapTypeControl());
		this.map.setCenter(new GLatLng(53.981935, -2.900391), 5);
	},
	createMarker: function(lat, lng, memberId)
	{
		// Create custom marker icon
		var customIcon = new GIcon();
		customIcon.image = "/images/pushpin.png";
		customIcon.iconSize = new GSize(25,43);
		customIcon.iconAnchor = new GPoint(7,41);
		
		// Create the marker and add the click event
		markerOptions = { icon:customIcon };
		
		var point = new GLatLng(lat,lng);
		var marker = new GMarker(point, markerOptions);
		var owner = this;
	
		GEvent.addListener(marker, 'click', function() {
			document.location.href = '/' +
				(owner.section==2 ? 'diamond/' : '') +
				'member-finder/view?id=' +
				memberId + '&lat=' + lat + '&lng=' + lng + '&p=' + owner.page;
		});
		
		return marker;
	}
});

var resultsMap = new Class({
	Extends: memberMaps,
    initialize: function()
	{
		this.parent();
		this.clustererStyles = [];
		this.clustererStyles.push({
			width: 48,
			height: 47,
			opt_textColor: 'white',
			url: '/images/blue-marker.png'
		});
		this.clustererStyles.push({
			width: 48,
			height: 47,
			opt_textColor: 'white',
			url: '/images/orange-marker.png'
		});
		this.clustererStyles.push({
			width: 48,
			height: 47,
			opt_textColor: 'white',
			url: '/images/red-marker.png'
		});
		this.clustererOptions = {
			gridSize:60,
			maxZoom:12,
			styles: this.clustererStyles
		}
		this.markerCluster = null;
	},
	createMap: function(obj, width, height)
	{
		this.parent(obj, width, height);
		this.markerCluster = null;
		this.loading = new Element('img', {
			id: 'mapLoader',
			src: '/images/loading.gif'
		});
		this.loading.fade('hide');
		this.wrapper.adopt(this.loading);
	},
	loadResults: function(distance)
	{
		this.map.setCenter(new GLatLng(53.981935, -2.900391), 5);
		
		if (this.markerCluster != null) {
			this.markerCluster.clearMarkers();
		}
		
		var owner = this;
		
		var mapRequest = new Request.JSON({
			url: '/index.php?c=member-finder&a=map-markers&format=json',
			onRequest: function() {
				owner.loading.fade(1);
			},
			onComplete: function(response) {
								
				if (! response['results']) {
					owner.loading.fade(0);
					return;
				}
				
				var results = response['results'];
				var markers = [];
				
				if (results.length) {
					
					for (var i=0;i<results.length;i++) {
						var lat = results[i]['latitude'];
						var lng = results[i]['longitude'];
						var memberId = results[i]['memberId'];
						var tmpMarker = owner.createMarker(lat,lng,memberId);
						markers.push(tmpMarker);
					}
				
					owner.markerCluster = new MarkerClusterer(
						owner.map,
						markers,
						owner.clustererOptions
					);

					if (distance < 11 || results.length < 11) {
						var level = 13;
					} else if (distance < 21) {
						var level = 10;
					} else if (distance < 31) {
						var level = 9;
					} else if (distance < 41) {
						var level = 9;
					} else {
						var level = 8;
					}

					owner.map.setCenter(new GLatLng(
						results[0]['latitude'],
						results[0]['longitude']
					), level);
				}
				
				owner.loading.fade(0);
			}
		}).send();
	}
});

var memberMap = new Class({
	Extends: memberMaps,
	loadResults: function(memberId, lat, lng)
	{
		// Set to the centre of this member
		this.map.setCenter(new GLatLng(lat,lng), 15);
		var tempMarker = this.createMarker(lat,lng,memberId);
		this.map.addOverlay(tempMarker);
	}
});