function mapOut(e) {
	document.getElementById("popup1").cbe.hide();
}

function mapMove(e) {
	// mouse is moving on map
			document.getElementById("loctltext").cbe.hide();
			document.getElementById("smloctl").cbe.hide();			
			document.getElementById("locbltext").cbe.hide();
			document.getElementById("smlocbl").cbe.hide();			
			document.getElementById("locbrtext").cbe.hide();
			document.getElementById("smlocbr").cbe.hide();			
			document.getElementById("loctrtext").cbe.hide();
			document.getElementById("smloctr").cbe.hide();

	// get the row and column
	var x=e.pageX-moffx;
	var y=e.pageY-moffy;
	var col=Math.floor(x/tilesize);
	var row=Math.floor(y/tilesize);
	if (col>mapwidth-1) col=mapwidth-1;
	if (row>mapheight-1) row=mapheight-1;
	if (row<0) row=0;
	if (col<0) col=0;

	// popup info for that row/column
	var e1=document.getElementById("popup1").cbe;
	var inner="";
	if (map[row][col].ter!=0) {
		switch (map[row][col].ter) {
			case 1:
				inner=inner+"<b>Wall Display:</b>";
				break;
			case 2:
				inner=inner+"<b>Shelves:</b>";
				break;
			case 3:
				inner=inner+"<b>Table:</b>";
				break;
			case 4:
				inner=inner+"<b>Counter/Display:</b>";
				break;
			case 5:
				inner=inner+"<b>Have a Seat!</b>";
				break;
			case 6:
				inner=inner+"<b>Entrance</b>";
				break;
		}
		inner=inner+"<ul class='store'>";
		for (var i=0; i<numkeys;i++) {
			if ((key_row[i]==row)&&((key_col[i]==col))) {
				for (var j=0; j<numkeywords; j++) {
					if (key_wid[i]==keyw_ids[j]) {
			
						inner=inner+"<li>"+keyw_words[j];

						if (key_lid[i]!=0) {
							for (var k=0; k<numlocs; k++) {
								if (loc_ids[k]==key_lid[i]) {
									inner=inner+" ("+loc_names[k]+")";
								}
							}					
						}
						if (key_userstr[i]!='') {
							inner=inner+" ("+key_userstr[i]+")";
						}					
					}
				}
			}
		}
		inner=inner+'</ul>';
	 	e1.background(colors[map[row][col].sec]);
		e1.innerHtml(inner);
		var x=e.pageX;
		var y=e.pageY;
		if (row>((mapheight*2)/3)) {
			y=y-e1.height()-10;
		}
		else {
			y=y+10;
		}
		if (col+2>((mapwidth*2)/3)) {
			x=x-e1.width()-10;						
		}
		else {
			x=x+10;
		}		
		e1.moveTo(x,y);
		e1.show();
	}
	else {
		e1.hide();
	}
}


function setTerrain(row, col) {
 	cbeSetImage("ix"+row+"y"+col, "t" + map[row][col].ter);
 	if (map[row][col].sec!=0) {
	 	document.getElementById("dx"+row+"y"+col).cbe.background(colors[map[row][col].sec]);
	 }
}

function makeMap() {
var i=0;
var j=0;
	document.write("<div id='mapbg' class='clsCBEvr'><table border='1' cellspacing=0 cellpadding=0><tr><td><img src='mapbg.gif'>");
	document.write("</td></tr></table></div>");


	for (i=0; i<mapheight; i++) {
		for (j=0; j<mapwidth; j++) {
			document.write("<div name='dx"+i+"y"+j+"' id='dx"+i+"y"+j+"' class='clsCBEa'><img id='ix"+i+"y"+j+"' name='ix"+i+"y"+j+"' src='t0.gif' ></div>");
		}
	}

	document.write("<div name='popup1' id='popup1' class='clsCBEat'></div>");

	document.write("<div id='map' class='clsCBEa'><table border='0' cellspacing=0 cellpadding=0><tr><td width='560px' height='200px'>");
	document.write("</td></tr></table></div>");

	document.write("<div name='smlocbl' id='smlocbl' class='clsCBEa'><table background='smlocbl.gif' width='290px' height='50px'><tr><td width='35%'>&nbsp;</td><td><div name='locbltext' id='locbltext' class='clsCBEr'>You'll find that here!</div></td><td width='8%'>&nbsp;</td></tr></table></div>");
	document.write("<div name='smloctl' id='smloctl' class='clsCBEa'><table background='smloctl.gif' width='290px' height='50px'><tr><td width='35%'>&nbsp;</td><td><div name='loctltext' id='loctltext' class='clsCBEr'>You'll find that here!</div></td><td width='8%'>&nbsp;</td></tr></table></div>");
	document.write("<div name='smlocbr' id='smlocbr' class='clsCBEa'><table background='smlocbr.gif' width='290px' height='50px'><tr><td width='8%'>&nbsp;</td><td><div name='locbrtext' id='locbrtext' class='clsCBEr'>You'll find that here!</div></td><td width='35%'>&nbsp;</td></tr></table></div>");
	document.write("<div name='smloctr' id='smloctr' class='clsCBEa'><table background='smloctr.gif' width='290px' height='50px'><tr><td width='8%'>&nbsp;</td><td><div name='loctrtext' id='loctrtext' class='clsCBEr'>You'll find that here!</div></td><td width='35%'>&nbsp;</td></tr></table></div>");

	// load terrains
	cbeNewImage('t0','t0.gif',tilesize,tilesize);	// empty (grid)
	cbeNewImage('t1','t1.gif',tilesize,tilesize);	// 
	cbeNewImage('t2','t2.gif',tilesize,tilesize);	// 
	cbeNewImage('t3','t3.gif',tilesize,tilesize);	// 
	cbeNewImage('t4','t4.gif',tilesize,tilesize);	// 
	cbeNewImage('t5','t5.gif',tilesize,tilesize);	// 
	cbeNewImage('t6','t6.gif',tilesize,tilesize);	// 
}