Index: other-projects/nz-flag-design/trunk/main-form/choose-palette.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/choose-palette.html	(revision 29766)
+++ other-projects/nz-flag-design/trunk/main-form/choose-palette.html	(revision 29767)
@@ -5,4 +5,5 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>Choose Palette</title>	
+
   </head>
   <body>
@@ -28,12 +29,12 @@
     <p>        
         <div id="palette">
-            <img src="images/palette/palette2.png" id="paletteImage" height="500" alt="Palette"></img>
+            <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="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>
+		     <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>
@@ -85,13 +86,13 @@
         </div>
 
-        <h2>Use this slider to change the number of colours that will be used in your flag!</h2>
+        <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)"/>
-        <h2>Advice for flag design!</h2>   
+
+	<br />
+        <h2><a href="http://www.nava.org/flag-design/good-flag-bad-flag/5-basic-principles-flag-design" target="_blank">Help on flag design</a></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
@@ -168,11 +169,11 @@
             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"]
+		["#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]
Index: other-projects/nz-flag-design/trunk/main-form/css/styles.css
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/css/styles.css	(revision 29766)
+++ other-projects/nz-flag-design/trunk/main-form/css/styles.css	(revision 29767)
@@ -1014,4 +1014,5 @@
 
 /* Positions of the palette circles on the palette */
+/*
 #paletteCircleBackground { top: 75px; left: 150px }
 #paletteCircle1 { top: 35px; left: 295px }
@@ -1022,4 +1023,14 @@
 #paletteCircle6 { top: 355px; left: 480px; display: none }
 #paletteCircle7 { top: 345px; left: 335px; display: none }
+*/
+
+#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: 670px; display: none }
+#paletteCircle5 { top: 310px; left: 590px; display: none }
+#paletteCircle6 { top: 335px; left: 445px; display: none }
+#paletteCircle7 { top: 325px; left: 300px; display: none }
 
 #pickerDiv {
@@ -1028,2 +1039,6 @@
     padding: 0 50px 0 0;
 }
+
+.sp-picker-container {
+  color: black;
+}
Index: other-projects/nz-flag-design/trunk/main-form/index.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/index.html	(revision 29766)
+++ other-projects/nz-flag-design/trunk/main-form/index.html	(revision 29767)
@@ -54,4 +54,10 @@
     <title>Enter Name</title>
 
+    <script>
+        // Flag settings - used to initialise the svg canvas to the user's preferences
+        var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 };
+    </script>
+
+
   </head>
   <body>
@@ -74,11 +80,13 @@
 	  <div class="story-title">
 	    <h1 id="enter-name-header" class="center">Enter Name</h1>
-	    <p class="center">-- xx </p>
+<!--
+	    <p class="center">- - xx </p>
+-->
 	    <p>
-	      Name: 
-	      <form>
-		<input type="text" />
-	      </form>
+	      Your Name: 
 	    </p>
+	    <form>
+	      <input type="text" />
+	    </form>
 	  </div>
 	  <!-- end of putting custom content -->
Index: other-projects/nz-flag-design/trunk/main-form/iterative-design.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/iterative-design.html	(revision 29766)
+++ other-projects/nz-flag-design/trunk/main-form/iterative-design.html	(revision 29767)
@@ -4,4 +4,7 @@
         <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>
 
         <title>Iterative Design</title>	
@@ -66,5 +69,5 @@
 
             <script>
-                var activatedAccordion    = false;
+                var activatedAccordion      = false;
                 var activatedSVGEditorFrame = false;
 
@@ -90,5 +93,6 @@
 
                         // 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();
+                        var jsession_id = $.cookie('JSESSIONID') + "-" + new Date().getTime();
                         console.log("jsession id = " + jsession_id);
                         var imageFilename = "flag-" + jsession_id + ".png";
@@ -186,4 +190,6 @@
 
                 function activateAccordion() {
+                    console.log("activateAccordion()");
+
                     var la_x_dim = $(window).width() * 0.70;
                     var la_y_dim = $(window).height() * 0.67;
@@ -198,4 +204,5 @@
                             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") {
