function mapClient()
{
	// Properties.
	this.zoomBoxColor = "#FF0000";	// color of zoombox
	this.zoomBoxBorderStyle = "solid";	// border style of zoombox
	this.iWidth = 0; 	// image width
	this.iHeight = 0;	// image height
	this.hspc = 0; 		// horizontal image offset
	this.vspc = 0; 		// vertical image offset
	this.ovBoxSize = 2; 	// Zoombox line width;
	this.boxing = false;
	this.mouseX=0;  // Global vars to save mouse position
	this.mouseY=0;
	this.x1=0;
	this.y1=0;
	this.x2=0;
	this.y2=0;
	this.zleft=0;
	this.zright=0;
	this.ztop=0;
	this.zbottom=0;
	this.isDOM = false;;		// Supports the "standard" DOM (IE5, Mozilla, Netscape6, Opera6(?) )
	this.isNav = false;  // Global vars for browser type and version
	this.isNav4 = false;
	this.isMozilla = false;
	this.isGecko = false;
	this.isIE = false;
	this.isIE4 = false;
	this.isIE5 = false;
	this.isIE6 = false;
	this.is5up = false;
	this.isOpera = false;
	this.mapURL = "";  // URL of the map image.
	this.currentTool = "none";
	this.doc = null;
	this.win = null;
	this.panning = false;
	this.process = "none";  // Tool to process by ASP.
	this.zooms = new Array();  // Array for all the zooms.
	this.canZoomPrevious = false;  // Keeps track of if we can zoom previous.
	this.saveZoom = false;  // Keep track of whether would should save zoom.
	this.parentTop = 0;
	this.parentLeft = 0;
	this.measureshowbrgs = 0;
	this.measureshowcoords = 0;
	this.meaasurenumpnts = 0;
	this.measurelastx = 0;
	this.measurelasty = 0;
	// Functions.
	this.createLayer = createLayer;
	this.getLayer = getLayer;
	this.moveLayer = moveLayer;
	this.centerLayer = centerLayer;
	this.setLayerBackgroundColor = setLayerBackgroundColor;
	this.setLayerBorder = setLayerBorder;
	this.hideLayer = hideLayer;
	this.showLayer = showLayer;
	this.clipLayer = clipLayer;
	this.resizeLayer = resizeLayer;
	this.boxIt = boxIt;
	this.getImageXY = getImageXY;
	this.startBox = startBox;
	this.stopBox = stopBox;
	this.setClip = setClip;
	this.checkBrowser = checkBrowser;
	this.makeIt = makeIt;
	this.startPan = startPan;
	this.stopPan = stopPan;
	this.panMouse = panMouse;
	this.mouseMove = mouseMove;
	this.mouseUp = mouseUp;
	this.mouseDown = mouseDown;
	this.isLeftClick = isLeftClick;
	this.setCurrentTool = setCurrentTool;
	this.setCursor = setCursor;
	this.getFrameWidth = getFrameWidth;
	this.getFrameHeight = getFrameHeight;
	
	// Initialize.
	this.checkBrowser();
}
		
// This data structure is used for the extents of zooms.
function box(x1, y1, x2, y2)
{
	this.x1 = x1;
	this.y1 = y1;
	this.x2 = x2;
	this.y2 = y2;
}

function createLayer(name, inleft, intop, width, height, visible, content)
{
	if (this.isNav4)
	{
		this.doc.writeln('<layer name="' + name + '" left="' + inleft + '" top="' + intop + '" width="' + width + '" height="' + height +  '" visibility=' + (visible ? '"show"' : '"hide"') +  '>');
		this.doc.writeln(content);
		this.doc.writeln('</layer>');
	}
	else
	{
		this.doc.writeln('<div id="' + name + '" style="position:absolute; overflow:hidden; left:' + inleft + 'px; top:' + intop + 'px; width:' + width + 'px; height:' + height + 'px;' + '; z-index:1; visibility:' + (visible ? 'visible;' : 'hidden;') +  '; border:none; ">');
		this.doc.writeln(content);
		this.doc.writeln('</div>');
	}
}

function getLayer(name)
{
	if (this.isDOM) {
		var theObj = this.doc.getElementById(name);
		//return theObj.style;
		return theObj;
	}
	else if (this.isIE4) {
	    //layer = eval('this.doc.all.' + name + '.style');
	    layer = eval('this.doc.all.' + name);
	    return(layer);
	}
	else if (this.isNav4) {
		return(this.doc.layers[name]);
	}
	else {
		return (null);
	}
	
	
//	if (this.isNav4)
//		return(this.doc.layers[name]);
//	else if (this.isIE4)
//	{
//	    layer = eval('this.doc.all.' + name + '.style');
//	    return(layer);
//	}
//	else if (this.is5up)
//	{
//		var theObj = this.doc.getElementById(name);
//		return theObj.style
//	}
//	else
//		return(null);
}
		
function moveLayer(name, x, y)
{		
	var layer = this.getLayer(name);		
	if (this.isNav4) {
		layer.moveTo(x, y);
	} else {
		layer.style.left = x + "px";
		layer.style.top  = y + "px";
	}
}

		
function centerLayer(name) {

	//var frameWidth = this.iWidth;
	//var frameHeight = this.iHeight;

	var frameWidth  = this.getFrameWidth();
	var frameHeight = this.getFrameHeight();
	var layer = this.getLayer(name);
	
	if (this.isDOM || this.isIE) {
		layer.style.left = ((frameWidth - layer.offsetWidth) / 2) + "px";
		layer.style.top  = ((frameHeight - layer.offsetHeight) / 2) + "px";
	}
	else if (this.isNav4) {
		var top = (frameHeight - layer.clip.height) / 2;
		var left = (frameWidth - layer.clip.width) / 2;	
		layer.moveTo(left, top);
	}

}


function setLayerBackgroundColor(name, color)
{		
	var layer = this.getLayer(name);		
	if (this.isNav4) {
		layer.bgColor = color;
	} else {
		layer.style.backgroundColor = color;
	}
}


function setLayerBorder(name, width, style, color)
{		
	var layer = this.getLayer(name);		
	if (this.isNav4) {
	//	layer.bgColor = color;
	}
	else {
		layer.style.borderColor = color;
		layer.style.borderStyle = style;
		layer.style.borderWidth = width;
	}
}

		
function hideLayer(name)
{		
	var layer = this.getLayer(name);		
	if (this.isNav4) {
		layer.visibility = "hide";
	} else {
		layer.style.visibility = "hidden";
	}
}
		
function showLayer(name)
{		
	var layer = this.getLayer(name);		
	if (this.isNav4) {
		layer.visibility = "show";
	} else {
		layer.style.visibility = "visible";
	}
}
		
function clipLayer(name, clipleft, cliptop, clipright, clipbottom)
{
	var layer = this.getLayer(name);
	
	if (this.isDOM || this.isIE4) {
		layer.style.clip = 'rect(' + cliptop + ' ' +  clipright + ' ' + clipbottom + ' ' + clipleft +' )';
	}
	else if (this.isNav4) {
		layer.clip.left = clipleft;
		layer.clip.top = cliptop;
		layer.clip.right  = clipright;
		layer.clip.bottom = clipbottom;
	}
}		


function resizeLayer(name, reLeft, reTop, reRight, reBottom) {

	var layer = this.getLayer(name);
	
	if (this.isDOM || this.isIE4) {
		reHeight = reBottom - reTop;
		reWidth = reRight - reLeft;
		
		layer.style.width  = reWidth;
		layer.style.height = reHeight;
		layer.style.left = reLeft;
		layer.style.top = reTop;
	}
	else if (this.isNav4) {
		//if nav 4, just clip
		layer.clip.left = reLeft;
		layer.clip.top = reTop;
		layer.clip.right  = reRight;
		layer.clip.bottom = reBottom;
	}
}


function boxIt(theLeft,theTop,theRight,theBottom)
{
//top.window.status = "theLeft: "+theLeft+";  theTop: "+theTop+";  theRight: "+theRight+";  theBottom: "+theBottom;

	if (this.isNav4 || this.isOpera) {
	//if (this.isNav4) {
		//NS4 and Opera use four different layers -- one for each side of the box -- rather than one blank layer with a border
		this.resizeLayer("zoomBoxTop",theLeft,theTop,theRight,theTop+this.ovBoxSize);
		this.resizeLayer("zoomBoxLeft",theLeft,theTop,theLeft+this.ovBoxSize,theBottom);
		this.resizeLayer("zoomBoxRight",theRight-this.ovBoxSize,theTop,theRight,theBottom);
		this.resizeLayer("zoomBoxBottom",theLeft,theBottom-this.ovBoxSize,theRight,theBottom);	
		this.showLayer("zoomBoxTop");
		this.showLayer("zoomBoxLeft");
		this.showLayer("zoomBoxRight");
		this.showLayer("zoomBoxBottom");
	}
	else {
		this.resizeLayer("zoomBox",theLeft,theTop,theRight,theBottom);
		this.showLayer("zoomBox");
	}
	//}
}
		
function getImageXY(e)
{
	if (this.isNav)
	{
		this.mouseX = e.pageX - this.parentLeft;
		this.mouseY = e.pageY - this.parentTop;
	}
	else
	{
		this.mouseX = e.clientX + this.doc.body.scrollLeft;
		this.mouseY = e.clientY + this.doc.body.scrollTop;
	}
	// subtract offsets from page left and top
	this.mouseX = this.mouseX - this.hspc;
	this.mouseY = this.mouseY - this.vspc;
}
		
function startBox(e)
{
	this.moveLayer("theMap", this.hspc, this.vspc);
	// keep it within the MapImage
	if ((this.mouseX < this.iWidth) && (this.mouseY < this.iHeight))
	{
		if (this.boxing)
			this.stopBox(e);
		else
		{
			this.x1 = this.mouseX;
			this.y1 = this.mouseY
			this.x2 = this.x1+1;
			this.y2 = this.y1+1;
			this.zleft = this.x1;
			this.ztop = this.y1;
			this.zbottom = this.y1;
			this.zright = this.x1
					
			this.boxIt(this.x1, this.y1, this.x2, this.y2);
			this.boxing = true;
		}
	}
	return false;
}
		
function stopBox(e)
{
	this.boxing = false;

	if (this.isNav4 || this.isOpera) {	
	//if (this.isNav4) {	
		this.hideLayer("zoomBoxTop");
		this.hideLayer("zoomBoxLeft");
		this.hideLayer("zoomBoxRight");
		this.hideLayer("zoomBoxBottom");
	}
	else {
		this.hideLayer("zoomBox");
	}
	window.scrollTo(0,0);
			
	return true;
}
		
function setClip()
{	
	if (this.x1 > this.x2)
	{
		this.zright = this.x1;
		this.zleft = this.x2;
	}
	else
	{
		this.zleft = this.x1;
		this.zright = this.x2;
	}
	if (this.y1 > this.y2)
	{
		this.zbottom = this.y1;
		this.ztop = this.y2;
	}
	else
	{
		this.ztop = this.y1;
		this.zbottom = this.y2;
	}
			
	if ((this.x1 != this.x2) && (this.y1 != this.y2))
		this.boxIt(this.zleft, this.ztop, this.zright, this.zbottom);
}
		
function mouseUp(e)
{ 
	// The mouse came up so do something.
	if ((this.currentTool == "box") && (this.boxing))
		this.stopBox(e);
							
	if ((this.currentTool == "pan") && (this.panning))
		this.stopPan(e);
}

function checkBrowser()
{

	this.isDOM   = (document.getElementById) ? true : false;	//does the browser support the "standard" DOM?
	this.isNav   = (navigator.appName.indexOf("Netscape") >= 0) ? true : false;		//temporary
	this.isNav4  = (document.layers) ? true : false;
	this.isIE    = (document.all) ? true : false;
	this.isIE4   = ( this.isIE && !this.isDOM );
	this.isIE5   = ( this.isIE && this.isDOM && (navigator.appVersion.indexOf("MSIE 5") != -1) );
	this.ieIE6   = ( this.isIE && this.isDOM && (navigator.appVersion.indexOf("MSIE 6") != -1) );
	this.is5up   = ( this.isDOM );	//temporary
	this.isOpera = (navigator.userAgent.indexOf("Opera")!=-1);
	this.isGecko = ( this.isDOM && (navigator.userAgent.indexOf('gecko') != -1) && (navigator.userAgent.indexOf('safari') == -1) );

//	this.isNav = (navigator.appName.indexOf("Netscape") >= 0);
//	if (this.isNav)
//	{
//		if (parseFloat(navigator.appVersion) < 5)
//			this.isNav4 = true;
//		else
//			this.is5up = true;
//	}	
//	else
//	{
//		this.isIE4 = true;
//		if (navigator.appVersion.indexOf("MSIE 5") > 0)
//		{
//			this.isIE4 = false;
//			this.is5up = true;
//		}
//	}
}

// Make the map.
function makeIt()
{
	// Create necessary layers.
	// Map image.
	var content = '<img id="theImage" name="theImage" src="' + this.mapURL + '" hspace="0" vspace="0" border="0" width="' + this.iWidth + '" height="' + this.iHeight + '" ';
	if (this.isIE) content += ' galleryimg="no" ';	// disable the image toolbar in IE6+
	content += '/> ';

	this.createLayer("theMap", this.hspc, this.vspc, this.iWidth, this.iHeight, true, content);
	this.setLayerBorder("theMap", 1, "solid", "black");
    	
	// "Glass" top layer.
	content = '<img name="pixel" width="1" height="1">';
	this.createLayer("theTop", this.hspc - 1, this.vspc - 1, this.iWidth + 1, this.iHeight + 1, true, content);
	
	if (this.isNav4 || this.isOpera) {	
	//if (this.isNav4) {
    	// Zoom/selection box.
    	content = '<img name="zoomImageTop" width="1" height="1">';
    	this.createLayer("zoomBoxTop", this.hspc, this.vspc, this.iWidth, this.iHeight, false, content);
    	content = '<img name="zoomImageLeft" width="1" height="1">';
    	this.createLayer("zoomBoxLeft", this.hspc, this.vspc, this.iWidth, this.iHeight, false, content);
    	content = '<img name="zoomImageRight" width="1" height="1">';
    	this.createLayer("zoomBoxRight", this.hspc, this.vspc, this.iWidth, this.iHeight, false, content);
    	content = '<img name="zoomImageBottom" width="1" height="1">';
    	this.createLayer("zoomBoxBottom", this.hspc, this.vspc, this.iWidth, this.iHeight, false, content);
    	
    	// Set zoom box color.
    	this.setLayerBackgroundColor("zoomBoxTop", this.zoomBoxColor);
    	this.setLayerBackgroundColor("zoomBoxLeft", this.zoomBoxColor);
    	this.setLayerBackgroundColor("zoomBoxRight", this.zoomBoxColor);
    	this.setLayerBackgroundColor("zoomBoxBottom", this.zoomBoxColor);
	}
	else {
		content = '<img name="zoomImageTop" width="1" height="1" / >';
		this.createLayer("zoomBox", this.hspc, this.vspc, this.iWidth, this.iHeight, false, content);
		//this.setLayerBorder("zoomBox", this.ovBoxSize, "solid", this.zoomBoxColor);
		this.setLayerBorder("zoomBox", this.ovBoxSize, this.zoomBoxBorderStyle, this.zoomBoxColor);
		//this.setLayerBackgroundColor("zoomBox", this.zoomBoxColor);
	}
}


function startPan(e)
{
	this.moveLayer("theMap", this.hspc, this.vspc);

	// keep it within the MapImage
	if ((this.mouseX < this.iWidth) && (this.mouseY < this.iHeight))
	{
		if (this.panning)
			this.stopPan(e);
		else
		{
			this.x1 = this.mouseX;
			this.y1 = this.mouseY;
			this.x2 = this.x1 + 1;
			this.y2 = this.y1 + 1;
			this.panning = true;
		}
	}
	return false;
}

function stopPan(e)
{
	window.scrollTo(0,0);
	this.panning = false;
}

function panMouse()
{
	var xMove = this.x2 - this.x1;
	var yMove = this.y2 - this.y1;
	var cLeft = -xMove;
	var cTop = -yMove;
	var cRight = this.iWidth;
	var cBottom = this.iHeight;
	if (xMove > 0)
	{
		cLeft = 0;
		cRight = this.iWidth - xMove;
	}
	if (yMove > 0)
	{
		cTop = 0;
		cBottom = this.iHeight - yMove;
	}
	this.clipLayer("theMap", cLeft, cTop, cRight, cBottom);
	this.moveLayer("theMap", xMove + this.hspc, yMove + this.vspc);
}

function mouseMove(e)
{
	// Update all the coordinate variables.
	this.getImageXY(e);
	
	// Constrain x & y to the canvas.	
	// Fudge factors.
	var width = this.iWidth;
	var height = this.iHeight;
	if (this.isNav)
		width -= 3;
	else
		height -= 3;

	// X
	if (this.mouseX > width)
		this.x2 = width;
	else if (this.mouseX <= 0)
		this.x2 = 0;
	else
		this.x2 = this.mouseX;

	// Y
	if (this.mouseY > height)
		this.y2 = height
	else if (this.mouseY <= 0)
		this.y2 = 0;
	else
		this.y2 = this.mouseY;
		

	if (this.boxing)
		this.setClip();
	else if (this.panning)
		this.panMouse();	
}

// Start the tool.
function mouseDown(e)
{
	// Only do it if left clicked.
	var left = this.isLeftClick(e);
	if (left)
	{
		// Update coordinates.
		this.getImageXY(e);
		// Only do this if we're over the map.
		if ((this.mouseX >= 0) && (this.mouseX < this.iWidth) && (this.mouseY >= 0) && (this.mouseY < this.iHeight))
		{
			switch (this.currentTool)
			{
			case "box":
				this.startBox(e);
				break;
			case "pan":
				this.startPan(e);
				break;
			default:
				break;
			}
		}
	}
	return false;
}

function isLeftClick(e)
{
	// Return true if left click.
	var left = false;
	if (this.isNav)
	{
		if (e.which == 1)
			left = true;
	}
	else
	{	
		if (e.button == 1)
			left = true;
	}

	return left;
}

function setCurrentTool(tool)
{
	this.currentTool = tool;
	switch (tool)
	{
	case "box":
		break;
	case "pan":
		break;
	case "point":
		break;
	default:
		this.currentTool = "none";
		break;
	}
}


function setCursor(cursor) {
	if (!this.isNav4) {
		if (this.doc) this.doc.body.style.cursor = cursor;
	}
}



function getFrameWidth(fraName) {
	if (!fraName || fraName == "undefined") {
		thisFrame = this.win;
	} else {
		thisFrame = top.window.frames[fraName];
	}
	
	if (thisFrame.document) {
		if (this.isIE) {
			return thisFrame.document.body.clientWidth;
		} else {
			return thisFrame.innerWidth;
		}
	}
}


function getFrameHeight(fraName) {
	if (!fraName || fraName == "undefined") {
		thisFrame = this.win;
	} else {
		thisFrame = top.window.frames[fraName];
	}
	
	if (thisFrame.document) {
		if (this.isIE) {
			return thisFrame.document.body.clientHeight;
		} else {
			return thisFrame.innerHeight;
		}
	}
}