Index: other-projects/nz-flag-design/trunk/main-form/choose-canvas.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/choose-canvas.html	(revision 29780)
+++ other-projects/nz-flag-design/trunk/main-form/choose-canvas.html	(revision 29781)
@@ -3,13 +3,184 @@
   <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"/>
+-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    
+    <script src="css/source-sans-pro.js"></script>
+    <link href="css/styles.css" rel="stylesheet"/>
+    <link href="css/storystyle.css" rel="stylesheet"/>
+	
+    <link rel="stylesheet"  href="lib-slider/css/jquery.mobile-1.3.0.css"/>
+    <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/nzflag-icon64-padded.png"/>
+
+    <!-- jQuery -->
+    <script src="lib/jquery-1.11.1.min.js"></script>
+    <script src="lib/jquery.cookie.js"></script>
+
+    <!-- page swipe -->
+    <script src="lib-slider/js/jquery.mobile.demos.js"></script>
+    <script src="lib-slider/js/jquery.mobile-1.3.0.js"></script>
+    <script src="lib-slider/js/swipe-page.js"></script>	
+
+    <!-- accordion bars -->
+    <link href="css/liteaccordion.css" rel="stylesheet" />
+    <script src="js/jquery.easing.1.3.js"></script>
+    <script src="js/liteaccordion-with-resize.jquery.js"></script>
+
+    <!-- canvg library -->
+    <script type="text/javascript" src="lib/canvg/rgbcolor.js"></script> 
+    <script type="text/javascript" src="lib/canvg/StackBlur.js"></script>
+    <script type="text/javascript" src="lib/canvg/canvg.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' />
+      
+    <!-- css for choose-palette -->
+    <style>
+        .ui-slider-track {
+            background-color: #ECECEC;
+        }
+        .ui-slider-handle {
+            background-color: #a05a2c; /* used to be #E7924B; */
+        }
+    </style>
+
+    <script>
+        // Flag settings - used to initialise the svg canvas to the user's preferences
+        var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 };
+
+    </script>
+      
     <title>Canvas Size</title>
-	
+
+    <script>
+      
+      // Variable for the currently selected flag ratio
+      var currentRatio = null;
+
+      $(function() {
+        $.getJSON( "../similarity-2d/flag-aspect-ratios-json.jsp", function( data ) {
+
+            var scale_to_y_dim = 130;
+
+            var items = [];
+      
+            var max_ratio = 0;
+            $.each( data, function( key, ratio_table ) {
+              var ratio_array = key.split(":");
+              var ratio_x = ratio_array[0];
+              var ratio_y = ratio_array[1];
+              var ratio = ratio_y / ratio_x;
+
+              if (ratio > max_ratio) {
+                max_ratio = ratio;
+              }
+            });
+
+            $.each( data, function( key, ratio_table ) {
+              var freq = ratio_table.freq;
+              var ratio_array = key.split(":");
+              var ratio_x = ratio_array[0];
+              var ratio_y = ratio_array[1];
+              var ratio = ratio_y / ratio_x;
+
+              var ratioScale = max_ratio/ratio;
+
+              var x_dim = Math.round(scale_to_y_dim * ratioScale);
+              var y_dim = scale_to_y_dim;
+
+              var innertext = "<div style='font-size: 180%;'>"+freq + " countries, " + key + "</div>";
+         
+              var flags = [];
+
+              var nz_prioritized_flags = ratio_table.flags.sort();
+
+              // Promote NZ flag to start of array, but otherwise keep sorted
+              var p = nz_prioritized_flags.length-1;
+              var found_nz = false;
+
+              while (p>0) {                
+                var curr;
+                var curr_title;
+
+                if (!found_nz) {
+                  curr = ratio_table.flags[p];
+                  curr_title = curr.replace(/^.*\//,"").replace(/\.(.*?)$/,"");
+                }
+
+                if (curr_title == "nz") {
+                   found_nz = true;
+
+                   // swap with adjacent cell
+                   var tmp_m1 = nz_prioritized_flags[p-1];
+                   nz_prioritized_flags[p-1] = curr;
+                   nz_prioritized_flags[p] = tmp_m1;
+                }
+                p--;
+              }
+/*
+              var nz_prioritized_flags = ratio_table.flags.sort( function (a, b) {
+                var a_title = a.replace(/^.*\//,"").replace(/\.(.*?)$/,"");
+                if (a_title == "nz") { 
+                  return -1;
+                }
+                else {
+                  return 0;
+                }
+              });
+*/
+
+              $.each(nz_prioritized_flags, function(index, flag_filename) {                
+                var title = flag_filename.replace(/^.*\//,"").replace(/\.(.*?)$/,"");
+
+                flags.push("<img src='../similarity-2d/"+flag_filename+"' style='height: 70px; padding: 3px; ' title='" + title.toUpperCase() + "'/>");
+              });
+
+              innertext += flags.join("");
+
+              var ratio_id = "ratio-" + key;
+              if (found_nz) {
+                currentRatio = ratio_id;
+              }
+
+              var id = " id='" + ratio_id + "'";
+     
+              var style = "style='width:" + x_dim + "px; height:" + y_dim + "px;";
+              if (found_nz) {
+                style += "border-color:white; border-width:4px;"
+              }
+              //if (ratio_table.flags.length>4) {
+                style += " overflow-y:scroll;";
+              //}
+              style += "'";
+
+              var onclick = " onclick='updateCanvasDimensions("+ratio_y + "," + ratio_x + ")'";
+
+              items.push( "<div class='ratioDiv'" + id + style+ onclick + ">"+ innertext + "</div>" );
+
+            });
+
+          $('#aspect-ratio-div').append("<div class='centredDiv' style='width: 100%'>"+items.join("\n")+"</div>");
+        });
+      });
+    </script>
   </head>
+
   <body>
     <div data-role="page" id="choose-canvas-page" 
 	 class="demo-page" 
 	 data-dom-cache="true" 
-	 data-prev="index" 
 	 data-next="choose-palette">
 	  
@@ -18,6 +189,10 @@
 	<div data-role="controlgroup" class="control" data-mini="true">        	
           <a href="#" class="next right-button res-fwd" style="right:1%;"></a>
+<!--
 	  <a href="#" class="prev left-button gen-back" style="left:1%;"></a>
+-->
         </div>
+
+ 	<a target="_parent" href="../index.html" class="back-button back-left"></a>	  
 	  
 	<div class="story-page">
@@ -30,5 +205,13 @@
             <br><br>
             <h2>Please choose from the following aspect ratios.</h2>
-            <p>If you hover the mouse over a flag size, you will be able to see some countries that currently use that ratio!</p>
+            <p>
+	      Once chosen, swipe the page or click/press on the right arrow to go onto the next step.
+	    </p>
+
+	  <div id="aspect-ratio-div">
+	  </div>
+
+
+<!--
             <div class="centredDiv">
                 <div class="ratioDiv flagHover" id="ratio23" onclick="updateCanvasDimensions(2, 3)" title="2:3"></div>
@@ -46,17 +229,17 @@
             </div>            
             <p class="optionline">10:19 5:8 8:11</p>
+-->
         </div>
         
         <script>
-            // Variable for the currently selected flag ratio
-            var currentRatio = "ratio12";		
             
             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;
+                currentRatio = "ratio-" + width + ":" + height;
                 document.getElementById(currentRatio).style.borderColor = 'white';
-                document.getElementById(currentRatio).style.borderWidth = '2px';
+                document.getElementById(currentRatio).style.borderWidth = '4px';
                 
                 // Changing the value of sizeConstant will change the
Index: other-projects/nz-flag-design/trunk/main-form/choose-palette.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/choose-palette.html	(revision 29780)
+++ other-projects/nz-flag-design/trunk/main-form/choose-palette.html	(revision 29781)
@@ -35,7 +35,15 @@
 	  <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 its colour using the colour picker to the right
-      </h3>
+	  <div>
+	    <h3 style="font-size: large; position: relative; display: inline-block;">
+	      Click on a palette circle to select it, and change its colour using the colour picker to the right
+	    </h3>
+	    
+	    <a style="font-size: medium; padding-left: 10px;" 
+	       href="http://www.netstate.com/states/symb/flags/flag_design_principles.htm" target="_blank">
+	      [help]
+	    </a>
+	  </div>
+
     <p>        
       <div id="palette">
@@ -242,5 +250,5 @@
    xheight="523"
    
-   style="max-height: 520px"
+   style="height: 520px;"
    XXwidth="95%"
    viewBox="0 0 879 552"
@@ -514,6 +522,4 @@
         <input id="numColoursSlider" type="range" min="0" max="7" value="3" steps="7" onchange="showColourPots(this.value)"/>
 
-	<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>
         
Index: other-projects/nz-flag-design/trunk/main-form/enter-name.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/enter-name.html	(revision 29780)
+++ other-projects/nz-flag-design/trunk/main-form/enter-name.html	(revision 29781)
@@ -3,68 +3,10 @@
   <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"/>
--->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    
-    <script src="css/source-sans-pro.js"></script>
-    <link href="css/styles.css" rel="stylesheet"/>
-    <link href="css/storystyle.css" rel="stylesheet"/>
-	
-    <link rel="stylesheet"  href="lib-slider/css/jquery.mobile-1.3.0.css"/>
-    <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/nzflag-icon64.png"/>
 
     <!-- jQuery -->
     <script src="lib/jquery-1.11.1.min.js"></script>
-    <script src="lib/jquery.cookie.js"></script>
-
-    <!-- page swipe -->
-    <script src="lib-slider/js/jquery.mobile.demos.js"></script>
-    <script src="lib-slider/js/jquery.mobile-1.3.0.js"></script>
-    <script src="lib-slider/js/swipe-page.js"></script>	
-
-    <!-- accordion bars -->
-    <link href="css/liteaccordion.css" rel="stylesheet" />
-    <script src="js/jquery.easing.1.3.js"></script>
-    <script src="js/liteaccordion-with-resize.jquery.js"></script>
-
-    <!-- canvg library -->
-    <script type="text/javascript" src="lib/canvg/rgbcolor.js"></script> 
-    <script type="text/javascript" src="lib/canvg/StackBlur.js"></script>
-    <script type="text/javascript" src="lib/canvg/canvg.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' />
-      
-    <!-- css for choose-palette -->
-    <style>
-        .ui-slider-track {
-            background-color: #ECECEC;
-        }
-        .ui-slider-handle {
-            background-color: #a05a2c; /* used to be #E7924B; */
-        }
-    </style>
       
     <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>
@@ -72,9 +14,12 @@
 	 class="demo-page" 
 	 data-dom-cache="true" 
-	 data-next="choose-canvas">
+	 data-prev="iterative-design">
+
       <div data-role="content">
 	  
-	<div data-role="controlgroup" class="control" data-mini="true">        	
+	<div data-role="controlgroup" class="control" data-mini="true">        
+<!--	
           <a href="#" class="next right-button idea-fwd" style="right:1%;"></a>
+-->
 	  <a href="#" class="prev left-button gen-back" style="left:1%;"></a>
         </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 29780)
+++ other-projects/nz-flag-design/trunk/main-form/iterative-design.html	(revision 29781)
@@ -15,5 +15,6 @@
             class="demo-page" 
             data-dom-cache="true" 
-            data-prev="choose-palette">
+            data-prev="choose-palette"
+	    data-next="enter-name">
 
             <div data-role="content">
@@ -29,5 +30,5 @@
                     <h2 id="iterative-design-header">Iterative Design</h2>
 
-                    <div>
+                    <div style="padding-top: 10px;">
                         <div id="side-by-side">
                             <ol>
