<h2>
	[ Mate ]
</h2>
<p>
	Diese Karte markiert alle Orte in Leipzig (bzw. sogar ganz Deutschland: einfach herauszoomen)
	an denen Club Mate zu haben ist und die bei <a href="http://www.openstreetmap.org">OpenStreetMap</a> mit dem Tag 
	<i>drink:club-mate=*</i> versehen wurden. Ein paar mehr Details findet Ihr
	<a href="http://bitfehler.net/mate">hier</a>.
</p>
<div id="spacer" style="margin-left: 20px;">
<div id="mapdiv"></div>
</div>
<p style="font-size: 10px;">Javascript required. Click an icon for details. Map data 
<a style="font-size: 10px;" href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> 2011 
<a style="font-size: 10px;" href="http://www.openstreetmap.org">OpenStreetMap</a> contributors.</p>

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script defer="defer" type="text/javascript">
<!--

var obj, map, pois, styleMap, selectControl, selectedFeature, loadingPopup;
var numDots = 3;

function resizeMap() {
	document.getElementById("mapdiv").style.width = "100px"
	document.getElementById("mapdiv").style.height = "100px";
	var c = document.getElementsByClassName("content")[0];
	var w = c.offsetWidth;
	var h = c.offsetHeight;
	w = Math.round(w * 0.90);
	document.getElementById("mapdiv").style.width = w + "px"
	document.getElementById("mapdiv").style.height = "500px";
}

function onPopupClose(evt) {
	// 'this' is the popup.
	selectControl.unselect(this.feature);
}

// Pretty-print an amenity tag (and others actually)
function amenityPp(amenity) {
	var words = amenity.split("_");
	var result = "";
	for (w in words) {
		if (result != "") {
			result += " ";
		}
		result += words[w].charAt(0).toUpperCase() + words[w].slice(1);
	}
	return result;
}

function popupText(feature) {
	var title = "";
	if ("name" in feature.attributes) {
		title = feature.attributes["name"];
	}
	else {
		title = "*no name*";
	}
	if ("website" in feature.attributes) {
		title = '<a href="' + feature.attributes["website"] + '" rel="external">' + title + '</a>';
	}
	
	var desc = "";
	if ("amenity" in feature.attributes) {
		desc = '<p style="font-size: smaller">' + amenityPp(feature.attributes["amenity"]) + '</p>';
	}
	else if ("leisure" in feature.attributes) {
		desc = '<p style="font-size: smaller">' + amenityPp(feature.attributes["leisure"]) + '</p>';
	}
	else if ("shop" in feature.attributes) {
		desc = '<p style="font-size: smaller">' + amenityPp(feature.attributes["shop"]) + '</p>';
	}
	
	var addr = "";
	if ("addr:street" in feature.attributes) {
		addr += feature.attributes["addr:street"]
		if ("addr:housenumber" in feature.attributes) {
			addr += " " + feature.attributes["addr:housenumber"];
		}
		addr += "</br>";
	}
	if ("addr:city" in feature.attributes) {
		if ("addr:postcode" in feature.attributes) {
			addr += feature.attributes["addr:postcode"] + " ";
		}
		addr += feature.attributes["addr:city"];
	}

	var open = "";
	if ("opening_hours" in feature.attributes) {
		open += '<p style="font-size: smaller">Open: ' + feature.attributes["opening_hours"] + '</p>';
	}

	return "<h2>" + title + "</h2>" + desc + "<p>" + addr + "</p>" + open;
}

function onFeatureSelect(feature) {
	var lst = "";
	for (var prop in feature.attributes) {
		lst += prop + " ";
	}
	popup = new OpenLayers.Popup.FramedCloud(
			"featurePopup",
			feature.geometry.getBounds().getCenterLonLat(),
			new OpenLayers.Size(100,100),
			popupText(feature),
			null, true, onPopupClose
	);
	feature.popup = popup;
	popup.feature = feature;
	map.addPopup(popup);
}
function onFeatureUnselect(feature) {
	if (feature.popup) {
		popup.feature = null;
		map.removePopup(feature.popup);
		feature.popup.destroy();
		feature.popup = null;
	}
}

function dataCallback() {
	map.removePopup(loadingPopup);
}

resizeMap();
window.onresize = resizeMap;

map = new OpenLayers.Map("mapdiv");
layer = new OpenLayers.Layer.OSM();
layer.attribution = 0;


var styleMap = new OpenLayers.Style({
	externalGraphic: '/inc/mate_icon.png',
	graphicWidth: 32,
	graphicHeight: 32,
	graphicXOffset: 0,
	graphicYOffset: -32
});

var pois = new OpenLayers.Layer.Vector("Marker", { 
	styleMap: styleMap,
	eventListeners: {"featuresadded": dataCallback },
	strategies: [new OpenLayers.Strategy.Fixed],
	projection:map.displayProjection,
	protocol: new OpenLayers.Protocol.HTTP({
		url: "/inc/mate.xml",
		format: new OpenLayers.Format.OSM,
	})
});

map.addLayer(layer);
map.addLayer(pois);

//Set start centrepoint and zoom    
var lonLat = new OpenLayers.LonLat(12.3903, 51.342).transform(
	new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
	map.getProjectionObject() // to Spherical Mercator Projection
);
map.setCenter(lonLat, 12); 

var lonLatPopup = new OpenLayers.LonLat(12.34, 51.36).transform(
	new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
	map.getProjectionObject() // to Spherical Mercator Projection
);

loadingPopup = new OpenLayers.Popup("loadingPopup",
		lonLatPopup,
		new OpenLayers.Size(300,200),
		'<p style="font-weight: bold; text-align: center; margin-top: 60px">Loading OpenStreetMap data.<br>Please wait.<br><br><span id="dots">...</span></p>', false
);
loadingPopup.opacity = 0.9;
map.addPopup(loadingPopup);
 
selectControl = new OpenLayers.Control.SelectFeature(pois, {
	onSelect: onFeatureSelect,
	onUnselect: onFeatureUnselect
});
map.addControl(selectControl);
selectControl.activate();
-->
</script>