// Use jsGraphics library to outline a selected map shape. The selected area is designated by the DOM
// ID, and is an area tag element with a coords parameter defining the pixel locations of the 
// shape. jsGraphics object must be named jg1.
function outline1(id)
{	
	var x = new Array();
	var y = new Array();
	var j = 0;
	
	if (document.getElementById(id))
	{
		points = document.getElementById(id).coords.split(",", 140);
	
		for (var i = 0; i < points.length; i = i + 2)
		{
			x[j] = Number(points[i]);
			y[j] = Number(points[i+1]);
			j++;
		}

		jg1.clear();
		jg1.setColor("red");
		jg1.setStroke(1);
		jg1.drawPolygon(x, y);
		jg1.paint();
	}
}

//Like outline1, but jsGraphics object must be named jg2, and draws thick line which is outside
// the polygon id
function outline2(id)
{	
	var x = new Array();
	var y = new Array();
	var thickness = 2;
	var j = 0;
	
	if (document.getElementById(id))
	{
		points = document.getElementById(id).coords.split(",", 140);
		xmid = mid(points, 0);
		ymid = mid(points, 1);

	for (var i = 0; i < points.length; i = i + 2)
		{
			if (Number(points[i]) < xmid)
			{
				x[j] = Number(points[i]) - thickness;
			}
			else
			{
				x[j] = Number(points[i]) + 1;
			}
			if (Number(points[i+1]) < ymid)
			{
				y[j] = Number(points[i+1]) - thickness;
			}
			else
			{
				y[j] = Number(points[i+1]) + 1;
			}
			j++;
		}
		jg2.clear();
		jg2.setColor("black");
		jg2.setStroke(thickness);
		if (x.length > 2)
		{
			jg2.drawPolygon(x, y);
		}
		jg2.paint();
	}
}

//Find midpoint of values in points which is an array of x,y integer data pairs. Look in points 
// beginning at index start (0 for x, 1 for y) and skip every other element in points.
function mid(points, start)
{
	var pointmin = 32000;
	var pointmax = -32000;
	
	if (start < 0 || start > points.length)
	{
		return false;
	}

	for (var i = start; i < points.length; i = i + 2)
	{
		pointmin = Math.min(pointmin, points[i]);
		pointmax = Math.max(pointmax, points[i]);
	}

	return (pointmin + pointmax) / 2;
}