function FadeMapControl() {}
    
    FadeMapControl.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.
    FadeMapControl.prototype.initialize = function(map) {
      var container = document.createElement("div");

      var zoomInDiv = document.createElement("div");
      this.setButtonStyle_(zoomInDiv);
      zoomInDiv.id = "fadeBtn";
      zoomInDiv.setAttribute("faded", "0");
      
      container.appendChild(zoomInDiv);
      zoomInDiv.appendChild(document.createTextNode("Fade Map"));
      GEvent.addDomListener(zoomInDiv, "click", function() {
        fadeTilesX(this);
      });

      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.
    FadeMapControl.prototype.getDefaultPosition = function() {
      return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
    }

    // Sets the proper CSS for the given button element.
    FadeMapControl.prototype.setButtonStyle_ = function(button) {
      button.style.color = "#000";
      button.style.backgroundColor = "white";
      button.style.font = "small Arial";
      button.style.border = "1px solid #c0c0c0";
      button.style.padding = "2px";
      button.style.marginBottom = "3px";
      button.style.textAlign = "center";
      button.style.width = "8em";
      button.style.cursor = "pointer";
    }

var initialFadeComplete = false;

map.addControl(new FadeMapControl());
GEvent.addListener(map, "maptypechanged", function() {
   if(initialFadeComplete)
    FadeTileImages(document.getElementById('fadeBtn').getAttribute("faded") == "1");
});

function fadeTilesX(ctrl)
{
    if(ctrl.getAttribute("faded") == "1")
    {
        ctrl.style.borderColor = "#3c3c3c";
        ctrl.setAttribute("faded", "0");
        FadeTileImages(false);
    }
    else
    {
        FadeTileImages(true);
        ctrl.setAttribute("faded", "1");
        ctrl.style.borderColor = "#c0c0c0";
    }
}   

// Loop through all image objects, find tiles and fade them    
function FadeTileImages(blnFade)
{
    var fadeCount = 0;

   // get the collection of flight nodes
   var mapImages = document.getElementById("map").getElementsByTagName("IMG");
   
   //debugger;
   //alert(blnFade);
   for (var i = 0; i < mapImages.length; i++)
   {
      // Get a reference to the current image, test it and fade if needed
      var curMapImage = mapImages.item(i);
      //alert(curMapImage.src);
      if (curMapImage.src.indexOf('transparent.png')!=-1 || curMapImage.src.indexOf('.google.com/mt')!=-1 || curMapImage.src.indexOf('.google.com/kh')!=-1)
      {
        if(blnFade)
        {
            fadeOut(curMapImage);
            fadeCount += 1;
        }
        else
        {
            fadeIn(curMapImage);
        }
      }
      
    }
    
    //alert('faded' + fadeCount);
   
}