Index: other-projects/nz-flag-design/trunk/main-form/choose-canvas.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/choose-canvas.html	(revision 29772)
+++ other-projects/nz-flag-design/trunk/main-form/choose-canvas.html	(revision 29773)
@@ -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="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 class="ratioDiv flagHover" id="ratio23" onclick="updateCanvasDimensions(2, 3)" title="2:3"></div>
+                <div class="ratioDiv" style="border-width:2px;" id="ratio12" onclick="updateCanvasDimensions(1, 2)" title="1:2"></div>
+                <div class="ratioDiv" id="ratio35" onclick="updateCanvasDimensions(3, 5)" title="3:5"></div>
                 <div style="clear: both"></div>
             </div>
@@ -40,7 +40,7 @@
 
             <div class="centredDiv">
-                <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 class="ratioDiv" id="ratio1019" onclick="updateCanvasDimensions(10, 19)" title="10:19"></div>
+                <div class="ratioDiv" id="ratio58" onclick="updateCanvasDimensions(5, 8)" title="5:8"></div>
+                <div class="ratioDiv" id="ratio811" onclick="updateCanvasDimensions(8, 11)" title="8:11"></div>
                 <div style="clear: both"></div>
             </div>            
@@ -52,24 +52,25 @@
             var currentRatio = "ratio12";		
             
-            function updateCanvasDimentions(height, width) {
+            function updateCanvasDimensions(height, width) {
                 // Show feedback by highlighting the chosen square
                 document.getElementById(currentRatio).style.borderColor = 'black';
+                document.getElementById(currentRatio).style.borderWidth = '1px';
                 currentRatio = "ratio" + height + width;
                 document.getElementById(currentRatio).style.borderColor = 'white';
+                document.getElementById(currentRatio).style.borderWidth = '2px';
                 
-                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;
+                // 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);
+
+	        if (typeof flagCanvasSettings !== 'undefined') {
+                  flagCanvasSettings.width = w;
+                  flagCanvasSettings.height = 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 29772)
+++ other-projects/nz-flag-design/trunk/main-form/choose-palette.html	(revision 29773)
@@ -6,4 +6,13 @@
     <title>Choose Palette</title>	
 
+    <!-- jQuery -->
+    <script src="lib/jquery-1.11.1.min.js"></script>
+
+    <!-- Spectrum for colour palette -->
+    <!--  For documentation see https://bgrins.github.io/spectrum -->
+    <script src='bgrins-spectrum/spectrum.js'></script>
+    <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' />
+
+    <link rel="shortcut icon" href="lib-slider/nzflag-icon64.png"/>
   </head>
   <body>
@@ -26,67 +35,482 @@
 	  <span class="left story-icon research" ></span>
 	  <h2>Choose Colour Palette</h2>
-      <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>
+      <h3 style="font-size: large; position: relative">
+	Click on a palette circle to select it, and change its colour using the colour picker to the right
+      </h3>
     <p>        
-        <div id="palette">
-            <img src="images/palette/palette2.png" id="paletteImage" height="460" 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="13">FLAG</text>
-                    <text id="circleText2" x="5" y="55" fill="white" font-size="12">BACKGROUND</text>
-                    <text id="circleText3" x="22" y="75" fill="white" font-size="13">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>
+      <div id="palette">
+
+
+
+
+    <script>
+      var activatedColourPalette = false;
+
+      var colourPotSwatch = [ "#00247d", "#cc142b", "#ffffff", "#29afaf", "#008000", "#800080", "#ffff15", "#ff6600" ]
+      var numColourPots = colourPotSwatch.length;
+
+      var selectedColourPot = null;
+      var selectedColourPotID;
+      var selectedColourPickerID;
+      var selectedColourPickerDivID;
+
+      function colourPotChanged(colour) 
+      {
+            if (selectedColourPot==null) {
+              console.warn("colourPotChanged(): No selected colour pot to change.  Failed initialization?");
+              return;
+            }
+
+            selectedColourPot.style.fill = colour.toHexString();
+            $('#'+selectedColourPickerID).value = colour;
+            $('#'+selectedColourPickerID).spectrum("set",colour);
+
+            if (selectedColourPotID == "colour-pot0")
+            {
+                // If white is chosen, change the background palette circle text to be black
+                var colour_hsv = colour.toHsv();
+                if ((colour_hsv.s < 0.2) && (colour_hsv.v > 0.8))
+                {
+                    document.getElementById("background-flag-text").style.fill = "#000000";
+                }
+                else
+                {
+                    document.getElementById("background-flag-text").style.fill = "#ffffff";
+                }
+
+                // Set the canvas background setting to the user's choice
+	        if (typeof flagCanvasSettings !== 'undefined') {
+                  flagCanvasSettings.backgroundColor = colour.toHexString();
+	        }
+            }
+
+      }
+
+      function activateColourPalette() {
+
+	console.log("ActivateColourPalette()");
+
+        // init state-keeping variables
+        var $colour_pot = $('#colour-pot1');
+	if ($colour_pot) {
+          selectedColourPot = $colour_pot[0];
+          selectedColourPotID = "colour-pot1";
+          selectedColourPickerID = "colour-picker1";
+          selectedColourPickerDivID = "colour-picker-div1";
+        }
+        else {
+          console.warn("Unable to find 'colour-pot1' for initialization purposes");
+        }
+
+        for (var i=0; i<numColourPots; i++) {
+          var $colour_pot_elem = $('#colour-pot'+i);
+	  if ($colour_pot_elem) {
+					
+	    var swatch_col = colourPotSwatch[i];
+            $colour_pot_elem.css("fill",swatch_col);
+	    //console.log("*** outerbevel = " + $('#outerbevel'));
+	    //document.getElementById('colour-pot'+i).setAttributeNS(null,"filter", "url(#outerbevel)")
+	    $colour_pot_elem.css("filter", "url(#outerbevel)");
+
+	    var colour_picker_id = "colour-picker" + i;
+
+	    // Code for building the input colour element dynamically
+
+	    //var pick_div = document.createElement("div");
+
+            //pick_div.setAttribute("style","position: absolute; left:0px; top:0px;");
+            //pick_div.setAttribute("id", "colour-picker-div"+i);
+
+            //var input_str = '<input type="text" id="'+colour_picker_id+'" name="'+colour_picker_id+'" value="'+swatch_col+'" />';
+
+	    //$(pick_div).append(input_str);
+            //$('#picker-group-div').append(pick_div);
+
+            //$('#colour-picker-div'+i).hide();
+
+            $('#'+colour_picker_id).spectrum({
+	      color: swatch_col,
+              flat: false,
+              showInput: true,
+              showInitial: true,
+              allowEmpty: false,
+              showAlpha: false,
+              showPalette: true,
+              togglePaletteOnly: false,
+              showSelectionPalette: true,
+	      hideAfterPaletteSelect: true,
+              clickoutFiresChange: false,
+              cancelText: "Cancel",
+              chooseText: "Choose",
+              preferredFormat: "hsv",
+              maxSelectionSize: 2,
+              palette: [
+		["#000", "hsv  0  80 90"], 
+		["#444", "hsv  60 80 90"], 
+		["#666", "hsv 120 80 90"], 
+		["#999", "hsv 180 80 90"], 
+		["#ccc", "hsv 240 80 90"], 
+		["#eee", "hsv 300 80 90"], 
+		["#fff", "hsv 350 80 90"]
+              ],
+	      change: colourPotChanged,
+              show: function() { $('#'+selectedColourPickerDivID).css("visibility","hidden")}
+            });          
+
+
+          }
+        }					     
+      showColourPots(3);
+    }
+
+    if (jQuery.mobile) {
+      //console.log("Choose-Palette: jquerymobile active, setting up on-pageload event");
+      //$(document).on("pagebeforeshow", function(event) { 
+      $(document).on("pageload", function(event,data) { 
+      //console.log("Choose-Palette fielding Event:   pagebeforeshow() for page " + active_page);
+
+        //var active_page = $.mobile.activePage.attr("id");
+        	
+        //if (active_page == "choose-palette-page") {
+
+          if (!activatedColourPalette) {
+	      console.log("Choose-Palette Page: jquerymobile pageload()");
+              activateColourPalette();
+              activatedColourPalette = true;
+	      return false;
+          }
+        //}
+      });
+    }
+    else {
+      //console.log("Choose-Palette: jquerymobile not active, setting up document-ready event");
+      $(document).ready(activateColourPalette)
+    }
+
+
+    function colourpot_clicked(colourPotElem)
+    {
+      if (selectedColourPot != null) {
+        selectedColourPot.style.stroke      = 'none';
+        $('#'+selectedColourPickerDivID).hide();
+      }
+  
+      selectedColourPot = colourPotElem;
+      selectedColourPotID = colourPotElem.id;
+      selectedColourPickerID = selectedColourPotID.replace("colour-pot","colour-picker");
+      selectedColourPickerDivID = selectedColourPotID.replace("colour-pot","colour-picker-div");
+
+      var colour_hsv = tinycolor(selectedColourPot.style.fill).toHsv();
+      if ((colour_hsv.s < 0.2) && (colour_hsv.v > 0.8)) {
+        selectedColourPot.style.stroke      = '#000000';
+      }
+      else {
+        selectedColourPot.style.stroke      = '#ffffff';
+      }
+      selectedColourPot.style.strokeWidth = 2;
+
+
+      // Make the chosen colour picker appear
+
+      $('#'+selectedColourPickerDivID).show(10, function() {
+	   $('#'+selectedColourPickerID).next().click()
+      });
+
+      return false;
+    }
+
+
+  </script>
+
+<table width="100%">
+  <tr>
+    <td align="right">
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+
+   xwidth="879"
+   xheight="662"
+
+   xwidth="738"
+   xheight="523"
+   
+   style="max-height: 520px"
+   XXwidth="95%"
+   viewBox="0 0 879 552"
+
+   xwidth="615"
+   xheight="463"
+
+
+   xviewBox="0 0 879 552"
+
+   id="svg-palette"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="artist-palette-v03.svg">
+  <defs id="defs3351" >
+
+    <filter id="innerbevel" x0="-50%" y0="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
+      <feOffset dy="-1" dx="-1"/>
+      <feComposite in2="SourceAlpha" operator="arithmetic"
+		   k2="-1" k3="1" result="hlDiff"/>
+      <feFlood flood-color="white" flood-opacity=".7"/>
+      <feComposite in2="hlDiff" operator="in"/>
+      <feComposite in2="SourceGraphic" operator="over" result="withGlow"/>
+      
+      <feOffset in="blur" dy="3" dx="3"/>
+      <feComposite in2="SourceAlpha" operator="arithmetic"
+		   k2="-1" k3="1" result="shadowDiff"/>
+      <feFlood flood-color="black" flood-opacity="1"/>
+      <feComposite in2="shadowDiff" operator="in"/>
+      <feComposite in2="withGlow" operator="over"/>
+    </filter>
+
+
+    <filter id="outerbevel" x0="-50%" y0="-50%" width="200%" height="200%">
+      <feMorphology in="SourceAlpha" operator="dilate" radius="1"/>
+      <feGaussianBlur stdDeviation="1" result="blur"/>
+      
+      <feOffset dy="1" dx="1"/>
+      <feComposite in2="SourceAlpha" operator="arithmetic"
+		   k2="1" k3="-1" result="hlDiff"/>
+      <feFlood flood-color="white" flood-opacity=".7"/>
+      <feComposite in2="hlDiff" operator="in"/>
+      <feComposite in2="SourceGraphic" operator="over" result="withGlow"/>
+			
+      <feOffset in="blur" dy="-1" dx="-1"/>
+      <feComposite in2="SourceAlpha" operator="arithmetic"
+		   k2="1" k3="-1" result="shadowDiff"/>
+      <feFlood flood-color="black" flood-opacity="1"/>
+      <feComposite in2="shadowDiff" operator="in"/>
+      <feComposite in2="withGlow" operator="over"/>
+    </filter>
+
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="1235.998"
+     inkscape:cy="611.42857"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4183"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1018"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3354">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g transform="scale(1.0)"><!-- used to be 0.7 scale -->
+    <g
+       inkscape:label="Layer 1"
+       inkscape:groupmode="layer"
+       id="layer1"
+       transform="translate(0,200)">
+      <g
+	 id="palette"
+	 transform="scale(0.3333,0.33333)" 
+	 >
+	<path
+	   id="path4181"
+	   style="fill:#a05a2c;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
+	   d="m 914.28571,66.64785 c 0,0 269.72099,113.53716 219.99999,234.28572 C 1066.0363,466.67863 862.85714,366.64785 740,318.07643 617.14286,269.505 516.75361,172.94601 568.57143,95.21928 665.71429,-50.495 914.28571,66.64785 914.28571,66.64785 Z m -85.71428,862.85719 c 0,0 308.57147,99.99986 628.57147,102.85706 320,2.8571 1151.4286,-74.28566 1154.2857,-671.42853 2.8572,-597.14286 -982.8572,-945.71428 -1468.5715,-945.71428 -485.71424,0 -1125.714243,237.14285 -1125.714243,682.857136 C 42.058256,716.73507 843.30354,378.69115 828.57143,929.50504 Z" />
+	
+      </g>      
+      <g>
+	<ellipse
+           id="colour-pot0"
+	   cx="505"
+	   cy="84"
+	   rx="73"
+	   ry="73" 
+	   filterXX="url(#outerbevel)"
+	   style="fill:#d40000;fill-opacity:1;"
+	   stylexx="stroke:#000000;stroke-width:1px;"
+	   onclick="colourpot_clicked(this)"
+	   />
+	<text
+	   xml:space="preserve"
+	   style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:22.5px;line-height:100%;font-family:sans-serif;-inkscape-font-specification:'Sans, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+	   x="514.81232"
+	   y="67.527832"
+	   id="background-flag-text"
+	   sodipodi:linespacing="100%"
+	   onclick="colourpot_clicked(document.getElementById('colour-pot0'))"
+	   >
+	  <tspan
+             sodipodi:role="line"
+             x="514.81232"
+             y="67.527832"
+             id="tspan3463">Flag</tspan>
+	  <tspan
+             sodipodi:role="line"
+             x="514.81232"
+             y="90.027832"
+             id="tspan3467">Background</tspan>
+	  <tspan
+             sodipodi:role="line"
+             x="514.81232"
+             y="112.52783"
+             id="tspan3469">Colour</tspan>
+	</text>
+      </g>
+
+      <g>
+	<ellipse
+           id="colour-pot1"
+           cx="194"
+           cy="-69"
+           rx="50"
+           ry="50" 
+	   filterXX="url(#outerbevel)"
+           style="fill:#ffffff;visibility:visible;"
+	   onclick="colourpot_clicked(this)"
+	   />
+	<ellipse
+           id="colour-pot2"
+           cx="347"
+           cy="-95"
+           rx="50"
+           ry="50"
+	   filterXX="url(#outerbevel)"
+           style="fill:#ffffff;fill-opacity:1;visibility:visible;"
+	   onclick="colourpot_clicked(this)"
+	   />
+	<ellipse
+           id="colour-pot3"
+           cx="501"
+           cy="-76"
+           rx="50"
+           ry="50" 
+	   filterXX="url(#outerbevel)"
+           style="fill:#29afaf;fill-opacity:1;visibility:visible"
+	   onclick="colourpot_clicked(this)"
+	   />
+	<ellipse
+           id="colour-pot4"
+           cx="652"
+           cy="-12"
+           rx="50"
+           ry="50"
+	   filterXX="url(#outerbevel)"
+           style="fill:#008000;fill-opacity:1;visibility:visible;"
+	   onclick="colourpot_clicked(this)"
+	   />
+	<ellipse
+           id="colour-pot5"
+           cx="741"
+           cy="112"
+           rx="50"
+           ry="50" 
+	   filterXX="url(#outerbevel)"
+           style="fill:#800080;fill-opacity:1;visibility:visible;"
+	   onclick="colourpot_clicked(this)"
+	   />
+	<ellipse
+           id="colour-pot6"
+           cx="618"
+           cy="213"
+           rx="50"
+           ry="50"
+	   filterXX="url(#outerbevel)"
+           style="fill:#ffff15;fill-opacity:1;visibility:visible;"
+	   onclick="colourpot_clicked(this)"
+	   />
+	<ellipse
+           id="colour-pot7"
+           cx="458"
+           cy="242"
+           rx="50"
+           ry="50" 
+	   filterXX="url(#outerbevel)"
+           style="fill:#ff6600;fill-opacity:1;visibility:visible;"
+	   onclick="colourpot_clicked(this)"
+	   />
+
+      </g>
+    </g>
+  </g>
+
+</svg>
+
+
+    </td>
+    <td style="width: 300px;" valign="top">
+      <style>
+	.sp-picker-container {
+          width: 200px;
+	}
+	.sp-input-container {
+	  width: 130px;
+	}
+      </style>
 
             <!-- The Spectrum colour picker -->
-            <div id="pickerDiv"><input type='text' id="picker" value='#fffff0'/></div>
-        </div>
+            <div id="picker-group-div" style="position: relative; width: 290px;">
+
+	      <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div0">
+		<input type="text" id="colour-picker0" name="colour-picker0">
+	      </div>
+	      <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div1">
+		<input type="text" id="colour-picker1" name="colour-picker1">
+	      </div>
+	      <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div2">
+		<input type="text" id="colour-picker2" name="colour-picker2">
+	      </div>
+	      <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div3">
+		<input type="text" id="colour-picker3" name="colour-picker3">
+	      </div>
+	      <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div4">
+		<input type="text" id="colour-picker4" name="colour-picker4">
+	      </div>
+	      <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div5">
+		<input type="text" id="colour-picker5" name="colour-picker5">
+	      </div>
+	      <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div6">
+		<input type="text" id="colour-picker6" name="colour-picker6">
+	      </div>
+	      <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div7">
+		<input type="text" id="colour-picker7" name="colour-picker7">
+	      </div>
+
+
+	    </div>
+
+    </td>
+  </tr>
+</table>
+
+        </div> <!-- end of palette -->
+
 
         <p>Use slider to change the number of colours that will be used in your flag:</p>
 
-        <input id="numColoursSlider" type="range" min="0" max="7" value="2" steps="7" onchange="showCircles(this.value)"/>
+        <input id="numColoursSlider" type="range" min="0" max="7" value="3" steps="7" onchange="showColourPots(this.value)"/>
 
 	<br />
@@ -96,87 +520,33 @@
     <script>
 
+/*
         // 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.stroke = '#000000';
             document.getElementById(selectedCircle).style.strokeWidth = 1;
 
             selectedCircle = circleName;
 
-            document.getElementById(selectedCircle).style.stroke = 'white';
+            document.getElementById(selectedCircle).style.stroke = '#ffffff';
             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)
+        function showColourPots(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';
-                }
+	    for (var i=0; i<numColourPots; i++) {
+                var circle = "colour-pot" + i;
+	        if (i<=newValue) {
+                  document.getElementById(circle).style.visibility = 'visible';
+		}
+	        else {
+                  document.getElementById(circle).style.visibility = 'hidden';
+		}
             }
         }        
         
-        // 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", "hsv  0  100 100"], 
-		["#444", "hsv  40 100 100"], 
-		["#666", "hsv  80 100 100"], 
-		["#999", "hsv 120 100 100"], 
-		["#ccc", "hsv 140 100 100"], 
-		["#eee", "hsv 160 100 100"], 
-		["#fff", "hsv 180 100 100"]
-            ]
-            //selectionPalette: [string]
-        });          
     </script>
 	  <!-- end of putting custom content -->		
Index: other-projects/nz-flag-design/trunk/main-form/index.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/index.html	(revision 29772)
+++ other-projects/nz-flag-design/trunk/main-form/index.html	(revision 29773)
@@ -3,4 +3,9 @@
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+
 <!--
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
@@ -17,5 +22,5 @@
     <link rel="stylesheet" href="lib-slider/css/jqm-demos.css"/>
     <link rel="stylesheet" href="lib-slider/css/swipe-page.css"/>
-    <link rel="shortcut icon" href="lib-slider/favicon.ico"/>		
+    <link rel="shortcut icon" href="lib-slider/nzflag-icon64.png"/>
 
     <!-- jQuery -->
@@ -39,4 +44,5 @@
       
     <!-- spectrum for colour palette -->
+    <!--  For documentation see https://bgrins.github.io/spectrum -->
     <script src='bgrins-spectrum/spectrum.js'></script>
     <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' />
@@ -48,5 +54,5 @@
         }
         .ui-slider-handle {
-            background-color: #E7924B;   
+            background-color: #a05a2c; /* used to be #E7924B; */
         }
     </style>
@@ -57,4 +63,5 @@
         // Flag settings - used to initialise the svg canvas to the user's preferences
         var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 };
+
     </script>
 
@@ -87,5 +94,5 @@
 	    </p>
 	    <form>
-	      <input type="text" />
+	      <input type="text" autofocus="autofocus" style="color: white;" />
 	    </form>
 	  </div>
Index: other-projects/nz-flag-design/trunk/main-form/iterative-design.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/iterative-design.html	(revision 29772)
+++ other-projects/nz-flag-design/trunk/main-form/iterative-design.html	(revision 29773)
@@ -126,9 +126,13 @@
                 function reconfigureSvgCanvas(settings) {
                     console.log("*** entered reconfigureSvgCanvas");
-                    console.log("*** settings: " + settings.backgroundColor);
+                    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;
@@ -186,4 +190,5 @@
                     // Centres the canvas (somewhat)
                     //svgCanvas.updateCanvas(100, 100);
+
                 }
 
@@ -195,26 +200,27 @@
                     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: this = " + this);
-                                console.log("onTriggerSlide: id = " + this[0].id);
-                                if (this[0].id == "render-3d-div") {
-                                    console.log("Triggering SVG-Editor exportPNG()");
-                                    savePNGAsFile("PNG",null);
+                    $('#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 == "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-trunk2/editor/svg-editor.html?noStorageOnLoad=1");
                     $('#design-2d-iframe').load(function() {
                         console.log("*** loaded sgv iframe: " + this);
@@ -230,5 +236,5 @@
 
                 $(document).on("pageload",function(event,data){
-                    console.log( "Iterative Design Page: jquerymobile pageload()" );
+                    console.log( "Iterative Design Page: jquerymobile pageload()");
                     if (!activatedAccordion) {
                         activateAccordion();	    
@@ -251,5 +257,5 @@
                 $(document).on("pagebeforeshow",function(event,data) {
                     var active_page = $.mobile.activePage.attr("id");
-                    console.log("Event: pagebeforeshow() for page " + active_page);
+                    console.log("Iterative-Design fielding Event: pagebeforeshow() for page " + active_page);
 
                     if (active_page == "iterative-design-page") {
