// BY Mike Williams


      // == Some global variables ==
      var YSLIDERLENGTH = 320;       // maximum length that the knob can move (slide height minus knob height)
      var MAXZOOM = 17

      // == Create a Custom GControl ==
      function YSliderControl() { }
      YSliderControl.prototype = new GControl();

      // == This function positions the slider to match the specified zoom level ==
      YSliderControl.prototype.setSlider = function(zoom) {
        var top = Math.round((YSLIDERLENGTH/MAXZOOM*zoom));
        top = YSLIDERLENGTH - top; // custom mod
        this.slide.top = top;
        this.knob.style.top = top+"px";
       // GLog.write("Map was zoomed to:"+zoom+" new Knob position:"+top);
      }

      // == This function reads the slider and sets the zoom level ==
      YSliderControl.prototype.setZoom = function() {
        var z=Math.round(this.slide.top*MAXZOOM/YSLIDERLENGTH);
        z = MAXZOOM - z; // custom mod
        this.map.setZoom(z);
        //GLog.write("New knob position:"+this.slide.top+" new zoom: "+z);
      }


      // == This gets called bu the API when addControl(new YSlider()) is used ==
      YSliderControl.prototype.initialize = function(map) {
        // obtain Function Closure on a reference to "this"
        var that=this;
        // store a reference to the map so that we can call setZoom() on it
        this.map = map;

        // Is this MSIE, if so we need to use AlphaImageLoader
        var agent = navigator.userAgent.toLowerCase();
        if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1)){this.ie = true} else {this.ie = false}

        // create the background graphic as a <div> containing an image
        var container = document.createElement("div");
        container.style.width="20px";
        container.style.height="320px";

        // Handle transparent PNG files in MSIE
        if (this.ie) {
          var loader = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/yslide.png', sizingMethod='scale');";
          container.innerHTML = '<div style="height:320px; width:20px; ' +loader+ '" ></div>';
        } else {
          container.style.backgroundImage = "URL('images/yslide.png')"
        }

        // create the knob as a GDraggableObject
        // Handle transparent PNG files in MSIE
        if (this.ie) {
          var loader = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/yknob.png', sizingMethod='scale');";
          this.knob = document.createElement("div"); 
          this.knob.style.height="19px";
          this.knob.style.width="20px";
          this.knob.style.filter=loader;
        } else {
          this.knob = document.createElement("img"); 
          this.knob.src = "images/yknob.png";
          this.knob.height = "19";
          this.knob.width = "20";
        }
        container.appendChild(this.knob);
        this.slide=new GDraggableObject(this.knob, {container:container});

        // attach the control to the map
        map.getContainer().appendChild(container);

        // Listen for other things changing the zoom level and move the slider
        GEvent.addListener(map, "zoomend", function(a,b) {that.setSlider(b)});

        // Listen for the slider being moved and set the zoom level
        GEvent.addListener(this.slide, "dragend", function() {that.setZoom()});

        return container;
      }

      // == Set the default position for the control ==
      YSliderControl.prototype.getDefaultPosition = function() {

      	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 101));

        
      }
      
    // -------------------------------------------------------------------------------------------------------------------------------  
     
    // 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 TextualZoomControl() {
    }
    TextualZoomControl.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.
    TextualZoomControl.prototype.initialize = function(map) {
    	
    	
      var container = document.createElement("div");
      
      var satellite = document.createElement("div");
      satellite.id = "satBtn";
      this.setButtonStyle_(satellite);
      container.appendChild(satellite);
      satellite.innerHTML = '<img src="images/map_satellite_on_en.png">';
      GEvent.addDomListener(satellite, "click", function() {
      	map.setMapType(G_SATELLITE_MAP);
      	satellite.innerHTML = '<img src="images/map_satellite_on_en.png">';
      	smap.innerHTML = '<img src="images/map_map_off_en.png">';
      	terrain.innerHTML = '<img src="images/map_terrain_off_en.png">';
      });
        
      var smap = document.createElement("div");
      smap.id = "smapBtn";
      this.setButtonStyle_(smap);
      container.appendChild(smap);
      smap.innerHTML = '<img src="images/map_map_off_en.png">';
      GEvent.addDomListener(smap, "click", function() {
      	map.setMapType(G_NORMAL_MAP);
      	satellite.innerHTML = '<img src="images/map_satellite_off_en.png">';
      	smap.innerHTML = '<img src="images/map_map_on_en.png">';
      	terrain.innerHTML = '<img src="images/map_terrain_off_en.png">';
      });
      
      var terrain = document.createElement("div");
      terrain.id = "terrainBtn";
      this.setButtonStyle_(terrain);
      container.appendChild(terrain);
      terrain.innerHTML = '<img src="images/map_terrain_off_en.png">';
      GEvent.addDomListener(terrain, "click", function() {
      	map.setMapType(G_PHYSICAL_MAP);
      	satellite.innerHTML = '<img src="images/map_satellite_off_en.png">';
      	smap.innerHTML = '<img src="images/map_map_off_en.png">';
      	terrain.innerHTML = '<img src="images/map_terrain_on_en.png">';
      });
      

      var zoomInDiv = document.createElement("div");
      zoomInDiv.id = "customZoomIn";
      this.setButtonIn_(zoomInDiv);
      container.appendChild(zoomInDiv);
      zoomInDiv.innerHTML = '<img src="images/zoomin.png">';
      GEvent.addDomListener(zoomInDiv, "click", function() {
        map.zoomIn();
      });

      var zoomOutDiv = document.createElement("div");
      zoomOutDiv.id = "customZoomOut";
      this.setButtonOut_(zoomOutDiv);
      container.appendChild(zoomOutDiv);
      //zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
      zoomOutDiv.innerHTML = '<img src="images/zoomout.png">';
      GEvent.addDomListener(zoomOutDiv, "click", function() {
        map.zoomOut();
      });

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

    // Sets the proper CSS for the given button element.
    
    TextualZoomControl.prototype.setButtonStyle_ = function(button) {
      button.style.marginBottom = "5px";
      button.style.width = "16px";
      button.style.cursor = "pointer";
      button.style.height = "20px";
    }
    
    TextualZoomControl.prototype.setButtonActive_ = function(button) {
      button.style.marginBottom = "10px";
      button.style.width = "16px";
      button.style.cursor = "pointer";
    }
    
    
    TextualZoomControl.prototype.setButtonIn_ = function(button) {
      button.style.marginTop = "-2px";
      button.style.marginLeft = "10px";
      button.style.width = "16px";
      button.style.cursor = "pointer";
      button.style.height = "20px";
    }
    
    TextualZoomControl.prototype.setButtonOut_ = function(button) {
     // button.style.textDecoration = "underline";
     // button.style.color = "#0000cc";
      //button.style.backgroundColor = "white";
     // button.style.font = "small Arial";
     // button.style.border = "1px solid black";
     // button.style.padding = "2px";
      button.style.marginTop = "318px";
      button.style.marginLeft = "10px";
      //button.style.textAlign = "center";
      button.style.width = "16px";
      button.style.cursor = "pointer";
      button.style.height = "22px";
    }