/*arrays for original locations of hotspots and popups, to scale when zoomed.*/
var numHotspots; 
var numPopups;

var hotspotOrigX = new Array();
var hotspotOrigY = new Array();
var hotspotOrigRad = new Array();
var popupOrigLeft= new Array();
var popupOrigTop= new Array();
var popupOrigWidth= new Array();
var popupOrigHeight= new Array();
var maxZoom= 2.5;

var mapWidth, mapHeight; //the jpg size zoomed
var origMapWidth, origMapHeight; // the original jpg size
var mapFrameWidth, mapFrameHeight; // the visible area in the map frame

//original values for MapFrame and zoom, so we can go full screen and back
var origMapFrameTop;
var origMapFrameLeft;
var origZoomTop;
var origZoomLeft;
var origZoomHeight;

//Tells whether there is a "FillWindowButton" to worry about for the geometry cookie
var isAFillWindowButton;
//Tells whether there is a "LowellMapEthnic" overlay to worry about for scaling
var isALowellMapEthnic;
//Tells whether there is a "LowellMapDots" overlay to worry about for scaling
var isALowellMapDots;

//********************  Sizes--original and dynamic  *****************************
function originalSizer() {
	origMapWidth=document.getElementById('LowellMap').offsetWidth;
	origMapHeight=document.getElementById('LowellMap').offsetHeight;
    mapWidth=origMapWidth;
    mapHeight=origMapHeight;
	var mfs=document.getElementById('mapframe').style;
	mfs.clip="rect(0px,"+origMapHeight+"px,"+origMapWidth+"px,0px)";
    origMapFrameLeft=parseFloat(mfs.left);
    origMapFrameTop=parseFloat(mfs.top);
	var zs=document.getElementById('zoom').style;
    origZoomTop=parseFloat(zs.top);
    origZoomLeft=parseFloat(zs.left);
    origZoomHeight=origMapFrameTop-origZoomTop;
}

function windowSizer() {
	//Maximize the mapframe size to the size of the window, both width and height
	var mfs=document.getElementById('mapframe').style;

	//The window likely has scrollbars on it (the map is big). We are adjusting
	//size so that the scrollbars won't be necessary and won't be needed. However, for 
	//some browsers, a scrollbar might not disappear, it might just not have a slider
	//in it, leaving the channel still showing; for others, the entire slider and channel
	//disappear. For the latter browsers the order of adjustment of height and width 
	//matters -- one of the scrollbars will disappear after the other is adjusted, leaving
	//a wider margin than we want. Solution: do both height and width, then repeat height.
	//(Alternately, do width, height, width.)

	//Adjust height. If top of mapframe isn't near the top (within 30), 
	//  adjust by that and another little bit for a bottom margin to account for different browsers.
	var mapfrtop=parseFloat(mfs.top);
	mapFrameHeight=f_clientHeight()-mapfrtop-((mapfrtop>25)? 5 : 0);
	mfs.height=mapFrameHeight+'px';

	//The mapframe might be at the left margin or not. 
	//	If it is at the left margin (left=0), we use the entire client width-2 toallow for borders
	//	If it is not at the left margin, we adjust the mapframe width to have a right margin also
	//  to account for different browsers..
	var mapfrleft=parseFloat(mfs.left);
	mapFrameWidth=f_clientWidth()-2*(mapfrleft+1); //alert("left="+mapfrleft+"  clientWidth="+f_clientWidth()+"mapFrameWidth="+mapFrameWidth);
	mfs.width=mapFrameWidth+'px';

	//Adjust height. If top of mapframe isn't near the top (within 25), 
	//  adjust a little bit for a bottom margin to account for different browsers.
	var mapfrtop=parseFloat(mfs.top);
	mapFrameHeight=f_clientHeight()-mapfrtop-((mapfrtop>25)? 2 : 0);
	mfs.height=mapFrameHeight+'px';
}

//********************  Zoom  *****************************
function zoom(factor) {
	var diffWidth=mapWidth;
	var diffHeight=mapHeight;
	if (factor<1 && mapWidth*factor<mapFrameWidth && mapHeight*factor<mapFrameHeight) {
		//we're zooming out and have reached limit where the shrunk map is smsller than the frame.
		//back off to just exactly fit the frame
		var widthFactor=mapFrameWidth/origMapWidth;
		var heightFactor=mapFrameHeight/origMapHeight;
		var minFactor=widthFactor;
		if (widthFactor>heightFactor) {
			minFactor=heightFactor;
		}
		
		mapWidth= Math.round(origMapWidth*minFactor);
		mapHeight=Math.round(origMapHeight*minFactor);
		}
	else {
		//we're zooming in. if we have reached limit where the zoom is factor of maxZoom
		//back off to just maxZoom
		mapWidth=Math.round(mapWidth*factor);
		mapHeight=Math.round(mapHeight*factor);
		if (mapWidth>origMapWidth*maxZoom) {
		mapWidth=Math.round(origMapWidth*maxZoom);
		mapHeight=Math.round(origMapHeight*maxZoom);
		}
	}
		
	diffWidth-=mapWidth;
	diffHeight-=mapHeight;

	//******do the zooming for the base map and overlays******
	zoomBaseAndOverlays(mapWidth,mapHeight);

	var mvr=document.getElementById('mover');

	if (mvr.offsetTop+Math.round(diffHeight/2)<=0) {
		mvr.style.top=(mvr.offsetTop+Math.round(diffHeight/2))+'px';
		}
	else {
		mvr.style.top='0px';
	}

	if (mvr.offsetLeft+Math.round(diffWidth/2)<=0) {
		mvr.style.left=(mvr.offsetLeft+Math.round(diffWidth/2))+'px';
		}
	else {
		mvr.style.left='0px';
	}
	scaleHotspotsAndPopups();
}

function zoomFitWidth() {
    mapWidth=mapFrameWidth;
    mapHeight=Math.round(origMapHeight * mapFrameWidth/origMapWidth);

	//******do the zooming for the base map and overlays******
	zoomBaseAndOverlays(mapWidth,mapHeight);

	var mvr=document.getElementById('mover');
	mvr.style.top='0px';
	mvr.style.left='0px';
	scaleHotspotsAndPopups();
}

function zoomFitWholeMap() {
	var emvr=document.getElementById('mover');
	emvr.style.top='0px';
	emvr.style.left='0px';
	zoom(.001);
}

function zoomNone() {
    mapWidth=origMapWidth;
    mapHeight=origMapHeight;
	//******do the zooming for the base map and overlays******
	zoomBaseAndOverlays(mapWidth,mapHeight);

	var mvr=document.getElementById('mover');
	mvr.style.top='0px';
	mvr.style.left='0px';
	scaleHotspotsAndPopups();
}

function zoomOut() {
	zoom(1/1.2);
}

function zoomIn() {
	zoom(1.2);
}

function zoomBaseAndOverlays(mWidth, mHeight) {
	//Zoom the map to the size of the parameters
	var emap=document.getElementById('LowellMap');
	emap.style.width=mWidth+'px';
	emap.style.height=mHeight+'px';

	//do the same zoom for the overlay that has ethnic areas -- it's exactly same size and shape as the base map
	if (isALowellMapEthnic) {
    	var emap=document.getElementById('LowellMapEthnic');
    	emap.style.width=mWidth+'px';
    	emap.style.height=mHeight+'px';
	}
	//ditto for the overlay that has dots -- it's exactly same size and shape as the base map
	if (isALowellMapDots) {
    	var emap=document.getElementById('LowellMapDots');
    	emap.style.width=mWidth+'px';
    	emap.style.height=mHeight+'px';
	}
}

function initHotspotsAndPopups() {

	var origHotspotCoords;
	var ehotspot;
	var epopup;

	//find the hotspots, assumed to be contiguously numbered from 1 to a maximum
	//if there are more than a hundred, change here
	for (numHotspots=1; numHotspots<=100; numHotspots++) 
	{ 
		//hotspots are circles with center (x,y) and radius
		ehotspot=document.getElementById('hotspot'+numHotspots);
		if (ehotspot) { //if it exists
    		origHotspotCoords=ehotspot.coords;
		    //alert("orig hotspot"+numHotspots+"= "+ ehotspot.coords);
    		splitValues=origHotspotCoords.split(",");
    		hotspotOrigX[numHotspots]=splitValues[0];
    		hotspotOrigY[numHotspots]=splitValues[1];
    		hotspotOrigRad[numHotspots]=splitValues[2];
		    //alert("hotspot"+numHotspots+ "="+hotspotOrigX[numHotspots]+","+hotspotOrigY[numHotspots]+","+hotspotOrigRad[numHotspots])
		}
		else break; //it doesn't exist, get out of loop
	} 
	//we assumed the last increment was okay, but it was one too far
	numHotspots=numHotspots-1;
	//alert("numHotspots="+numHotspots);	

	//find the popups, assumed to be contiguously numbered from 1 to a maximum
	//if there are more than a hundred, change here
	for (numPopups=1; numPopups<=100; numPopups++) //if there are more than a hundred, change here
	{ 
		//Popups have top, left, height, width in pixels. They often correspond exactly in number to Hotspots but we can't count on it
		epopup=document.getElementById('popup'+numPopups);
		if (epopup) { //if it exists
    		popupOrigTop[numPopups]=parseFloat(epopup.style.top);		
    		popupOrigLeft[numPopups]=parseFloat(epopup.style.left);		
    		popupOrigWidth[numPopups]=parseFloat(epopup.style.width);		
    		popupOrigHeight[numPopups]=parseFloat(epopup.style.height);		
			//alert("popup"+numPopups+ "="+popupOrigTop[numPopups]+","+popupOrigLeft[numPopups])
		}
	else break; //it doesn't exist, get out of loop
	} 
	//we assumed the last increment was okay, but it was one too far
	numPopups=numPopups-1;
	//alert("numPopups="+numPopups);	
}

function scaleHotspotsAndPopups() {
//called after any zoom action
	var ehotspot; 
	var epopup;
	var popupNewLeft; 
	var popupNewTop;
	
	var scaleFactor=mapWidth/origMapWidth;
	var escalefield=document.getElementById('zoomfactor');
	var per= "Zoomed: ";
	if (scaleFactor<.99) per = per + "&nbsp;&nbsp;";
	per = per + +Math.round(scaleFactor*100)+"%";
	escalefield.innerHTML=per;
	
	for (var i=1; i<=numHotspots; i++)
	{
		//hotspots are circles with center (x,y) and radius
		ehotspot=document.getElementById('hotspot'+i);
		//alert("orig hotspot["+i+ "]="+hotspotOrigX[i]+","+hotspotOrigY[i]+","+hotspotOrigRad[i])
		ehotspot.coords=""+Math.round(hotspotOrigX[i]*scaleFactor)+","+Math.round(hotspotOrigY[i]*scaleFactor)+","+Math.round(hotspotOrigRad[i]*scaleFactor)+"";
		//alert(" new ehotspot.id:"+ehotspot.id+"="+ehotspot.coords);
	} 

	for (var i=1; i<=numPopups; i++) 
	{
    	//Popups have top, left, height, width. These rectangular areas may
		//appear off the screen at extreme zoom out, so adjust as necessary.
		//These often appear one-to-one with hotspots, but we can't count on them being there
		epopup=document.getElementById('popup'+i);
		popupNewLeft= Math.round(popupOrigLeft[i]*scaleFactor)
		if (popupNewLeft+popupOrigWidth > mapFrameWidth) 
			popupNewLeft=mapFrameWidth-popupOrigWidth;
    	epopup.style.left=popupNewLeft+"px";
    	
		popupNewTop= Math.round(popupOrigTop[i]*scaleFactor)
		if (popupNewTop+popupOrigHeight > mapFrameHeight) 
			popupNewTop=mapFrameHeight-popupOrigHeight;
    	epopup.style.top=popupNewTop+"px";
		//alert("(Popup"+i+ ")"+epopup.id +"="+epopup.style.top+","+epopup.style.left)
	} 
	//our callers  may have changed something, remember it
	setGeometryCookie();
}

function FillWindow(){
	//Flip-flow the button between "Fill window" and "Show headers" 
	//  and change location of mapframe appropriately

	var fwbe=document.getElementById('FillWindowButton');
	if (fwbe.innerHTML=="Fill window") {
		//Currently says "Fill window" so do that and then change the button to say "Show headers"
    	var zs=document.getElementById('zoom').style.top="0px";
		//zs.top=0;
    	//zs.left=0;
    	var mfs=document.getElementById('mapframe').style;
    	mfs.top=origZoomHeight + "px";
    	mfs.left="0px";
    	windowSizer();
			//zoomNone();
    	scaleHotspotsAndPopups();
    	fwbe.innerHTML="Show headers";
    	fwbe.alt="Reduce the map size to only part of the browser window.";
		}
	else {
		//Currently says "Show headers" so do that and then change the button to say "Fill window"
    	var zs=document.getElementById('zoom').style;
    	zs.top=origZoomTop + "px";
		//zs.left=origZoomLeft;
    	var mf=document.getElementById('mapframe').style;
    	mf.top=origMapFrameTop + "px";
    	mf.left=origMapFrameLeft + "px";
    	windowSizer();
    	fwbe.innerHTML="Fill window";
    	fwbe.alt="Use the entire browser window for the map";
	}
	
    //we may have changed something, remember it
	setGeometryCookie();
}

//********************  Drag  *****************************
function getDragParent(el) {
	var oldEl=el;
	while (el) {
		el=el.parentNode;
		if (el.id=="mapframe" || el.nodeName.toUpperCase()=='BODY') {
			return oldEl;
		}
		oldEl=el;
	}
}

var offsetX,offsetY,draggingThing;
function startDrag(e) {
//    e = (e) ? e : (window.event) ? window.event : "";
	e=e || event;
	draggingThing=getDragParent(e.srcElement || e.target); 
	offsetX=e.clientX-draggingThing.offsetLeft;
	offsetY=e.clientY-draggingThing.offsetTop;
	document.body.onmousemove=moveDrag;
	document.body.onmouseup=endDrag;
	document.onselectstart=nullFunc;
	document.body.style.cursor = 'move';
}

function nullFunc(e) {
	return false;
}

function moveDrag(e) {
	e=e || event;
	//keep from dragging empty space into the frame
	if (draggingThing) {
		if ((e.clientY-offsetY)>0) {
			draggingThing.style.top='0px';
			}
		else {
			if (e.clientY-offsetY+mapHeight-mapFrameHeight>0) {		
				draggingThing.style.top=(e.clientY-offsetY)+'px'; 
			}
		}	

		if (e.clientX-offsetX>0) {
			draggingThing.style.left='0px';
			}
		else {
			if (e.clientX-offsetX+mapWidth-mapFrameWidth>0) {		
				draggingThing.style.left=(e.clientX-offsetX)+'px';
			}
		}
		
		return true;
	}
}
function endDrag(e) {
	draggingThing=null;
	document.body.onmousemove=null;
	document.body.onmouseend=null;
	document.onselectstart=null;
	document.body.style.cursor = 'default';
	//we may have changed something, remember it
	setGeometryCookie();
}

//********************  Keys for scrolling=panning  *****************************
function downkey(e)
{
    var keynum;
    var e = e ? e : window.event;
    var keynum= e.which ? e.which : e.keyCode;
	var amtToMove=10;
	var mvr=document.getElementById('mover');

	var currentTop=mvr.style.top;
	currentTop=Number(currentTop.substr(0,currentTop.length-2));
	var currentLeft=mvr.style.left;
	currentLeft=Number(currentLeft.substr(0,currentLeft.length-2));

	//left=37, up=38, right=39, down=40, pageup=33 , pagedown=34, home=36, end=35, plus=107/187, minus=109/189, 0=zoom100%
	switch (keynum) {

		case 35: //end -- treat it as move lots right
		    	amtToMove=100;
    	case 39: //arrow right
    			{/*alert("right; cur left="+currentLeft+ "new left="+(currentLeft-amtToMove)+
				" mw-mfw="+(mapWidth-mapFrameWidth)+" new left-(mw-mfw=)"+((currentLeft-amtToMove)+(mapWidth-mapFrameWidth)));*/
    			mvr.style.left= (((currentLeft-amtToMove)+(mapWidth-mapFrameWidth)>0) ? (currentLeft-amtToMove) : -(mapWidth-mapFrameWidth))+'px';
    			break;}

		case 36: //home -- treat it as move lots left
		    	amtToMove=100;
    	case 37: //arrowleft
		    	{/*alert("left; cur left="+currentLeft+ "new left="+(currentLeft+amtToMove));*/
    			mvr.style.left= (((currentLeft+amtToMove)>0) ? 0 : (currentLeft+amtToMove) )+'px';
    			break;}

    	case 34: //page down
		    	amtToMove=100;
    	case 40: //arrow down
		    	{mvr.style.top= (((currentTop-amtToMove)+(mapHeight-mapFrameHeight)>0) ? (currentTop-amtToMove) : -(mapHeight-mapFrameHeight))+'px';
		    	break;}

    	case 33: //pageup
		    	amtToMove=100;
    	case 38: //arrow up
    			{mvr.style.top= (((currentTop+amtToMove)>0) ? 0 : (currentTop+amtToMove) )+'px';
    			break;}
    			
		case 107: 
		case 187: //plus=zoom in
				zoom(1.025);
				break;
		case 109: 
		case 189: //minus=zoom out
				zoom(1/1.025);
				break;
				
		case 48: //0=original map
				zoomNone();

		default:
				//return immediately since we didn't change anything
				return false;
	}			
	//we changed something, remember it
	setGeometryCookie();
	return true;
}

//********************  scrollwheel  *****************************
function handleScrollWheel(event, delta, ctrlIsDown) {
//Scale the picture if ctrl is down, otherwise scroll up or down.
	if (ctrlIsDown) {
        if (delta < 0)
			zoom(1/1.025);
        else
			zoom(1.025);
		}
	else{
    	var amtToMove=50;
    	var mvr=document.getElementById('mover');
    
    	var currentTop=mvr.style.top;
    	currentTop=Number(currentTop.substr(0,currentTop.length-2));
		if (delta<0) {
	    	mvr.style.top= (((currentTop-amtToMove)+(mapHeight-mapFrameHeight)>0) ? (currentTop-amtToMove) : -(mapHeight-mapFrameHeight))+'px';
			}
		else {
			mvr.style.top= (((currentTop+amtToMove)>0) ? 0 : (currentTop+amtToMove) )+'px';
		}
   	}
	setGeometryCookie();

	/** Prevent default actions caused by mouse wheel.
     * That might be ugly, but we handle scrolls anyway, so don't bother here..
     */
    if (event.preventDefault)
            event.preventDefault();
	event.returnValue = false;
}

/* Getting client size and scroll width to set area for map.
   Most of the nonsense is to work for a variety of browsers. 
   Original versions of these five functions were found at 
   http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
   The general idea is to try three method found in various browsers and take the
   smallest non-zero value. However, it doesn't quite work with Firefox since
   Firefox 3 returns a value of 8 for height and that is clearly unreasonable.
   So... we adjust that problem to get something to work.
*/
function f_clientWidth() {
	return f_filterResults (
		window.innerWidth ? window.innerWidth : 0,
		document.documentElement ? document.documentElement.clientWidth : 0,
		document.body ? document.body.clientWidth : 0
	);
}
function f_clientHeight() {
	vardocEl=document.documentElement ? document.documentElement.clientHeight : 0;
	vardocEl=vardocEl>9 ? vardocEl : 0;
	return f_filterResults (
		window.innerHeight ? window.innerHeight : 0,
		vardocEl,
//		document.documentElement ? document.documentElement.clientHeight : 0,
		document.body ? document.body.clientHeight : 0
	);
}
function f_scrollLeft() {
	return f_filterResults (
		window.pageXOffset ? window.pageXOffset : 0,
		document.documentElement ? document.documentElement.scrollLeft : 0,
		document.body ? document.body.scrollLeft : 0
	);
}
function f_scrollTop() {
	return f_filterResults (
		window.pageYOffset ? window.pageYOffset : 0,
		document.documentElement ? document.documentElement.scrollTop : 0,
		document.body ? document.body.scrollTop : 0
	);
}
function f_filterResults(n_win, n_docel, n_body) {
	var n_result = n_win ? n_win : 0;
	if (n_docel && (!n_result || (n_result > n_docel)))
		n_result = n_docel;
	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

/** Event handler for mouse wheel event.
 */
function wheel(event){
	var ctrlIsDown=true;

    var delta = 0;
    if (!event) /* For IE. */
            event = window.event;
    if (event.wheelDelta) { /* IE/Opera. */
            delta = event.wheelDelta/120;
            /** In Opera 9, delta differs in sign as compared to IE.
             */
            if (window.opera)
                    delta = -delta;
    } else if (event.detail) { /** Mozilla case. */
            /** In Mozilla, sign of delta is different than in IE.
             * Also, delta is multiple of 3.
             */
            delta = -event.detail/3;
    }
    if (event.modifiers) {
        ctrlIsDown=event.modifiers & Event.CONTROL_MASK;
    }
    else {
		ctrlIsDown=event.ctrlKey;
    }

    /** If delta is nonzero, do something.
     * Basically, delta is positive if wheel was scrolled up,
     * and negative, if wheel was scrolled down.
     */
    if (delta) { handleScrollWheel(event,delta, ctrlIsDown); }
}

/********************  Geometry cookies *****************************
We set geometry information into a cookie so that we can reestablish the
geometry when the user returns after visiting one of the links the page provides.
We remember only the variable parts: 
	1&2. top/left of the mover div (mvr.style.top/left) 
	3&4. the height/width of zoomed map (mapWidth, mapHeight)
	5. Label of the "Fill window" button 
*/
function setGeometryCookie() {
	var fwbl="";
	
	//the mover div top and left
	var mvr=document.getElementById('mover');
	var currentTop=mvr.style.top;
	currentTop=currentTop ? currentTop :"0px";
	var currentLeft=mvr.style.left;
	currentLeft=currentLeft ? currentLeft :"0px";

	//note: the mapframe height and width are available from global declaration
	
	//the "Fill window" button label
	if (isAFillWindowButton)
		fwbl=document.getElementById('FillWindowButton').innerHTML;

	var cookieName=getCookieName();
	var cookieValue="" + currentTop + ";" + currentLeft + ";" + mapHeight + ";" + mapWidth + ";" + fwbl;
		//alert(cookieName+"=<"+cookieValue+">");
	//set cookie value, no expiration (means delete when browser session ends)
	Set_Cookie(cookieName, cookieValue, '');
		//alert("value=" + Get_Cookie(cookieName));
}

function getGeometryCookie() {
	var cookieName=getCookieName();
	var cookieValue=Get_Cookie(cookieName);
		//alert("name="+cookieName+"   value="+cookieValue);
	//if cookie exists, use its values to reset geometry, else stay with original
	if (cookieValue)
	{
		splitValues=cookieValue.split(";");
		//the mover div top and left
		var mvr=document.getElementById('mover');
		mvr.style.top=splitValues[0];
		mvr.style.left=splitValues[1];

		//the map size
		mapHeight=splitValues[2];
		mapWidth=splitValues[3];

		//if the FillWindowButton has the same label as the cookie, do nothing, else press the button
			//alert("cookie=" + splitValues[4] + "  FillWindowButton.innerHTML=" +document.getElementById("FillWindowButton").innerHTML);
		if (isAFillWindowButton)
    		if (document.getElementById('FillWindowButton').innerHTML!=splitValues[4]) {
    			FillWindow();
    		}

		//Call zoom with factor 1 to do the scaling 
		zoom(1);	
	}
	else {
		zoomFitWidth();
	}
return cookieValue;
}

function getCookieName(){
//we use this script for several pages as users browse, so keep information on a per page basis
//which means the name of the cookie should be the name of the page
	var sPath = window.location.pathname;
	var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
//	alert(sPage);
	return sPage;
}

//********************  Initialization  *****************************
function initial() {
	// get original sizes of map & window
		originalSizer();
	// given current sizes, maximize the display area
		windowSizer();
	// get hotspot and popup locations so we can adjust them when we zoom
		initHotspotsAndPopups();
	// The secret to success. I don't know why, but this whole shmear works only if the style is 
	// defined as other than than block and then changed to block in a script.
		document.getElementById('mapframe').style.display="block";

	// initialize for scroll wheel
	if (window.addEventListener)
	        /** DOMMouseScroll is for mozilla. */
	        window.addEventListener('DOMMouseScroll', wheel, false);
	/** IE/Opera. */
	window.onmousewheel = document.onmousewheel = wheel;

	//Initialize for keyboard
	//The EandE main pages have a template including body tag so that we can't say <body onkeydown="downkey(event);">
	//The atlas page have that onkeydown defined in its template.
	//So, the trick is to add that definition if we're running with EandE. 
	//document.onkeydown works for IE and window.onkeydown works for Mozilla(Firefox)
	document.onkeydown = downkey;
	window.onkeydown = downkey;

	//look around to see the size window we're running in and the size of our map
	window.onresize = windowSizer;
	
	//check to see if there's a "FillWindowButton" to worry about in geometry cookie processing
	isAFillWindowButton=(document.getElementById('FillWindowButton')!=null);
	//check to see if there's a "isALowellMapEthnic" overlay to handle in scaling
	isALowellMapEthnic=(document.getElementById('LowellMapEthnic')!=null);
	//check to see if there's a "isALowellMapDots" overlay to handle in scaling
	isALowellMapDots=(document.getElementById('LowellMapDots')!=null);

	//check to see if we've been here before and, if so, return geometry to its appearance then
	getGeometryCookie();
	
}

window.onload=initial;
