//<!-- 
//# $Id$ 
//# Copyright (C) 2000 US Geological Survey 
//# Written by Russell Moffitt 
//# License: GPL 
//--> 


// Support functions for advanced web clients using the
// MapServer. Original coding 02-25-2000. - SDL -
// Heavily modified to work with DHTML interface on
// 11-08-2000. - Russell Moffitt -

document.write('<script language="Javascript" src="javascript/zoombox.js"><\/script>');

//////////////////////////////////
// Begin Map Class Definition
//////////////////////////////////
function Map_setLayers(layers, extent) {
	var currentview = this.history.views[this.history.current];
	if (!(extent)) {
		extent = currentview['extent'];
	}
	if (layers == currentview['layers'] && extent == currentview['extent']) {
		// do nothing, nothing has changed
	} else {
		var options = '&mapext='+extent.join('+')
		+'&mapsize='+this.mapw+'+'+this.maph
		+'&layers='+layers.join('+')
		+'&map_web_template=loader.html';
		this.draw(options);
	}
}
function Map_setQueryLayer(qlayer) {
	this.querylayer = qlayer;
}

function Map_setOptions(options) {
	this.options_persist = options;
}

function Map_setMapFile(mapfile) {
	this.mapfile = mapfile;
}

function Map_backHistory() {
	this.loadFrame().location = '';
	this.resetLayers();
	if ((this.history.current > this.history.init) && (this.history.init > -1)) {
		this.history.current--;
		var view = this.history.views[this.history.current];
		this.mapLayer.setHTML('<img src="'+view['mapImg']+'" width='+this.mapw+' height='+this.maph+' hspace=0 vspace=0 border=0>');
		this.scaleBar.setHTML('<img src="'+view['scaleImg']+'" border=0 vspace=0 hspace=0>');
		if (this.refImg) this.refImg.setImg(view['refImg']);
		if (view['latlon']) {
			var coords = view['latlon'];
		} else {
			var coords = view['extent'];
		}
		this.latLon.setHTML('<font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><img src="graphics/clear.gif" width=5 height=1 hspace=0 vspace=0 border=0> Longitude: '+(Math.round(100*coords[0])/100)+' to '+(Math.round(100*coords[2])/100)+' <img src="graphics/clear.gif" width=15 height=1 hspace=0 vspace=0 border=0> Latitude: '+(Math.round(100*coords[1])/100)+' to '+(Math.round(100*coords[3])/100)+'</b></font>');
		parent.layers.setLayers(view['layers']);
	}
}

function Map_nextHistory() {
	this.loadFrame().location = '';
	this.resetLayers();
	if (this.history.current < this.history.last) {
		this.history.current++;
		var view = this.history.views[this.history.current];
		this.mapLayer.setHTML('<img src="'+view['mapImg']+'" width='+this.mapw+' height='+this.maph+' hspace=0 vspace=0 border=0>');
		this.scaleBar.setHTML('<img src="'+view['scaleImg']+'" border=0 vspace=0 hspace=0>');
		if (this.refImg) this.refImg.setImg(view['refImg']);
		if (view['latlon']) {
			var coords = view['latlon'];
		} else {
			var coords = view['extent'];
		}
		this.latLon.setHTML('<font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><img src="graphics/clear.gif" width=5 height=1 hspace=0 vspace=0 border=0> Longitude: '+(Math.round(100*coords[0])/100)+' to '+(Math.round(100*coords[2])/100)+' <img src="graphics/clear.gif" width=15 height=1 hspace=0 vspace=0 border=0> Latitude: '+(Math.round(100*coords[1])/100)+' to '+(Math.round(100*coords[3])/100)+'</b></font>');
		parent.layers.setLayers(view['layers']);
	}
}

function Map_newView(mapImg, refImg, scaleImg, legendImg, extent, layers, latlon) {
	this.mapLoaded = false;
	this.resetLayers();
	this.history.current++;
	if (this.history.init == -1) {
		this.history.init = 0;
		this.history.current = 0;
	}
	this.history.last = this.history.current;
	this.history.views[this.history.current] = new Array();
	this.history.views[this.history.current]['mapImg'] = mapImg;
	this.history.views[this.history.current]['refImg'] = refImg;
	this.history.views[this.history.current]['scaleImg'] = scaleImg;
	this.history.views[this.history.current]['legendImg'] = legendImg;
	this.history.views[this.history.current]['extent'] = extent;
	//alert(extent)
	if(extent[0] < -180) {extent[0] = -180};
	if(extent[1] < -90) {extent[1]=-90};
	if(extent[2] > 180) {extent[2] = 180};
	if(extent[3] > 90) {extent[3]=90};
	this.history.views[this.history.current]['layers'] = layers;
	if (latlon) {
		this.history.views[this.history.current]['latlon'] = latlon;
	}
	this.history.views.length = this.history.current + 1;
	this.mapLayer.setHTML('<img name="mapimg" src="'+mapImg+'" width='+this.mapw+' height='+this.maph+' hspace=0 vspace=0 border=0>');
	this.imgLoader = new Image();
	this.imgLoader.src = mapImg;
	this.imgLoader.parent = this;
	this.imgLoader.onload = function() { this.parent.mapLoaded = true; this.parent.imgLoader = null; };	
	this.scaleBar.setHTML('<img src="'+scaleImg+'" border=0 vspace=0 hspace=0>');
	this.setLegend(legendImg);
	if (this.refImg) this.refImg.setImg(refImg);
	if (latlon) {
		var coords = latlon;
	} else {
		var coords = extent;
	}
	this.latLon.setHTML('<p style="margin-top:3px; margin-bottom:0px;font: bold 12px arial;"><img src="graphics/clear.gif" width=5 height=1 hspace=0 vspace=0 border=0> Longitude: '+(Math.round(100*coords[0])/100)+' to '+(Math.round(100*coords[2])/100)+' <img src="graphics/clear.gif" width=15 height=1 hspace=0 vspace=0 border=0> Latitude: '+(Math.round(100*coords[1])/100)+' to '+(Math.round(100*coords[3])/100)+' <img src="graphics/clear.gif" width=12 height=1 hspace=0 vspace=0 border=0>'+(Date())+' </p>');
	//this.latLon.setHTML('<font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><img src="graphics/clear.gif" width=5 height=1 hspace=0 vspace=0 border=0>X: '+(Math.round(100*coords[0])/100)+' to '+(Math.round(100*coords[2])/100)+' <img src="graphics/clear.gif" width=30 height=1 hspace=0 vspace=0 border=0> Y: '+(Math.round(100*coords[1])/100)+' to '+(Math.round(100*coords[3])/100)+'</b></font>');
	this.mapLayer.setBgColor(null);
	this.loadLayer.setVisible(false);
	this.lockmap = false;
	//parent.layers.setLayers(view['layers']);
}

function Map_setLegend(legendImg) {
	this.legendImg = legendImg;
	if (!this.legendWin.closed) {
		var content = '<html><head><title>LEGEND</title></head><body bgcolor="#ffffff"><img name="legend" src="'+this.legendImg+'" border=0 vspace=0 hspace=0></body></html>';
		this.legendWin.document.open();
		this.legendWin.document.write(content);
		this.legendWin.document.close();
	}
}
function Map_showLegend() {
	if (this.legendWin.closed) {
		this.legendWin = window.open('','legend','width=300,height=600,left=100,top=100,scrollbars=yes, resizable=yes');
		//this.legendWin = parent.legends('this.legendImg','legend','width=300,height=600,left=100,top=100,scrollbars=yes, resizable=yes');
		this.setLegend(this.legendImg);
		this.legendWin.focus();
	}
	//this.legendWin = parent.legends('this.legendImg','legend','width=300,height=600,left=100,top=100,scrollbars=yes, resizable=yes');
	this.legendWin.focus();
}

function Map_makePrint() {
	var currentview = this.history.views[this.history.current];
	extent=currentview['extent'];
	if(extent[0] < -180) {extent[0] = -180};
	if(extent[1] < -90) {extent[1]=-90};
	if(extent[2] > 180) {extent[2] = 180};
	if(extent[3] > 90) {extent[3]=90};
	wdx = extent[2] - extent[0];
	wdy= extent[3] - extent[1];
	mx =600
	my= Math.round(mx/wdx*wdy);
//	var mx = Math.round(1800*5 /(extent[1] - extent[0]));
//	var my = Math.round(1800*5 /(extent[3] - extent[2]));
//	alert(mx);
//	var options = '&layers='+currentview['layers'].join('+')
//		+'&mapext='+currentview['extent'].join('+')
//		+'&mapsize=800+400'
//		+'&map_web_template=printable.html'
//		+'&map_legend_status=on';
	var options = '&layers='+currentview['layers'].join('+')
		+'&mapext='+extent.join('+')
  		+'&mapsize='+mx+'+'+my
		+'&map_web_template=printable.html'
		+'&map_legend_status=on';

	var url = this.mapserver+'?mode='+this.mode
		+'&map='+this.mapfile
		+options;
	PRINTMAP = window.open(url,'PRINTMAP','menubar=yes,toolbar=yes,scrollbars=yes,status=yes,resizable=yes');
}

function Map_zoomDefault() {
	if (this.history.init == -1) init = 0;
	else init = this.history.init;
	var initview = this.history.views[init];
	var options = '&mapext='+initview['extent'].join('+')
		+'&mapsize='+this.mapw+'+'+this.maph
		+'&layers='+this.history.views[this.history.current]['layers'].join('+')
		+'&map_web_template=loader.html';
	this.draw(options);
}

function Map_redraw(extent, doptions) {
	var currentview = this.history.views[this.history.current];
	if (!(extent)) {
		extent = currentview['extent'];
	}
	var options = '&mapext='+extent.join('+')
		+'&mapsize='+this.mapw+'+'+this.maph
		+'&layers='+currentview['layers'].join('+')
		+'&map_web_template=loader.html';
	if (doptions) options += doptions;
	this.draw(options);
}

function Map_draw(options) {
	this.loadLayer.setVisible(true);
	if (!(options)) { this.zoomDefault(); return false; }
	var currentview = this.history.views[this.history.current];
	var url = this.mapserver+'?mode='+this.mode
		+'&map='+this.mapfile
		+'&map_scalebar_status=on'
		+options
		+this.options_persist;
	this.loadframe.location = url;
}

function Map_zoomBoxed(e) {
	var o = e.getSource();
	var map = o.map;
	if (map.state == 'query') {
		map.query(map.zoomBox.getTLX(),map.zoomBox.getTLY(),map.zoomBox.getBRX(),map.zoomBox.getBRY());
		return;
	}
	var currentview = map.history.views[map.history.current];
	var options = '&layers='+currentview['layers'].join('+')
		+'&imgext='+currentview['extent'].join('+')
		+'&imgsize='+map.mapw+'+'+map.maph
		+'&imgbox='+map.zoomBox.getTLX()+'+'+map.zoomBox.getTLY()
			+'+'+map.zoomBox.getBRX()+'+'+map.zoomBox.getBRY()
		+'&mapsize='+map.mapw+'+'+map.maph
		+'&map_web_template=loader.html';
	map.draw(options);
}

function Map_zoomClicked(e) {
	var o = e.getSource();
	var map = o.map;
	if (map.state == 'query') {
		map.query(map.zoomBox.X1, map.zoomBox.Y1);
		return;
	}
	if (map.state == 'zoomin') var zoomdir = 1;
	if (map.state == 'pan') var zoomdir = 0;
	if (map.state == 'zoomout') var zoomdir = -1;
	var currentview = map.history.views[map.history.current];
	var options = '&layers='+currentview['layers'].join('+')
		+'&imgext='+currentview['extent'].join('+')
		+'&imgsize='+map.mapw+'+'+map.maph
		+'&imgxy='+map.zoomBox.X1+'+'+map.zoomBox.Y1
		+'&mapsize='+map.mapw+'+'+map.maph
		+'&map_web_template=loader.html'
		+'&zoomdir='+zoomdir
		+'&zoomsize='+map.zoomsize;
	map.draw(options);
}

function Map_pan(x,y) {
	var zoomdir = 0;
	var currentview = this.history.views[this.history.current];
	var options = '&layers='+currentview['layers'].join('+')
		+'&imgext='+currentview['extent'].join('+')
		+'&imgsize='+this.mapw+'+'+this.maph
		+'&imgxy='+x+'+'+y
		+'&mapsize='+this.mapw+'+'+this.maph
		+'&map_web_template=loader.html'
		+'&zoomdir='+zoomdir
		+'&zoomsize='+this.zoomsize;
	this.draw(options);
}



function Map_query(x1, y1, x2, y2) {
	var qlayer = this.querylayer;
	this.mode = 'query';
	if (x2 && y2) {
//--commented by bisher		var xyparam = '&imgbox='+x1+'+'+y1+'+'+x2+'+'+y2;
//--> This is bisher's calculation it places the swipe in the center of the zoom box 
//   and sets the output to a single query
		var myx = (x1+x2)/2.0
		var myy = (y1+y2)/2.0
		var xyparam = '&imgxy='+myx+'+'+myy;
// mode set to query by bisher
		this.mode = 'query';
	} else {
		var xyparam = '&imgxy='+x1+'+'+y1;
	}
	var currentview = this.history.views[this.history.current];
	var layers = currentview['layers'].join('+');
	var options = '&qlayer='+qlayer
		+'&layers='+layers
		+'&imgext='+currentview['extent'].join('+')
		+'&imgsize='+this.mapw+'+'+this.maph
		+xyparam
		+this.options_persist;
	var url = this.mapserver+'?mode='+this.mode
		+'&map='+this.mapfile
		+options;
	this.queryframe=window.open(url,'qwin');
//	this.queryframe.location = url;
	this.mode = 'browse';
}

function Map_itemquery(qlayer, qoptions, nquery, useprevquery) {
	this.mode = 'itemquery';
	if (nquery) this.mode = 'itemnquery';
	var currentview = this.history.views[this.history.current];
	var layers = currentview['layers'].join('+');
//	if (qlayer != '') {
//		layers += '+'+qlayer;
//	}
	var options = this.qoptions_previous+qoptions;
	if (!useprevquery) {
		options = '&qlayer='+qlayer
			+'&layers='+layers
			+'&imgsize='+this.mapw+'+'+this.maph
			+'&map_scalebar_status=on'
			+qoptions
			+this.options_persist;
			//+'&imgext='+currentview['extent'].join('+')
			// We'll use the default extent from the mapfile
			// Make sure to set that extent to cover everything
	}
	this.qoptions_previous = options;
	var url = this.mapserver+'?mode='+this.mode
		+'&map='+this.mapfile
		+options;
	this.queryframe=window.open('url','qwin');
	this.queryframe.location = url;
	this.mode = 'browse';
}

function Map_refPan(x, y) {
	var currentview = this.history.views[this.history.current];
	var options = '&layers='+currentview['layers'].join('+')
		+'&imgext='+currentview['extent'].join('+')
		+'&imgsize='+this.mapw+'+'+this.maph
		+'&ref.x='+x
		+'&ref.y='+y
		+'&mapsize='+this.mapw+'+'+this.maph
		+'&map_web_template=loader.html';
	this.draw(options);
}

function Map_resetLayers() {
	this.mapLayer.setLocation(this.mapx, this.mapy);
	this.mapLayer.setClip(new Array(0, this.mapw, this.maph, 0));
	this.zoomBox.drawRect(false);
	this.loadLayer.setVisible(false);
}

function Map_MouseDown(e) {
	var map = e.getSource().map;
	if (map.lockmap) return true;
	map.dragging = true;
	if (map.state == 'zoomin' || map.state == 'zoomout'  || map.state == 'query') {
		// let the zoombox handle redrawing itself
		map.zoomBox.MouseDown(e);
	} else if (map.state == 'pan') {
		//don't move until mousemove
		map.panx = e.x;
		map.pany = e.y;
		map.zoomBox.drawCursor(e.x, e.y);
	}
	return false;
}

function Map_MouseMove(e) {
	var map = e.getSource().map;
	window.status= "height"+e.x+"width"+e.y;
	if (map.lockmap) return true;
	if (map.dragging) {
		// let the zoombox handle redrawing itself
		if (map.state == 'zoomout') {
			map.zoomBox.MouseMove(e, false);
		} else if (map.state == 'zoomin' || map.state == 'query') {
			map.zoomBox.MouseMove(e, true);
		} else if (map.state == 'pan') {
			// handle moving the map layer here
			map.zoomBox.drawCursor(map.mapw/2, map.maph/2);
			map.mapLayer.setLocation(map.mapx + (e.x - map.panx), map.mapy + (e.y - map.pany));
			map.mapLayer.setClip(new Array(map.pany - e.y, (map.panx - e.x) + map.mapw, (map.pany - e.y) + map.maph, map.panx - e.x));
		}
		return false;
	} else {
		return true;
	}

}

function Map_MouseUp(e) {
	var map = e.getSource().map;
//	var extent= this.history.views[this.history.current['extent'];
//	alert(extent);
//	listPropertyNames(map);
	if (!map.dragging) return true;
	if (map.lockmap) return true;
	map.dragging = false;
	if (map.state == 'zoomin' || map.state == 'query') {
		// let the zoombox draw the final box and invoke zoombox event
		map.zoomBox.MouseUp(e, true);
	} else if (map.state == 'zoomout') {
		// let the zoombox draw the final cursor and invoke zoomclick event
		map.zoomBox.MouseUp(e, false);
	} else if (map.state == 'pan') {
		// handle moving the map layer here
		map.mapLayer.setLocation(map.mapx + (e.x - map.panx), map.mapy + (e.y - map.pany));
		map.mapLayer.setClip(new Array(map.pany - e.y, (map.panx - e.x) + map.mapw, (map.pany - e.y) + map.maph, map.panx - e.x));
		if ((map.panx == e.x) && (map.pany == e.y)) {
			map.zoomBox.drawCursor(e.x, e.y);
			map.pan(e.x, e.y);
		} else {
			map.zoomBox.drawCursor(map.mapw/2, map.maph/2);
			map.pan(Math.round(map.mapw/2) - (e.x - map.panx), Math.round(map.maph/2) - (e.y - map.pany));
			map.panx = null;
			map.pany = null;
		}
	}
	return false;
}

function Map_setState(state) {
	if (state == 'fullmap') this.zoomDefault()
	else if (state == 'back') this.backHistory()
	else if (state == 'next') this.nextHistory()
	else if (state == 'print') this.makePrint()
	else if (state == 'help') this.helpMe()
	else if (state == 'gwadi') this.gwadiWeb()
	else if (state == 'zoomin' || state == 'zoomout' || state == 'pan' || state == 'query') {
		this.state = state;
	}
}

function Map_helpMe() {
	var currentview = this.history.views[this.history.current];
	var options = '&layers='+currentview['layers'].join('+')
		+'&mapext='+currentview['extent'].join('+')
		+'&mapsize=1800+900'
		+'&map_web_template=printable.html'
		+'&map_legend_status=on';
	var url = 'help.html'
	HELPFILE = window.open(url,'HELPFILE','width=640,height=480,menubar=yes,toolbar=yes,scrollbars=yes,status=yes, resizable=yes, location=yes');
}
function Map_gwadiWeb() {
	var currentview = this.history.views[this.history.current];
	var options = '&layers='+currentview['layers'].join('+')
		+'&mapext='+currentview['extent'].join('+')
		+'&mapsize=1800+900'
		+'&map_web_template=printable.html'
		+'&map_legend_status=on';
	var url = 'http://gwadi.org/'
	GWADI= window.open(url,'GWADI');
}
function Map_loadFrame() {
	return eval(this.loader);
}

function extd(coords,zz){
zz = coords;
}

function listPropertyNames(obj)
{
	var names=" ";
	for(var i in obj) names +=i+"\n";
	alert(names);
}


function Map(x, y, width, height, mapserver, mapfile, defaultextent, defaultlayers, refImg) {
	this.query			= Map_query;
	this.itemquery		= Map_itemquery;
	this.redraw			= Map_redraw;
	this.draw			= Map_draw;
	this.refPan			= Map_refPan;
	this.zoomDefault	= Map_zoomDefault;
	this.backHistory	= Map_backHistory;
	this.nextHistory	= Map_nextHistory;
	this.newView		= Map_newView;
	this.setLegend		= Map_setLegend;
	this.showLegend		= Map_showLegend;
	this.makePrint		= Map_makePrint;
	this.zoomBoxed		= Map_zoomBoxed;
	this.zoomClicked	= Map_zoomClicked;
	this.pan			= Map_pan;
	this.setLayers		= Map_setLayers;
	this.setQueryLayer	= Map_setQueryLayer;
	this.setOptions		= Map_setOptions;
	this.setMapFile		= Map_setMapFile;
	this.resetLayers	= Map_resetLayers;
	this.MouseDown		= Map_MouseDown;
	this.MouseMove		= Map_MouseMove;
	this.MouseUp		= Map_MouseUp;
	this.setState		= Map_setState;
	this.loadFrame		= Map_loadFrame;
	this.helpMe		= Map_helpMe;
	this.gwadiWeb		= Map_gwadiWeb;
	this.name = "Map";
	//this.lockmap = true;
	
	this.mode = 'browse';	// map/query/nquery/featurequery/nfeaturequery
	this.state = 'zoomin';	// zoomin/zoomout/pan/query
	this.dragging = false;
	
	this.url = '';
	this.mapserver = mapserver;
	this.mapfile = mapfile;
	
	this.querylayer = '';
	this.qoptions_previous = '';	       
//---------- original line commented by bisher to avoid loading queries in frame ------
	this.queryframe = parent.info;
//------------end commenting by bisher
	this.loadframe = parent.loader;
	this.loader = "parent.loader";
	
	
	this.options_persist = '';
	
	this.history = new Object();
	this.history.views = new Array();
	this.history.views[0] = new Array();
	this.history.views[0]['extent'] = defaultextent;
	this.history.views[0]['layers'] = defaultlayers;
	this.history.init = -1;
	this.history.current = 0;
	this.history.last = 0;
	
	if (refImg) this.refImg = refImg;
	this.legendImg = '';
	this.legendWin = new Object;
	this.legendWin.closed = true;
	
	this.latlonh = 22;
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
	this.mapx = 0;
	this.mapy = 0;
	this.mapw = width;
	this.maph = height - this.latlonh;
	this.zoomsize = 2;
	
	// Create container layer for Lat/Lon bar and map display
	// Moving this layer will move everything else, too
	this.map = dynapi.document.addChild(new DynLayer(null, this.x, this.y, this.width, this.height, 'black'));	
	// Create Lat/Lon Info panel
	this.line1 = this.map.addChild(new DynLayer(null, 0, 0, this.width, 1, '#003366'));
	this.latLon = this.map.addChild(new DynLayer(null, 0, 1, this.width, this.latlonh-2, '#bfddff'));
	this.line2 = this.map.addChild(new DynLayer(null, 0, this.latlonh - 1, this.width, 1, '#003366'));
	
	// Create Map Canvas Layer
	// All other map layers are a child of this layer
	// Mouse clicks are handled by this layer
	this.mapCanvas = this.map.addChild(new DynLayer(null, this.mapx, this.latlonh, this.mapw, this.maph, '#003366'));	
	
	this.mapLayer = this.mapCanvas.addChild(new DynLayer(null, this.mapx, this.mapy, this.mapw, this.maph, '#000000'));
		this.mapLayer.setHTML('<img src="graphics/splash_4.jpg" width=400 height=400 hspace=0  vspace=0 border=0>');
		this.splashImg = new Image();
		this.splashImg.onload = function() { document.splashLoaded = true; };
	this.splashImg.src = 'graphics/splash_4.jpg';
	
	
	// Create ScaleBar & Legend Layers
	this.scaleBar = this.mapCanvas.addChild(new DynLayer(null, this.mapx+5, this.mapy+this.maph-35, 500, 30));
	
	// Create Zoom Box and setup zoom event listeners
	this.zoomBox = new ZoomRect(this.mapx, this.mapy, this.mapw, this.maph, "#ff0000", this.mapCanvas);
	this.zoomevents = {
		onzoomclick : this.zoomClicked,
		onzoombox : this.zoomBoxed
	};
	this.zoomBox.topEdge.map = this;
	this.zoomBox.topEdge.addEventListener(this.zoomevents);
	
	// Create Loading Image Layer
	this.loadLayer = this.mapCanvas.addChild(new DynLayer(null, this.mapx+this.mapw/2-110, this.mapy+this.maph/2-9, 118, 32));
	//this.loadLayer = this.mapCanvas.addChild(new DynLayer(null, this.mapx+this.mapw, this.mapy+this.maph, 220, 18));
	this.loadLayer.setVisible(false);
	this.loadLayer.setHTML('<img src="graphics/old_loading.gif" width="118" height="32" hspace=0 vspace=0 border=0>');
	
	// Setup mapCanvas to handle mouse clicks
	this.map.map = this.mapCanvas.map = this;
	this.mouseevents = {
		onmousedown : this.MouseDown,
		onmousemove : this.MouseMove,
		onmouseup : this.MouseUp
	};
	this.mapCanvas.addEventListener(this.mouseevents);
	
	this.mapCanvas.setTextSelectable(false);
}

 //////////////////////////////////
// End Map Class Definition
//////////////////////////////////
