
      // == Some global variables ==
      var XSLIDERLENGTH = 234;       // maximum length that the knob can move (slide height minus knob height)
      var MAXZOOM = 17;

      // == Create a Custom GControl ==
	  
	  
      function XSliderControl() { }
      XSliderControl.prototype = new GControl();

      // == This function positions the slider to match the specified zoom level ==
      XSliderControl.prototype.setSlider = function(zoom) {
	
//		if (zoom = 0)
	    var left = Math.round((XSLIDERLENGTH/MAXZOOM*zoom));
        this.slide.left = left;
        this.knob.style.left = left+"px";
        //GLog.write("Map was zoomed to:"+zoom+" new Knob position:"+top);
      }

      // == This function reads the slider and sets the zoom level ==
      XSliderControl.prototype.setZoom = function() {
        var z=Math.round(this.slide.left*MAXZOOM/XSLIDERLENGTH);
        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 ==
      XSliderControl.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;

        // create the background graphic as a <div> containing an image
		
        var container = document.createElement("div");
        container.style.width="350px";
        container.style.height="19px";
		var bbox = document.createElement("div");
		//bbox.src = "/_html/img/grade.gif";
		bbox.style.width = "243px";
		bbox.style.height="19px";
		bbox.innerHTML = '<img src="/_html/img/grade.gif" />';
		bbox.style.position = "absolute";
		bbox.style.left = "36px";
		
		
		var minus = document.createElement("img");
		minus.style.width="20px";
        minus.style.height="19px";
		minus.src = "/_html/img/minus.gif";
		minus.style.position = "absolute";
		minus.style.left = "0px";
		minus.style.cursor = "pointer";
		container.appendChild(minus);
		GEvent.addDomListener(minus, "click", function(){
			that.map.zoomOut();
		});
		
        // create the knob as a GDraggableObject
        this.knob = document.createElement("img"); 
        this.knob.src = "/_html/img/slider.gif";
        bbox.appendChild(this.knob);
		var leftgr = document.createElement("img");
		leftgr.src = "/_html/img/grade-edge.gif";
		leftgr.style.position = "absolute";
		leftgr.style.left = "20px";
		container.appendChild(leftgr);
		container.appendChild(bbox);
		var rightgr = document.createElement("img");
		rightgr.src = "/_html/img/grade-edge.gif";
		rightgr.style.position = "absolute";
		rightgr.style.left = "279px";
		container.appendChild(rightgr);
		
		var plus = document.createElement("img");
		plus.style.width="20px";
        plus.style.height="19px";
		plus.src = "/_html/img/plus.gif";
		plus.style.position = "absolute";
		plus.style.left = "295px";
		plus.style.cursor = "pointer";
		container.appendChild(plus);
		GEvent.addDomListener(plus, "click", function(){
			that.map.zoomIn();
		});
		
        this.slide=new GDraggableObject(this.knob, {container:bbox});


		var ua = document.createElement("img");
		ua.style.width="20px";
        ua.style.height="19px";
		ua.src = "/_html/img/button-home.gif";
		ua.style.position = "absolute";
		ua.style.left = "330px";
		ua.style.cursor = "pointer";
		container.appendChild(ua);
		GEvent.addDomListener(ua, "click", function(){
			that.map.returnToSavedPosition();
		});

        // 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 ==
      XSliderControl.prototype.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(7, 35));
      }


