var centerZoom = 14;
var map;
var centerLocation;
var spotIcon;
var markersList;
var latitude;
var longitude;

function init()
{
	if(GBrowserIsCompatible())
	{
		map = new GMap2(document.getElementById("map_small"));
		// Zoom start: close all open markers
		GEvent.addListener(map, "zoomstart", function()
		{
			closeMarkers();
			updateColors();
		});
		
		centerLocation = new GLatLng(centerLatitude, centerLongitude);
		map.setCenter(centerLocation, centerZoom);
		map.enableScrollWheelZoom();		
		
		markersList = new Array();
		for (var i = 0; i < markers.length; i++)
		{
			initMarker(i);
		}
	}
}

function initMarker(id)
{
	//check if genre is displayed, happens in map_data.php
	var marker = addMarker(markers[id][0], markers[id][1],markers[id][2], markers[id][3], markers[id][4]);
	markersList[id] = marker;
	map.addOverlay(marker);
}


function addMarker(latitude, longitude, locationname, locationadres, postal)
{
	spotIcon = new GIcon();
	spotIcon.image = "img/maps/marker.png";
	spotIcon.iconSize = new GSize(40, 34);
	spotIcon.iconAnchor = new GPoint(14, 34);
	spotIcon.infoWindowAnchor = new GPoint(20, 15);
	
	markerOptions = {icon:spotIcon};
	
	var marker = new GMarker(new GLatLng(latitude, longitude), markerOptions);

	GEvent.addListener(marker, 'click', 
		function()
		{
				closeMarkers();
				updateColors();
				marker.setImage("img/maps/marker_red.png");
				marker.openCustomInfoWindow('<span style="font-size: 16px;color:#e33336;font-weight:bold;line-height:1.1em;">' + locationname + '</span><br /><img align="center" src="img/maps/maps_hr_small.jpg" /><br /><span>' + locationadres + '</span><a href="JavaScript:closeMarkers();updateColors()"><img style="position:absolute;left:137px;top:2px;" src="img/maps/close.gif" /></a><br />' + postal + '<br /><br /><span style="font-size:10px;color:#CCC;line-height:0.8em;">Plan route vanaf:</span><br /><form name="saddr"><input style="width:115px;font-size:11px;font-family:arial;" type="text" name="textfield" id="textfield" onKeyPress="return disableEnterKey(event)" onclick="javascript:document.saddr.textfield.focus();"><a href=# onclick="javascript:getLink()"><img src="img/maps/go_link.jpg" style="position:relative;top:4px;left:8px;"></a></form>');
				
				map.panTo(new GLatLng(latitude, (centerLongitude + 0.007 - (map.getZoom() - 14)/400)));
		}
	);
		
	return marker;
}

function closeMarkers()
{
	for (var i = 0; i < markersList.length; i++)
	{
		markersList[i].closeCustomInfoWindow();
	}
}

function updateColors()
{
	for (var i = 0; i < markersList.length; i++)
	{
		markersList[i].setImage("img/maps/marker.png");
	}
}

function updateMarkers()
{
	closeMarkers();
	init();
}

/************************
| CUSTOM INFO WINDOW    |
************************/

function CustomInfoWindow(marker,html,width) {
	this.html_ = html;
	this.width_ = ( width ? width + 'px' : 'auto');
	this.marker_ = marker;
}

CustomInfoWindow.prototype = new GOverlay();

CustomInfoWindow.prototype.initialize = function(map) {
	this.map_ = map;
	var container = document.createElement("div");
	container.style.display='none';
	map.getPane(G_MAP_FLOAT_PANE).appendChild(container);
	this.container_ = container;
	
	var shadowContainer = document.createElement("div");
	shadowContainer.style.display = 'none';
	map.getPane(G_MAP_FLOAT_SHADOW_PANE).appendChild(shadowContainer);
	this.shadowContainer_ = shadowContainer;
}

CustomInfoWindow.prototype.remove = function() {
	this.container_.parentNode.removeChild(this.container_);
	this.shadowContainer_.parentNode.removeChild(this.shadowContainer_);
}

CustomInfoWindow.prototype.copy = function() {
	return new CustomInfoWindow(this.marker_,this.html_,this.width_);
}

CustomInfoWindow.prototype.redraw = function(force) {
	if (!force) return;

	var content = document.createElement("span");
	content.innerHTML = this.html_;
	content.style.font='11px arial';
	content.style.margin='0';
	content.style.padding='0';
	content.style.border='0';
	content.style.display='inline';

	if(!this.width_ || this.width_=='auto' || this.width_ <= 0) {
		content.style.minWidth = '10px';
		content.style.maxWidth = '140px';
		content.style.width = 'auto';
	} else {
		content.style.width= width + 'px';
	}

	content.style.visibility='hidden';

	this.map_.getContainer().appendChild(content);
	
	var contentWidth = 152;
	var contentHeight = 90;

	content.parentNode.removeChild(content);
	content.style.visibility='visible';

	content.style.width=contentWidth+'px';
	content.style.height=contentHeight+'px';

	content.style.position='absolute';
	content.style.left='30px';
	content.style.top='15px';

	var wrapper = document.createElement("div");
	
	var wrapperParts = {
		tl:{l:0, t:0, w:29 , h:33},
		tm:{l:29, t:0, w:contentWidth, h:33},
		tr:{l:(contentWidth + 29), t:0, w:16, h:33},
		
		cl:{l:0, t:33, w:29 , h:contentHeight},
		cm:{l:29, t:33, w:contentWidth, h:contentHeight},
		cr:{l:(contentWidth + 29), t:33, w:16, h:contentHeight},
		
		bl:{l:0, t:(contentHeight + 33), w:29 , h:15},
		bm:{l:29, t:(contentHeight + 33), w:contentWidth, h:15},
		br:{l:(contentWidth + 29), t:(contentHeight + 33), w:16, h:15}
	}
	
	for(i in wrapperParts)
	{
		var img = document.createElement('img');
		img.src = 'img/maps/images/' + i + '.png';
		img.style.position = 'absolute';
		img.style.top = wrapperParts[i].t + 'px';
		img.style.left = wrapperParts[i].l + 'px';
		img.style.width = wrapperParts[i].w + 'px';
		img.style.height = wrapperParts[i].h + 'px';
		wrapper.appendChild(img);
		wrapperParts[i].img = img;
	}
	
	wrapper.appendChild(content);
	
	var marker = this.marker_;
	
	var pixelLocation = this.map_.fromLatLngToDivPixel(	this.marker_.getPoint());

	this.container_.style.position='absolute';
	this.container_.style.left = (pixelLocation.x) + "px";
	this.container_.style.top = (pixelLocation.y - 7 - this.marker_.getIcon().iconSize.height) + "px";
	this.container_.style.border = '0';
	this.container_.style.margin = '0';
	this.container_.style.padding = '0';
	this.container_.style.display = 'block';
	
	this.container_.appendChild(wrapper);
}

GMarker.prototype.CustomInfoWindowInstance = null;

GMarker.prototype.openCustomInfoWindow = function(content,width) {
	if(this.CustomInfoWindowInstance == null) {
		this.CustomInfoWindowInstance = new CustomInfoWindow(
			this,
			content,
			width
		);
		map.addOverlay(this.CustomInfoWindowInstance);
		document.saddr.textfield.focus();
	}
}

GMarker.prototype.closeCustomInfoWindow = function()
{
	if(this.CustomInfoWindowInstance != null) {
		map.removeOverlay(this.CustomInfoWindowInstance);
		this.CustomInfoWindowInstance = null;
		map.panTo(new GLatLng(centerLatitude, centerLongitude));
	}
}

window.onload = init;
window.onunload = GUnload;