var imgIndex = -1;
var timeoutId = 0;
var theWidth = 0;
var nScaleFactor = screen.deviceXDPI / screen.logicalXDPI; 
desiredTextWidth = desiredTextWidth * nScaleFactor;

if (navigator.appName != "Netscape")
{
window.onload = setUp;
theScript = "http://kids-learn.org/scripts/coloredgif.php";
document.writeln('<DIV align=center id="CLICK" STYLE="position: absolute;top:0px; left:0px;font-weight:bold;visibility:hidden;width:'+desiredTextWidth+'">'+flashMessage+'</DIV>');
document.writeln('<img src="'+theScript+'?'+rectTopColor+'" id="blue1" STYLE="visibility:hidden; position:absolute;top:0px; left:0px"  WIDTH="1" HEIGHT="1">');
document.writeln('<img src="'+theScript+'?'+rectLeftColor+'" id="blue2" STYLE="visibility:hidden; position:absolute;top:0px; left:0px"  WIDTH="1" HEIGHT="1">');
document.writeln('<img src="'+theScript+'?'+rectBottomColor+'" id="blue3" STYLE="visibility:hidden; position:absolute;top:0px; left:0px"  WIDTH="1" HEIGHT="1">');
document.writeln('<img src="'+theScript+'?'+rectRightColor+'" id="blue4" STYLE="visibility:hidden; position:absolute;top:0px; left:0px"  WIDTH="1" HEIGHT="1">');
}

function setUp () {
if (navigator.appName == "Netscape") {return;}
for (i=0; i<  document.all.tags("MAP")(0).areas.length; i++) {
document.all.tags("MAP")(0).areas(i).onmouseover=moveIt;
document.all.tags("MAP")(0).areas(i).onmouseout=clearIt;
}

// find the correct IMG
for (i=0; i < document.all.tags("IMG").length; i++) {
if (document.all.tags("IMG")(i).src.indexOf(imgName) > -1) imgIndex = i;
}
theWidth = document.all.CLICK.clientWidth;
}

function moveIt () {
if (navigator.appName == "Netscape") {return;}
coords = window.event.srcElement.coords.split(",");
x1 = parseInt(coords[0]) / nScaleFactor;
y1 = parseInt(coords[1]) / nScaleFactor;
x2 = parseInt(coords[2]) / nScaleFactor;
y2 = parseInt(coords[3]) / nScaleFactor;
if (x1==0) {return;}
document.all.CLICK.style.posLeft =  document.all.tags("IMG")(imgIndex).offsetLeft+x1+(x2-x1-theWidth)/2;
document.all.CLICK.style.posTop=  document.all.tags("IMG")(imgIndex).offsetTop+y2+5;
document.all.CLICK.style.visibility = "visible";
document.all.CLICK.style.color = flashFgColor1;
flashIt();

// top border
document.all.blue1.height = 2;
document.all.blue1.style.posLeft =    document.all.tags("IMG")(imgIndex).offsetLeft+x1;
document.all.blue1.width = x2-x1;
document.all.blue1.style.posTop =  document.all.tags("IMG")(imgIndex).offsetTop+y1;
document.all.blue1.style.visibility="visible";

// left border
document.all.blue2.height =  y2-y1;
document.all.blue2.style.posLeft =    document.all.tags("IMG")(imgIndex).offsetLeft+x1;
document.all.blue2.width = 2;
document.all.blue2.style.posTop =    document.all.tags("IMG")(imgIndex).offsetTop+y1;
document.all.blue2.style.visibility="visible";

// bottom border
document.all.blue3.height = 2;
document.all.blue3.style.posLeft =    document.all.tags("IMG")(imgIndex).offsetLeft+x1;
document.all.blue3.width = x2-x1;
document.all.blue3.style.posTop =    document.all.tags("IMG")(imgIndex).offsetTop+y2;
document.all.blue3.style.visibility="visible";

// right border
document.all.blue4.height = y2-y1;
document.all.blue4.style.posLeft =    document.all.tags("IMG")(imgIndex).offsetLeft+x2;
document.all.blue4.width = 2;
document.all.blue4.style.posTop =    document.all.tags("IMG")(imgIndex).offsetTop+y1;
document.all.blue4.style.visibility="visible";
}


function clearIt () {
if (navigator.appName == "Netscape") {return;}
document.all.CLICK.style.visibility = "hidden";
document.all.blue1.style.visibility = "hidden";
document.all.blue2.style.visibility = "hidden";
document.all.blue3.style.visibility = "hidden";
document.all.blue4.style.visibility = "hidden";
clearTimeout(timeoutId);
}

function flashIt ()
{
if (document.all.CLICK.style.color == flashFgColor1)
	{
	document.all.CLICK.style.color = flashFgColor2;
	document.all.CLICK.style.backgroundColor = flashBgColor2;
	timeoutId = setTimeout("flashIt()",250);
	return;
	}
if (document.all.CLICK.style.color == flashFgColor2)
	{
	document.all.CLICK.style.color = flashFgColor1;
	document.all.CLICK.style.backgroundColor = flashBgColor1;
	timeoutId = setTimeout("flashIt();",250);
	return;
	}
}


