// == Some global variables ==
  var YSLIDERLENGTH = 138;       // 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));
    var top = Math.round(138-(YSLIDERLENGTH/MAXZOOM)* zoom);
    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);
    this.map.setZoom(MAXZOOM - 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="20px";
    container.style.height="194px";
    container.innerHTML = '<img src="images/zoom_bar.png" width="27" height="194" >';

    // create the knob as a GDraggableObject
    // Handle transparent PNG files in MSIE
    this.knob = document.createElement("img"); 
    this.knob.src = "images/zoom_marker.png";
    this.knob.height = "7";
    this.knob.width = "20";
    this.knob.style.cursor = "pointer";
    this.knob.style.padding = "28px 3px 29px 3px";
        
    this.minus = document.createElement("img"); 
    this.minus.src = "images/zoom_minus.png";
    this.minus.height = "18";
    this.minus.width = "18";
    this.minus.style.position = "absolute";
    this.minus.style.top = "172px";
    this.minus.style.left = "4px";
    this.minus.style.cursor = "pointer";
    
    this.plus = document.createElement("img"); 
    this.plus.src = "images/zoom_plus.png";
    this.plus.height = "18";
    this.plus.width = "18";
    this.plus.style.position = "absolute";
    this.plus.style.top = "4px";
    this.plus.style.left = "4px";
    this.plus.style.cursor = "pointer";

    container.appendChild(this.knob);
    container.appendChild(this.minus);
    container.appendChild(this.plus);

    this.slide=new GDraggableObject(this.knob, {container:container});

    // attach the control to the map
    map.getContainer().appendChild(container);
    
    GEvent.addDomListener(this.plus, 'click', function() { map.zoomIn(); });
    GEvent.addDomListener(this.minus, 'click', function() { map.zoomOut(); });
            
    // 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()});
    
    that.setSlider(13);
    
    return container;
  }

  // == Set the default position for the control ==
  YSliderControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(2,60));
  }