// We define the function first
function ZoomControl() {
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
ZoomControl.prototype = new GControl();

var zoomBars = [];

ZoomControl.prototype.initialize = function(map) {
    // store a reference to the map so that we can call setZoom() on it
    this.map = map;
    // obtain Function Closure on a reference to "this"
    var that = this;
  
    var container = document.createElement("div");
    container.id = "GMapZoomControl";
    
    //Detect IE6
    var isIE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
      
    if (isIE6)
    {
        container.style.backgroundImage = "url('../../images/GoogleMapsIcons/bg_zoom_ie6.png')";
    }
    else
    {
        container.style.backgroundImage = "url('../../images/GoogleMapsIcons/bg_zoom.png')";
    }
    

    //Zoom text
    var zoomTextDiv = document.createElement("div");
    zoomTextDiv.style.marginRight = "10px";
    zoomTextDiv.style.marginTop = "10px";
    if (isIE6)
        zoomTextDiv.style.marginLeft = "10px";
    else
        zoomTextDiv.style.marginLeft = "20px";
    zoomTextDiv.appendChild(document.createTextNode("Zoom"));
    container.appendChild(zoomTextDiv);

    //Zoom Out Button
    var zoomOutDiv = document.createElement("div");
    zoomOutDiv.style.marginTop = "8px";
    zoomOutDiv.style.marginRight = "9px";
    zoomOutDiv.style.height = "18px";
    zoomOutDiv.style.width = "18px";
    if (isIE6)
        zoomOutDiv.style.backgroundImage = "url('../images/GoogleMapsIcons/ZoomOut_ie6.png')";
    else
        zoomOutDiv.style.backgroundImage = "url('../images/GoogleMapsIcons/ZoomOut.png')";
    zoomOutDiv.style.cursor = "pointer";
    GEvent.addDomListener(zoomOutDiv, "click", function() {
        map.zoomOut();
    });
    container.appendChild(zoomOutDiv);
    
    zoomBars[0] = document.createElement("div");
    zoomBars[0].className = "ZoomBarActive";
    zoomBars[0].style.height = "5px";
    zoomBars[0].style.marginTop = "15px";
    GEvent.addDomListener(zoomBars[0], "click", function() {
        map.setZoom(9);
    });
    container.appendChild(zoomBars[0]);
    zoomBars[1] = document.createElement("div");
    zoomBars[1].className = "ZoomBarActive";
    zoomBars[1].style.height = "7px";
    zoomBars[1].style.marginTop = "14px";
    GEvent.addDomListener(zoomBars[1], "click", function() {
        map.setZoom(10);
    });
    container.appendChild(zoomBars[1]);
    zoomBars[2] = document.createElement("div");
    zoomBars[2].className = "ZoomBarActive";
    zoomBars[2].style.height = "9px";
    zoomBars[2].style.marginTop = "13px";
    GEvent.addDomListener(zoomBars[2], "click", function() {
        map.setZoom(11);
    });
    container.appendChild(zoomBars[2]);
    zoomBars[3] = document.createElement("div");
    zoomBars[3].className = "ZoomBarActive";
    zoomBars[3].style.height = "11px"
    zoomBars[3].style.marginTop = "12px";
    GEvent.addDomListener(zoomBars[3], "click", function() {
        map.setZoom(12);
    });
    container.appendChild(zoomBars[3]);
    zoomBars[4] = document.createElement("div");
    zoomBars[4].className = "ZoomBarActive";
    zoomBars[4].style.height = "13px";
    zoomBars[4].style.marginTop = "11px";
    GEvent.addDomListener(zoomBars[4], "click", function() {
        map.setZoom(13);
    });
    container.appendChild(zoomBars[4]);
    zoomBars[5] = document.createElement("div");
    zoomBars[5].className = "ZoomBarActive";
    zoomBars[5].style.height = "15px";
    zoomBars[5].style.marginTop = "10px";
    GEvent.addDomListener(zoomBars[5], "click", function() {
        map.setZoom(14);
    });
    container.appendChild(zoomBars[5]);
    zoomBars[6] = document.createElement("div");
    zoomBars[6].className = "ZoomBarActive";
    zoomBars[6].style.height = "17px";
    zoomBars[6].style.marginTop = "9px";
    GEvent.addDomListener(zoomBars[6], "click", function() {
        map.setZoom(15);
    });
    container.appendChild(zoomBars[6]);
    
    //Zoom In Button
    var zoomInDiv = document.createElement("div");
    zoomInDiv.style.marginTop = "8px";
    zoomInDiv.style.marginRight = "9px";
    zoomInDiv.style.height = "18px";
    zoomInDiv.style.width = "18px";
    if (isIE6)
        zoomInDiv.style.backgroundImage = "url('../images/GoogleMapsIcons/ZoomIn_ie6.png')";
    else
        zoomInDiv.style.backgroundImage = "url('../images/GoogleMapsIcons/ZoomIn.png')";
    zoomInDiv.style.cursor = "pointer";
    GEvent.addDomListener(zoomInDiv, "click", function() {
        map.zoomIn();
    });
    container.appendChild(zoomInDiv);

    // Listen for other things changing the zoom level and move the slider
    GEvent.addListener(map, "zoomend", function(a,b) {that.setZoomBars(b)});
    
    /*
    if ((browserName == "Microsoft Internet Explorer") && (browserVersion < 7))
    {
        zoomTextDiv.style.marginLeft = "5px";
        zoomOutImg.src = "../images/GoogleMapsIcons/ZoomOut_ie6.png";
        zoomInImg.src = "../images/GoogleMapsIcons/ZoomIn_ie6.png";
    }
    
    */
    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.
ZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}


ZoomControl.prototype.setZoomLevel = function(level)
{
    map.setZoom(level);
    setZoomBars(level);
}


ZoomControl.prototype.setZoomBars = function(zoomLevel)
{
    var level = zoomLevel-9;
    if (level < 0)
    {
        level = 0;
    }
    if (level > 6)
    {
        level = 6;
    }
    for (var i=0; i<7; i++)
    {
        if (i <= level)
        {
            zoomBars[i].className = "ZoomBarInactive";
        }
        else if (i > level)
        {
            zoomBars[i].className = "ZoomBarActive";
        }
    }
}