--- ECHO_content/js/hl_lib.js	2004/05/07 16:27:33	1.1
+++ ECHO_content/js/hl_lib.js	2004/05/18 22:30:09	1.2
@@ -36,7 +36,7 @@ function addArea(id, target_id, a_x, a_y
 
 function parseTrafo(target_id) {
     // returns Transform for given target picsize
-    var picsize = getElementSize(target_id);
+    var picsize = getElementRect(getElement(target_id));
     var trafo = new Transform();
     // subtract area offset and size
     //trafo.concat(getTranslation(new Position(-dlArea.x, -dlArea.y)));
@@ -57,10 +57,28 @@ function placeAreas() {
 	    var rect = trafo.transform(area.rect);
 	    area.pxarea = rect.getArea();
 	    maxsize = Math.max(maxsize, area.pxarea);
-	    if (area.type == "area") {
-		moveElement("i."+area.id, rect);
+	    var img = getElement("i."+area.id);
+	    if (area.type == "arrow") {
+		var pos = rect.getPosition();
+		var isize = getElementSize(img);
+		pos.x += rect.width * 0.5 - isize.width * 0.5;
+		pos.y += rect.height * 0.5 - isize.height * 0.5;
+		moveElement(img, pos);
+		if (img.layers) {
+		    // N4 grow layer for border
+		    img.resizeBy(2,2);
+		}
 	    } else {
-		moveElement("i."+area.id, rect.getPosition());
+		if (img.layers) {
+		    // N4 size transparent image for area
+		    var li = img.document.images[0];
+		    li.width = rect.width;
+		    li.height = rect.height;
+		}
+		moveElement(img, rect);
+		if (browserType.isIEWin) {
+		    highlightPair(area.id, false);
+		}
 	    }
 	}
     }
@@ -69,29 +87,56 @@ function placeAreas() {
 	area = hlAreas[a];
 	var elem = getElement("i."+area.id);
 	if (elem.style) {
-	    elem.style.zIndex = Math.round(maxsize - area.pxarea);
+	    elem.style.zIndex = getInt(maxsize - area.pxarea);
+	} else if (elem.layers) {
+	    elem.zIndex = getInt(maxsize - area.pxarea);
 	}
     }
 }
 
 function highlightPair(id, highlight) {
     // hightlights or unhighlights the link and image of id
+    //alert("highlightpair: "+id+" "+highlight);
     var area = hlAreas[id];
     var img = getElement("i."+id);
     var link = getElement("a."+id);
     if (highlight) {
-	link.style.backgroundColor = "#f08080";
+	if (link.style) {
+	    link.style.backgroundColor = "#f08080";
+	} else if (link.layers) {
+	    link.bgColor = "#f08080";
+	}
 	if (area.type == "arrow") {
-	    img.style.borderStyle = "solid";
+	    if (img.style) {
+		img.style.borderStyle = "solid";
+	    } else if (img.layers) {
+		img.bgColor = "#0000ff";
+	    }
 	} else if (area.type == "area") {
-	    img.style.background = "url(area_img)";
+	    if (img.style) {
+		img.style.background = "url(area_img)";
+	    } else if (img.layers) {
+		img.background.src = "area_img";
+	    }
 	}
     } else {
-	link.style.backgroundColor = "";
+	if (link.style) {
+	    link.style.backgroundColor = "";
+	} else if (link.layers) {
+	    link.bgColor = null;
+	}
 	if (area.type == "arrow") {
-	    img.style.borderStyle = "none";
+	    if (img.style) {
+		img.style.borderStyle = "none";
+	    } else if (img.layers) {
+		img.bgColor = null;
+	    }
 	} else if (area.type == "area") {
-	    img.style.background = "none";
+	    if (img.style) {
+		img.style.background = "url(trans_img)";
+	    } else if (img.layers) {
+		img.background.src = null;
+	    }
 	}
     }
 }
@@ -100,4 +145,18 @@ function init() {
     hlTrafos["overview"] = parseTrafo("overview");
     placeAreas();
     return null;
+}
+
+function showcoordsN4() {
+    var s = "";
+    for (var l in document.layers) {
+	if (l == "length") continue;
+	e = document.layers[l];
+	if (e) {
+	    s += " [" + e.name + "]: pageX:" + e.pageX + " pageY:" + e.pageY + " width:" + e.clip.width + " height:" + e.clip.height + " visibility:" + e.visibility + " zindex:" + e.zIndex + "<br>\n";
+	} else {
+	    s += " {" + l + "}<br>\n";
+	}
+    }
+    return s;
 }
\ No newline at end of file