/**
    *   Custom map controls.
    *   @param oMap Map object
    *   @param sText Text on the button
    **/    
    var Mini_control_grey_left = function(oMap) { this.oMap = oMap; };
        Mini_control_grey_left.prototype = new GControl(true, false);
        Mini_control_grey_left.prototype.initialize = function () {
                var oContainer = document.createElement("div");
                oContainer.innerHTML           = "<span style='color:#555;padding-top:1px;display:block;height:16px;'>map</span>";
                oContainer.id                  = "Mini_control_grey_left";
                oContainer.style.width         = "29px";
                oContainer.style.verticalAlign = "middle";
                oContainer.style.fontSize      = "9px";
                oContainer.style.height        = "17px";
                oContainer.style.textAlign     = "center";
                oContainer.style.cursor        = "pointer";
                oContainer.style.color         = "#555555";
                oContainer.style.lineHeight    = "14px";
                
                
                oContainer.style.backgroundColor = "white"; 
                oContainer.style.fontWeight    = "bold";
                oContainer.style.backgroundImage = "url('"+ sBaseUrl + "GeoStart/images/controls/minigrey/mini_map_sat.gif')";

                /** Make bold when clicked **/
                GEvent.addDomListener(oContainer, 'click', function(){ 
                    oGeoStart.oMap.setMapType(G_PHYSICAL_MAP);
                    oContainer.style.fontWeight = 'bold'; 
                    document.getElementById('Mini_control_grey_right').style.fontWeight = 'normal';
                });

                
                
                this.oMap.getContainer().appendChild(oContainer);
                
                return oContainer;
            }
            Mini_control_grey_left.prototype.getDefaultPosition = function () {
                return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(51,10));
            };

    /**
    *   Custom map controls.
    *   Right control ( best fit Satelliet )
    *   @param oMap Map object
    *   @param sText Text on the button
    **/    
    var Mini_control_grey_right = function(oMap) { this.oMap = oMap; };
        Mini_control_grey_right.prototype = new GControl(true, false);
        Mini_control_grey_right.prototype.initialize = function () {
                var oContainer = document.createElement("div");
                oContainer.innerHTML         = "<span style='color:#555;padding-top:1px;display:block;height:16px;'>sat</span>";
                oContainer.id                 = "Mini_control_grey_right";
                oContainer.style.width       = "29px";
                oContainer.style.verticalAlign = "middle";
                oContainer.style.fontSize      = "9px";
                oContainer.style.height        = "17px";       
                oContainer.style.textAlign     = "center";
                oContainer.style.cursor        = "pointer";
                oContainer.style.color         = "#555555";
                oContainer.style.lineHeight    = "14px";
                
                oContainer.style.backgroundColor = "white"; 
                oContainer.style.backgroundImage = "url('"+ sBaseUrl + "GeoStart/images/controls/minigrey/mini_map_sat.gif')";

                /** Make bold when clicked **/
                GEvent.addDomListener(oContainer, 'click', function(){ 
                    oGeoStart.oMap.setMapType(G_SATELLITE_MAP); 
                    oContainer.style.fontWeight = 'bold';
                    document.getElementById('Mini_control_grey_left').style.fontWeight = 'normal'; 
                });            
            
                this.oMap.getContainer().appendChild(oContainer);
                                
                return oContainer;
            }
            Mini_control_grey_right.prototype.getDefaultPosition = function () {
                return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(20,10));
            };

            
    /**
    *   Custom map controls.
    *   Zoom and Pan controls
    **/    
    var Mini_control_grey_zoom = function(oMap) { this.oMap = oMap;};
        Mini_control_grey_zoom.prototype = new GControl(true, false);
        Mini_control_grey_zoom.prototype.initialize = function () {
                var oContainer = document.createElement("div");
                oContainer.id                   = "Control_grey_pan";
                oContainer.style.width          = '16px';
                oContainer.style.height         = '36px';
                oContainer.style.backgroundImage= "url('"+ sBaseUrl + "/GeoStart/images/controls/minigrey/mini_zoom_control.gif')";
                
                var oZoomin = document.createElement("div");
                var oZoomout = document.createElement("div");

                oZoomin.style.cssText = 'display:block;width:15px;height:15px;cursor:pointer;margin: 0 ;';
                oZoomout.style.cssText = 'display:block;width:15px;height:15px;cursor:pointer;margin: 3px 0 0 0px;';

                GEvent.addDomListener(oZoomin, 'click', function(){ oGeoStart.oMap.zoomIn();});            
                GEvent.addDomListener(oZoomout, 'click', function(){ oGeoStart.oMap.zoomOut();});            
                
                oContainer.appendChild(oZoomin);
                oContainer.appendChild(oZoomout);
                
                this.oMap.getContainer().appendChild(oContainer);
                                
                return oContainer;
            }
            Mini_control_grey_zoom.prototype.getDefaultPosition = function () {
                return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,10));
            };