/**
    *   Custom map controls.
    *   Middle control ( best fit: Kaart )
    *   @param oMap Map object
    *   @param sText Text on the button
    **/    
    var Control_grey_center = function(oMap, sText) { this.oMap = oMap; this.sText = sText; };
        Control_grey_center.prototype = new GControl(true, false);
        Control_grey_center.prototype.initialize = function () {
                var oContainer = document.createElement("div");
                oContainer.innerHTML           = "<span style='padding-top:5px;display:block;heigth:25px;'>" + this.sText + "</span>";
                oContainer.id                  = "Control_grey_kaart";
                oContainer.style.width         = "56px";
                oContainer.style.verticalAlign = "middle";
                oContainer.style.fontSize      = "12px";
                oContainer.style.height        = "25px";
                oContainer.style.textAlign     = "center";
                oContainer.style.cursor        = "pointer";
                oContainer.style.fontWeight    = "bold";
                oContainer.style.backgroundImage = "url('"+sBaseUrl+"GeoStart/images/controls/grey/center_btn.gif')";

                /** Make bold when clicked **/
                GEvent.addDomListener(oContainer, 'click', function(){ 
                    oMapObjects.oMap.setMapType(G_NORMAL_MAP);
                    oContainer.style.fontWeight = 'bold'; 
                    document.getElementById('Control_grey_satelliet').style.fontWeight = 'normal';
                    document.getElementById('Control_grey_both').style.fontWeight = 'normal'; 

                });

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

    /**
    *   Custom map controls.
    *   Right control ( best fit Satelliet )
    *   @param oMap Map object
    *   @param sText Text on the button
    **/    
    var Control_grey_right = function(oMap, sText) { this.oMap = oMap; this.sText = sText; };
        Control_grey_right.prototype = new GControl(true, false);
        Control_grey_right.prototype.initialize = function () {
                var oContainer = document.createElement("div");
                oContainer.innerHTML         = "<span style='padding-top:5px;display:block;heigth:25px;'>" + this.sText + "</span>";
                oContainer.id                 = "Control_grey_satelliet";
                oContainer.style.width       = "70px";
                oContainer.style.verticalAlign = "middle";
                oContainer.style.fontSize    = "12px";
                oContainer.style.height        = "25px";
                oContainer.style.textAlign     = "center";
                oContainer.style.cursor        = "pointer";
                oContainer.style.fontWeight    = "normal";
                oContainer.style.backgroundImage = "url('"+sBaseUrl+"GeoStart/images/controls/grey/right_btn.gif')";

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

            
    /**
    *   Custom map controls.
    *   Left control ( Created for: "Help" )
    *   @param oMap Map object
    *   @param sText Text on the button
    **/    
    var Control_grey_left = function(oMap, sText) { this.oMap = oMap; this.sText = sText; };
        Control_grey_left.prototype = new GControl(true, false);
        Control_grey_left.prototype.initialize = function () {
                var oContainer = document.createElement("div");
                oContainer.innerHTML         = "<span style='padding-top:5px;display:block;heigth:25px;'>" + this.sText + "</span>";
                oContainer.id                 = "Control_grey_both";
                oContainer.style.width       = "54px";
                oContainer.style.verticalAlign = "middle";
                oContainer.style.fontSize    = "12px";
                oContainer.style.height        = "25px";
                oContainer.style.textAlign     = "center";
                oContainer.style.cursor        = "pointer";
                oContainer.style.backgroundImage = "url('"+sBaseUrl+"GeoStart/images/controls/grey/left_btn.gif')";
                
                /** Onclick function **/
                GEvent.addDomListener(oContainer, 'click', function(){ 
                    oMapObjects.oMap.setMapType(G_HYBRID_MAP);
                    
                    oContainer.style.fontWeight = 'bold'; 
                    document.getElementById('Control_grey_satelliet').style.fontWeight = 'normal';
                    document.getElementById('Control_grey_kaart').style.fontWeight = 'normal';
                });            
                
                this.oMap.getContainer().appendChild(oContainer);
                                
                return oContainer;
            }
            Control_grey_left.prototype.getDefaultPosition = function () {
                return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(154,10));
            };
            
            
    /**
    *   Custom map controls.
    *   Zoom and Pan controls
    **/    
    var Control_grey_panzoom = function(oMap, sText) { this.oMap = oMap;};
        Control_grey_panzoom.prototype = new GControl(true, false);
        Control_grey_panzoom.prototype.initialize = function () {
                var oContainer = document.createElement("div");
                oContainer.id                   = "Control_grey_pan";
                oContainer.style.width          = '37px';
                oContainer.style.height         = '100px';
                oContainer.style.backgroundImage= "url('"+sBaseUrl+"GeoStart/images/controls/grey/zoom_control.gif')";
                
                var oUp = document.createElement("div");
                var oRight = document.createElement("div");
                var oDown = document.createElement("div");
                var oLeft = document.createElement("div");
                var oZoomin = document.createElement("div");
                var oZoomout = document.createElement("div");

                oUp.style.cssText = 'display:block;width:16px;height:16px;cursor:pointer;margin-left:11px;';
                oLeft.style.cssText = 'display:block;width:16px;height:16px;cursor:pointer;margin-top:3px;float:left;';
                oRight.style.cssText = 'display:block;width:16px;height:16px;cursor:pointer;float:left;margin:4px 0 0 4px';
                oDown.style.cssText = 'display:block;width:16px;height:16px;cursor:pointer;clear: both;margin: 2px 0 0 10px;';
                oZoomin.style.cssText = 'display:block;width:16px;height:16px;cursor:pointer;margin: 10px 0 0 10px;';
                oZoomout.style.cssText = 'display:block;width:16px;height:16px;cursor:pointer;margin: 3px 0 0 10px;';

                GEvent.addDomListener(oUp, 'click', function(){ oMapObjects.oMap.panDirection(0,1)});            
                GEvent.addDomListener(oLeft, 'click', function(){ oMapObjects.oMap.panDirection(1,0);});            
                GEvent.addDomListener(oRight, 'click', function(){ oMapObjects.oMap.panDirection(-1,0);});            
                GEvent.addDomListener(oDown, 'click', function(){ oMapObjects.oMap.panDirection(0,-1);});            
                GEvent.addDomListener(oZoomin, 'click', function(){ oMapObjects.oMap.zoomIn();});            
                GEvent.addDomListener(oZoomout, 'click', function(){ oMapObjects.oMap.zoomOut();});            
                
                oContainer.appendChild(oUp);
                oContainer.appendChild(oLeft);
                oContainer.appendChild(oRight);
                oContainer.appendChild(oDown);
                oContainer.appendChild(oZoomin);
                oContainer.appendChild(oZoomout);
                
                this.oMap.getContainer().appendChild(oContainer);
                                
                return oContainer;
            }
            Control_grey_panzoom.prototype.getDefaultPosition = function () {
                return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,10));
            };