var zoomConfig = new Object();


function zoomSettings(max, min)     //initializes the minimum and maximum zoom levels of the
{                                   //zoom bar. The max should be larger than the min. For this
    zoomConfig.max = max;              //example, the max and min are in miles.
    zoomConfig.min = min;
}    

function dragStartZoom(event, id)   //function called when the zoom bar's slider is dragged, at
{                                   //the start of the drag action.
    var dragEl = document.getElementById(id);
    var y;
    
    if (IsIE())       
    {
        //gets the Y value of the cursor at the start of the drag.
        y = window.event.clientY + document.documentElement.scrollTop
            + document.body.scrollTop;
        dragEl.startY = y;
        
        //Save the starting Y value of the slider.
        dragEl.startTop = Position.get(id).top - Position.get("ZoomTop").top;
        if (isNaN(dragEl.startTop))  
            dragEl.startTop  = 0;
            
        //sets the listeners for the moving and releasing of the drag actions
        document.onmousemove = dragDoZoom;
        document.onmouseup = dragEndZoom;
        
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }
    if (IsFF())
    {
        //gets the Y value of the cursor at the start of the drag.
        y = event.clientY + window.scrollY;
        dragEl.startY = y;
        
        //Save the starting Y value of the slider.
        dragEl.startTop   = Position.get(id).top - Position.get("ZoomTop").top;
    
        //sets the listeners for the moving and releasing of the drag actions        
        document.onmousemove = dragDoZoom;
        document.onmouseup = dragEndZoom;
        event.preventDefault();
    }
    
    dragging = dragEl;

}



function dragDoZoom(event) //this function moves the slider when it's dragged.
{
    var dragEl = dragging;
    var y;

    if (IsIE())                    // Get cursor position with respect to the page.
    {
        y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    }
    if (IsFF()) 
    {
        y = event.clientY + window.scrollY;
    }

    // Move drag element by the same amount the cursor has moved.
    dragEl.style.top  = (dragEl.startTop  + y - dragEl.startY) + "px";
  
    if ((dragEl.startTop + y - dragEl.startY) < 10)       //enforce the top and bottom
    {                                                               //of the zoom bar, so the
        dragEl.style.top = 10 + "px";                        //slider doesn't drag past
    }                                                               //the scale.
    else if ((dragEl.startTop  + y - dragEl.startY) > 185)
    {
        dragEl.style.top = 185 + "px";
    }

    if (IsIE()) 
    {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }
    if (IsFF())
        event.preventDefault();
}


function dragEndZoom(event)   //this function stops the capturing of mousemove and mouseup 
{                              //events when the mouse button is released. It also sends the
    var y;                     //zoom command to the map.
    var dragEl = dragging;
    
    if (IsIE())          // Get cursor's y position with respect to the page.
    {
        y = window.event.clientY + document.documentElement.scrollTop
            + document.body.scrollTop;
    }
    if (IsFF()) 
    {
        y = event.clientY + window.scrollY;
    }
    
    y = dragEl.startTop  + y - dragEl.startY;     //Compute the difference in the start
                                                            //Y position vs. the end Y position.
    if (y < 10)                  //Enforce the limits set by the top and bottom of the
        y = 10;                  //zoom bar's graphics.
    else if (y > 185)
        y = 185;
    
    var min = zoomConfig.min;      //Compute the zoom level change in miles
    var max = zoomConfig.max;
    var multiplier = (max - min)/175;
    
    y = ((y - 10) * multiplier) + min; //set the new zoom level
    
    UpdateMapZoom(y);           //get the new map image
    ShowMapArea();
  
    document.onmousemove = null;
    document.onmouseup = null;
}

function zoomInClick()      //The function called when the user clicks the top of the 
{                           //zoom slider
    var elStartTop = Position.get("zoomWHOLEAREA").top - Position.get("ZoomTop").top; 
    dragging = FindElement("zoomWHOLEAREA");  //get the slider element from the DOM.
    
    dragging.style.top  = (elStartTop - 10) + "px";   //change the location of the slider
    y = elStartTop - 10;                                    //by 10 pixels.
    if ((elStartTop  - 10) < 10)                             //Make sure the slider stays within
    {                                                       //the zoombar art.
        dragging.style.top = 10 + "px";
        y = 10;
    }

    var min = zoomConfig.min;               //compute the zoom level change, in miles.
    var max = zoomConfig.max;
    var multiplier = (max - min)/175;
    
    y = ((y - 10) * multiplier) + min;          //set the new zoom level.

    UpdateMapZoom(y);                   //get the new map image
    ShowMapArea();

}

function zoomOutClick()         //The function called when the user clicks the bottom of the 
{                               //zoom slider
    var elStartTop = Position.get("zoomWHOLEAREA").top - Position.get("ZoomTop").top;
    dragging = FindElement("zoomWHOLEAREA");      //get the slider element from the DOM.
    
    dragging.style.top  = (elStartTop + 10) + "px";   //change the location of the slider
    y = elStartTop + 10;                                    //by 10 pixels.
    if ((elStartTop  + 10) > 185)                           //Ensure that the slider stays within
    {                                                       //the zoombar art.
        dragging.style.top = 185 + "px";
        y = 185;
    }

    var min = zoomConfig.min;                      //compute the zoom level change in miles
    var max = zoomConfig.max;
    var multiplier = (max - min)/175;
    
    y = ((y-10) * multiplier) + min;                 //set the new zoom level.

    UpdateMapZoom(y);                           //get the new map image.
    ShowMapArea();

}

function UpdateMapZoom(zoomLevel)   //this function gets the new map image from the server
{           
	startProcessingMap();           //Let the page know that updates are coming

	var mapImage = FindElement("MapControl1_Image");    //get the map image from the DOM
	 
	if (!mapImage.mapAlias) mapImage.mapAlias = mapImage.attributes["mapAlias"].value;
	if (!mapImage.exportFormat) mapImage.exportFormat = mapImage.attributes["exportFormat"].value;

	var MapSectionStyle = getCSSRule('.MapSection');    //get the CSS rule for the map image

	if (MapSectionStyle!=null)
	{
		if(MapSectionStyle.style.width !=null && MapSectionStyle.style.height!=null)
		{
			w = parseInt(MapSectionStyle.style.width);      //assign a size to the image
			h = parseInt(MapSectionStyle.style.height);
			mapImage.width=w;
			mapImage.height=h;
		}
	}


	if (w!=0 && h!=0)
	{
		//got height and width already
	}
	else
	{
		// the size didn't come from the CSS, so let's set the size from the actual image size.
		w = mapImage.width;
		h = mapImage.height;
	}
    
    //build the URL command to get a new image from the server.
	var url = "MapController.ashx?Command=ZoomToLevel" + 
	"&Width=" + w +
	"&Height=" + h +
	"&ExportFormat=" + mapImage.exportFormat + "&ZoomLevel=" + zoomLevel +
	"&includeBorder=false" +
	"&Ran=" + Math.random();
	mapImage.style.left = 0;
	mapImage.style.top = 0;
	mapImage.style.clip = 'rect(' + 0 + ' ' + mapImage.width + ' ' + mapImage.height + ' ' + 0 +')';

	try     //change the image source to the new URL
	{
		mapImage.src = url;
	} 
	catch(e) 
	{  
	}         

}               

//function to get zoom value of the map from the server and adjust slider
//when map zoom is changed without using slider
function getZoomValue()
{
	//create url to send to server, server command name is "ZoomValue"
	var url = "MapController.ashx?Command=ZoomValue&Ran=" + Math.random();
	var mapImage = document.getElementById("MapControl1_Image");                        
	if (mapImage.mapAlias) 
		url +=  "&MapAlias=" + mapImage.mapAlias;
		
	var xmlHttp = CreateXMLHttp();
	xmlHttp.open("GET", url, false);
	xmlHttp.send(null);
	var result = xmlHttp.responseText;
	
	var elStartTop = Position.get("zoomWHOLEAREA").top - Position.get("ZoomTop").top;
    dragging = FindElement("zoomWHOLEAREA");      //get the slider element from the DOM.
    
    
    var min = zoomConfig.min;                      //compute the zoom level change in miles
    var max = zoomConfig.max;
    var multiplier = (max - min)/175;
    y = (result - min) / multiplier;
    y = y + 11;
    if (y < 10)
        y = 10;
        
    else if (y > 185)
        y = 185;
    
    dragging.style.top  = y + "px";   //change the location of the slider
};