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

      // == 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 ttop = Math.round((YSLIDERLENGTH/MAXZOOM*zoom));
        this.slide.top = ttop;
        this.knob.style.top = ttop+"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);
        this.map.setZoom(z);
        //GLog.write("New knob position:"+this.slide.top+" new zoom: "+z);
      }

     YSliderControl.prototype.setBoth = function(e) {
	var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		posx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	posy -= 20;
	this.slide.top = posy;
        this.knob.style.top = parseInt(this.slide.top)+"px";
	this.knob.style.left="0px";
        var z=Math.round(this.slide.top*MAXZOOM/YSLIDERLENGTH);
	 
         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;

        // create the background graphic as a <div> containing an image
        var container = document.createElement("div");
        container.style.width="19px";
        container.style.height="161px";
	container.style.behavior="url('png.htc')";
	container.onclick= function (evt){if(!evt)evt=window.event; that.setBoth(evt); };
        container.innerHTML='<img src="longbar.png" />';

        // create the knob as a GDraggableObject
        this.knob = document.createElement("img"); 
        this.knob.src = "yknob.png";
	this.knob.style.height="19px";
	this.knob.style.width="19px";
	this.knob.style.left="0px";
	this.knob.style.behavior="url('png.htc')";
        container.appendChild(this.knob);
        this.slide=new GDraggableObject(this.knob, {container:container});

        // attach the control to the map
//	map.getContainer().appendChild(container);
 	$('navbar').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(7, 7));
      }