Index: /other-projects/nz-flag-design/trunk/main-form/choose-canvas.html
===================================================================
--- /other-projects/nz-flag-design/trunk/main-form/choose-canvas.html	(revision 29739)
+++ /other-projects/nz-flag-design/trunk/main-form/choose-canvas.html	(revision 29740)
@@ -32,7 +32,7 @@
             <p>If you hover the mouse over a flag size, you will be able to see some countries that currently use that ratio!</p>
             <div class="centredDiv">
-                <div class="ratioDiv flagHover" id="ratio23" onclick="setRatio(2, 3)" title="2:3"></div>
-                <div class="ratioDiv flagHover" id="ratio12" onclick="setRatio(1, 2)" title="1:2"></div>
-                <div class="ratioDiv flagHover" id="ratio35" onclick="setRatio(3, 5)" title="3:5"></div>
+                <div class="ratioDiv flagHover" id="ratio23" onclick="updateCanvasDimentions(2, 3)" title="2:3"></div>
+                <div class="ratioDiv" id="ratio12" onclick="updateCanvasDimentions(1, 2)" title="1:2"></div>
+                <div class="ratioDiv" id="ratio35" onclick="updateCanvasDimentions(3, 5)" title="3:5"></div>
                 <div style="clear: both"></div>
             </div>
@@ -40,7 +40,7 @@
 
             <div class="centredDiv">
-                <div class="ratioDiv flagHover" id="ratio1019" onclick="setRatio(10, 19)" title="10:19"></div>
-                <div class="ratioDiv flagHover" id="ratio58" onclick="setRatio(5, 8)" title="5:8"></div>
-                <div class="ratioDiv flagHover" id="ratio811" onclick="setRatio(8, 11)" title="8:11"></div>
+                <div class="ratioDiv" id="ratio1019" onclick="updateCanvasDimentions(10, 19)" title="10:19"></div>
+                <div class="ratioDiv" id="ratio58" onclick="updateCanvasDimentions(5, 8)" title="5:8"></div>
+                <div class="ratioDiv" id="ratio811" onclick="updateCanvasDimentions(8, 11)" title="8:11"></div>
                 <div style="clear: both"></div>
             </div>            
@@ -49,12 +49,28 @@
         
         <script>
-            function setRatio(height, width) {
-                var constant = 100;
-                var h = constant;
-                var w = (constant / height) * width;
-                document.getElementById("svginfo_width").value = w;
-                document.getElementById("svginfo_height").value = h;
-                alert("Height: " + h + ", Width: " + w);
-            }            
+            // Variable for the currently selected flag ratio
+            var currentRatio = "ratio12";		
+            
+            function updateCanvasDimentions(height, width) {
+                // Show feedback by highlighting the chosen square
+                document.getElementById(currentRatio).style.borderColor = 'black';
+                currentRatio = "ratio" + height + width;
+                document.getElementById(currentRatio).style.borderColor = 'white';
+                
+                var design_frame = document.getElementById('design-2d-iframe');
+                var svgCanvas = design_frame.contentWindow.svgCanvas;
+                
+                // Changing the value of sizeConstant will change the size of the svg canvas without affecting the width/height ratios
+                var sizeConstant = 400;
+                
+                var h = sizeConstant;
+                var w = (sizeConstant / height) * width;                
+                
+                flagCanvasSettings.width = w;
+                flagCanvasSettings.height = h;
+                
+                // Set the new canvas size
+                svgCanvas.setResolution(w, h);
+            }
         </script>
 	  	
Index: /other-projects/nz-flag-design/trunk/main-form/choose-palette.html
===================================================================
--- /other-projects/nz-flag-design/trunk/main-form/choose-palette.html	(revision 29739)
+++ /other-projects/nz-flag-design/trunk/main-form/choose-palette.html	(revision 29740)
@@ -25,7 +25,158 @@
 	  <span class="left story-icon research" ></span>
 	  <h2>Choose Colour Palette</h2>
-	  <p>
-	    ...
-	  </p>
+      <h3 style="font-size: large; position: relative">Click on a palette circle to select it, and change it's colour using the colour picker to the right</h3>
+    <p>        
+        <div id="palette">
+            <img src="images/palette/palette2.png" id="paletteImage" height="500" alt="Palette"></img>
+
+            <div onclick="newSelectedCircle('circleBackground')" id="paletteCircleBackground" class="paletteCircle">
+                <svg height="104" width="104">
+                    <circle id="circleBackground" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="#000066"/>
+                    <text id="circleText1" x="32" y="35" fill="white" font-size="15">FLAG</text>
+                    <text id="circleText2" x="5" y="55" fill="white" font-size="13">BACKGROUND</text>
+                    <text id="circleText3" x="22" y="75" fill="white" font-size="15">COLOUR</text>
+                </svg> 
+            </div>
+
+            <div onclick="newSelectedCircle('circle1')" id="paletteCircle1" class="paletteCircle">
+                <svg height="104" width="104">
+                    <circle id="circle1" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="#CC0000"/>
+                </svg> 
+            </div>
+
+            <div onclick="newSelectedCircle('circle2')" id="paletteCircle2" class="paletteCircle">
+                <svg height="104" width="104">
+                    <circle id="circle2" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
+                </svg> 
+            </div>
+
+            <div onclick="newSelectedCircle('circle3')" id="paletteCircle3" class="paletteCircle">
+                <svg height="104" width="104">
+                    <circle id="circle3" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
+                </svg> 
+            </div>
+
+            <div onclick="newSelectedCircle('circle4')" id="paletteCircle4" class="paletteCircle">
+                <svg height="104" width="104">
+                    <circle id="circle4" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
+                </svg> 
+            </div>
+
+            <div onclick="newSelectedCircle('circle5')" id="paletteCircle5" class="paletteCircle">
+                <svg height="104" width="104">
+                    <circle id="circle5" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
+                </svg> 
+            </div>        
+
+            <div onclick="newSelectedCircle('circle6')" id="paletteCircle6" class="paletteCircle">
+                <svg height="104" width="104">
+                    <circle id="circle6" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
+                </svg> 
+            </div>
+
+            <div onclick="newSelectedCircle('circle7')" id="paletteCircle7" class="paletteCircle">
+                <svg height="104" width="104">
+                    <circle id="circle7" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
+                </svg> 
+            </div>
+
+            <!-- The Spectrum colour picker -->
+            <div id="pickerDiv"><input type='text' id="picker" value='#fffff0'/></div>
+        </div>
+
+        <h2>Use this slider to change the number of colours that will be used in your flag!</h2>
+
+        <input id="numColoursSlider" type="range" min="0" max="7" value="2" steps="7" onchange="showCircles(this.value)"/>
+        <h2>Advice for flag design!</h2>   
+    </p>
+        
+    <script>
+        // Flag settings - used to initialise the svg canvas to the user's preferences
+        var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 };
+
+        // Visibly toggle between which palette circle is currently selected
+        var selectedCircle = "circle1";
+        function newSelectedCircle(circleName)
+        {
+            document.getElementById(selectedCircle).style.stroke = 'black';
+            document.getElementById(selectedCircle).style.strokeWidth = 1;
+
+            selectedCircle = circleName;
+
+            document.getElementById(selectedCircle).style.stroke = 'white';
+            document.getElementById(selectedCircle).style.strokeWidth = 2;
+        }
+        
+        // Fill the currently selected circle when a colour is selected using the colour picker
+        $("#picker").on('change.spectrum', function(e, colour) { 
+            document.getElementById(selectedCircle).style.fill = colour;
+
+            if (selectedCircle == "circleBackground")
+            {
+                // If white is chosen, change the background palette circle text to be black
+                if(colour == '#ffffff')                
+                {
+                    document.getElementById("circleText1").style.fill = "#000000";
+                    document.getElementById("circleText2").style.fill = "#000000";
+                    document.getElementById("circleText3").style.fill = "#000000";
+                }
+                else
+                {
+                    document.getElementById("circleText1").style.fill = "#ffffff";
+                    document.getElementById("circleText2").style.fill = "#ffffff";
+                    document.getElementById("circleText3").style.fill = "#ffffff";
+                }
+
+                // Set the canvas background setting to the user's choice
+                flagCanvasSettings.backgroundColor = colour;
+            }
+        });
+        
+        // Update the number of circles shown on the palette
+        function showCircles(newValue)
+        {            
+            for (i = 1; i <= newValue; i++)
+            {
+                var circle = "paletteCircle" + i;
+                document.getElementById(circle).style.display = 'block';
+            }
+
+            if (newValue < 7)
+            {
+                for (i = 7; i > newValue; i--)
+                {
+                    var circle = "paletteCircle" + i;
+                    document.getElementById(circle).style.display = 'none';
+                }
+            }
+        }        
+        
+        // Colour picker documentation at https://bgrins.github.io/spectrum
+        $("#picker").spectrum({
+            flat: true,
+            showInput: true,
+            showInitial: true,
+            allowEmpty: false,
+            showAlpha: false,
+            showPalette: true,
+            togglePaletteOnly: false,
+            showSelectionPalette: true,
+            clickoutFiresChange: false,
+            cancelText: "Cancel",
+            chooseText: "Choose",
+            preferredFormat: "hex",
+            maxSelectionSize: 10,
+            palette: [
+                ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
+                ["000066", "#CC0000", "000066", "#CC0000", "000066", "#CC0000", "000066", "#CC0000"],
+                ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
+                ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
+                ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
+                ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
+                ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
+            ]
+            //selectionPalette: [string]
+        });          
+    </script>
 	  <!-- end of putting custom content -->		
 
Index: /other-projects/nz-flag-design/trunk/main-form/css/styles.css
===================================================================
--- /other-projects/nz-flag-design/trunk/main-form/css/styles.css	(revision 29739)
+++ /other-projects/nz-flag-design/trunk/main-form/css/styles.css	(revision 29740)
@@ -951,5 +951,7 @@
 }
 
-/*Jojo's changes*/
+/* Jojo's changes */
+
+/* CSS for the choose-canvas page */
 .centredDiv {
     margin: 0 auto;   
@@ -967,5 +969,5 @@
 
 #ratio23 { width: 300px }
-#ratio12 { width: 400px }
+#ratio12 { width: 400px; border-color: white }
 #ratio35 { width: 333.3px }
 #ratio1019 { width: 380px }
@@ -980,11 +982,11 @@
 }
 
-.flagHover:hover
-{
+
+/* Ideally the different flags shown will be dynamic in the future, and flagHover will no longer be necessary */
+.flagHover:hover {
     position: relative;
 }
 
-.flagHover:hover:after
-{
+.flagHover:hover:after {
     content: url(ratio23.png);
     display: block;
@@ -993,2 +995,35 @@
     top: 10px;
 }
+
+/* CSS for choose-palette page */
+.paletteCircle {
+    position: absolute;   
+}
+
+#palette {
+    padding: 0 0 0 50px; 
+    position: relative;
+}
+
+/* The orange palette image */
+#paletteImage {
+    position: relative;
+    top: 0; 
+    left: 0
+}
+
+/* Positions of the palette circles on the palette */
+#paletteCircleBackground { top: 75px; left: 150px }
+#paletteCircle1 { top: 35px; left: 295px }
+#paletteCircle2 { top: 50px; left: 450px }
+#paletteCircle3 { top: 105px; left: 585px; display: none }
+#paletteCircle4 { top: 210px; left: 700px; display: none }
+#paletteCircle5 { top: 330px; left: 625px; display: none }
+#paletteCircle6 { top: 355px; left: 480px; display: none }
+#paletteCircle7 { top: 345px; left: 335px; display: none }
+
+#pickerDiv {
+    float:right; 
+    position: relative;
+    padding: 0 50px 0 0;
+}
Index: /other-projects/nz-flag-design/trunk/main-form/index.html
===================================================================
--- /other-projects/nz-flag-design/trunk/main-form/index.html	(revision 29739)
+++ /other-projects/nz-flag-design/trunk/main-form/index.html	(revision 29740)
@@ -37,5 +37,19 @@
     <script type="text/javascript" src="lib/canvg/StackBlur.js"></script>
     <script type="text/javascript" src="lib/canvg/canvg.js"></script> 
-
+      
+    <!-- spectrum for colour palette -->
+    <script src='bgrins-spectrum/spectrum.js'></script>
+    <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' />
+      
+    <!-- css for choose-palette -->
+    <style>
+        .ui-slider-track {
+            background-color: #ECECEC;
+        }
+        .ui-slider-handle {
+            background-color: #E7924B;   
+        }
+    </style>
+      
     <title>Enter Name</title>
 
Index: /other-projects/nz-flag-design/trunk/main-form/iterative-design.html
===================================================================
--- /other-projects/nz-flag-design/trunk/main-form/iterative-design.html	(revision 29739)
+++ /other-projects/nz-flag-design/trunk/main-form/iterative-design.html	(revision 29740)
@@ -1,207 +1,262 @@
 <!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"/>
-
-    <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">
-	  
-      <div data-role="content">
-	  
-	<div data-role="controlgroup" class="control" data-mini="true">        	
-          <a href="#" class="next right-button test-fwd" style="right:1%;"></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>
-	    <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>
-
-		<li>
-		  <h2><span title="Click to Open/Close">Flag Similarity</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="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) {
-
-  	  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();
-			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("Exported PNG data to file ");
-				  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);
-
-          //svgCanvas.rasterExport('PNG', null, exportWindow.name);
-        }
-
-
-        function activateAccordion() {
-
-	  var la_x_dim = $(window).width() * 0.70;
-	  var la_y_dim = $(window).height() * 0.67;
-
-
-          $('#side-by-side').show();
-
-          $('#side-by-side')
-            .liteAccordion(
-               { theme           : 'stitch', // 'light',
-                 rounded         : true,
-                 //responsive      : true,
-                 containerWidth  : la_x_dim,
-                 containerHeight : la_y_dim,
-	         onTriggerSlide : function() {
-	           console.log("onTriggerSlide: id = " + this[0].id);
-                   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");
-        }
-
-        $(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;
-
-          $('#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("Event: pagebeforeshow() for page " + active_page);
-
-	  if (!activatedSVGEditorFrame && (active_page == "iterative-design-page")) {
-	    activateSVGEditor();
-	    activatedSVGEditorFrame = true;
-	  }
-
-        });
-
-      </script>
-
-
-    </div><!-- /page -->
-
-        
-  </body>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+
+        <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">
+
+            <div data-role="content">
+                <div data-role="controlgroup" class="control" data-mini="true">        	
+                    <a href="#" class="next right-button test-fwd" style="right:1%;"></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>
+                        <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>
+
+                                <li>
+                                    <h2><span title="Click to Open/Close">Flag Similarity</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="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) {                
+                    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();
+                        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("Exported PNG data to file ");
+                                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 reconfigureSvgCanvas(settings) {
+                    console.log("*** entered reconfigureSvgCanvas");
+                    console.log("*** settings: " + settings.backgroundColor);
+
+                    var design_frame = document.getElementById('design-2d-iframe');
+                    var svgCanvas = design_frame.contentWindow.svgCanvas;
+                    var svgedit = design_frame.contentWindow.svgedit;
+
+                    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 activateAccordion() {
+                    var la_x_dim = $(window).width() * 0.70;
+                    var la_y_dim = $(window).height() * 0.67;
+
+                    $('#side-by-side').show();
+
+                    $('#side-by-side')
+                    .liteAccordion({ theme : 'stitch', // 'light',
+                            rounded         : true,
+                            //responsive      : true,
+                            containerWidth  : la_x_dim,
+                            containerHeight : la_y_dim,
+                            onTriggerSlide : function() {
+                                console.log("onTriggerSlide: id = " + this[0].id);
+                                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').load(function() {
+                        console.log("*** loaded sgv 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);
+                    });
+                }
+
+                $(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;
+
+                    $('#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("Event: pagebeforeshow() for page " + active_page);
+
+                    if (active_page == "iterative-design-page") {
+                        if (!activatedSVGEditorFrame) {
+                            activateSVGEditor();
+                            activatedSVGEditorFrame = true;
+                        }
+                        else {                
+                            reconfigureSvgCanvas(flagCanvasSettings);   
+                        }
+                    }
+                });
+            </script>
+
+        </div><!-- /page -->
+    </body>
 </html>
