javaScriptMain="""
//"
var Selection;
var Coords;
var Arrows;
var Red;
var Img;
var state, p1, p2;

// fixing Array.push
if (! Array.prototype.push) {
    Array.prototype.push = function(val) {
	this[this.length] = val;
    }
}

function Init() {
	Selection = -1;
	state = 0;
	Coords = new Array();
	Red = new getObj("red");
	Img = new getObj("overview");
	installHandlers();
}

function calcX(obj) {
	if (!obj) { obj = this.obj };
	var curleft = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			curleft += obj.offsetLeft;
			obj = obj.offsetParent;
			};
		}
	else if (obj.x) { curleft += obj.x; };
	return curleft;
}

function calcY(obj) {
	if (!obj) { obj = this.obj };
	var curtop = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) { 
			curtop += obj.offsetTop;
			obj = obj.offsetParent;
			};
		}
	else if (obj.y) { curtop += obj.y; };
	return curtop;
}

function getObj(name) {
	if (document.getElementById) {
		this.obj = document.getElementById(name);
		this.style = document.getElementById(name).style;
		}
 	else if (document.all) {
		this.obj = document.all[name];
		this.style = document.all[name].style;
		}
 	else if (document.layers) {
		this.obj = document.layers[name];
		this.style = document.layers[name];
		};
	this.getX = calcX;
	this.getY = calcY;
	this.x = this.getX();
	this.y = this.getY();
	this.w = this.obj.offsetWidth;
	this.h = this.obj.offsetHeight;
	this.area = this.w * this.h;
}

function ShowRedFrame(spot, img, fx, fy, fw, fh) {
	with (spot.style) {
		left = img.x + fx * img.w;
		top  = img.y + fy * img.h;
		width  = fw * img.w;
		height = fh * img.h;
		visibility = 'visible';
		};
}

function ShowArrow(spot, img, fx, fy, fw, fh) {
	with (spot.style) {
		left = img.x + fx * img.w - 0.5 * width;
		top  = img.y + fy * img.h - 0.5 * height;
		//width  = fw * img.w;
		//height = fh * img.h;
		visibility = 'visible';
		};
}

function NoRedFrame(spot) {
	with (spot.style) {
		left   = 0;
		top    = 0;
		width  = 0;
		height = 0;
		visibility = 'hidden';
		};
}


function Point(event) {
    var x, y;
    if (event) {
	// Netscape
	x = parseInt(event.pageX);
	y = parseInt(event.pageY);
    } else {
	// IE4
	x = parseInt(window.event.clientX);
	y = parseInt(window.event.clientY);
    }
    this.pageX = x;
    this.pageY = y;
    this.x = this.pageX - parseInt(Img.x);
    this.y = this.pageY - parseInt(Img.y);
    return this;
}

function DrawFrame() { 
	with (red_div.style) {
		left = Math.min(p1.x, p2.x) + Img.x;
		top = Math.min(p1.y, p2.y) + Img.y; 
		width  = Math.abs(p1.x - p2.x);
		height = Math.abs(p1.y - p2.y);
		visibility = 'visible';
		};
}

function CoordsStr() {
	var imW = Img.w;
	var imH = Img.h;
	var cx = Math.min(p1.x,  p2.x)/imW;
	var cy = Math.min(p1.y,  p2.y)/imH;
	var cw = Math.abs(p1.x - p2.x)/imW;
	var ch = Math.abs(p1.y - p2.y)/imH;
	return (
		cx.toFixed(4) + ',' +
		cy.toFixed(4) + ',' +
		cw.toFixed(4) + ',' +
		ch.toFixed(4) );
}

function Move(event) {
	p2 = new Point(event);
	DrawFrame();
}	
		
function Click(event) {
	if (state == 0) {
		state = 1;
		p1 = new Point(event);
		p2 = p1;
		red_div.obj.addEventListener("mousemove", Move, true);		
		Img.obj.addEventListener("mousemove", Move, true);		
	} else {
		state = 0;
		p2 = new Point(event);
		red_div.obj.removeEventListener("mousemove", Move, true);		
		Img.obj.removeEventListener("mousemove", Move, true);		
	}
	DrawFrame();
	document.form.coordstr.value = CoordsStr();
}
		
function Coord(name, element, cx, cy, cw, ch) {
// berechnet aus DIGLIB Koordinaten (0.0 - 1.0) Pixel-Koordinaten relativ zum tag "element"
	var OW = element.obj.offsetWidth;
	var OH = element.obj.offsetHeight;
	this.element = element;
	this.link = new getObj(name);
	this.linkname = name;
	this.linkstyle = this.link.style;
	this.cx = cx;
	this.cy = cy;
	this.cw = cw;
	this.ch = ch;
	this.x = cx * OW;
	this.y = cy * OH;
	this.w = cw * OW;
	this.h = ch * OH;
	this.area = this.h * this.w;
return this;
}	

function inCoords(coord, p) {
// liegt Punkt "p" im Rechteckfeld "coord"?
with (coord) {
	return (
		(p.x >= x) && 
		(p.y >= y) && 
		(p.x <= x + w) && 
		(p.y <= y + h)); 
	};
}

function Highlight(coords, nr, high) {
// selektiert/delektiert Rechteckfeld und Link im Array "coords", Index "nr"
if (nr == -1) { NoRedFrame(Red); return };
with (coords[nr]) {
	if (high) { 
		ShowRedFrame(Red, element, cx, cy, cw, ch);
		linkstyle.backgroundColor = '#f08080';
		}
	else {	linkstyle.backgroundColor = ''; };
	};
}
				
function getCoords(event, element, coords) {
// "mousemove" event handler; berechnet kleinstes Rechteckfeld unter dem Mauszeiger 
// setzt "Selection" als Index in das Array "coords"
var p = new Point(event, element);
var AR = element.area;
var i = 0;
	Highlight(coords, Selection, false); // unselect last index
	Selection = -1;
	while (i < coords.length) {
		var coord = coords[i];
		if (inCoords(coord, p)) {
			var ar = coord.area;
			if (ar < AR) { AR = ar; Selection = i };
			}
		i += 1;
		};
	Highlight(coords, Selection, true);  // select new index
}

function Link() {
// Datensatz des selektierten Rechteckfelds in den Browser laden
	if (Selection != -1) {
		window.location.href = Coords[Selection].linkname;
		};
}


function onMouseMove(event) { 
	getCoords(event, Img, Coords); 
}

function getElement(name) {
    var e;
    if (document.getElementById) {
	e = document.getElementById(name);
    } else if (document.all) {
	e = document.all[name];
    } else if (document.layers) {
	e = document.layers[name];
    };
    return e;
}

function highlightImg(name, highlight) {
    var e = getElement(name);
    //alert("highlight: "+e+" = "+highlight);
    if (highlight) {
	e.border = 2;
    } else {
	e.border = 0;
    }
}

function highlightPair(name, highlight) {
    var img = getElement("i."+name);
    var link = getElement(name);
    if (highlight) {
	img.border = 1;
	link.style.backgroundColor = '#f08080';
    } else {
	img.border = 0;
	link.style.backgroundColor = '';
    }
}


"""

javaHandler="""
function installHandlers() { 
%s
	if (Img.obj.addEventListener) {
	    // event handler fuer Img installieren
	    Img.obj.addEventListener("mousemove", onMouseMove, true);		
	    Img.obj.addEventListener("mousedown", Link, true);		
	    // event handler fuer Red installieren
	    Red.obj.addEventListener("mousemove", onMouseMove, true);		
	    Red.obj.addEventListener("mousedown", Link, true);
	} else {
	    //Img.obj.captureEvents(Event.MOUSEMOVE);
	    Img.obj.onmousemove = onMouseMove;
	    //Red.obj.captureEvents(Event.MOUSEMOVE);
	    Red.obj.onmousemove = onMouseMove;
	}
};
"""