// We define the function first
function PlayButton() {}
// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
PlayButton.prototype = new GControl();
// Creates a one DIV for the button and place 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.
PlayButton.prototype.initialize = function(map) {  
	var container = document.createElement("div");
	var zoomInDiv = document.createElement("div");
	this.setButtonStyle_(zoomInDiv);
	container.appendChild(zoomInDiv);
	zoomInDiv.appendChild(document.createTextNode("Reproducir Viaje"));
	GEvent.addDomListener(zoomInDiv, "click", function() {
													   reproducirViaje();
													   });
	map.getContainer().appendChild(container);
	return container;
}
// By default, the control will appear in the bottom right corner of the
// map with 7 pixels of padding.
PlayButton.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(7, 7));
}
// Sets the proper CSS for the given button element.
PlayButton.prototype.setButtonStyle_ = function(button) {
	button.style.textDecoration = "underline";
	button.style.color = "#FFF";
	button.style.backgroundColor = "#B8CEA2";
	button.style.font = "small Arial";
	button.style.border = "none";
	button.style.padding = "2px";
	button.style.marginBottom = "7px";
	button.style.textAlign = "center";
	button.style.width = "10em";
	button.style.cursor = "pointer";
	button.style.textDecoration = 'none';
}

function GCustomControl(){}

GCustomControl.prototype = new GControl();

GCustomControl.prototype.initialize = function(map){
	//boton mapa
	var container = document.createElement("div");
	var mapaDiv = document.createElement("div");
	this.setButtonStyle_(mapaDiv);
	container.appendChild(mapaDiv);
	mapaDiv.appendChild(document.createTextNode("Mapa"));
	GEvent.addDomListener(mapaDiv, "click", function() {
													   map.setMapType(G_NORMAL_MAP);
													   });
	//boton satelite
	var sateliteDiv = document.createElement("div");
	this.setButtonStyle_(sateliteDiv);
	container.appendChild(sateliteDiv);
	sateliteDiv.appendChild(document.createTextNode("Satélite"));
	GEvent.addDomListener(sateliteDiv, "click", function() {
														map.setMapType(G_SATELLITE_MAP);
														});
	//boton hibrido
	var hibridoDiv = document.createElement("div");
	this.setButtonStyle_(hibridoDiv);
	container.appendChild(hibridoDiv);
	hibridoDiv.appendChild(document.createTextNode("Híbrido"));
	GEvent.addDomListener(hibridoDiv, "click", function() {
														map.setMapType(G_HYBRID_MAP);
														});
	map.getContainer().appendChild(container);
	return container;
}
// De forma predeterminada, el control se mostrará en la esquina superior derecha del mapa, con un desplazamiento de 7 píxeles.
GCustomControl.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
}
// Define el CSS adecuado para un elemento de botón determinado.
GCustomControl.prototype.setButtonStyle_ = function(button){
	button.style.textDecoration = "none";
	button.style.textAlign = "center";
	button.style.color = "#666";
	button.style.font = "small Arial";
	button.style.border = "none";
	button.style.padding = "2px";
	button.style.marginBottom = "3px";
	button.style.width = "6em";
	button.style.cursor = "pointer";
	button.style.backgroundColor = "#B8CEA2";
}