/**
 * 
 */
function MMMapItemsControl()
{	
	this.div = document.createElement("div");
	this.div.style.position = "absolute";
	this.div.style.height = "17px";
	this.div.style.width = "68px";
	this.div.style.borderWidth = "1px 0px 1px 1px";
	this.div.style.borderStyle = "solid";
	this.div.style.borderColor = "#000000";
	this.div.style.background = "#000000";

	this.showKnr;
	
	this.layerPanoramio;
	this.layerBettbike;	
	this.layerBikearena;	
	
	this.initPanoramio = false;
	this.initBettbike = false;
	this.initBikearena = false;
	
}
MMMapItemsControl.prototype = new GControl();


MMMapItemsControl.prototype.InitializePanoramio = function(bool){this.initPanoramio = bool;}
MMMapItemsControl.prototype.InitializeBikearena = function(bool){this.initBikearena = bool;}
if(location.href.search("edit_network")<0){
	MMMapItemsControl.prototype.InitializeBettBike = function(bool, showKnr){this.initBettbike = bool; this.showKnr = showKnr}
}
else MMMapItemsControl.prototype.InitializeBettBike = function(bool){this.initBettbike = bool; }

/**
 * Returns to the map if the control should be printable. 
 */
MMMapItemsControl.prototype.printable = function(){
	return false;
}

/**
 * Returns to the map if the control contains selectable text. 
 */
MMMapItemsControl.prototype.selectable = function(){
	return false;
}

/**
 * Returns to the map the position in the map view at which the control appears by default. 
 * This will be overridden by the second argument to GMap2.addControl(). 
 */
MMMapItemsControl.prototype.getDefaultPosition = function(){
	return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(270,7));
}


/**
 * Will be called by the map so the control can initialize itself. The control will 
 * use the method GMap2.getContainer() to get hold of the DOM element that contains 
 * the map, and add itself to it. It returns the added element. 
 */
MMMapItemsControl.prototype.initialize = function(map){	

	// Add MapTypeControl to the DOM
	map.getContainer().appendChild(this.div);
	
	var button = document.createElement("div");
	this.div.appendChild(button);	
	button.style.position = "absolute";
	button.style.width = "65px";
	button.style.height = "15px";	
	button.style.borderWidth = "1px";
	button.style.borderStyle = "solid";		
	button.style.borderColor = "#FFFFFF #B0B0B0 #B0B0B0 #FFFFFF";
	button.style.background = "#FFFFFF";	
	button.style.fontFamily = "Arial, sans-serif";
	button.style.fontSize = "12px";
	button.style.textAlign = "center";
	button.style.verticalAlign = "middle";	
	button.style.cursor = "pointer";	
	button.innerHTML = "Mehr...";
	button.title = "Ebenen anzeigen/ausblenden";
	
	
	var listWidth = 100;
	var listHeight = 40;
	
	var list = document.createElement("div");
	this.div.appendChild(list);	
	
	list.style.display = "none";
	list.style.position = "absolute";
	list.style.top = "18px";
	list.style.height = (listHeight+2) + "px";
	list.style.width = (listWidth+3) +"px";
	list.style.borderWidth = "1px 1px 1px 1px";
	list.style.borderStyle = "solid";
	list.style.borderColor = "#000000";
	list.style.background = "#FFFFFF";
	
	var itemPanoramio = this.createCheckItem("Fotos", function(checked){		
		
		if(checked && !this.layerPanoramio)
		{
			this.layerPanoramio = new MMPanoramioOverlay(5);
			map.addOverlay(this.layerPanoramio);
		}
		else if(this.layerPanoramio)
		{
			map.removeOverlay(this.layerPanoramio);
			this.layerPanoramio = null;
		}
		
	}, this.initPanoramio);
	
	
	if(this.initBikearena)
	{
		var itemBikearena = this.createCheckItem("Gasthof/Hotel", function(checked){		
			if(checked && !this.layerBikearena)
			{
				this.layerBikearena = new MMBikearenaOverlay(10, true);
				map.addOverlay(this.layerBikearena);
			}
			else if(this.layerBikearena)
			{
				map.removeOverlay(this.layerBikearena);
				this.layerBikearena = null;
			}
			
		}, this.initBikearena)  ;
		
		list.appendChild(itemBikearena);
	}
	else
	{		
		var itemBettBike = this.createCheckItem("Bett+Bike", function(checked){	
			
			if(checked && !this.layerBettbike)
			{
				this.layerBettbike = new MMBettBikeOverlay(10, true);
				if(this.showKnr) this.layerBettbike.ShowInfoWindow(this.showKnr);
				map.addOverlay(this.layerBettbike);
			}
			else if(this.layerBettbike)
			{
				map.removeOverlay(this.layerBettbike);
				this.layerBettbike = null;
			}
			
		}, ((location.href.search("edit")>0) ? false : this.initBettbike ));
		
		list.appendChild(itemBettBike);
	}
	
	list.appendChild(itemPanoramio);
	
	
	
	
	GEvent.bindDom(this.div, 'mouseover', this, function(){
		list.style.display = "block";
	});
	
	
	GEvent.bindDom(this.div, 'mouseout', this, function(){
		list.style.display = "none";
	});
	

	return this.div;	
}


MMMapItemsControl.prototype.createCheckItem = function(text, callback, selected)
{
	var div = document.createElement("div");
	
	var current = new Date();
	var elementId = current.getTime() + "_" + Math.random();
	
	if(selected) div.innerHTML = '<input id='+ elementId +' type="checkbox" checked>';
	else div.innerHTML = '<input id='+ elementId +' type="checkbox">';
	
	div.innerHTML += '<label for="'+ elementId +'" style="width:auto">&nbsp;'+ text +'</label>';
	
	GEvent.bindDom(div, "click", this, function(e){		
		var checked = $(elementId).checked;
		callback.apply(this, [checked]);
	});
	
	callback.apply(this, [selected]);
	return div;
}


MMMapItemsControl.prototype.appendLabel = function(element, text, tooltip, callback)
{
	var label = document.createElement("div");
	element.appendChild(label);
	
	label.style.position = "absolute";
	label.style.top = "16px";
	label.style.left = "-2px";
	
	//var left = element.style.left;
	//label.style.left = (left.substr(0, left.indexOf("px")) - 2) + "px";
	label.style.width = "110px";
	
	label.style.display = "none";
	
	label.style.borderWidth = "1px";
	label.style.borderStyle = "solid";
	label.style.borderColor = "#000000";
	label.style.background = "#FFFFFF";
	
	label.style.fontFamily = "Arial, sans-serif";
	label.style.fontSize = "11px";	
	
	label.innerHTML = ''
		+'<table width="100%" border="0" cellspacing="0" cellpadding="0">'
		+  '<tr>'
		+    '<td valign="middle" width="5">'
		+      '<input id="'+ text +'" type="checkbox" checked>'
		+    '</td>'
		+    '<td valign="middle">'+ text +'</td>'
		+  '</tr>'
		+'</table>';
		
	label.title = tooltip;
	

	var checkbox = document.getElementById(text);
	
	GEvent.bindDom(checkbox, "click", this, function(e){		
		callback.apply(this, [e]);
	});
	
	GEvent.bindDom(label, "click", this, function(e){		
		callback.apply(this, [e]);
	});
	
	GEvent.bindDom(element, "mouseover", this, function(e){		
		label.style.display = "block";
	});
	
	GEvent.bindDom(element, "mouseout", this, function(e){		
		label.style.display = "none";
	});
	
	return label;
}