// A TextualZoomControl is a GControl that displays textual "Zoom In"
 // and "Zoom Out" buttons (as opposed to the iconic buttons used in
 // Google Maps).
     function MyNavigationControl() {
     }
     MyNavigationControl.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.
     MyNavigationControl.prototype.initialize = function(map) {
         var container = document.createElement("div");
         container.style.textAlign="center";
         container.style.width="40px";
         
         var navContainer = document.createElement("div");
         navContainer.style.width="40px";
         navContainer.style.height="60px";
         
         var upDiv = document.createElement("div");
         this.setButtonStyle_(upDiv);
         upDiv.style.position="absolute"; 
         upDiv.style.left="10px"; 
         upDiv.style.backgroundImage="url(up.png)"; 
         upDiv.style.backgroundRepeat="no-repeat"; 
         navContainer.appendChild(upDiv);
         GEvent.addDomListener(upDiv, "click", function() {
             map.panDirection(0,1);
         }); 
         
         var navLRContainer = document.createElement("div");
         navLRContainer.style.width="40px";
         navLRContainer.style.height="20px";
         navLRContainer.style.position="absolute"; 
         navLRContainer.style.left="0px"; 
         navLRContainer.style.top="20px"; 
         
         var leftDiv = document.createElement("div");
         this.setButtonStyle_(leftDiv);
         leftDiv.style.position="absolute"; 
         leftDiv.style.left="0px"; 
         leftDiv.style.backgroundImage="url(left.png)"; 
         leftDiv.style.backgroundRepeat="no-repeat"; 
         navLRContainer.appendChild(leftDiv);
         GEvent.addDomListener(leftDiv, "click", function() {
             map.panDirection(1,0);
         });

         var rightDiv = document.createElement("div");
         this.setButtonStyle_(rightDiv);
         rightDiv.style.position="absolute"; 
         rightDiv.style.left="20px"; 
         rightDiv.style.backgroundImage="url(right.png)"; 
         rightDiv.style.backgroundRepeat="no-repeat"; 
         navLRContainer.appendChild(rightDiv);
         GEvent.addDomListener(rightDiv, "click", function() {
             map.panDirection(-1,0);
         }); 
         
         navContainer.appendChild(navLRContainer);
         
         var downDiv = document.createElement("div");
         this.setButtonStyle_(downDiv);
         downDiv.style.position="absolute"; 
         downDiv.style.left="10px"; 
         downDiv.style.top="40px"; 
         downDiv.style.backgroundImage="url(down.png)"; 
         downDiv.style.backgroundRepeat="no-repeat"; 
         navContainer.appendChild(downDiv);
         GEvent.addDomListener(downDiv, "click", function() {
             map.panDirection(0,-1);
         });

         
         
         var zoomContainer = document.createElement("div");
         zoomContainer.style.margin="auto";
         zoomContainer.style.width="20px";
         var zoomInDiv = document.createElement("div");
         this.setButtonStyle_(zoomInDiv);
         zoomInDiv.style.backgroundImage="url(in.png)"; 
         zoomInDiv.style.backgroundRepeat="no-repeat"; 
         zoomInDiv.style.paddingBottom="1px"; 
         zoomContainer.appendChild(zoomInDiv);
         GEvent.addDomListener(zoomInDiv, "click", function() {
             map.zoomIn();
         });

        var zoomOutDiv = document.createElement("div");
        this.setButtonStyle_(zoomOutDiv);
        zoomOutDiv.style.backgroundImage="url(out.png)"; 
        zoomOutDiv.style.backgroundRepeat="no-repeat"; 
        zoomContainer.appendChild(zoomOutDiv);
        GEvent.addDomListener(zoomOutDiv, "click", function() {
            map.zoomOut();
        });
        container.appendChild(navContainer);
        container.appendChild(zoomContainer);
        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.
    MyNavigationControl.prototype.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
    }

    // Sets the proper CSS for the given button element.
    MyNavigationControl.prototype.setButtonStyle_ = function(button) {
        button.style.textAlign = "center";
        button.style.width = "20px";
        button.style.height = "20px";
        button.style.cursor = "pointer";
    }

    function MySmallNavigationControl() {}
    MySmallNavigationControl.prototype = new GControl();
    MySmallNavigationControl.prototype.setButtonStyle_ = function(button) {
        button.style.textAlign = "center";
        button.style.width = "20px";
        button.style.height = "20px";
        button.style.cursor = "pointer";
    }
    MySmallNavigationControl.prototype.initialize = function(map) {
         var zoomContainer = document.createElement("div");
         zoomContainer.style.margin="auto";
         zoomContainer.style.width="20px";
         var zoomInDiv = document.createElement("div");
         this.setButtonStyle_(zoomInDiv);
         zoomInDiv.style.backgroundImage="url(in.png)"; 
         zoomInDiv.style.backgroundRepeat="no-repeat"; 
         zoomInDiv.style.paddingBottom="1px"; 
         zoomContainer.appendChild(zoomInDiv);
         GEvent.addDomListener(zoomInDiv, "click", function() {
             map.zoomIn();
         });

        var zoomOutDiv = document.createElement("div");
        this.setButtonStyle_(zoomOutDiv);
        zoomOutDiv.style.backgroundImage="url(out.png)"; 
        zoomOutDiv.style.backgroundRepeat="no-repeat"; 
        zoomContainer.appendChild(zoomOutDiv);
        GEvent.addDomListener(zoomOutDiv, "click", function() {
            map.zoomOut();
        });
        map.getContainer().appendChild(zoomContainer);
        return zoomContainer;
    } 
    MySmallNavigationControl.prototype.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
    }

 
     function MyTypeControl() {}
     MyTypeControl.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.
     MyTypeControl.prototype.initialize = function(map) {
         var container = document.createElement("div");
         container.style.width = "140px";
         container.style.height = "22px";
         
         var upDiv = document.createElement("div");
         this.setButtonStyle_(upDiv);
         upDiv.style.position="absolute"; 
         upDiv.style.left="0px"; 
         upDiv.appendChild(document.createTextNode("Harta"));
         container.appendChild(upDiv);
         GEvent.addDomListener(upDiv, "click", function() {
             map.setMapType(G_NORMAL_MAP);
         }); 
         
         
         var downDiv = document.createElement("div");
         this.setButtonStyle_(downDiv);
         downDiv.style.position="absolute"; 
         downDiv.style.left="70px"; 
         downDiv.appendChild(document.createTextNode("Sateliti"));
         container.appendChild(downDiv);
         GEvent.addDomListener(downDiv, "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.
     MyTypeControl.prototype.getDefaultPosition = function() {
         return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
     }

     // Sets the proper CSS for the given button element.
     MyTypeControl.prototype.setButtonStyle_ = function(button) {
         button.style.backgroundImage="url(types.png)"; 
         button.style.backgroundRepeat="no-repeat"; 
         button.style.width = "69px";
         button.style.height = "22px";
         button.style.verticalAlign = "middle";
         button.style.lineHeight = "17px";
         button.style.color = "#ffffff";
         button.style.textAlign = "center";
         button.style.fontFamily = "Verdana";
         button.style.fontSize = "8pt";
         button.style.fontWeight = "bold";
         button.style.cursor = "pointer";
     }