var map;
function LinkToList() {
}
function addMarkers() {
	var markers = [];
  var markerCluster = null;
  var sizes = [55, 55, 65, 65, 65];
	var styles = [];
  for (i = 1; i <= 5; ++i) {
    styles.push({
      'url': "/images/m" + i + ".png",
      'height': sizes[i - 1],
      'width': sizes[i - 1]
    });
	};
  for (var i = 0; i < users.length; ++i) {
		var icon = new GIcon(G_DEFAULT_ICON);
		// hack to not break on invalid data.... fix this. ;)
		if(users[i].user.marker && users[i].user.marker != "")
	  	icon.image = users[i].user.marker;
		else
			icon.image = "/images/voodoo.png";
		icon.shadow = "/images/shadow.png";
		icon.iconSize = new GSize(26, 31);
		icon.shadowSize = new GSize(50, 27);
		icon.iconAnchor = new GPoint(9, 33);
		icon.infoWindowAnchor = new GPoint(20, 1);
		
    var latlng = new GLatLng(users[i].user.latitude, users[i].user.longitude);
    var marker = new GMarker(latlng, {icon: icon});
		marker.user = users[i].user.id;
		GEvent.addListener(marker, "click", function(e,m) {
			showUser(this.user);
		});
    markers.push(marker);
  }
  markerClusterer = new MarkerClusterer(map, markers, {styles: styles, gridSize: 40,maxZoom:18});
	setTimeout(function(){
		$("splash").fade({duration:1.5});
		if(display_user){
			map.setCenter(new GLatLng(display_user.user.latitude, display_user.user.longitude), 15);
			showUser([display_user.user.id]);
		}
	},3000);
}
LinkToList.prototype = new GControl();

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

  var div = document.createElement("div");
  var inner_div = document.createElement("div");

  this.setButtonStyle_(div);
  this.setInnerButtonStyle_(inner_div);
	inner_div.className = 'inner_div';
  container.appendChild(div);
  div.appendChild(inner_div);

  inner_div.appendChild(document.createTextNode("Liste"));  
  GEvent.addDomListener(inner_div, "click", function() {
		var url = "";
		document.location = "/users";
  });

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

// Standardmaessig wird das Bedienelement in der oberen linken Ecke der Karte mit 7 Pixeln Abstand zum Kartenrand angezeigt.
LinkToList.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(215, 7));
}

// Legt das korrekte CSS für das angegebene Schaltflächenelement fest.
LinkToList.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "none";
  button.style.color = "black";
  button.style.backgroundColor = "white";
  button.style.fontFamily = "Arial,sans-serif";
	button.style.fontSize = "13px";
	button.style.fontWeight = "normal";
  button.style.border = "1px solid black";
  button.style.padding = "0";
  button.style.textAlign = "center";
  button.style.cursor = "pointer";
}

LinkToList.prototype.setInnerButtonStyle_ = function(button) {
  button.style.textDecoration = "none";
  button.style.color = "black";
  button.style.backgroundColor = "#ffc";
  button.style.fontFamily = "Arial,sans-serif";
	button.style.fontSize = "12px";
	button.style.fontWeight = "normal";
  button.style.padding = "1px 14px";
  button.style.textAlign = "center";
  button.style.cursor = "pointer";
}

$(document).observe("dom:loaded",function(){
	
	if(GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById('map'));
		map.setCenter(new GLatLng(52.12, 12.32), 5);
		map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,60)));
		map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,60)));
		map.addControl(new LinkToList(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(215,60)));
		//map.enableDoubleClickZoom();
		map.enableScrollWheelZoom();
		setTimeout(addMarkers,500);
	}
})
$(document).observe("unload", function(){
	GUnload();
});



function center(element) {
	var elt         = $(element);

	var eltDims     = elt.getDimensions();
	
	var browserDims = document.body.getDimensions();

	// calculate the center of the page using the browser and element dimensions
	var y  = (browserDims.height - eltDims.height) / 2;
	var x = (browserDims.width - eltDims.width) / 2;

	// set the style of the element so it is centered
	var styles = { position : 'absolute',
		left     : x + 'px' };

	elt.setStyle(styles);
}