<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
	<id>https://kiprobatt.de/w/index.php?action=history&amp;feed=atom&amp;title=MediaWiki%3AImageMapEditor.js</id>
	<title>MediaWiki:ImageMapEditor.js - Revision history</title>
	<link rel="self" type="application/atom+xml" href="https://kiprobatt.de/w/index.php?action=history&amp;feed=atom&amp;title=MediaWiki%3AImageMapEditor.js"/>
	<link rel="alternate" type="text/html" href="https://kiprobatt.de/w/index.php?title=MediaWiki:ImageMapEditor.js&amp;action=history"/>
	<updated>2026-08-21T14:47:14Z</updated>
	<subtitle>Revision history for this page on the wiki</subtitle>
	<generator>MediaWiki 1.35.7</generator>
	<entry>
		<id>https://kiprobatt.de/w/index.php?title=MediaWiki:ImageMapEditor.js&amp;diff=1669&amp;oldid=prev</id>
		<title>Simon Stier: update from testwiki</title>
		<link rel="alternate" type="text/html" href="https://kiprobatt.de/w/index.php?title=MediaWiki:ImageMapEditor.js&amp;diff=1669&amp;oldid=prev"/>
		<updated>2021-07-22T16:40:01Z</updated>

		<summary type="html">&lt;p&gt;update from testwiki&lt;/p&gt;
&lt;a href=&quot;https://kiprobatt.de/w/index.php?title=MediaWiki:ImageMapEditor.js&amp;amp;diff=1669&amp;amp;oldid=1447&quot;&gt;Show changes&lt;/a&gt;</summary>
		<author><name>Simon Stier</name></author>
	</entry>
	<entry>
		<id>https://kiprobatt.de/w/index.php?title=MediaWiki:ImageMapEditor.js&amp;diff=1447&amp;oldid=prev</id>
		<title>Simon Stier: import form testwiki.kiprobatt.de</title>
		<link rel="alternate" type="text/html" href="https://kiprobatt.de/w/index.php?title=MediaWiki:ImageMapEditor.js&amp;diff=1447&amp;oldid=prev"/>
		<updated>2021-06-23T11:51:39Z</updated>

		<summary type="html">&lt;p&gt;import form testwiki.kiprobatt.de&lt;/p&gt;
&lt;p&gt;&lt;b&gt;New page&lt;/b&gt;&lt;/p&gt;&lt;div&gt;/*&lt;br /&gt;
	Copyright (c) 2007-2013 Peter Schlömer&lt;br /&gt;
&lt;br /&gt;
	Released under the following licenses (to make reuse in other Wikis&lt;br /&gt;
	easier):&lt;br /&gt;
&lt;br /&gt;
	GNU General Public License (GPL), version 2&lt;br /&gt;
	GNU Free Documentatin Licence (GFDL), version 1.2 or later&lt;br /&gt;
	Creative Commons Attribution ShareAlike (CC-by-sa), version 2 or later&lt;br /&gt;
*/&lt;br /&gt;
&lt;br /&gt;
// Compatibility layer for old versions of MediaWiki&lt;br /&gt;
if (mw === undefined) mw = {};&lt;br /&gt;
if (mw.config === undefined) mw.config = {};&lt;br /&gt;
if (mw.config.get === undefined) {&lt;br /&gt;
	mw.config.get = function(key) {&lt;br /&gt;
		this[key];&lt;br /&gt;
	};&lt;br /&gt;
}&lt;br /&gt;
if (mw.loader === undefined) mw.loader = {};&lt;br /&gt;
if (mw.loader.load === undefined) mw.loader.load = importScriptURI;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Constants&lt;br /&gt;
*/&lt;br /&gt;
&lt;br /&gt;
var IME_BASE = '//imagemapedit.toolforge.org/';&lt;br /&gt;
&lt;br /&gt;
var IME_TEMPLATE = IME_BASE + 'template.php';&lt;br /&gt;
var IME_TRANSLATIONS = IME_BASE + 'translations.php?lang=' + mw.config.get('wgUserLanguage');&lt;br /&gt;
&lt;br /&gt;
// Scripts to create the circle and polygon images&lt;br /&gt;
var IME_CIRCLESCRIPT = IME_BASE + 'circle.php';&lt;br /&gt;
var IME_POLYSCRIPT = IME_BASE + 'poly.php';&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Imports&lt;br /&gt;
*/&lt;br /&gt;
&lt;br /&gt;
// Default error message, will be overwritten if translation is loaded&lt;br /&gt;
var ime_translations = new Array();&lt;br /&gt;
ime_translations['error_imagenotfound'] = 'ImageMapEdit: Could not find image in page structure.';&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Global variables&lt;br /&gt;
*/&lt;br /&gt;
var ime_areas = Array();&lt;br /&gt;
var ime_currentlyEditing = -1;&lt;br /&gt;
var ime_width;&lt;br /&gt;
var ime_height;&lt;br /&gt;
var ime_scale;&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Start Initialization if this is an image page and there actually is an image&lt;br /&gt;
*/&lt;br /&gt;
$(document).ready(function(){&lt;br /&gt;
	// Determine whether we are on an image page. Namespace must be 6 and action view&lt;br /&gt;
	if (mw.config.get('wgNamespaceNumber')==6 &amp;amp;&amp;amp; mw.config.get('wgAction')=='view') {&lt;br /&gt;
		// If we can a div with id file, we initialize&lt;br /&gt;
		if (document.getElementById('file')) {&lt;br /&gt;
			mw.loader.load(IME_TEMPLATE);&lt;br /&gt;
			mw.loader.load(IME_TRANSLATIONS);&lt;br /&gt;
			ime_init1();&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
});&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Create a new div element object with an id.&lt;br /&gt;
*/&lt;br /&gt;
function ime_htmlNewDiv(id) {&lt;br /&gt;
	var div = document.createElement('div');&lt;br /&gt;
	if (id) div.id = id;&lt;br /&gt;
	return div;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Initialization, part 1: Tries to find image and uses a XMLHttpRequest&lt;br /&gt;
	to download information about the image. When this is done (it's an&lt;br /&gt;
	asynchronous request) show a link to load the rest of ImageMapEdit&lt;br /&gt;
	using ime_init2().&lt;br /&gt;
*/&lt;br /&gt;
function ime_init1() {&lt;br /&gt;
	var divFile = document.getElementById('file');&lt;br /&gt;
	if (!divFile) {&lt;br /&gt;
		ime_error(ime_translations['error_imagenotfound'] + ' (ime_init1,divFile=null)');&lt;br /&gt;
		return;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var a = ime_findATag(divFile);&lt;br /&gt;
	if (!a) {&lt;br /&gt;
		ime_error(ime_translations['error_imagenotfound'] + ' (ime_init1,a=null)');&lt;br /&gt;
		return;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var img = a.firstChild;&lt;br /&gt;
	if (!img) {&lt;br /&gt;
		ime_error(ime_translations['error_imagenotfound'] + ' (ime_init1,img=null)');&lt;br /&gt;
		return;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var url = mw.config.get('wgScriptPath') + '/api.php?format=json&amp;amp;action=query&amp;amp;prop=imageinfo&amp;amp;iiprop=size&amp;amp;titles=' + mw.config.get('wgPageName');&lt;br /&gt;
&lt;br /&gt;
	$.get(url, function(data) {&lt;br /&gt;
		if( typeof data.query.pages != &amp;quot;undefined&amp;quot; ) {&lt;br /&gt;
	        	imageProperties = data.query.pages[Object.keys(data.query.pages)[0]];&lt;br /&gt;
			ime_width = imageProperties.imageinfo[0].width;&lt;br /&gt;
			ime_height = imageProperties.imageinfo[0].height;&lt;br /&gt;
&lt;br /&gt;
			ime_scale = img.width/ime_width;&lt;br /&gt;
&lt;br /&gt;
			// Show 'show ImageMapEdit' button now&lt;br /&gt;
			var a = document.createElement('a');&lt;br /&gt;
			a.id = 'imeLink';&lt;br /&gt;
			a.href = 'javascript:ime_init2()';&lt;br /&gt;
			a.style.display = 'block';&lt;br /&gt;
			a.appendChild(document.createTextNode('ImageMapEdit &amp;gt;'));&lt;br /&gt;
			document.getElementById('file').appendChild(a);&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Initialization, part 2: Triggered by an external link. Does some moving&lt;br /&gt;
	around of the image in the logical structure of the page, then hides the&lt;br /&gt;
	link and finally puts the HTML code in place.&lt;br /&gt;
*/&lt;br /&gt;
function ime_init2() {&lt;br /&gt;
&lt;br /&gt;
	// Remove UI that might interfere with this code&lt;br /&gt;
	ime_removeOtherUIElements();&lt;br /&gt;
&lt;br /&gt;
	var divFile = document.getElementById('file');&lt;br /&gt;
	var tempNode = divFile.firstChild;&lt;br /&gt;
	var a = ime_findATag(tempNode);&lt;br /&gt;
	var img = a.firstChild;&lt;br /&gt;
&lt;br /&gt;
	var divImeContainer = ime_htmlNewDiv('imeContainer');&lt;br /&gt;
	divImeContainer.style.position = 'relative';&lt;br /&gt;
&lt;br /&gt;
	// Move image from within link to outside&lt;br /&gt;
	a.removeChild(img);&lt;br /&gt;
	divFile.insertBefore(divImeContainer,tempNode);&lt;br /&gt;
	divFile.removeChild(tempNode);&lt;br /&gt;
	// Fix for rtl wikis, thanks to hewiki user &amp;quot;קיפודנחש&amp;quot;&lt;br /&gt;
	divFile.style.direction = 'ltr';&lt;br /&gt;
&lt;br /&gt;
	img.id = 'imeImg';&lt;br /&gt;
	img.style.zIndex = 99;&lt;br /&gt;
	img.style.border = 'none';&lt;br /&gt;
	img.style.opacity = '0.75';&lt;br /&gt;
	img.style.filter = 'alpha(opacity=75)'; // IE&lt;br /&gt;
&lt;br /&gt;
	// Internet Explorer needs this differently&lt;br /&gt;
	if (typeof(navigator.userAgent) != 'undefined' &amp;amp;&amp;amp; navigator.userAgent.match('/MSIE/')) {&lt;br /&gt;
		divImeContainer.style.overflow = 'none';&lt;br /&gt;
	}&lt;br /&gt;
	else {&lt;br /&gt;
		divImeContainer.style.overflow = 'auto';&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var divImePreview = ime_htmlNewDiv('imePreview');&lt;br /&gt;
	divImePreview.style.position = 'absolute';&lt;br /&gt;
	divImePreview.style.top = '0';&lt;br /&gt;
	divImePreview.style.left = '0';&lt;br /&gt;
	divImePreview.style.width = img.width + 'px';&lt;br /&gt;
	divImePreview.style.height = img.height + 'px';&lt;br /&gt;
	divImePreview.zIndex = 0;&lt;br /&gt;
&lt;br /&gt;
	divImeContainer.appendChild(divImePreview);&lt;br /&gt;
	divImeContainer.appendChild(img);&lt;br /&gt;
&lt;br /&gt;
	var divIme = ime_htmlNewDiv('ime');&lt;br /&gt;
	divFile.appendChild(divIme);&lt;br /&gt;
&lt;br /&gt;
	// Hide the link now&lt;br /&gt;
	document.getElementById('imeLink').style.display = 'none';&lt;br /&gt;
&lt;br /&gt;
	// Disable image context menu so right click can be used for events&lt;br /&gt;
	img.oncontextmenu = ime_eventDummy;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
	divIme.innerHTML = ime_templateHtml;&lt;br /&gt;
&lt;br /&gt;
	// Translate texts&lt;br /&gt;
	ime_translate();&lt;br /&gt;
//A button gets created. On click, it gets the input from the #imeResult ID and posts it on the '/ImageMap' page. &lt;br /&gt;
//After posting, it forwards the user to the '/ImageMap' page.&lt;br /&gt;
var clicked = false;&lt;br /&gt;
var btn = document.createElement(&amp;quot;button&amp;quot;);&lt;br /&gt;
btn.innerHTML = &amp;quot;Speichern&amp;quot;;&lt;br /&gt;
btn.onclick = function () {&lt;br /&gt;
     if ($('#imeResult').length) {&lt;br /&gt;
     clicked = false;&lt;br /&gt;
     var rep = $('#imeResult').html();&lt;br /&gt;
     var rep1 = rep.replaceAll(&amp;quot;&amp;lt;br&amp;gt;&amp;quot;,&amp;quot;\n&amp;quot;);&lt;br /&gt;
     var rep2 = rep1.replaceAll(&amp;quot;&amp;amp;lt;&amp;quot;,&amp;quot;&amp;lt;&amp;quot;);&lt;br /&gt;
     var rep3 = rep2.replaceAll(&amp;quot;&amp;amp;gt;&amp;quot;,&amp;quot;&amp;gt;&amp;quot;);&lt;br /&gt;
     var finalstr = '{{ImageMap |map='+rep3+' }}'&lt;br /&gt;
     var params = {&lt;br /&gt;
		action: 'edit',&lt;br /&gt;
		title: $('#firstHeading').text()+'/ImageMap',&lt;br /&gt;
		text: finalstr,&lt;br /&gt;
		format: 'json'&lt;br /&gt;
	},&lt;br /&gt;
	api = new mw.Api();&lt;br /&gt;
&lt;br /&gt;
api.postWithToken( 'csrf', params ).done( function ( data ) {&lt;br /&gt;
window.location.replace(&amp;quot;/wiki/&amp;quot; + $('#firstHeading').text() + &amp;quot;/ImageMap&amp;quot;);&lt;br /&gt;
});&lt;br /&gt;
}&lt;br /&gt;
};&lt;br /&gt;
document.getElementById(&amp;quot;file&amp;quot;).appendChild(btn);&lt;br /&gt;
&lt;br /&gt;
//A button gets created. &lt;br /&gt;
var but = document.createElement(&amp;quot;button&amp;quot;);&lt;br /&gt;
but.innerHTML = &amp;quot;Laden&amp;quot;;&lt;br /&gt;
but.onclick = function () {&lt;br /&gt;
if(!clicked){     &lt;br /&gt;
//Gets the wiki text from the '/ImageMap' page  and imports it.&lt;br /&gt;
&lt;br /&gt;
$.getJSON(&amp;quot;/w/api.php?action=query&amp;amp;prop=revisions&amp;amp;titles=&amp;quot;+$('#firstHeading').text()+&amp;quot;%2FImageMap&amp;amp;rvprop=content&amp;amp;formatversion=2&amp;amp;format=json&amp;quot;, async function(data) {&lt;br /&gt;
var daten = await data;&lt;br /&gt;
if(daten.query.pages[0].hasOwnProperty(&amp;quot;missing&amp;quot;)){&lt;br /&gt;
if(daten.query.pages[0].missing === true){&lt;br /&gt;
return;&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
var aus = daten.query.pages[0].revisions[0].content;&lt;br /&gt;
$('textarea[name=&amp;quot;importText&amp;quot;]').html(aus);&lt;br /&gt;
ime_importLines();&lt;br /&gt;
var clear = &amp;quot;&amp;quot;;&lt;br /&gt;
$('textarea[name=&amp;quot;importText&amp;quot;]').html(clear);&lt;br /&gt;
}).fail(function() {&lt;br /&gt;
    return;&lt;br /&gt;
});&lt;br /&gt;
&lt;br /&gt;
//Gets the image width and the image position from the '/ImageMap' page and updates the created ImageMap code.&lt;br /&gt;
&lt;br /&gt;
$.get(&amp;quot;/wiki/&amp;quot; + $('#firstHeading').text() + &amp;quot;/ImageMap&amp;quot;, function(data){&lt;br /&gt;
var size = $(data).find(&amp;quot;img[usemap^='#ImageMap_']&amp;quot;); &lt;br /&gt;
var imgWidth = size.attr(&amp;quot;width&amp;quot;);&lt;br /&gt;
  if($(data).find(&amp;quot;div.center&amp;quot;).length){&lt;br /&gt;
$('input#ime_imageDescription').val(imgWidth+'px'+'|zentriert');&lt;br /&gt;
ime_updateResult();&lt;br /&gt;
}else if($(data).find(&amp;quot;div.floatleft&amp;quot;).length){&lt;br /&gt;
$('input#ime_imageDescription').val(imgWidth+'px'+'|links');&lt;br /&gt;
ime_updateResult();&lt;br /&gt;
}else if($(data).find(&amp;quot;div.floatright&amp;quot;).length){&lt;br /&gt;
$('input#ime_imageDescription').val(imgWidth+'px'+'|rechts');&lt;br /&gt;
ime_updateResult();&lt;br /&gt;
}else{if(size.lenght){&lt;br /&gt;
$('input#ime_imageDescription').val(imgWidth+'px');&lt;br /&gt;
ime_updateResult();&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
}).fail(function() {&lt;br /&gt;
    return;&lt;br /&gt;
});&lt;br /&gt;
clicked = true;&lt;br /&gt;
 }&lt;br /&gt;
};&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
document.getElementById(&amp;quot;file&amp;quot;).appendChild(but);&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Translate the user interface to the specified language.&lt;br /&gt;
*/&lt;br /&gt;
function ime_translate() {&lt;br /&gt;
	if (ime_translations) {&lt;br /&gt;
		for (var i in ime_translations) {&lt;br /&gt;
			var elements = ime_getElementsByClassName('ime_t_' + i);&lt;br /&gt;
			if (elements.length &amp;gt; 0) {&lt;br /&gt;
				var text = ime_translations[i];;&lt;br /&gt;
				for (var j=0; j&amp;lt;elements.length; j++) {&lt;br /&gt;
					elements[j].innerHTML = text;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Finds all elements in the current document with the specified class.&lt;br /&gt;
*/&lt;br /&gt;
function ime_getElementsByClassName(className) {&lt;br /&gt;
	// Hopefully the browser supports this natively&lt;br /&gt;
	if (document.getElementsByClassName) {&lt;br /&gt;
		return document.getElementsByClassName(className);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Otherwise use the function defined by MediaWiki&lt;br /&gt;
	return getElementsByClassName(document,'*',className)&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Display an error message, either by putting it on the page or - if the&lt;br /&gt;
	place to put it does not exist - by showing an alert box.&lt;br /&gt;
*/&lt;br /&gt;
function ime_error(message) {&lt;br /&gt;
	var jqFile = $('#file');&lt;br /&gt;
	var jqIme = $('#ime');&lt;br /&gt;
&lt;br /&gt;
	if (jqFile.length !== 0) {&lt;br /&gt;
		var jqImeError = $('&amp;lt;p/&amp;gt;')&lt;br /&gt;
		.css({&lt;br /&gt;
			'color' : 'darkred',&lt;br /&gt;
			'background' : 'white',&lt;br /&gt;
			'border' : '1px solid darkred',&lt;br /&gt;
			'padding' : '1ex'&lt;br /&gt;
		})&lt;br /&gt;
		.text(message)&lt;br /&gt;
&lt;br /&gt;
		if (jqIme !== 0) {&lt;br /&gt;
			jqIme.before(jqImeError);&lt;br /&gt;
		} else {&lt;br /&gt;
			jqImeError.appendTo(jqFile);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
	else {&lt;br /&gt;
		window.alert(message);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Dummy function to intercept events&lt;br /&gt;
*/&lt;br /&gt;
function ime_eventDummy(e) {&lt;br /&gt;
	e.cancelBubble = true;&lt;br /&gt;
	return false;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Function to define an object containing rect(angle) coordinates.&lt;br /&gt;
*/&lt;br /&gt;
function ime_RectCoord(x1,y1,x2,y2) {&lt;br /&gt;
	this.left = x1;&lt;br /&gt;
	this.top = y1;&lt;br /&gt;
	this.right = x2;&lt;br /&gt;
	this.bottom = y2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Function to define an object containing circle coordinates.&lt;br /&gt;
*/&lt;br /&gt;
function ime_CircleCoord(x,y,r) {&lt;br /&gt;
	this.x = x;&lt;br /&gt;
	this.y = y;&lt;br /&gt;
	this.radius = r;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Function to define an object containing poly(gon) coordinates.&lt;br /&gt;
*/&lt;br /&gt;
function ime_PolyCoord(x,y,r) {&lt;br /&gt;
	this.points = Array();&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Function to define an object storing info on a clickable area for the&lt;br /&gt;
	imagemap.&lt;br /&gt;
*/&lt;br /&gt;
function ime_Area(shape) {&lt;br /&gt;
	if (shape=='rect') {&lt;br /&gt;
		this.shape = 'rect';&lt;br /&gt;
		this.coords = new ime_RectCoord(0,0,0,0);&lt;br /&gt;
	}&lt;br /&gt;
	else if (shape=='circle') {&lt;br /&gt;
		this.shape = 'circle';&lt;br /&gt;
		this.coords = new ime_CircleCoord(0,0,20);&lt;br /&gt;
	}&lt;br /&gt;
	else {&lt;br /&gt;
		this.shape = 'poly';&lt;br /&gt;
		this.coords = new ime_PolyCoord();&lt;br /&gt;
	}&lt;br /&gt;
	this.link = '';&lt;br /&gt;
	this.title = '';&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Browser invariant function to get the event &amp;quot;behind&amp;quot; the object passed&lt;br /&gt;
	to event handlers.&lt;br /&gt;
*/&lt;br /&gt;
function ime_getEvent(e) {&lt;br /&gt;
	if (e) {&lt;br /&gt;
		return e;&lt;br /&gt;
	}&lt;br /&gt;
	else {&lt;br /&gt;
		return window.event;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_eventGetX(e) {&lt;br /&gt;
	if (typeof(e.layerX)!='undefined') {&lt;br /&gt;
		return Math.round(e.layerX / ime_scale);&lt;br /&gt;
	}&lt;br /&gt;
	if (typeof(e.offsetX)!='undefined') {&lt;br /&gt;
		return Math.round(e.offsetX / ime_scale);&lt;br /&gt;
	}&lt;br /&gt;
	else {&lt;br /&gt;
		return Math.round(e.x / ime_scale);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_eventGetY(e) {&lt;br /&gt;
	if (typeof(e.layerY)!='undefined') {&lt;br /&gt;
		return Math.round(e.layerY / ime_scale);&lt;br /&gt;
	}&lt;br /&gt;
	if (typeof(e.offsetY)!='undefined') {&lt;br /&gt;
		return Math.round(e.offsetY / ime_scale);&lt;br /&gt;
	}&lt;br /&gt;
	else {&lt;br /&gt;
		return Math.round(e.y / ime_scale);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_eventGetButton(e) {&lt;br /&gt;
	if (typeof(e.which)!='undefined') {&lt;br /&gt;
		return e.which;&lt;br /&gt;
	}&lt;br /&gt;
	else {&lt;br /&gt;
		return e.button;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_mouseEventClear() {&lt;br /&gt;
	var img = document.getElementById('imeImg');&lt;br /&gt;
	img.onmousedown = null;&lt;br /&gt;
	img.style.cursor = '';&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_mouseEventSet(func) {&lt;br /&gt;
	var img = document.getElementById('imeImg');&lt;br /&gt;
	img.onmousedown = func;&lt;br /&gt;
	img.style.cursor = 'crosshair';&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_eventRect(e) {&lt;br /&gt;
	e = ime_getEvent(e);&lt;br /&gt;
	var button = ime_eventGetButton(e);&lt;br /&gt;
	if (button==1) {&lt;br /&gt;
		document.ime.areaRectLeft.value = ime_eventGetX(e);&lt;br /&gt;
		document.ime.areaRectTop.value = ime_eventGetY(e);&lt;br /&gt;
	}&lt;br /&gt;
	else if (button==2 || button==3) {&lt;br /&gt;
		document.ime.areaRectRight.value = ime_eventGetX(e);&lt;br /&gt;
		document.ime.areaRectBottom.value = ime_eventGetY(e);&lt;br /&gt;
	}&lt;br /&gt;
	ime_saveArea();&lt;br /&gt;
	return false;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_eventCircle(e) {&lt;br /&gt;
	e = ime_getEvent(e);&lt;br /&gt;
	var button = ime_eventGetButton(e);&lt;br /&gt;
	if (button==1) {&lt;br /&gt;
		document.ime.areaCircleX.value = ime_eventGetX(e);&lt;br /&gt;
		document.ime.areaCircleY.value = ime_eventGetY(e);&lt;br /&gt;
	}&lt;br /&gt;
	else if (button==2 || button==3) {&lt;br /&gt;
		var a = (ime_eventGetX(e) - parseInt(document.ime.areaCircleX.value));&lt;br /&gt;
		var b = (ime_eventGetY(e) - parseInt(document.ime.areaCircleY.value));&lt;br /&gt;
		document.ime.areaCircleRadius.value = Math.round(Math.sqrt(a*a + b*b));&lt;br /&gt;
	}&lt;br /&gt;
	ime_saveArea();&lt;br /&gt;
	return false;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_eventPoly(e) {&lt;br /&gt;
	e = ime_getEvent(e);&lt;br /&gt;
	var button = ime_eventGetButton(e);&lt;br /&gt;
	if (button==1) {&lt;br /&gt;
		area = ime_areas[ime_currentlyEditing];&lt;br /&gt;
		area.coords.points.push(ime_eventGetX(e));&lt;br /&gt;
		area.coords.points.push(ime_eventGetY(e));&lt;br /&gt;
		ime_saveArea();&lt;br /&gt;
	}&lt;br /&gt;
	return false;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_newArea(shape) {&lt;br /&gt;
	var area = new ime_Area(shape);&lt;br /&gt;
	area.shape = shape;&lt;br /&gt;
	ime_areas.push(area);&lt;br /&gt;
&lt;br /&gt;
	ime_currentlyEditing = ime_areas.length-1;&lt;br /&gt;
	ime_updateAreas();&lt;br /&gt;
	ime_editArea(ime_currentlyEditing);&lt;br /&gt;
autoComplete();&lt;br /&gt;
}&lt;br /&gt;
//Gets called by ime_newArea() and ime_editArea() functions.&lt;br /&gt;
function autoComplete(){&lt;br /&gt;
const search = document.getElementById('ime_areaLink');&lt;br /&gt;
$('#ime_areaLink').parent('div').addClass('ui-widget');&lt;br /&gt;
var firstTimeTrigger = false;&lt;br /&gt;
var firstTimeTriggerCat = false;&lt;br /&gt;
$('#ime_areaLink').parent('div').addClass('ui-autocomplete');&lt;br /&gt;
var searchPages = async (searchText, searchCat) =&amp;gt; { &lt;br /&gt;
&lt;br /&gt;
var categories;&lt;br /&gt;
 /*When the linkcategory field is empty, this code does the autocomplete in the linktarget field with all pages.*/&lt;br /&gt;
if(searchCat.length === 0){categories = [];&lt;br /&gt;
var pages;&lt;br /&gt;
 if(searchText.length === 0){&lt;br /&gt;
   pages = [];&lt;br /&gt;
 }&lt;br /&gt;
 else{&lt;br /&gt;
 const res = await fetch('/w/api.php?action=pfautocomplete&amp;amp;substr='+ searchText +'&amp;amp;namespace=Main&amp;amp;format=json');&lt;br /&gt;
 pages = await res.json();&lt;br /&gt;
&lt;br /&gt;
var allTitles =  pages.pfautocomplete.map(function(item) {&lt;br /&gt;
  return item['title'];&lt;br /&gt;
});&lt;br /&gt;
&lt;br /&gt;
$( &amp;quot;#ime_areaLink&amp;quot; ).autocomplete({&lt;br /&gt;
      source: allTitles&lt;br /&gt;
    });&lt;br /&gt;
$('ul.ui-autocomplete').css('list-style', 'none');&lt;br /&gt;
if(!firstTimeTrigger){&lt;br /&gt;
firstTimeTrigger = true;&lt;br /&gt;
search.dispatchEvent(new Event('input'));&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
else{ /*When the linkcategory field is not empty, this else is called and at first it creates an autocomplete for the linkcategory field.*/&lt;br /&gt;
var get = await $.getJSON( &amp;quot;/w/api.php?action=query&amp;amp;list=allcategories&amp;amp;format=json&amp;quot;);&lt;br /&gt;
var categories = await get.query;&lt;br /&gt;
var allCategories = categories.allcategories.map(function(item) {&lt;br /&gt;
return item['*'];&lt;br /&gt;
});&lt;br /&gt;
&lt;br /&gt;
$( &amp;quot;#ime_linkCategory&amp;quot; ).autocomplete({&lt;br /&gt;
      source: allCategories&lt;br /&gt;
    });&lt;br /&gt;
$('ul.ui-autocomplete').css('list-style', 'none');&lt;br /&gt;
if(!firstTimeTriggerCat){&lt;br /&gt;
firstTimeTriggerCat = true;&lt;br /&gt;
category.dispatchEvent(new Event('input'));&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
var pages;&lt;br /&gt;
/*When the linkcategory field is not empty, this code creates an autocomplete for the linktarget field with the given category from the linkcategory field.*/&lt;br /&gt;
 if(searchText.length === 0){&lt;br /&gt;
   pages = [];&lt;br /&gt;
 }&lt;br /&gt;
 else{&lt;br /&gt;
 const res = await fetch('/w/api.php?action=pfautocomplete&amp;amp;substr='+ searchText + '&amp;amp;category='+ searchCat +'&amp;amp;namespace=Main&amp;amp;format=json');&lt;br /&gt;
 pages = await res.json();&lt;br /&gt;
&lt;br /&gt;
var allTitles =  pages.pfautocomplete.map(function(item) {&lt;br /&gt;
  return item['title'];&lt;br /&gt;
});&lt;br /&gt;
&lt;br /&gt;
$( &amp;quot;#ime_areaLink&amp;quot; ).autocomplete({&lt;br /&gt;
      source: allTitles&lt;br /&gt;
    });&lt;br /&gt;
$('ul.ui-autocomplete').css('list-style', 'none');&lt;br /&gt;
if(!firstTimeTrigger){&lt;br /&gt;
firstTimeTrigger = true;&lt;br /&gt;
search.dispatchEvent(new Event('input'));&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
search.addEventListener('input', () =&amp;gt; searchPages(search.value, category.value));&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
//This code creates the input field for the linkcategory.&lt;br /&gt;
if(!$('#ime_linkCategory').length){&lt;br /&gt;
var br = document.createElement(&amp;quot;br&amp;quot;);&lt;br /&gt;
$('#ime_areaLink').parent().append(br);&lt;br /&gt;
var lbl = document.createElement(&amp;quot;label&amp;quot;);&lt;br /&gt;
lbl.setAttribute(&amp;quot;for&amp;quot;, &amp;quot;ime_linkCategory&amp;quot;);&lt;br /&gt;
lbl.setAttribute(&amp;quot;id&amp;quot;, &amp;quot;ime_linkCategoryLabel&amp;quot;);&lt;br /&gt;
$('#ime_areaLink').parent().append(lbl);&lt;br /&gt;
var spn = document.createElement(&amp;quot;span&amp;quot;);&lt;br /&gt;
spn.setAttribute(&amp;quot;value&amp;quot;, &amp;quot;Linkkategorie&amp;quot;);&lt;br /&gt;
spn.innerHTML = 'Linkkategorie';&lt;br /&gt;
document.getElementById(&amp;quot;ime_linkCategoryLabel&amp;quot;).appendChild(spn);&lt;br /&gt;
var br1 = document.createElement(&amp;quot;br&amp;quot;);&lt;br /&gt;
$('#ime_areaLink').parent().append(br1);&lt;br /&gt;
var inpt = document.createElement(&amp;quot;INPUT&amp;quot;);&lt;br /&gt;
inpt.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;text&amp;quot;);&lt;br /&gt;
inpt.setAttribute(&amp;quot;id&amp;quot;, &amp;quot;ime_linkCategory&amp;quot;);&lt;br /&gt;
inpt.setAttribute(&amp;quot;style&amp;quot;,&amp;quot;width:10em&amp;quot;);&lt;br /&gt;
//document.getElementById(&amp;quot;ime_areaLink&amp;quot;)[0].appendChild(inpt);&lt;br /&gt;
$('#ime_areaLink').parent().append(inpt);&lt;br /&gt;
}&lt;br /&gt;
const category = document.getElementById('ime_linkCategory');&lt;br /&gt;
category.addEventListener('input', () =&amp;gt; searchPages(search.value, category.value));&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
function ime_updateAreas() {&lt;br /&gt;
	ime_updateSelectArea();&lt;br /&gt;
	ime_updateMap();&lt;br /&gt;
	ime_updateResult();&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_updateResult() {&lt;br /&gt;
	var arr = document.ime.imageDescriptionPos;&lt;br /&gt;
	var imageDescriptionPos = arr[0].value;&lt;br /&gt;
	for (var i=1; i&amp;lt;arr.length; i++) {&lt;br /&gt;
		if (arr[i].checked) {&lt;br /&gt;
			imageDescriptionPos = arr[i].value;&lt;br /&gt;
			break;&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var result = Array();&lt;br /&gt;
	result.push('&amp;lt;imagemap&amp;gt;');&lt;br /&gt;
	result.push(mw.config.get('wgPageName') + '|' + document.ime.imageDescription.value);&lt;br /&gt;
	result.push('');&lt;br /&gt;
	for (var i=0; i&amp;lt;ime_areas.length; i++) {&lt;br /&gt;
		var coords = ime_areas[i].coords;&lt;br /&gt;
		var s = '';&lt;br /&gt;
		if (ime_areas[i].shape=='rect') {&lt;br /&gt;
			s = coords.left + ' ' + coords.top + ' ' + coords.right + ' ' + coords.bottom;&lt;br /&gt;
		}&lt;br /&gt;
		else if (ime_areas[i].shape=='circle') {&lt;br /&gt;
			s = coords.x + ' ' + coords.y + ' ' + coords.radius;&lt;br /&gt;
		}&lt;br /&gt;
		else if (ime_areas[i].shape=='poly') {&lt;br /&gt;
			s = coords.points.join(' ');&lt;br /&gt;
		}&lt;br /&gt;
		result.push(ime_areas[i].shape + ' ' + s + ' [[' + ime_areas[i].link + (ime_areas[i].title ? '|' + ime_areas[i].title : '') + ']]');&lt;br /&gt;
	}&lt;br /&gt;
	result.push('');&lt;br /&gt;
	result.push('desc ' + imageDescriptionPos);&lt;br /&gt;
	result.push('&amp;lt;/imagemap&amp;gt;');&lt;br /&gt;
&lt;br /&gt;
	var preResult = document.getElementById('imeResult');&lt;br /&gt;
&lt;br /&gt;
	while (preResult.lastChild) {&lt;br /&gt;
		preResult.removeChild(preResult.lastChild);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	for (var i=0; i&amp;lt;result.length; i++) {&lt;br /&gt;
		preResult.appendChild(document.createTextNode(result[i]));&lt;br /&gt;
		preResult.appendChild(document.createElement('br'));&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_updateMap() {&lt;br /&gt;
	var preview = document.getElementById('imePreview');&lt;br /&gt;
	var img = document.getElementById('imeImg');&lt;br /&gt;
&lt;br /&gt;
	// Remove areas from map which are out of range&lt;br /&gt;
	for (var i=0; i&amp;lt;preview.childNodes.length; i++) {&lt;br /&gt;
		var child = preview.childNodes[i];&lt;br /&gt;
		var id = parseInt(child.id.substring(10));&lt;br /&gt;
		if (id&amp;gt;=ime_areas.length) {&lt;br /&gt;
			preview.removeChild(child);&lt;br /&gt;
			i--;&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	for (var i=0; i&amp;lt;ime_areas.length; i++) {&lt;br /&gt;
		// Get existing DIV&lt;br /&gt;
		var area = ime_areas[i];&lt;br /&gt;
		var div = document.getElementById('imePreview' + i);&lt;br /&gt;
&lt;br /&gt;
		// If it does not exist exists, create a new one and set style&lt;br /&gt;
		if (!div) {&lt;br /&gt;
			var div = ime_htmlNewDiv('imePreview' + i)&lt;br /&gt;
			preview.appendChild(div);&lt;br /&gt;
			div.style.zIndex = 0;&lt;br /&gt;
			div.style.position = 'absolute';&lt;br /&gt;
			div.style.opacity = 0.5;&lt;br /&gt;
			div.style.filter = 'alpha(opacity=50)';&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		var coords = area.coords;&lt;br /&gt;
		if (area.shape == 'rect') {&lt;br /&gt;
			div.className = 'previewRect';&lt;br /&gt;
			// Only if valid coordinates were given, draw&lt;br /&gt;
			if (coords.left&amp;lt;coords.right &amp;amp;&amp;amp; coords.top&amp;lt;coords.bottom) {&lt;br /&gt;
				div.style.left = Math.round(ime_scale * coords.left) + 'px';&lt;br /&gt;
				div.style.top = Math.round(ime_scale * coords.top) + 'px';&lt;br /&gt;
				div.style.width = (Math.round(ime_scale * coords.right) - Math.round(ime_scale * coords.left)) + 'px';&lt;br /&gt;
				div.style.height = (Math.round(ime_scale * coords.bottom) - Math.round(ime_scale * coords.top)) + 'px';&lt;br /&gt;
			}&lt;br /&gt;
			else {&lt;br /&gt;
				div.style.left = '0';&lt;br /&gt;
				div.style.top = '0';&lt;br /&gt;
				div.style.width = '0';&lt;br /&gt;
				div.style.height = '0';&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		else if (area.shape == 'circle') {&lt;br /&gt;
			div.className = 'previewCircle';&lt;br /&gt;
			div.style.backgroundRepeat = 'no-repeat';&lt;br /&gt;
			var left = Math.round(ime_scale * coords.x) - Math.round(ime_scale * coords.radius);&lt;br /&gt;
			var top = Math.round(ime_scale * coords.y) - Math.round(ime_scale * coords.radius);&lt;br /&gt;
			var size = Math.round(ime_scale * coords.radius * 2) + 1;&lt;br /&gt;
&lt;br /&gt;
			div.style.left = left + 'px';&lt;br /&gt;
			div.style.top = top + 'px';&lt;br /&gt;
&lt;br /&gt;
			if (left + size &amp;gt; img.width) {&lt;br /&gt;
				div.style.width = (img.width - left) + 'px';&lt;br /&gt;
			}&lt;br /&gt;
			else {&lt;br /&gt;
				div.style.width = size + 'px';&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			if (top + size &amp;gt; img.height) {&lt;br /&gt;
				div.style.height = (img.height - top) + 'px';&lt;br /&gt;
			}&lt;br /&gt;
			else {&lt;br /&gt;
				div.style.height = size + 'px';&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		else if (area.shape == 'poly') {&lt;br /&gt;
			// Determine maximum coordinates (this is how big the image is)&lt;br /&gt;
			div.className = 'previewPoly';&lt;br /&gt;
			div.style.backgroundRepeat = 'no-repeat';&lt;br /&gt;
&lt;br /&gt;
			var points = coords.points;&lt;br /&gt;
			var minX=0; var maxX=0; var minY=0; var maxY=0;&lt;br /&gt;
			if (points.length&amp;gt;0) {&lt;br /&gt;
				minX = points[0];&lt;br /&gt;
				maxX = points[0];&lt;br /&gt;
				minY = points[1];&lt;br /&gt;
				maxY = points[1];&lt;br /&gt;
				for (var j=2; j&amp;lt;points.length; j+=2) {&lt;br /&gt;
					var x = points[j];&lt;br /&gt;
					var y = points[j+1];&lt;br /&gt;
					if (x&amp;lt;minX) minX = x;&lt;br /&gt;
					if (x&amp;gt;maxX) maxX = x;&lt;br /&gt;
					if (y&amp;lt;minY) minY = y;&lt;br /&gt;
					if (y&amp;gt;maxY) maxY = y;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			div.style.left = Math.round(ime_scale * minX) + 'px';&lt;br /&gt;
			div.style.top = Math.round(ime_scale * minY) + 'px';&lt;br /&gt;
			div.style.width = (Math.round(ime_scale * maxX) - Math.round(ime_scale * minX)) + 'px';&lt;br /&gt;
			div.style.height = (Math.round(ime_scale * maxY) - Math.round(ime_scale * minY)) + 'px';&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	ime_highlightMap();&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_highlightMapCircle(div,radius,highlight) {&lt;br /&gt;
	var background = &amp;quot;url('&amp;quot; + IME_CIRCLESCRIPT + '?' + (highlight ? 'active=1&amp;amp;' : '') + 'radius=' +  Math.round(ime_scale * radius) + &amp;quot;') no-repeat&amp;quot;;&lt;br /&gt;
	if (div.style.background != background) {&lt;br /&gt;
		div.style.background = background;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_highlightMapPoly(div,points,highlight) {&lt;br /&gt;
	var minX=0; var minY=0;&lt;br /&gt;
	if (points.length&amp;gt;0) {&lt;br /&gt;
		minX = points[0];&lt;br /&gt;
		minY = points[1];&lt;br /&gt;
		for (var j=2; j&amp;lt;points.length; j+=2) {&lt;br /&gt;
			var x = points[j];&lt;br /&gt;
			var y = points[j+1];&lt;br /&gt;
			if (x&amp;lt;minX) minX = x;&lt;br /&gt;
			if (y&amp;lt;minY) minY = y;&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
	var convpoints = Array();&lt;br /&gt;
	for(var j=0; j&amp;lt;points.length; j+=2) {&lt;br /&gt;
		convpoints[j] = Math.round(ime_scale * points[j]) - Math.round(ime_scale * minX);&lt;br /&gt;
		convpoints[j+1] = Math.round(ime_scale * points[j+1]) - Math.round(ime_scale * minY);&lt;br /&gt;
	}&lt;br /&gt;
	var background = &amp;quot;url('&amp;quot; + IME_POLYSCRIPT + '?' + (highlight ? 'active=1&amp;amp;' : '') + 'coords=' + convpoints.join(&amp;quot;|&amp;quot;) + &amp;quot;') no-repeat&amp;quot;;&lt;br /&gt;
	if (div.style.background != background) {&lt;br /&gt;
		div.style.background = background;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_highlightMap() {&lt;br /&gt;
	for (var i=0; i&amp;lt;ime_areas.length; i++) {&lt;br /&gt;
		var div = document.getElementById('imePreview' + i);&lt;br /&gt;
		var area = ime_areas[i];&lt;br /&gt;
		if (div &amp;amp;&amp;amp; area) {&lt;br /&gt;
			if (i==ime_currentlyEditing) {&lt;br /&gt;
				div.style.opacity = '0.9';&lt;br /&gt;
				div.style.filter = 'alpha(opacity=90)'; // IE&lt;br /&gt;
			} else {&lt;br /&gt;
				div.style.opacity = '0.75';&lt;br /&gt;
				div.style.filter = 'alpha(opacity=75)'; // IE&lt;br /&gt;
			}&lt;br /&gt;
			if (area.shape == 'rect') {&lt;br /&gt;
				var backgroundColor = (i==ime_currentlyEditing) ? 'red' : 'black';&lt;br /&gt;
				if (div.style.backgroundColor != backgroundColor) div.style.backgroundColor = backgroundColor;&lt;br /&gt;
			}&lt;br /&gt;
			else if (area.shape == 'circle') {&lt;br /&gt;
				ime_highlightMapCircle(div,area.coords.radius,(i==ime_currentlyEditing));&lt;br /&gt;
			}&lt;br /&gt;
			else if (area.shape == 'poly') {&lt;br /&gt;
				ime_highlightMapPoly(div,area.coords.points,(i==ime_currentlyEditing));&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_updateSelectArea() {&lt;br /&gt;
	var selectArea = document.ime.area;&lt;br /&gt;
&lt;br /&gt;
	while (selectArea.childNodes.length&amp;gt;0) {&lt;br /&gt;
		selectArea.removeChild(selectArea.lastChild);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	for (var i=0; i&amp;lt;ime_areas.length; i++) {&lt;br /&gt;
		var option = document.createElement('option');&lt;br /&gt;
		var area = ime_areas[i];&lt;br /&gt;
			option.value = i;&lt;br /&gt;
		while (option.childNodes.length&amp;gt;0) {&lt;br /&gt;
			option.removeChild(option.lastChild);&lt;br /&gt;
		}&lt;br /&gt;
		var text = (area.title ? area.title : area.link) + ' [' + area.shape + ']';&lt;br /&gt;
		option.appendChild(document.createTextNode(text));&lt;br /&gt;
		if (i == ime_currentlyEditing) {&lt;br /&gt;
			option.selected = 'selected';&lt;br /&gt;
		}&lt;br /&gt;
		selectArea.appendChild(option);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_editArea(index) {&lt;br /&gt;
	document.getElementById('imeProps').style.display = 'none';&lt;br /&gt;
&lt;br /&gt;
	var area = ime_areas[index];&lt;br /&gt;
&lt;br /&gt;
	if (area) {&lt;br /&gt;
		ime_currentlyEditing = index;&lt;br /&gt;
&lt;br /&gt;
		document.getElementById('imeProps').style.display = '';&lt;br /&gt;
		document.getElementById('imePropsRect').style.display = 'none';&lt;br /&gt;
		document.getElementById('imePropsCircle').style.display = 'none';&lt;br /&gt;
		document.getElementById('imePropsPoly').style.display= 'none';&lt;br /&gt;
		ime_mouseEventClear();&lt;br /&gt;
&lt;br /&gt;
		if (area.shape == 'rect') {&lt;br /&gt;
			document.getElementById('imePropsRect').style.display = '';&lt;br /&gt;
			ime_mouseEventSet(ime_eventRect);&lt;br /&gt;
		}&lt;br /&gt;
		else if (area.shape == 'circle') {&lt;br /&gt;
			document.getElementById('imePropsCircle').style.display = '';&lt;br /&gt;
			ime_mouseEventSet(ime_eventCircle);&lt;br /&gt;
		}&lt;br /&gt;
		else if (area.shape == 'poly') {&lt;br /&gt;
			document.getElementById('imePropsPoly').style.display = '';&lt;br /&gt;
			ime_mouseEventSet(ime_eventPoly);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		document.ime.areaLink.value = area.link;&lt;br /&gt;
		document.ime.areaTitle.value = area.title;&lt;br /&gt;
&lt;br /&gt;
		var coords = area.coords;&lt;br /&gt;
		if (area.shape == 'rect') {&lt;br /&gt;
			document.ime.areaRectLeft.value = coords.left;&lt;br /&gt;
			document.ime.areaRectTop.value = coords.top;&lt;br /&gt;
			document.ime.areaRectRight.value = coords.right;&lt;br /&gt;
			document.ime.areaRectBottom.value = coords.bottom;&lt;br /&gt;
		}&lt;br /&gt;
		else if (area.shape == 'circle') {&lt;br /&gt;
			document.ime.areaCircleX.value = coords.x;&lt;br /&gt;
			document.ime.areaCircleY.value = coords.y;&lt;br /&gt;
			document.ime.areaCircleRadius.value = coords.radius;&lt;br /&gt;
		}&lt;br /&gt;
		else if (area.shape == 'poly') {&lt;br /&gt;
			var propsPolyCoords = document.getElementById('imePropsPolyCoords');&lt;br /&gt;
			if (propsPolyCoords.childNodes.length &amp;gt; 0) propsPolyCoords.removeChild(propsPolyCoords.lastChild);&lt;br /&gt;
			propsPolyCoords.appendChild(document.createTextNode(area.coords.points.join(&amp;quot;, &amp;quot;)));&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		ime_highlightMap();&lt;br /&gt;
	}&lt;br /&gt;
 autoComplete();&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_deletePolyCoords() {&lt;br /&gt;
	ime_areas[ime_currentlyEditing].coords.points = Array();&lt;br /&gt;
	ime_saveArea();&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_saveArea() {&lt;br /&gt;
	var area = ime_areas[ime_currentlyEditing];&lt;br /&gt;
	area.link = document.ime.areaLink.value;&lt;br /&gt;
	area.title = document.ime.areaTitle.value;&lt;br /&gt;
&lt;br /&gt;
	var coords = area.coords;&lt;br /&gt;
	if (area.shape=='rect') {&lt;br /&gt;
		coords.left = parseInt(document.ime.areaRectLeft.value);&lt;br /&gt;
		coords.top = parseInt(document.ime.areaRectTop.value);&lt;br /&gt;
		coords.right = parseInt(document.ime.areaRectRight.value);&lt;br /&gt;
		coords.bottom = parseInt(document.ime.areaRectBottom.value);&lt;br /&gt;
	}&lt;br /&gt;
	else if (area.shape=='circle') {&lt;br /&gt;
		if (parseInt(document.ime.areaCircleRadius.value) &amp;lt; 0) document.ime.areaCircleRadius.value = 0;&lt;br /&gt;
		coords.x = parseInt(document.ime.areaCircleX.value);&lt;br /&gt;
		coords.y = parseInt(document.ime.areaCircleY.value);&lt;br /&gt;
		coords.radius = parseInt(document.ime.areaCircleRadius.value);&lt;br /&gt;
	}&lt;br /&gt;
	else if (area.shape == 'poly') {&lt;br /&gt;
		var propsPolyCoords = document.getElementById('imePropsPolyCoords');&lt;br /&gt;
		if (propsPolyCoords.childNodes.length &amp;gt; 0) propsPolyCoords.removeChild(propsPolyCoords.lastChild);&lt;br /&gt;
		propsPolyCoords.appendChild(document.createTextNode(coords.points.join(&amp;quot;, &amp;quot;)));&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	ime_updateAreas();&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_deleteArea() {&lt;br /&gt;
	ime_mouseEventClear();&lt;br /&gt;
&lt;br /&gt;
	// Remove element from ime_areas array&lt;br /&gt;
	ime_areas.splice(ime_currentlyEditing,1);&lt;br /&gt;
&lt;br /&gt;
	// Remove preview div of the deleted area&lt;br /&gt;
	var div = document.getElementById('imePreview' + ime_currentlyEditing);&lt;br /&gt;
	if (div) {&lt;br /&gt;
		div.parentNode.removeChild(div);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Move ids of preview divs to fill the hole&lt;br /&gt;
	for (var i=ime_currentlyEditing+1; i&amp;lt;ime_areas.length; i++) {&lt;br /&gt;
		div = document.getElementById('imePreview' + i);&lt;br /&gt;
		if (div) {&lt;br /&gt;
			div.id = 'imePreview' + (i-1);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// If we deleted the last area, correct currently editing&lt;br /&gt;
	if (ime_currentlyEditing&amp;gt;=ime_areas.length) {&lt;br /&gt;
		ime_currentlyEditing = ime_areas.length-1;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	ime_updateAreas();&lt;br /&gt;
	ime_editArea(ime_currentlyEditing);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_importLines() {&lt;br /&gt;
	var text = document.ime.importText.value;&lt;br /&gt;
	var lines = text.split(&amp;quot;\n&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
	for (var i=0; i&amp;lt;lines.length; i++) {&lt;br /&gt;
		var rectMatch = /rect +(\d+) +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i;&lt;br /&gt;
		var circleMatch = /circle +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i;&lt;br /&gt;
		var polyMatch = /poly +(.*?) +\[\[([^|]*)(|(.*))?\]\]/i;&lt;br /&gt;
&lt;br /&gt;
		var line = lines[i];&lt;br /&gt;
&lt;br /&gt;
		if (rectMatch.test(line)) {&lt;br /&gt;
			var results = rectMatch.exec(line);&lt;br /&gt;
			var area = new ime_Area(&amp;quot;rect&amp;quot;);&lt;br /&gt;
			area.coords.left = parseInt(results[1]);&lt;br /&gt;
			area.coords.top = parseInt(results[2]);&lt;br /&gt;
			area.coords.right = parseInt(results[3]);&lt;br /&gt;
			area.coords.bottom = parseInt(results[4]);&lt;br /&gt;
			area.link = results[5];&lt;br /&gt;
			if (results[6]) area.title = results[6].substring(1);&lt;br /&gt;
			ime_areas.push(area);&lt;br /&gt;
		}&lt;br /&gt;
		else if (circleMatch.test(line)) {&lt;br /&gt;
			var results = circleMatch.exec(line);&lt;br /&gt;
			var area = new ime_Area(&amp;quot;circle&amp;quot;);&lt;br /&gt;
			area.coords.x = parseInt(results[1]);&lt;br /&gt;
			area.coords.y = parseInt(results[2]);&lt;br /&gt;
			area.coords.radius = parseInt(results[3]);&lt;br /&gt;
			area.link = results[4];&lt;br /&gt;
			if (results[5]) area.title = results[5].substring(1);&lt;br /&gt;
			ime_areas.push(area);&lt;br /&gt;
		}&lt;br /&gt;
		else if (polyMatch.test(line)) {&lt;br /&gt;
			var results = polyMatch.exec(line);&lt;br /&gt;
			var area = new ime_Area(&amp;quot;poly&amp;quot;);&lt;br /&gt;
			area.coords.points = results[1].replace(/ +/,&amp;quot; &amp;quot;).split(&amp;quot; &amp;quot;);&lt;br /&gt;
			for (var j=0; j&amp;lt;area.coords.points.length; j++) {&lt;br /&gt;
				area.coords.points[j] = parseInt(area.coords.points[j]);&lt;br /&gt;
			}&lt;br /&gt;
			area.link = results[2];&lt;br /&gt;
			if (results[3]) area.title = results[3].substring(1);&lt;br /&gt;
			ime_areas.push(area);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
	ime_updateAreas();&lt;br /&gt;
	ime_hideImport();&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_showImport() {&lt;br /&gt;
	$('#imeImport').show();&lt;br /&gt;
	$('#imeImportShow').hide();&lt;br /&gt;
	$('#imeImportHide').show();&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
function ime_hideImport() {&lt;br /&gt;
	$('#imeImport').hide();&lt;br /&gt;
	$('#imeImportShow').show();&lt;br /&gt;
	$('#imeImportHide').hide();&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Remove all UI elements that might interfere with ImageMapEdit.&lt;br /&gt;
*/&lt;br /&gt;
function ime_removeOtherUIElements() {&lt;br /&gt;
	// Remove all UI elements of the 'annotations' feature used on Wikimedia&lt;br /&gt;
	// Commons.&lt;br /&gt;
	$('#ImageAnnotationAddButton').remove();&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
	Try to find an &amp;lt;a&amp;gt; tag within the specified HTML document node.&lt;br /&gt;
*/&lt;br /&gt;
function ime_findATag(node) {&lt;br /&gt;
	// We just look at the first child until there is none or it is an &amp;lt;a&amp;gt; tag&lt;br /&gt;
	var a = node;&lt;br /&gt;
	while (a != null &amp;amp;&amp;amp; a.nodeName.toUpperCase() != 'A') {&lt;br /&gt;
		a = a.firstChild;&lt;br /&gt;
	}&lt;br /&gt;
	return a;&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>Simon Stier</name></author>
	</entry>
</feed>