function MyMap(id, div)
{
	this.gmap = new GMap2(document.getElementById(div));

	var mapTypeControl = new GMapTypeControl();
   	var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
   	var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
   	this.gmap.addControl(mapTypeControl, topRight);
	//this.map.addControl(new GSmallMapControl());
	this.gmap.addControl(new GSmallZoomControl());

	this.id = id;
	this.showMask = 0;
	this.BackButtonControl = new BackButtonControl();
	this.currentPins = new Array();
}

MyMap.prototype.LoadMap = function(mapId)
{
	if(mapId == null)
		mapId = this.id
	else
		this.id = mapId;

	//------------------------------------------------------------------------------
	//db access to read out all neccessary properties for the new Map
	//------------------------------------------------------------------------------
		var xmlHTTP = GXmlHttp.create();
		var url = "update.php?func=get&tbl=otplus&id="+mapId+"&sid="+GetSID();
		xmlHTTP.open("GET", url, false);
		xmlHTTP.send(null);

	//------------------------------------------------------------------------------
	//filling props with xml return attributes
	//------------------------------------------------------------------------------
		var props = new Object();
		var xmlDoc = xmlHTTP.responseXML;
		if(xmlDoc.documentElement != null)
		{
			var map = (xmlDoc.documentElement.getElementsByTagName("entry"))[0];
				props.lng = map.getAttribute('maplng');
				props.lat = map.getAttribute("maplat");
				props.id = map.getAttribute("ID");
				props.name = map.getAttribute("name");
				props.maptooltip = map.getAttribute("maptooltip");
				props.maptype = map.getAttribute("maptype");
				props.zoom = map.getAttribute("mapzoom");
		}
		xmlHTTP.close;

	//------------------------------------------------------------------------------
	//setting the map to the given properties
	//------------------------------------------------------------------------------
	if (GBrowserIsCompatible()) {

		this.gmap.setCenter(new GLatLng(props.lat, props.lng), parseInt(props.zoom, 10));

		this.gmap.addMapType(G_PHYSICAL_MAP);
		
		if(props.maptype == "Map" || props.maptype == "Karte")
    		this.gmap.setMapType(G_NORMAL_MAP);
    	else if(props.maptype == "Satellit")
    		this.gmap.setMapType(G_SATELLITE_MAP);
    	else if(props.maptype == "Hybrid")
    		this.gmap.setMapType(G_HYBRID_MAP);
    	else if(props.maptype == "Gelände")
    		this.gmap.setMapType(G_PHYSICAL_MAP);

		

		
        if(mapId > 1)
        	this.gmap.addControl(this.BackButtonControl);
        else
        {
        	this.gmap.removeControl(this.BackButtonControl);
        	this.gmap.addControl(new GOverviewMapControl());
        }
	}
}

MyMap.prototype.LoadPins = function(mask, mapId)
{
	if(mapId == null)
		mapId = this.id;
	if(mask == null)
		mask = this.showMask;
	else
		this.showMask = mask;
	this.currentPins = new Array();

	//------------------------------------------------------------------------------------
	//accessing the db with ajax to get all pins linked with the current Map
	//and the type given
	//------------------------------------------------------------------------------------
	var xmlHTTP = GXmlHttp.create();
	var url = "update.php?func=get&tbl=pinplus&id="+mapId+"&type="+mask+"&sid="+GetSID();
	xmlHTTP.open("GET", url, false);
	xmlHTTP.send(null);



	//------------------------------------------------------------------------------------
	//catching the XML response of the ajax db access
	//------------------------------------------------------------------------------------
	var xmlDoc = xmlHTTP.responseXML;

	this.gmap.clearOverlays();
	//------------------------------------------------------------------------------------
	//adding pins to the map
	//------------------------------------------------------------------------------------
	if(xmlDoc.documentElement != null)
	{
		//getting all the pin entries in an array
		var markers = xmlDoc.documentElement.getElementsByTagName("entry");
		var newMarker = null;
		//step through every marker-entry
		for(var i=0; i<markers.length; i++)
		{
			var lng = markers[i].getAttribute('lng');
			var lat = markers[i].getAttribute("lat");
			var id = markers[i].getAttribute("pin_ID");
			var text = markers[i].getAttribute("text");
			var pikto = markers[i].getAttribute("tbl_Pikto");
			var tooltip = markers[i].getAttribute("pintooltip");
			var href = markers[i].getAttribute("href");
			var tooltip = markers[i].getAttribute("pintooltip");
			var type = markers[i].getAttribute("pin_type");
			var file = markers[i].getAttribute("file");
			var size_x = markers[i].getAttribute("size_x");
			var size_y = markers[i].getAttribute("size_y");
			var sizeshadow_x = markers[i].getAttribute("sizeshadow_x");
			var sizeshadow_y = markers[i].getAttribute("sizeshadow_y");
			var hot_x = markers[i].getAttribute("hot_x");
			var hot_y = markers[i].getAttribute("hot_y");
			var info_x = markers[i].getAttribute("info_x");
			var info_y = markers[i].getAttribute("info_y");
			if(type == 0)
				continue;

			//---------------------------------------------------------------------------------
			//creating the basic marker
			//---------------------------------------------------------------------------------
			var markerTypes = GetMarkerTypeArray();
			//position
			var point = new GLatLng(lat, lng);

			var markerIcon = null;
			var pinPic = null;

			markerIcon = new GIcon(G_DEFAULT_ICON);
			markerIcon.image = GetPiktoPath() + "/" + file;
			markerIcon.iconSize = new GSize(size_x, size_y);
			markerIcon.shadow = GetPiktoPath() + "/s_" + file;
			markerIcon.shadowSize = new GSize(sizeshadow_x, sizeshadow_y);
			markerIcon.iconAnchor = new GPoint(hot_x, hot_y);
			markerIcon.infoWindowAnchor = new GPoint(parseInt(info_x, 10), parseInt(info_y, 10));
			markerIcon.imageMap = new Array(0,0,size_x-1,0,size_x-1,size_y-1,0,size_y-1);

		    newMarker = new GMarker(point,{title:text, icon:markerIcon});

		    //---------------------------------------------------------------------------------
		    //setting some additional members
		    //and add listeners
		    //---------------------------------------------------------------------------------
		    newMarker.id = id;
		    newMarker.title=text;
		    if(href == "")
		    	newMarker.href=0;
		    else
		    	newMarker.href = href;
		    newMarker.pikto=pikto;
		    newMarker.type = type;
		    newMarker.tooltip = tooltip;
		    newMarker.unhoverPic = GetPiktoPath() + "/" + file;
		    var preload = new Image();
		    preload.src = GetPiktoPath() + "/h_" + file;
		    newMarker.hoverPic = GetPiktoPath() + "/h_" + file;

			//GEvent.addListener(newMarker, "mouseover", function() {this.openInfoWindowHtml(this.tooltip);});
			//GEvent.addListener(newMarker, "mouseout", function() {this.closeInfoWindow();});
		    GEvent.addListener(newMarker, "click", function() {OnClickMarker(this);});
		    GEvent.addListener(newMarker, "mouseover", function() {OnMouseOverMarker(this);});
		    GEvent.addListener(newMarker, "mouseout", function() {OnMouseOutMarker(this);});


			//---------------------------------------------------------------------------------
			//display the marker on the map
			//and append it to the global markers array
			//---------------------------------------------------------------------------------
		    this.gmap.addOverlay(newMarker);
			this.currentPins.push(newMarker);
		}
	}
	xmlHTTP.close;
	//------------------------------------------------------------------------------------
	//accessing the db with ajax to get all legend pins linked with the current Map
	//and the type given
	//------------------------------------------------------------------------------------
	url = "update.php?func=get&tbl=pinplus&id=0&type="+mask+"&sid="+GetSID();
	xmlHTTP.open("GET", url, false);
	xmlHTTP.send(null);



	//------------------------------------------------------------------------------------
	//catching the XML response of the ajax db access
	//------------------------------------------------------------------------------------
	var xmlDoc = xmlHTTP.responseXML;

	//------------------------------------------------------------------------------------
	//adding pins to the map
	//------------------------------------------------------------------------------------
	if(xmlDoc.documentElement != null)
	{
		//getting all the pin entries in an array
		var markers = xmlDoc.documentElement.getElementsByTagName("entry");
		var newMarker = null;
		//step through every marker-entry
		for(var i=0; i<markers.length; i++)
		{
			var lng = markers[i].getAttribute('lng');
			var lat = markers[i].getAttribute("lat");
			var id = markers[i].getAttribute("pin_ID");
			var text = markers[i].getAttribute("text");
			var pikto = markers[i].getAttribute("tbl_Pikto");
			var tooltip = markers[i].getAttribute("pintooltip");
			var href = markers[i].getAttribute("href");
			var type = markers[i].getAttribute("pin_type");
			var file = markers[i].getAttribute("file");
			var size_x = markers[i].getAttribute("size_x");
			var size_y = markers[i].getAttribute("size_y");
			var sizeshadow_x = markers[i].getAttribute("sizeshadow_x");
			var sizeshadow_y = markers[i].getAttribute("sizeshadow_y");
			var hot_x = markers[i].getAttribute("hot_x");
			var hot_y = markers[i].getAttribute("hot_y");
			var info_x = markers[i].getAttribute("info_x");
			var info_y = markers[i].getAttribute("info_y");
			if(type == 0)
				continue;

			//---------------------------------------------------------------------------------
			//creating the basic marker
			//---------------------------------------------------------------------------------
			var markerTypes = GetMarkerTypeArray();
			//position
			var point = new GLatLng(lat, lng);

			var markerIcon = null;
			var pinPic = null;

			markerIcon = new GIcon(G_DEFAULT_ICON);
			markerIcon.image = GetPiktoPath() + "/" + file;
			markerIcon.iconSize = new GSize(size_x, size_y);
			markerIcon.shadow = GetPiktoPath() + "/s_" + file;
			markerIcon.shadowSize = new GSize(sizeshadow_x, sizeshadow_y);
			markerIcon.iconAnchor = new GPoint(hot_x, hot_y);
			markerIcon.infoWindowAnchor = new GPoint(parseInt(info_x, 10), parseInt(info_y, 10));
			markerIcon.imageMap = new Array(0,0,size_x-1,0,size_x-1,size_y-1,0,size_y-1);

		    newMarker = new GMarker(point,{title:text, icon:markerIcon});

		    //---------------------------------------------------------------------------------
		    //setting some additional members
		    //and add listeners
		    //---------------------------------------------------------------------------------
		    newMarker.id = id;
		    newMarker.title=text;
		    if(href == "")
		    	newMarker.href=0;
		    else
		    	newMarker.href = href;
		    newMarker.pikto=pikto;
		    newMarker.type = type;
		    newMarker.tooltip = tooltip;
		    newMarker.unhoverPic = GetPiktoPath() + "/" + file;
		    var preload = new Image();
		    preload.src = GetPiktoPath() + "/h_" + file;
		    newMarker.hoverPic = GetPiktoPath() + "/h_" + file;

			//GEvent.addListener(newMarker, "mouseover", function() {this.openInfoWindowHtml(this.tooltip);});
			//GEvent.addListener(newMarker, "mouseout", function() {this.closeInfoWindow();});
			GEvent.addListener(newMarker, "click", function() {OnClickMarker(this);});
		    GEvent.addListener(newMarker, "mouseover", function() {OnMouseOverMarker(this);});
		    GEvent.addListener(newMarker, "mouseout", function() {OnMouseOutMarker(this);});


			//---------------------------------------------------------------------------------
			//display the marker on the map
			//and append it to the global markers array
			//---------------------------------------------------------------------------------
		    this.gmap.addOverlay(newMarker);
			this.currentPins.push(newMarker);
		}

	}
	xmlHTTP.close;
}

//fired when a marker is mouseover
function OnMouseOverMarker(marker)
{
	if(marker.hoverPic == null) return;
	marker.setImage(marker.hoverPic);
}

//fired when a marker is mouseout
function OnMouseOutMarker(marker)
{
	if(marker.unhoverPic == null) return;
	marker.setImage(marker.unhoverPic);
}

MyMap.prototype.HighlightPin = function(pinhref)
{
	for(var i=0; i<this.currentPins.length; i++)
	{
		var pin = this.currentPins[i];
		if(pin.href == pinhref)
			OnMouseOverMarker(pin);
	}
}
MyMap.prototype.UnHighlightPin = function(pinhref)
{
	for(var i=0; i<this.currentPins.length; i++)
	{
		var pin = this.currentPins[i];
		if(pin.href == pinhref)
			OnMouseOutMarker(pin);
	}
}

//----------------------------------------------------------------------------------
//	returns all properties of the current map
//	(id, lng, lat, zoom, maptype)
//----------------------------------------------------------------------------------
MyMap.prototype.GetMapProps = function()
{
	var props = new Object();
	var center = this.gmap.getCenter();

	props.id = this.id;
	props.lat = center.lat();
	props.lng = center.lng();
	props.zoom = this.gmap.getZoom();
	props.type = this.gmap.getCurrentMapType().getName();

	return props;
}


// We define the function first
function BackButtonControl() {
}

BackButtonControl.prototype = new GControl();

BackButtonControl.prototype.initialize = function(map) {
		var container = document.createElement("div");

		var buttonDiv = document.createElement("div");
		this.setButtonStyle_(buttonDiv);
		container.appendChild(buttonDiv);
		buttonDiv.appendChild(document.createTextNode("Zurück zur Ortsteil-Übersicht"));
		GEvent.addDomListener(buttonDiv, "click", function() {
			OnBackButton();
		});

		map.getContainer().appendChild(container);
			return container;
	}

	// By default, the control will appear in the top left corner of the
	// map with 7 pixels of padding.
BackButtonControl.prototype.getDefaultPosition = function() {
		return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(25, 7));
	}

	// Sets the proper CSS for the given button element.
BackButtonControl.prototype.setButtonStyle_ = function(button) {
		button.style.textDecoration = "underline";
		button.style.color = "#0000cc";
		button.style.backgroundColor = "white";
		button.style.font = "0.8em Arial";
		button.style.border = "1px solid black";
		button.style.padding = "2px";
		button.style.marginBottom = "3px";
		button.style.textAlign = "center";
		button.style.width = "5em";
		button.style.cursor = "pointer";
	}