// ==== The "More..." control simply accepts a mouseover to reveal the "Layer" control ===
function MoreControl(layerControlObj) {
	this.layerControl = layerControlObj;
}

MoreControl.prototype = new GControl();

MoreControl.prototype.initialize = function(map) {
	var me = this;
        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 = "Más...";
      
        map.getContainer().appendChild(container);
        
        GEvent.addDomListener(container, "mouseover", function() {
          map.addControl(me.layerControl);
        });
        
        return container;
}
      
MoreControl.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(210, 7));
}


      
// ==== The "Layer" control displays the "More..." plus the checkboxes ====
// ==== The checkbox info is passed in the "opts" parameter ====

function LayerControl(opts) {
        this.opts = opts;
}

LayerControl.prototype = new GControl();

LayerControl.prototype.initialize = function(map) {
	var me = this;
        var container = document.createElement("div");
        
        container.style.border = "2px solid black";
        container.style.fontSize = "12px";
        container.style.fontFamily = "Arial, sans-serif";
        container.style.width="100px";
        container.style.backgroundColor = "#ffffff";
        container.innerHTML = '<center><b>Más...<\/b><\/center>';
        for (var i=0; i<this.opts.length; i++) {
          if (layers[i].Visible) {
            var c = 'checked';
          } else {
            var c = '';
          }
        
          container.innerHTML += '<input type="checkbox" onclick="toggleLayer('+i+')" ' +c+ ' /> '+this.opts[i]+'<br>';
        }
	container.innerHTML += '<div style="text-align: right; padding-right: 5px;"><a href="#" id="closeLayerControl" onclick="return false;" style="color: #000">cerrar</a></div><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(e) {
          //map.removeControl(me);
        });

        GEvent.addDomListener(document.getElementById('closeLayerControl'), "click", function(e) {
          e.cancelBubble = true;
          map.removeControl(me);
          return false;
        });
        
        //setTimeout("map.removeControl(me)",5000);
        
        
        return container;
}
      
LayerControl.prototype.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(210, 7));
}



// ==== toggleLayer adds and removes the layers ====
function toggleLayer(i) {
        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;
}