var SERendererText = {
	settings: {
		zoom: 10
	}
};
if(typeof google != 'undefined' && typeof google.maps != 'undefined') {
	SERendererText.markerTypes = {
		premium: {
			icon: ["/website/gfx/icons/20/markers/green/marker",
		      new google.maps.Size(20, 34),
		      new google.maps.Point(0, 0), new google.maps.Point(0, 34)
		    ],
		    shadow: ["/website/gfx/icons/20/markers/shadow50.png",
		      new google.maps.Size(46, 30),
		      new google.maps.Point(-12, 4), new google.maps.Point(0, 30)
		    ],
		    zIndex: 3000
		},
		klant: {
			icon: ["/website/gfx/icons/20/markers/yellow/marker",
		      new google.maps.Size(20, 34),
		      new google.maps.Point(0, 0), new google.maps.Point(0, 34)
		    ],
		    shadow: ["/website/gfx/icons/20/markers/shadow50.png",
		      new google.maps.Size(46, 30),
		      new google.maps.Point(-12, 4), new google.maps.Point(0, 30)
		    ],
		    zIndex: 2000
		},
		nklant: {
			icon: ["/website/gfx/icons/20/markers/gray/marker",
		      new google.maps.Size(20, 34),
		      new google.maps.Point(0, 0), new google.maps.Point(0, 30)
		    ],
		    shadow: ["/website/gfx/icons/20/markers/shadow50.png",
		      new google.maps.Size(46, 30),
		      new google.maps.Point(-12, 4), new google.maps.Point(0, 30)
		    ],
		    zIndex: 1000
		},
		locationSearch: {
			icon: ["/website/gfx/icons/20/markers/red/marker",
		      new google.maps.Size(20, 34),
		      new google.maps.Point(0, 0), new google.maps.Point(0, 30)
		    ],
		    shadow: ["/website/gfx/icons/20/markers/shadow50.png",
		      new google.maps.Size(46, 30),
		      new google.maps.Point(-12, 4), new google.maps.Point(0, 30)
		    ]
	    },
		red: {
			icon: ["/website/gfx/icons/20/markers/red/marker",
		      new google.maps.Size(20, 34),
		      new google.maps.Point(0, 0), new google.maps.Point(0, 30)
		    ],
		    shadow: ["/website/gfx/icons/20/markers/shadow50.png",
		      new google.maps.Size(46, 30),
		      new google.maps.Point(-12, 4), new google.maps.Point(0, 30)
		    ]
	    },
		ds: {
			icon: ["/website/gfx/icons/20/markers/ds_logo.png",
		      new google.maps.Size(47, 36),
		      new google.maps.Point(0, 0), new google.maps.Point(0, 36)
		    ],
		    shadow: ["/website/gfx/icons/20/markers/ds_logo_shadow.png",
		      new google.maps.Size(37, 34),
		      new google.maps.Point(0, 0), new google.maps.Point(0, 34)
		    ]
		},
		dskl: {
			icon: ["/website/gfx/icons/20/markers/ds_logo2.png",
		      new google.maps.Size(28, 32),
		      new google.maps.Point(0, 0), new google.maps.Point(0, 30)
		    ],
		    shadow: ["/website/gfx/icons/20/markers/ds_logo2_shadow.png",
		      new google.maps.Size(42, 32),
		      new google.maps.Point(0, 0), new google.maps.Point(0, 32)
		    ]
		}
	};
	SERendererText.markers = [];
}
SERendererText.showMapLayer = function(event) {
	event.preventDefault();
	SERendererText.openMapLayer();
	SERendererText.addMarkers();
	return false;
};

SERendererText.openMapLayer =  function() {
	if(Ext.get('googleMapLayer') != null) {
		return;
	}
	//Add map layer
	var googleLayer = new Ext.Layer({
		id: 'googleMapLayer',
		shadow: 'sides',
		shadowOffset: 8
	});
	googleLayer.alignTo(document.body, 'c-c')
	 .appendTo(document.body)
	 .show()
	 .dom.innerHTML = '<div id="googleMapContainer"></div><img class="close" src="/website/gfx/icons/36/close.png" />';
	
	var latlng = Ext.select('#search-results-map span').first().dom.innerHTML.split(',');
	SERendererText.gMap = new google.maps.Map(
		document.getElementById("googleMapContainer"), {
		zoom: SERendererText.settings.zoom,
		center: new google.maps.LatLng(latlng[0],latlng[1]),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	
	var link_distance = Ext.select('#search-range .selected');
	if(link_distance.getCount() > 0) {
		var selectedDistance = link_distance.first().getAttributeNS('', 'rel').split(',');
		var circle = new MapCircleOverlay(
			new google.maps.LatLng(latlng[0],latlng[1]),
			(selectedDistance[0]/1000),
			1,
			"#82008F",
			0.8,
			"#82008F",
			0.25
		);
		// And we attach it to the map
		circle.setMap( SERendererText.gMap );
	}
	
	Ext.select('#googleMapLayer .close').on('click', function() {
		googleLayer.remove();
	});
};

SERendererText.addMarkers = function() {
	var latlng, view, markerSettings, markerType, marker;
	Ext.select('#search-results li').each(function(el, c, idx) {
		SERendererText.markers[idx] = {};
		
		view = el.getAttributeNS('ds', 'view');
		latlng = el.child('.latlng', true).innerHTML.split(',');
		
		markerType = SERendererText.markerTypes[view];
		markerSettings = {
			position: new google.maps.LatLng(latlng[0],latlng[1]),
			map: SERendererText.gMap,
			title: el.child('h3 a', true).getAttribute('', 'title'),
			icon: new google.maps.MarkerImage(markerType.icon[0] + (idx+1) + '.png', markerType.icon[1], markerType.icon[2]),
			shadow: new google.maps.MarkerImage(markerType.shadow[0], markerType.shadow[1], markerType.shadow[2])
		};
		if(typeof markerType.zIndex != 'undefined') {
			markerSettings.zIndex = markerType.zIndex + (parseInt((360 - latlng[0]) * 100000) - 100000);
		}
		
		SERendererText.markers[idx].marker		= new google.maps.Marker(markerSettings);
		SERendererText.markers[idx].infoWindow	= new google.maps.InfoWindow({
		    content: '<div class="GoogleInfoWindowContent">' + el.dom.innerHTML + '</div>'
		});
		
		google.maps.event.addListener(SERendererText.markers[idx].marker, 'click', function() {
		  SERendererText.markers[idx].infoWindow.open(SERendererText.gMap, SERendererText.markers[idx].marker);
		});
	});
};