Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: press Ctrl-F5, Mozilla: hold down Shift while clicking Reload (or press Ctrl-Shift-R), Opera/Konqueror: press F5, Safari: hold down Shift + Alt while clicking Reload, Chrome: hold down Shift while clicking Reload.
$(function(){
	if (mw.config.get("wgCanonicalNamespace") !== "File" || 
		!mw.config.get("wgTitle").endsWith(".svg") || 
		mw.config.get("wgAction") !== "view") return; //only run when viewing svg files
		
	var styleElement, groupList;
	
	function loadInterface(){
		var imageURI = $(".fullMedia a.internal").attr("href");
		$("#ca-mapEditor").remove();
		$("#bodyContent").html('<div id="me-svg">Loading image</div><div id="me-editor" style="clear: both;"></div>');
		$("#me-svg").load(imageURI, function(responseTxt, statusTxt, xhr){
			if(statusTxt == "success"){
				loadEditor();
			}
			if(statusTxt == "error"){
				$("#me-svg").html("Could not load image");
			}
		});
	}
	
	function loadStyles(){
		styleElement = $("#me-svg svg").find("style#mapEditorStyles");
		if (styleElement.length === 0){
			$("#me-svg svg").prepend('<style type="text/css" id="mapEditorStyles"></style>');
			styleElement = $("#me-svg svg").find("style#mapEditorStyles");
			groupList = [];
		}
		else{
			var groups = styleElement.html().replace(/\/\*.*\*\//gs, "").matchAll(/((?:#[\w.\-]+,\s*)*#[\w.\-]+)\s*{\s*[^}]*?color:\s*([^;]+?)\s*(?:!important)?\s*;[^}]*?\s*}/g);
			for (var match of groups) {
				
			}
		}
	}
	
	function loadEditor(){
		$("#me-editor").html('<button id="me-add-group">Add colour group</button><table id="me-table"></table>');
		$("#me-add-group").click(addGroup);
	}
	
	function addGroup(){
		
	}
	
	var portletLink = mw.util.addPortletLink('p-cactions', '#', 'Map Editor', 'ca-mapEditor', 'Edit using Map Editor', '');
	$(portletLink).click(loadInterface);
});