/**
* $Date: 2009-05-05 15:28:43 +0200 (ti, 05 maj 2009) $
* $Author: lars.huring $
* $Revision: 234 $
**/

KL.MoreControl = function()
{
}

KL.MoreControl.prototype = new GControl();


// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
KL.MoreControl.prototype.initialize = function(map)
{
	var container = document.createElement("div");
	container.style.border = "2px solid black";
	container.style.fontSize = "12px";
	container.style.fontFamily = "Arial, sans-serif";
	container.style.width = "80px";
	container.style.backgroundColor = "#ffffff";
	container.style.textAlign = "center";
	container.innerHTML = "More...";

	map.getContainer().appendChild(container);

	GEvent.addDomListener(container, "click", function()
	{
		map.addControl(layerControl);
	});


	return container;

}

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



/**
* Layers control
*/
function LayerControl(opts)
{
	this.opts = opts;
}

LayerControl.prototype = new GControl();

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

	container.style.border = "2px solid black";
	container.style.fontSize = "12px";
	container.style.fontFamily = "Arial, sans-serif";
	container.style.width = "80px";
	container.style.backgroundColor = "#ffffff";
	container.innerHTML = '<center><b>More...<\/b><\/center>';
	for (var i = 0; i < this.opts.length; i++)
	{
		if (layers[i].Visible)
		{
			var c = 'checked';
		} else
		{
			var c = '';
		}

		var input = $("<input />");
		input
		.attr("type", "checkbox")
		.attr("value", i)
		.bind("click", function()
		{
			var i = $(this).attr("value");

			if (layers[i].Visible)
			{
				layers[i].hide();
			} else
			{
				if (layers[i].Added)
				{
					layers[i].show();
				} else
				{
					map.addOverlay(layers[i]);
					layers[i].Added = true;
				}
			}
			layers[i].Visible = !layers[i].Visible;
			
		});

		$(container).append(input);
		$(container).append(document.createTextNode(this.opts[i]));
		$(container).append($("<br />"));
	}


	map.getContainer().appendChild(container);

	// === This doesn't do what I want. It kills the control if I mouseover a checkbox ===
	// === If you know how to do this better, let me know ===

	//GEvent.addDomListener(container, "mouseout", function() {
	//  map.removeControl(layerControl);
	//});

	// setTimeout("map.removeControl(layerControl)", 5000);


	return container;
}

LayerControl.prototype.getDefaultPosition = function()
{
	return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(210, 7));
}

var layerControl = new LayerControl(["YouTube", "Wikipedia", "Photos"]);