<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
        <!ATTLIST svg
                xmlns:attrib CDATA #IMPLIED
                xmlns:batik CDATA #IMPLIED
        >
        <!ATTLIST text
                attrib:buttonText CDATA #IMPLIED
        >
]>
<?AdobeSVGViewer save="snapshot"?>
<svg width="100%" height="100%" viewBox="0 0 1024 700" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:attrib="http://www.carto.net/attrib" xmlns:batik="http://xml.apache.org/batik/ext" onload="init(evt)">
        <script type="text/ecmascript" xlink:href="resources/helper_functions.js"/>
        <script type="text/ecmascript" xlink:href="resources/mapApp.js"/>
        <script type="text/ecmascript" xlink:href="resources/timer.js"/>
        <script type="text/ecmascript" xlink:href="resources/window.js"/>
        <script type="text/ecmascript"><![CDATA[
       	//global variables for map application and navigation
       	var myMapApp = new mapApp(false,undefined);
        function init(evt) {
			//start a new window array in myMapApp
			myMapApp.Windows = new Array();
			//first a few styles
			var winPlaceholderStyles = {"fill":"none","stroke":"dimgray","stroke-width":1.5};
			var windowStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};
			var titlebarStyles = {"fill":"gainsboro","stroke":"dimgray","stroke-width":1};
			var statusbarStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};
			var titletextStyles = {"font-family":"Arial,Helvetica","font-size":14,"fill":"dimgray"};
			var statustextStyles = {"font-family":"Arial,Helvetica","font-size":10,"fill":"dimgray"};
			var buttonStyles = {"fill":"none","stroke":"dimgray","stroke-width":1};
			var titlebarHeight = 17;
			var statusbarHeight = 13;
			//create new window instance and add it to the Windows array with the windowId as a key
			myMapApp.Windows["navWindow"] = new Window("navWindow","Windows",220,200,800,85,true,0,80,1024,700,true,winPlaceholderStyles,windowStyles,3,false,true,"Navigation Window","Statusbar",true,true,true,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,buttonTextChange);
			myMapApp.Windows["bigWindow"] = new Window("bigWindow","Windows",700,500,50,150,true,0,80,1024,700,false,winPlaceholderStyles,windowStyles,3,true,true,"Big Window","This is a big movable window",true,true,true,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,buttonTextChange);
			myMapApp.Windows["nestedWindow"] = new Window("nestedWindow","windowMainGroupbigWindow",400,300,50,50,true,0,17,700,487,false,winPlaceholderStyles,windowStyles,3,true,true,"Nested middlesize Window","This window contains other windows",true,true,true,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,buttonTextChange);
			myMapApp.Windows["smallWindow"] = new Window("smallWindow","windowMainGroupbigWindow",200,180,350,300,true,0,17,700,487,true,winPlaceholderStyles,windowStyles,3,true,true,"Small Window","Callback function is active",true,true,true,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,windowEvents);
			myMapApp.Windows["colourPickerWindow"] = new Window("colourPickerWindow","windowMainGroupnestedWindow",220,180,0,17,true,0,17,400,287,true,winPlaceholderStyles,windowStyles,3,true,true,"Colour Picker","Changing a colour changes background",true,true,true,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,buttonTextChange);
			myMapApp.Windows["statusWindow"] = new Window("statusWindow","windowMainGroupnestedWindow",180,80,220,207,false,0,17,400,287,true,winPlaceholderStyles,windowStyles,3,true,false,"Status Window","This window is non-moveable",false,true,true,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,undefined);
			myMapApp.Windows["minimalWindow"] = new Window("minimalWindow","windowMainGroupbigWindow",150,60,1,426,false,0,0,700,500,true,winPlaceholderStyles,windowStyles,3,false,false,"","",false,false,false,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,undefined);
			myMapApp.Windows["navWindow"].appendContent("textNavWindow",true);
			myMapApp.Windows["statusWindow"].appendContent("textStatusWindow",true);
			myMapApp.Windows["smallWindow"].appendContent("textSmallWindow",true);
			myMapApp.Windows["minimalWindow"].appendContent("textMinimalWindow",true);
        }

		function windowEvents(id,evtType) {
			if (evtType == "removed") {
				alert("window with id " + id + " was removed");
			}
			if (evtType == "closed") {
				buttonTextChange(id,evtType);
				alert("window with id " + id + " was closed");
			}
			if (evtType == "opened") {
				buttonTextChange(id,evtType);
				alert("window with id " + id + " was opened");
			}
			if (evtType == "minimized") {
				alert("window with id " + id + " was minimized");
			}
			if (evtType == "maximized") {
				alert("window with id " + id + " was maximized");
			}
			if (evtType == "movedTo") {
				alert("window with id " + id + " was moved to a new position");
			}
			if (evtType == "moved") {
				statusChange("window with id " + id + " was moved to "+Math.round(myMapApp.Windows[id].transX) + ", " + Math.round(myMapApp.Windows[id].transY));
			}
			if (evtType == "moveStart") {
				statusChange("window with id " + id + " just started movement");
			}
			if (evtType == "moveEnd") {
				statusChange("window with id " + id + " just stopped movement");
			}
		}
		function openCloseWindow(id) {
			if (myMapApp.Windows[id].closed) {
				myMapApp.Windows[id].open(true);
			}
			else {
				myMapApp.Windows[id].close(true);
			}
		}
		function buttonTextChange(id,status) {
			if (status == "closed" || status == "opened") {
				var buttonText = document.getElementById("buttonText"+id);
				butText = buttonText.getAttributeNS(attribNS,"buttonText");
				if (myMapApp.Windows[id].closed) {
					buttonText.firstChild.nodeValue = "Open " + butText;
				}
				else {
					buttonText.firstChild.nodeValue = "Close " + butText;
				}
			}
        	if (id == "navWindow") {
        		if (status == "created" || status == "resized") {
        			addOrUpdateWindowDecoration(id);
        		}
        	}
		}
		function resizeNavWindow() {
			var width = 220 + Math.round(Math.random() * 100);
			var height = 220 + Math.round(Math.random() * 100);
			myMapApp.Windows["navWindow"].resize(width,height,true);
		}
        function addOrUpdateWindowDecoration(id) {
        	var myWindow = 	myMapApp.Windows[id];
        	var group = document.createElementNS(svgNS,"g");
        	var rect1 = document.createElementNS(svgNS,"rect");
        	rect1.setAttributeNS(null,"x",-15);
        	rect1.setAttributeNS(null,"y",-15);
        	rect1.setAttributeNS(null,"width",20);
        	rect1.setAttributeNS(null,"height",(myWindow.height+2));
        	rect1.setAttributeNS(null,"fill","lightsteelblue");
        	rect1.setAttributeNS(null,"stroke","none");
        	group.appendChild(rect1);
        	var rect2 = document.createElementNS(svgNS,"rect");
        	rect2.setAttributeNS(null,"x",-15);
        	rect2.setAttributeNS(null,"y",-15);
        	rect2.setAttributeNS(null,"width",(myWindow.width + 16));
        	rect2.setAttributeNS(null,"height",20);
        	rect2.setAttributeNS(null,"fill","lightsteelblue");
        	rect2.setAttributeNS(null,"stroke","none");
        	rect2.setAttributeNS(null,"id","decoGroupMinimized"+myWindow.id);
        	group.appendChild(rect2);
        	var text = document.createElementNS(svgNS,"text");
        	text.setAttributeNS(null,"x",0);
        	text.setAttributeNS(null,"y",myWindow.height-20);
        	text.setAttributeNS(null,"font-family","Arial,Helvetica");
        	text.setAttributeNS(null,"font-size",12);
        	text.setAttributeNS(null,"fill","dimgray");
        	text.setAttributeNS(null,"transform","rotate(-90,0,"+(myWindow.height-20)+")");
        	text.setAttributeNS(null,"pointer-events","none");       	
        	var textNode = document.createTextNode(myWindow.titleText);
        	text.appendChild(textNode);
        	group.appendChild(text);
        	//move buttons
        	var x = -5;
        	var curY = -5;
         	if (myWindow.closeButton) {
        		myWindow.closeButtonInstance.setAttributeNS(null,"x",x);
        		myWindow.closeButtonInstance.setAttributeNS(null,"y",curY);
        		curY += 20;
        	}
        	if (myWindow.maximizeButton) {
        		myWindow.maximizeButtonInstance.setAttributeNS(null,"x",x);
        		myWindow.maximizeButtonInstance.setAttributeNS(null,"y",curY);
        		curY += 20;
        	}
       		if (myWindow.minimizeButton) {
        		myWindow.minimizeButtonInstance.setAttributeNS(null,"x",x);
        		myWindow.minimizeButtonInstance.setAttributeNS(null,"y",curY);
        	}
        	myWindow.addWindowDecoration(group,true,"top");
        }
	]]></script>
	<defs>
		<!-- this symbol is used for the primitive button widgets -->
		<symbol id="buttonRect" overflow="visible">
			<rect x="-70" y="-10" width="140" height="20" fill="gainsboro" stroke="dimgray" stroke-width="1" />
		</symbol>
	</defs>
	<rect id="background" fill="lightgray" stroke="none" x="-5000" y="-5000" width="15000" height="15000" />
	<rect id="titlerect" fill="white" stroke="none" x="-5000" y="0" width="15000" height="80" />
	<!-- rects for indicating boundaries -->
	<rect fill="white" stroke="none" x="-5000" y="-5000" width="5000" height="15000" />
	<rect fill="white" stroke="none" x="1024" y="-5000" width="5000" height="15000" />
	<rect fill="white" stroke="none" x="-5000" y="700" width="15000" height="5000" />
	<text id="titleText" font-family="Arial,Helvetica" fill="dimgray" font-size="20px" x="10" y="30">Demonstration of the Window object</text>
	<text id="statusText" font-family="Arial,Helvetica" fill="dimgray" font-size="14px" x="10" y="50">Statustext</text>
	<text id="textNavWindow" x="10" y="25" font-family="Arial,Helvetica" fill="dimgray" font-size="14px" pointer-events="none" display="none">This window should<tspan x="10" dy="16">contain navigation tools</tspan><tspan x="10" dy="22">Click on button</tspan><tspan x="10" dy="16">'Resize Navigation Window' for a</tspan><tspan x="10" dy="16">random resize of this Window</tspan><tspan x="10" dy="22">Note that this window also</tspan><tspan x="10" dy="16">features a window decoration</tspan></text>
	<text id="textStatusWindow" x="10" y="40" font-family="Arial,Helvetica" fill="dimgray" font-size="14px" pointer-events="none" display="none">This is a none-moveable<tspan x="10" dy="16">none-closeable status</tspan><tspan x="10" dy="16">window</tspan></text>
	<text id="textSmallWindow" x="10" y="40" font-family="Arial,Helvetica" fill="dimgray" font-size="14px" pointer-events="none" display="none">This window has a callback<tspan x="10" dy="16">function indicating mouse</tspan><tspan x="10" dy="16">movements in the statusbar</tspan><tspan x="10" dy="16">and alerting window</tspan><tspan x="10" dy="16">events</tspan></text>
	<text id="textMinimalWindow" x="5" y="16" font-family="Arial,Helvetica" fill="dimgray" font-size="12px" pointer-events="none" display="none">This is a minimal window<tspan x="5" dy="16">without title and status bar.</tspan><tspan x="5" dy="16">it is also not moveable</tspan></text>
	<!-- primitive buttons for opening and closing windows -->
	<use x="480" y="20" xlink:href="#buttonRect" onclick="openCloseWindow('navWindow')"/>
	<text id="buttonTextnavWindow" font-family="Arial,Helvetica" fill="dimgray" text-anchor="middle" font-size="11px" attrib:buttonText="Navigation Window" x="480" y="25" pointer-events="none">Close Navigation Window</text>
	<use x="630" y="20" xlink:href="#buttonRect" onclick="openCloseWindow('bigWindow')"/>
	<text id="buttonTextbigWindow" font-family="Arial,Helvetica" fill="dimgray" text-anchor="middle" font-size="11px" attrib:buttonText="Big Window" x="630" y="25" pointer-events="none">Close Big Window</text>
	<use x="780" y="20" xlink:href="#buttonRect" onclick="openCloseWindow('nestedWindow')"/>
	<text id="buttonTextnestedWindow" font-family="Arial,Helvetica" fill="dimgray" text-anchor="middle" font-size="11px" attrib:buttonText="Middlesize Window" x="780" y="25" pointer-events="none">Close Middlesize Window</text>
	<use x="930" y="20" xlink:href="#buttonRect" onclick="openCloseWindow('colourPickerWindow')"/>
	<text id="buttonTextcolourPickerWindow" font-family="Arial,Helvetica" fill="dimgray" text-anchor="middle" font-size="11px" attrib:buttonText="Colour Picker" x="930" y="25" pointer-events="none">Close Colour Picker</text>
	<use x="930" y="50" xlink:href="#buttonRect" onclick="openCloseWindow('smallWindow')"/>
	<text id="buttonTextsmallWindow" font-family="Arial,Helvetica" fill="dimgray" text-anchor="middle" font-size="11px" attrib:buttonText="Small Window" x="930" y="55" pointer-events="none">Close Small Window</text>
	<use x="480" y="50" xlink:href="#buttonRect" onclick="resizeNavWindow()"/>
	<text id="buttonTextResizeNavWindow" font-family="Arial,Helvetica" fill="dimgray" text-anchor="middle" font-size="11px" attrib:buttonText="Resize Navigation Window" x="480" y="55" pointer-events="none">Resize Navigation Window</text>
</svg>