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

function LayerControl(main, opts) {
    this.main = main;
    this.opts = opts;
};
LayerControl.prototype = new GControl();

LayerControl.prototype.initialize = function(map) {
    var szLang = this.main.lang;
    var szMoreId = 'LayerControlMore';
    var szMore = lang[szLang][szMoreId];
    var container = document.createElement("div");
    
    container.id = szMoreId;
    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>'+szMore+'<\/b><\/center>';
    for (var i=0; i<this.opts.length; i++) {
        if (fcmq.layers[i].Visible) {
            var c = 'checked';
        } else {
            var c = '';
        }
        
        container.innerHTML += '<input type="checkbox" onclick="fcmq.toggleLayer('+i+')" ' +c+ ' /> '+this.opts[i]+'<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("fcmq.map.removeControl(fcmq.layerControl)",5000);
        
    return container;
};
      
LayerControl.prototype.getDefaultPosition = function() {
    var oSize;
    var oOptions = options['more'];
    
    if(oOptions && oOptions['offsetx'] && oOptions['offsety']) {
        oSize = new GSize(oOptions['offsetx'], oOptions['offsety']);
    } else {
        oSize = new GSize(340, 7);
    }
    
    return new GControlPosition(G_ANCHOR_TOP_RIGHT, oSize);
};