function CustomZoomControl() {}

CustomZoomControl.prototype = new GControl();
CustomZoomControl.prototype.initialize = function(map) 
{
var container = document.createElement("div");
container.style.width = "45px";
container.style.height = "111px";
//container.style.background = "url(controles/background_zoom.png)";

var upButton = document.createElement("img");
//this.setButtonStyle_(upButton);
container.appendChild(upButton);
upButton.src = "controles/sm_button_up.png";
upButton.style.marginLeft = "15px";
upButton.style.marginTop = "5px";
upButton.style.cursor = "pointer";
GEvent.addDomListener(upButton, "click", function() 
	{
	map.panDirection(0, +1);
	});
	
var leftButton = document.createElement("img");
//this.setButtonStyle_(leftButton);
container.appendChild(leftButton);
leftButton.src = "controles/sm_button_left.png";
leftButton.style.marginLeft = "5px";
leftButton.style.marginTop = "0px";
leftButton.style.marginBottom = "0px";
leftButton.style.display = "inline";
leftButton.style.cursor = "pointer";
GEvent.addDomListener(leftButton, "click", function() {
map.panDirection(+1, 0);
});

var rightButton = document.createElement("img");
//this.setButtonStyle_(rightButton);
container.appendChild(rightButton);
rightButton.src = "controles/sm_button_right.png";
rightButton.style.marginLeft = "2px";
rightButton.style.marginTop = "0px";
rightButton.style.marginBottom = "0px";
rightButton.style.display = "inline";
rightButton.style.cursor = "pointer";
GEvent.addDomListener(rightButton, "click", function() {
map.panDirection(-1, 0);
});

var downButton = document.createElement("img");
//this.setButtonStyle_(downButton);
container.appendChild(downButton);
downButton.src = "controles/sm_button_down.png";
downButton.style.marginLeft = "15px";
downButton.style.marginBottom = "5px";
downButton.style.cursor = "pointer";
GEvent.addDomListener(downButton, "click", function() {
map.panDirection(0, -1);
});

var zoomInButton = document.createElement("img");
//this.setButtonStyle_(zoomInButton);
container.appendChild(zoomInButton);
zoomInButton.src = "controles/sm_button_plus.png";
zoomInButton.style.marginLeft = "15px";
zoomInButton.style.cursor = "pointer";
GEvent.addDomListener(zoomInButton, "click", function() {
 map.zoomIn();  
 document.getElementById('debug').value = 'in'+document.getElementById('seleccion').value;
 selGroup( document.getElementById('seleccion').value );
});

var zoomBox = document.createElement("div");
container.appendChild(zoomBox);

var zoomOutButton = document.createElement("img");
container.appendChild(zoomOutButton);
zoomOutButton.src = "controles/sm_button_minus.png";
zoomOutButton.style.marginLeft = "15px";
zoomOutButton.style.marginTop = "5px";
zoomOutButton.style.cursor = "pointer";

GEvent.addDomListener(zoomOutButton, "click", function() {
 map.zoomOut();  
  document.getElementById('debug').value = 'out'+document.getElementById('seleccion').value;
 selGroup( document.getElementById('seleccion').value );
});

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

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.

CustomZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}


//CustomMapControl

function CustomMapControl() {
}
CustomMapControl.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.
CustomMapControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var mapButton = document.createElement("img");
this.setButtonStyle_(mapButton);
container.appendChild(mapButton);
mapButton.src = "controles/boton_mapa.png";
GEvent.addDomListener(mapButton, "click", function() {
map.setMapType(G_MAP_TYPE);
});
var satButton = document.createElement("img");
this.setButtonStyle_(satButton);
container.appendChild(satButton);
satButton.src = "controles/boton_satelite.png";
GEvent.addDomListener(satButton, "click", function() {
map.setMapType(G_SATELLITE_MAP);
});
var hybridButton = document.createElement("img");
this.setButtonStyle_(hybridButton);
container.appendChild(hybridButton);
hybridButton.src = "controles/boton_relieve.png";
GEvent.addDomListener(hybridButton, "click", function() {
map.setMapType(G_PHYSICAL_MAP);
});
map.getContainer().appendChild(container);
return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
CustomMapControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
}
// Sets the proper CSS for the given button element.
CustomMapControl.prototype.setButtonStyle_ = function(button) {
var loader = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='controles/yknob.png', sizingMethod='scale');";
button.style.width = "52px";
button.style.height = "14px";
button.style.marginLeft = "3px";
button.style.cursor = "pointer";
button.style.display = "inline";
button.style.filter= loader;
}



//miniCustomZoomControl

function miniCustomZoomControl() {}

miniCustomZoomControl.prototype = new GControl();
miniCustomZoomControl.prototype.initialize = function(map) 
{
var container = document.createElement("div");
container.style.width = "45px";
container.style.height = "111px";
//container.style.background = "url(controles/background_zoom.png)";

var zoomInButton = document.createElement("img");
//this.setButtonStyle_(zoomInButton);
container.appendChild(zoomInButton);
zoomInButton.src = "controles/sm_button_plus.png";
zoomInButton.style.marginLeft = "15px";
zoomInButton.style.cursor = "pointer";
GEvent.addDomListener(zoomInButton, "click", function() {
 map.zoomIn();  
 document.getElementById('debug').value = 'in'+document.getElementById('seleccion').value;
 selGroup( document.getElementById('seleccion').value );
});

var zoomBox = document.createElement("div");
container.appendChild(zoomBox);

var zoomOutButton = document.createElement("img");
container.appendChild(zoomOutButton);
zoomOutButton.src = "controles/sm_button_minus.png";
zoomOutButton.style.marginLeft = "15px";
zoomOutButton.style.marginTop = "5px";
zoomOutButton.style.cursor = "pointer";

GEvent.addDomListener(zoomOutButton, "click", function() {
 map.zoomOut();  
  document.getElementById('debug').value = 'out'+document.getElementById('seleccion').value;
 selGroup( document.getElementById('seleccion').value );
});

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

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.

miniCustomZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}



//miniCustomMapControl

function miniCustomMapControl() {
}
miniCustomMapControl.prototype = new GControl();
miniCustomMapControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var mapButton = document.createElement("img");
this.setButtonStyle_(mapButton);
container.appendChild(mapButton);
mapButton.src = "controles/boton_mapa.png";
GEvent.addDomListener(mapButton, "click", function() {
map.setMapType(G_MAP_TYPE);
});
var satButton = document.createElement("img");
this.setButtonStyle_(satButton);
container.appendChild(satButton);
satButton.src = "controles/boton_satelite.png";
GEvent.addDomListener(satButton, "click", function() {
map.setMapType(G_SATELLITE_MAP);
});
map.getContainer().appendChild(container);
return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
miniCustomMapControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
}
// Sets the proper CSS for the given button element.
miniCustomMapControl.prototype.setButtonStyle_ = function(button) {
button.style.width = "52px";
button.style.height = "14px";
button.style.marginLeft = "3px";
button.style.cursor = "pointer";
button.style.display = "inline";

}