<?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="runRepaintTest()">
        <script type="text/ecmascript" xlink:href="../../fast/repaint/resources/repaint.js"></script>
        <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[
        // WebKit modification: do not terminate before all create functions
        // have been called. This call, the notifyDone() below, and all calls
        // to createCalled() were added to prevent a race in which the test may
        // terminate before the final window decoration is added.
        // See <https://bugs.webkit.org/show_bug.cgi?id=21531>.
        if (window.testRunner) 
            testRunner.waitUntilDone();

        var numberOfWindows = 7;
        var createCalls = 0;

        function createCalled() {
            if (++createCalls == numberOfWindows && window.testRunner)
                testRunner.notifyDone();
        }

           //global variables for map application and navigation
           var myMapApp = new mapApp(false,undefined);
        function repaintTest() {
            //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,createCalled);
            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,createCalled);
            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");
            }
                        if (evtType == "created") {
                                createCalled();
                        }
        }
        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);
                        }
                        }
                        if (status == "created") {
                                createCalled();
                        }
        }
        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>