Index: other-projects/nz-flag-design/trunk/main-form/choose-canvas.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/choose-canvas.html	(revision 29951)
+++ other-projects/nz-flag-design/trunk/main-form/choose-canvas.html	(revision 29952)
@@ -77,5 +77,6 @@
         var flagCanvasSettings = { width: 800, height: 400,
 	                           backgroundColor: "#000066",
-	                           colourPots: colourPotSwatch.slice(0,3)
+	                           colourPots: colourPotSwatch.slice(0,3),
+				   modified: true
 	                         };
 	var isoCountryCode = null;
Index: other-projects/nz-flag-design/trunk/main-form/enter-name.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/enter-name.html	(revision 29951)
+++ other-projects/nz-flag-design/trunk/main-form/enter-name.html	(revision 29952)
@@ -14,5 +14,5 @@
 	  class="demo-page" 
 	  data-dom-cache="true" 
-	  data-prev="iterative-design">
+	  data-prev="iterative-design-jsp">
 
       <div data-role="content">	  
Index: other-projects/nz-flag-design/trunk/main-form/iterative-design-jsp.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/iterative-design-jsp.html	(revision 29952)
+++ other-projects/nz-flag-design/trunk/main-form/iterative-design-jsp.html	(revision 29952)
@@ -0,0 +1,386 @@
+<!DOCTYPE html>  
+<html id="story">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+
+	<!-- jQuery -->
+	<script src="lib/jquery-1.11.1.min.js"></script>
+
+	<script src="../similarity-2d/js-lib/Colour.js"></script>
+	<script src="../similarity-2d/flag-processing.js"></script>
+
+        <title>Iterative Design</title>	
+    </head>
+
+    <body>
+        <div data-role="page" id="iterative-design-page" 
+            class="demo-page" 
+            data-dom-cache="true" 
+            data-prev="choose-palette"
+	    data-next="enter-name">
+
+            <div data-role="content">
+                <div data-role="controlgroup" class="control" data-mini="true">        	
+                    <a href="#" class="next right-button test-fwd" 
+		       style="right:1%;" onclick="saveSVGAndPNGAsFiles()"></a>
+                    <a href="#" class="prev left-button idea-back" style="left:1%;"></a>
+                </div>
+
+                <div class="story-page">
+
+                    <!-- put custom content here -->  
+                    <span class="left story-icon research" ></span>
+                    <h2 id="iterative-design-header">Iterative Design</h2>
+
+                    <div style="padding-top: 10px;">
+                        <div id="side-by-side">
+                            <ol>
+
+                                <li>
+                                    <h2><span>2D Design</span></h2>
+                                    <div id="design-2d-div" >
+                                        <iframe style="width: 100%; height: 100%"
+                                        id="design-2d-iframe" ></iframe>
+                                    </div>
+                                </li>
+
+<% if ((request.getParameter("imageSimilarity") != null) && (request.getParameter("imageSimilarity").equals("1"))) { %>
+                                <li>
+                                    <h2><span title="Compare with world flags: click to open/close">World Flags Comparison</span></h2>
+
+                                    <div id="similarity-2d-div">
+                                        <iframe src="../similarity-2d/display-flags.jsp" 
+                                        style="width: 100%; height: 100%"
+                                        id="similarity-2d-iframe" ></iframe>
+                                    </div>
+                                </li>
+                                <li>
+                                    <h2><span title="Compare with alternative NZ flag designs: click to open/close">Alternative NZ Flags Designs</span></h2>
+
+                                    <div id="similarity-2d-nz-div">
+                                        <iframe src="../similarity-2d/display-flags.jsp?imagesDir=import-nz&mode=nz" 
+                                        style="width: 100%; height: 100%"
+                                        id="similarity-2d-nz-iframe" ></iframe>
+                                    </div>
+                                </li>
+<% } %>
+
+
+                                <li>
+                                    <h2><span title="Click to Open/Close">Render 3D</span></h2>
+                                    <div id="render-3d-div">
+                                        <iframe src="../render-3d/flag.html" 
+                                        style="width: 100%; height: 100%; overflow: hidden;"
+                                        id="render-3d-iframe" ></iframe>
+                                    </div>
+                                </li>
+
+                            </ol>
+                        </div>
+                    </div>
+
+                    <!-- end of putting custom content -->		
+
+                </div> <!-- end story-page-->
+            </div><!-- /content -->
+
+            <script>
+                var activatedAccordion      = false;
+                var activatedSVGEditorFrame = false;
+
+                function savePNGAsFile(imgType, quality) {    
+		    console.log("savePNGAsFile()")            
+                    var design_frame = document.getElementById('design-2d-iframe');
+                    var svgCanvas = design_frame.contentWindow.svgCanvas;
+                    var svgedit = design_frame.contentWindow.svgedit;
+
+                    var mimeType = 'image/' + imgType.toLowerCase();
+                    var svg_str = svgCanvas.svgCanvasToString();
+
+                    var type = imgType || 'PNG';
+                    if (!$('#export_canvas').length) {
+                        $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
+                    }
+                    var c = $('#export_canvas')[0];
+                    c.width = svgCanvas.contentW;
+                    c.height = svgCanvas.contentH;
+
+                    canvg(c, svg_str, {renderCallback: function() {
+                        var dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
+                        var datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType);
+
+                        // Look up jsession id; if not present fall back to use a timestamp
+                        var jsession_id = $.cookie('JSESSIONID') || new Date().getTime();
+                        //var jsession_id = $.cookie('JSESSIONID') + "-" + new Date().getTime(); // quick hack for summer scholarship presentation day
+
+                        console.log("jsession id = " + jsession_id);
+                        var imageFilename = "flag-" + jsession_id + ".png";
+
+                        $.ajax({
+                            type: "POST",
+                            url: "../design-2d/image-data-to-file.jsp",
+                            data: { imageData: datauri, imageFilename: imageFilename },
+                            success: function() { 
+                                console.log("savePNGAsFile() succeeded");
+                                var render_frame = document.getElementById('render-3d-iframe');
+                                // trigger a reload in the 3D Flag Renderer
+                                render_frame.contentWindow.createFlag(imageFilename); 
+                            }
+                        });
+                    }});
+                }
+
+                function exportPNG() {
+                    var design_frame = document.getElementById('design-2d-iframe')
+                    var str = design_frame.contentWindow.svgEditor.uiStrings.notification.loadingImage;
+
+                    var exportWindow = window.open(
+                        'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
+                        'svg-edit-exportWindow'
+                    );
+
+                    design_frame.contentWindow.svgCanvas.rasterExport("PNG", null, exportWindow.name);
+                }
+		
+		function saveSVGAsFile()
+		{
+		    console.log("saveSVGAsFile()")
+                    var design_frame = document.getElementById('design-2d-iframe');
+                    var svgCanvas = design_frame.contentWindow.svgCanvas;
+                    //var svgedit = design_frame.contentWindow.svgedit;
+
+                    var svg_str = svgCanvas.svgCanvasToString();
+
+                    // Look up jsession id; if not present fall back to use a timestamp
+                    var jsession_id = $.cookie('JSESSIONID') || new Date().getTime();
+                    //var jsession_id = $.cookie('JSESSIONID') + "-" + new Date().getTime(); // quick hack for summer scholarship presentation day
+
+                    console.log("jsession id = " + jsession_id);
+                    var svgFilename = "flag-" + jsession_id + ".svg";
+
+                    $.ajax({
+                            type: "POST",
+                            url: "../design-2d/svg-data-to-file.jsp",
+                            data: { svgData: svg_str, svgFilename: svgFilename },
+                            success: function() { 
+                                console.log("saveSVGAsFile() succeeded");
+                            }
+                        });
+
+		}
+
+
+		function saveSVGAndPNGAsFiles()
+		{
+		  saveSVGAsFile();
+		  savePNGAsFile("PNG",null);
+		}
+
+                function reconfigureSvgCanvas(settings) {
+                    //console.log("*** entered reconfigureSvgCanvas");
+                    //console.log("*** settings: background=" + settings.backgroundColor);
+                    //console.log("*** settings: w x h = " + settings.width + " x " + settings.height);
+
+                    var design_frame = document.getElementById('design-2d-iframe');
+                    var svgCanvas = design_frame.contentWindow.svgCanvas;
+                    var svgedit = design_frame.contentWindow.svgedit;
+
+                    // Set the new canvas size
+                    svgCanvas.setResolution(settings.width, settings.height);
+
+                    var widthVar = settings.width;
+                    var heightVar = settings.height;
+
+                    var canvasWidth = svgCanvas.getResolution().w;
+                    var canvasHeight = svgCanvas.getResolution().h;
+
+                    var userBackground = settings.backgroundColor;
+
+                    // decide if this is the first time we're looking to set the background colour
+                    // or not.  If it is, then use svgCanvas API to create a suitable layer
+
+                    var backRectSvg = svgCanvas.getElem('backgroundRectangle');
+
+                    if (backRectSvg == null) {
+                        svgCanvas.createLayer("background");
+
+                        svgCanvas.addSvgElementFromJson({
+                            "element": "rect",
+                            "attr": {
+                                "id": "backgroundRectangle",
+                                "width": canvasWidth,
+                                "height": canvasHeight,
+                                "x": "0",
+                                "y": "0",
+                                "fill": userBackground,
+                                "opacity": "1.0",
+                                "stroke-opacity": "0",
+                                "stroke-linecap": "null",
+                                "stroke-linejoin": "null",
+                                "stroke-dasharray": "null",
+                                "stroke-width": "5",
+                                "stroke": "#000000"
+                            },
+                            "curStyles": true
+                        });
+                        svgCanvas.setCurrentLayerPosition(0);
+
+                        // Refresh the canvas layers
+                        svgCanvas.identifyLayers();
+                    }
+                    else {
+                        console.log("Background to flag already exists -- changing colour to: " + userBackground);
+                        backRectSvg.setAttributeNS(null,"fill",userBackground);
+                        // find out how to change width and height directly also?
+
+                        console.log("Setting background width and height to: " + widthVar + " and " + heightVar);
+
+                        backRectSvg.setAttributeNS(null,"width",canvasWidth);
+                        backRectSvg.setAttributeNS(null,"height",canvasHeight);
+
+                        //svgCanvas.setResolution(backgroundWidth, backgroundHeight);
+                    }      
+                    // Centres the canvas (somewhat)
+                    //svgCanvas.updateCanvas(100, 100);
+
+                }
+
+
+		function rankFlags() {
+		  console.log("rankFlags()");
+
+		  // Get a message up on the screen to the similarity calculation is on its way
+		  var $iframe = $('#similarity-2d-iframe').contents();
+
+		  var $flagArea     = $iframe.find('#flagArea');
+		  var $progressArea = $iframe.find('#progressArea');
+
+         	  $progressArea.find('span:first').text("Comparing new flag with existing flags from around the world");
+	          $progressArea.slideDown();
+                  var $progressBar  = $iframe.find('#progressBar');
+
+
+		  setTimeout(function() {
+  		    // Compute colour histogram for user drawn flag
+		    var imageCanvas = document.getElementById('export_canvas');
+		    var context = imageCanvas.getContext('2d');
+		    var imageData = context.getImageData(0,0, imageCanvas.width, imageCanvas.height);
+
+		    var outputArray = createHSLHistogramFromCanvasData(imageData,imageCanvas.width,imageCanvas.height,16);
+
+		    // Now compare this colour histogram with the stored ones, updating the progress bar as we go
+
+
+		    calcSimilarityValues(outputArray, $flagArea,$progressArea,$progressBar);
+		  
+		    // And finally reorder them based on this
+		    sortFlagsBySimilarityValue($iframe)
+
+	            $progressArea.slideUp();
+		  }, 500);
+		}
+
+                function activateAccordion() {
+                    console.log("activateAccordion()");
+
+                    var la_x_dim = $(window).width() * 0.70;
+                    var la_y_dim = $(window).height() * 0.67;
+
+                    $('#side-by-side').show(10, 
+		      function() { 
+                        $('#side-by-side')
+                          .liteAccordion({ theme : 'stitch', // 'light',
+                                rounded         : true,
+                                //responsive      : true,
+                                containerWidth  : la_x_dim,
+                                containerHeight : la_y_dim,
+                                onTriggerSlide : function() {
+                                    console.log("onTriggerSlide: this = " + this);
+                                    console.log("onTriggerSlide: id = " + this[0].id);
+                                    if (this[0].id == "similarity-2d-div") {
+                                        console.log("Triggering flag similarity comparison");
+                                        savePNGAsFile("PNG",null);
+
+		                        setTimeout(rankFlags, 1000);
+
+                                    }
+                                    if (this[0].id == "render-3d-div") {
+                                        console.log("Triggering SVG-Editor exportPNG()");
+                                        savePNGAsFile("PNG",null);
+                                    }
+                                }
+                            });
+		    });
+                }
+
+                function activateSVGEditor() {
+                    console.log("activateSVGEditor()");
+                    //$('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html?noStorageOnLoad=1");
+                    $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html");
+                    $('#design-2d-iframe').load(function() {
+                        console.log("*** loaded svg iframe: " + this);
+
+                        var design_frame = document.getElementById('design-2d-iframe');
+                        var svgCanvas = design_frame.contentWindow.svgCanvas;
+
+                        console.log("*** svgCanvas should now be initialised: " + svgCanvas);
+                        //don't load the previous drawing!
+                        reconfigureSvgCanvas(flagCanvasSettings);
+
+       		        //if (typeof flagCanvasSettings !== 'undefined') {
+		        setTimeout(function() {
+		          //console.log("**** design frame = " + design_frame);
+		          //console.log("**** design frame content window = " + design_frame.contentWindow);
+		          design_frame.contentWindow.setSVGEditorColourPalette(flagCanvasSettings);
+		        }, 1500); // used to be 500
+
+		        //}
+                    });
+                }
+
+                $(document).on("pageload",function(event,data){
+                    console.log( "Iterative Design Page: jquerymobile pageload()");
+                    if (!activatedAccordion) {
+                        activateAccordion();	    
+                        activatedAccordion = true;
+                    }
+                });
+
+                $(window).resize(function() {
+                    var la_x_dim = $(window).width() * 0.70;
+                    var la_y_dim = $(window).height() * 0.67;
+
+		    if ($('#side-by-side').liteAccordion) {
+                      $('#side-by-side')
+                      .liteAccordion('resize', {
+                          containerWidth  : la_x_dim,
+                          containerHeight : la_y_dim
+                      });
+		    }
+                });
+
+                $(document).on("pagebeforeshow",function(event,data) {
+                    var active_page = $.mobile.activePage.attr("id");
+                    console.log("Iterative-Design fielding Event: pagebeforeshow() for page " + active_page);
+
+                    if (active_page == "iterative-design-page") {
+                        if (!activatedSVGEditorFrame) {
+                            activateSVGEditor();
+                            activatedSVGEditorFrame = true;
+                        }
+                        else {                
+                            reconfigureSvgCanvas(flagCanvasSettings);   
+                            var design_frame = document.getElementById('design-2d-iframe');
+		            design_frame.contentWindow.setSVGEditorColourPalette(flagCanvasSettings);
+                        }
+                    }
+		    //console.log("***!!! returning 'false' for event");
+		    //return false;
+
+                });
+            </script>
+
+        </div><!-- /page -->
+    </body>
+</html>
Index: other-projects/nz-flag-design/trunk/main-form/iterative-design.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/iterative-design.html	(revision 29951)
+++ 	(revision )
@@ -1,388 +1,0 @@
-<!DOCTYPE html>  
-<html id="story">
-    <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	
-        <meta name="viewport" content="width=device-width, initial-scale=1"/>
-
-	<!-- jQuery -->
-	<script src="lib/jquery-1.11.1.min.js"></script>
-
-	<script src="../similarity-2d/js-lib/Colour.js"></script>
-	<script src="../similarity-2d/flag-processing.js"></script>
-
-        <title>Iterative Design</title>	
-    </head>
-
-    <body>
-        <div data-role="page" id="iterative-design-page" 
-            class="demo-page" 
-            data-dom-cache="true" 
-            data-prev="choose-palette"
-	    data-next="enter-name">
-
-            <div data-role="content">
-                <div data-role="controlgroup" class="control" data-mini="true">        	
-                    <a href="#" class="next right-button test-fwd" 
-		       style="right:1%;" onclick="saveSVGAndPNGAsFiles()"></a>
-                    <a href="#" class="prev left-button idea-back" style="left:1%;"></a>
-                </div>
-
-                <div class="story-page">
-
-                    <!-- put custom content here -->  
-                    <span class="left story-icon research" ></span>
-                    <h2 id="iterative-design-header">Iterative Design</h2>
-
-                    <div style="padding-top: 10px;">
-                        <div id="side-by-side">
-                            <ol>
-
-                                <li>
-                                    <h2><span>2D Design</span></h2>
-                                    <div id="design-2d-div" >
-                                        <iframe style="width: 100%; height: 100%"
-                                        id="design-2d-iframe" ></iframe>
-                                    </div>
-                                </li>
-<!--
-
-< % if ((request.getParameter("imageSimilarity") != null) && (request.getParameter("imageSimilarity").equals("1"))) { % >
-                                <li>
-                                    <h2><span title="Compare with world flags: click to open/close">World Flags Comparison</span></h2>
-
-                                    <div id="similarity-2d-div">
-                                        <iframe src="../similarity-2d/display-flags.jsp" 
-                                        style="width: 100%; height: 100%"
-                                        id="similarity-2d-iframe" ></iframe>
-                                    </div>
-                                </li>
-                                <li>
-                                    <h2><span title="Compare with alternative NZ flag designs: click to open/close">Alternative NZ Flags Designs</span></h2>
-
-                                    <div id="similarity-2d-nz-div">
-                                        <iframe src="../similarity-2d/display-flags.jsp?imagesDir=import-nz&mode=nz" 
-                                        style="width: 100%; height: 100%"
-                                        id="similarity-2d-nz-iframe" ></iframe>
-                                    </div>
-                                </li>
-< % } % >
--->
-
-
-                                <li>
-                                    <h2><span title="Click to Open/Close">Render 3D</span></h2>
-                                    <div id="render-3d-div">
-                                        <iframe src="../render-3d/flag.html" 
-                                        style="width: 100%; height: 100%; overflow: hidden;"
-                                        id="render-3d-iframe" ></iframe>
-                                    </div>
-                                </li>
-
-                            </ol>
-                        </div>
-                    </div>
-
-                    <!-- end of putting custom content -->		
-
-                </div> <!-- end story-page-->
-            </div><!-- /content -->
-
-            <script>
-                var activatedAccordion      = false;
-                var activatedSVGEditorFrame = false;
-
-                function savePNGAsFile(imgType, quality) {    
-		    console.log("savePNGAsFile()")            
-                    var design_frame = document.getElementById('design-2d-iframe');
-                    var svgCanvas = design_frame.contentWindow.svgCanvas;
-                    var svgedit = design_frame.contentWindow.svgedit;
-
-                    var mimeType = 'image/' + imgType.toLowerCase();
-                    var svg_str = svgCanvas.svgCanvasToString();
-
-                    var type = imgType || 'PNG';
-                    if (!$('#export_canvas').length) {
-                        $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
-                    }
-                    var c = $('#export_canvas')[0];
-                    c.width = svgCanvas.contentW;
-                    c.height = svgCanvas.contentH;
-
-                    canvg(c, svg_str, {renderCallback: function() {
-                        var dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
-                        var datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType);
-
-                        // Look up jsession id; if not present fall back to use a timestamp
-                        var jsession_id = $.cookie('JSESSIONID') || new Date().getTime();
-                        //var jsession_id = $.cookie('JSESSIONID') + "-" + new Date().getTime(); // quick hack for summer scholarship presentation day
-
-                        console.log("jsession id = " + jsession_id);
-                        var imageFilename = "flag-" + jsession_id + ".png";
-
-                        $.ajax({
-                            type: "POST",
-                            url: "../design-2d/image-data-to-file.jsp",
-                            data: { imageData: datauri, imageFilename: imageFilename },
-                            success: function() { 
-                                console.log("savePNGAsFile() succeeded");
-                                var render_frame = document.getElementById('render-3d-iframe');
-                                // trigger a reload in the 3D Flag Renderer
-                                render_frame.contentWindow.createFlag(imageFilename); 
-                            }
-                        });
-                    }});
-                }
-
-                function exportPNG() {
-                    var design_frame = document.getElementById('design-2d-iframe')
-                    var str = design_frame.contentWindow.svgEditor.uiStrings.notification.loadingImage;
-
-                    var exportWindow = window.open(
-                        'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
-                        'svg-edit-exportWindow'
-                    );
-
-                    design_frame.contentWindow.svgCanvas.rasterExport("PNG", null, exportWindow.name);
-                }
-		
-		function saveSVGAsFile()
-		{
-		    console.log("saveSVGAsFile()")
-                    var design_frame = document.getElementById('design-2d-iframe');
-                    var svgCanvas = design_frame.contentWindow.svgCanvas;
-                    //var svgedit = design_frame.contentWindow.svgedit;
-
-                    var svg_str = svgCanvas.svgCanvasToString();
-
-                    // Look up jsession id; if not present fall back to use a timestamp
-                    var jsession_id = $.cookie('JSESSIONID') || new Date().getTime();
-                    //var jsession_id = $.cookie('JSESSIONID') + "-" + new Date().getTime(); // quick hack for summer scholarship presentation day
-
-                    console.log("jsession id = " + jsession_id);
-                    var svgFilename = "flag-" + jsession_id + ".svg";
-
-                    $.ajax({
-                            type: "POST",
-                            url: "../design-2d/svg-data-to-file.jsp",
-                            data: { svgData: svg_str, svgFilename: svgFilename },
-                            success: function() { 
-                                console.log("saveSVGAsFile() succeeded");
-                            }
-                        });
-
-		}
-
-
-		function saveSVGAndPNGAsFiles()
-		{
-		  saveSVGAsFile();
-		  savePNGAsFile("PNG",null);
-		}
-
-                function reconfigureSvgCanvas(settings) {
-                    //console.log("*** entered reconfigureSvgCanvas");
-                    //console.log("*** settings: background=" + settings.backgroundColor);
-                    //console.log("*** settings: w x h = " + settings.width + " x " + settings.height);
-
-                    var design_frame = document.getElementById('design-2d-iframe');
-                    var svgCanvas = design_frame.contentWindow.svgCanvas;
-                    var svgedit = design_frame.contentWindow.svgedit;
-
-                    // Set the new canvas size
-                    svgCanvas.setResolution(settings.width, settings.height);
-
-                    var widthVar = settings.width;
-                    var heightVar = settings.height;
-
-                    var canvasWidth = svgCanvas.getResolution().w;
-                    var canvasHeight = svgCanvas.getResolution().h;
-
-                    var userBackground = settings.backgroundColor;
-
-                    // decide if this is the first time we're looking to set the background colour
-                    // or not.  If it is, then use svgCanvas API to create a suitable layer
-
-                    var backRectSvg = svgCanvas.getElem('backgroundRectangle');
-
-                    if (backRectSvg == null) {
-                        svgCanvas.createLayer("background");
-
-                        svgCanvas.addSvgElementFromJson({
-                            "element": "rect",
-                            "attr": {
-                                "id": "backgroundRectangle",
-                                "width": canvasWidth,
-                                "height": canvasHeight,
-                                "x": "0",
-                                "y": "0",
-                                "fill": userBackground,
-                                "opacity": "1.0",
-                                "stroke-opacity": "0",
-                                "stroke-linecap": "null",
-                                "stroke-linejoin": "null",
-                                "stroke-dasharray": "null",
-                                "stroke-width": "5",
-                                "stroke": "#000000"
-                            },
-                            "curStyles": true
-                        });
-                        svgCanvas.setCurrentLayerPosition(0);
-
-                        // Refresh the canvas layers
-                        svgCanvas.identifyLayers();
-                    }
-                    else {
-                        console.log("Background to flag already exists -- changing colour to: " + userBackground);
-                        backRectSvg.setAttributeNS(null,"fill",userBackground);
-                        // find out how to change width and height directly also?
-
-                        console.log("Setting background width and height to: " + widthVar + " and " + heightVar);
-
-                        backRectSvg.setAttributeNS(null,"width",canvasWidth);
-                        backRectSvg.setAttributeNS(null,"height",canvasHeight);
-
-                        //svgCanvas.setResolution(backgroundWidth, backgroundHeight);
-                    }      
-                    // Centres the canvas (somewhat)
-                    //svgCanvas.updateCanvas(100, 100);
-
-                }
-
-
-		function rankFlags() {
-		  console.log("rankFlags()");
-
-		  // Get a message up on the screen to the similarity calculation is on its way
-		  var $iframe = $('#similarity-2d-iframe').contents();
-
-		  var $flagArea     = $iframe.find('#flagArea');
-		  var $progressArea = $iframe.find('#progressArea');
-
-         	  $progressArea.find('span:first').text("Comparing new flag with existing flags from around the world");
-	          $progressArea.slideDown();
-                  var $progressBar  = $iframe.find('#progressBar');
-
-
-		  setTimeout(function() {
-  		    // Compute colour histogram for user drawn flag
-		    var imageCanvas = document.getElementById('export_canvas');
-		    var context = imageCanvas.getContext('2d');
-		    var imageData = context.getImageData(0,0, imageCanvas.width, imageCanvas.height);
-
-		    var outputArray = createHSLHistogramFromCanvasData(imageData,imageCanvas.width,imageCanvas.height,16);
-
-		    // Now compare this colour histogram with the stored ones, updating the progress bar as we go
-
-
-		    calcSimilarityValues(outputArray, $flagArea,$progressArea,$progressBar);
-		  
-		    // And finally reorder them based on this
-		    sortFlagsBySimilarityValue($iframe)
-
-	            $progressArea.slideUp();
-		  }, 500);
-		}
-
-                function activateAccordion() {
-                    console.log("activateAccordion()");
-
-                    var la_x_dim = $(window).width() * 0.70;
-                    var la_y_dim = $(window).height() * 0.67;
-
-                    $('#side-by-side').show(10, 
-		      function() { 
-                        $('#side-by-side')
-                          .liteAccordion({ theme : 'stitch', // 'light',
-                                rounded         : true,
-                                //responsive      : true,
-                                containerWidth  : la_x_dim,
-                                containerHeight : la_y_dim,
-                                onTriggerSlide : function() {
-                                    console.log("onTriggerSlide: this = " + this);
-                                    console.log("onTriggerSlide: id = " + this[0].id);
-                                    if (this[0].id == "similarity-2d-div") {
-                                        console.log("Triggering flag similarity comparison");
-                                        savePNGAsFile("PNG",null);
-
-		                        setTimeout(rankFlags, 1000);
-
-                                    }
-                                    if (this[0].id == "render-3d-div") {
-                                        console.log("Triggering SVG-Editor exportPNG()");
-                                        savePNGAsFile("PNG",null);
-                                    }
-                                }
-                            });
-		    });
-                }
-
-                function activateSVGEditor() {
-                    console.log("activateSVGEditor()");
-                    //$('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html?noStorageOnLoad=1");
-                    $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html");
-                    $('#design-2d-iframe').load(function() {
-                        console.log("*** loaded svg iframe: " + this);
-
-                        var design_frame = document.getElementById('design-2d-iframe');
-                        var svgCanvas = design_frame.contentWindow.svgCanvas;
-
-                        console.log("*** svgCanvas should now be initialised: " + svgCanvas);
-                        //don't load the previous drawing!
-                        reconfigureSvgCanvas(flagCanvasSettings);
-
-       		        //if (typeof flagCanvasSettings !== 'undefined') {
-		        setTimeout(function() {
-		          //console.log("**** design frame = " + design_frame);
-		          //console.log("**** design frame content window = " + design_frame.contentWindow);
-		          design_frame.contentWindow.setSVGEditorColourPalette(flagCanvasSettings);
-		        }, 500);
-
-		        //}
-                    });
-                }
-
-                $(document).on("pageload",function(event,data){
-                    console.log( "Iterative Design Page: jquerymobile pageload()");
-                    if (!activatedAccordion) {
-                        activateAccordion();	    
-                        activatedAccordion = true;
-                    }
-                });
-
-                $(window).resize(function() {
-                    var la_x_dim = $(window).width() * 0.70;
-                    var la_y_dim = $(window).height() * 0.67;
-
-		    if ($('#side-by-side').liteAccordion) {
-                      $('#side-by-side')
-                      .liteAccordion('resize', {
-                          containerWidth  : la_x_dim,
-                          containerHeight : la_y_dim
-                      });
-		    }
-                });
-
-                $(document).on("pagebeforeshow",function(event,data) {
-                    var active_page = $.mobile.activePage.attr("id");
-                    console.log("Iterative-Design fielding Event: pagebeforeshow() for page " + active_page);
-
-                    if (active_page == "iterative-design-page") {
-                        if (!activatedSVGEditorFrame) {
-                            activateSVGEditor();
-                            activatedSVGEditorFrame = true;
-                        }
-                        else {                
-                            reconfigureSvgCanvas(flagCanvasSettings);   
-                            var design_frame = document.getElementById('design-2d-iframe');
-		            design_frame.contentWindow.setSVGEditorColourPalette(flagCanvasSettings);
-                        }
-                    }
-		    //console.log("***!!! returning 'false' for event");
-		    //return false;
-
-                });
-            </script>
-
-        </div><!-- /page -->
-    </body>
-</html>
