Index: /other-projects/nz-flag-design/trunk/INSTALL.sh
===================================================================
--- /other-projects/nz-flag-design/trunk/INSTALL.sh	(revision 29786)
+++ /other-projects/nz-flag-design/trunk/INSTALL.sh	(revision 29787)
@@ -21,6 +21,8 @@
 echo "* 2. Making 'similarity-2d' world-writable so web server can save JSON data there"
 echo "*    => chmod a+rwx similarity-2d"
+echo "*    => chmod a+rwx similarity-2d/json-data"
 echo "****"
 chmod a+rwx similarity-2d
+chmod a+rwx similarity-2d/json-data
 
 echo "****"
Index: /other-projects/nz-flag-design/trunk/design-2d/image-data-to-file.jsp
===================================================================
--- /other-projects/nz-flag-design/trunk/design-2d/image-data-to-file.jsp	(revision 29786)
+++ /other-projects/nz-flag-design/trunk/design-2d/image-data-to-file.jsp	(revision 29787)
@@ -1,2 +1,3 @@
+<%@ page contentType="text/html; charset=UTF-8" %>
 <!DOCTYPE html>  
 <html>
Index: /other-projects/nz-flag-design/trunk/main-form/choose-canvas.html
===================================================================
--- /other-projects/nz-flag-design/trunk/main-form/choose-canvas.html	(revision 29786)
+++ /other-projects/nz-flag-design/trunk/main-form/choose-canvas.html	(revision 29787)
@@ -74,5 +74,13 @@
         $.getJSON( "../similarity-2d/flag-aspect-ratios-json.jsp", function( data ) {
 
-            var scale_to_y_dim = 130;
+
+            //var scale_to_y_dim = 130;
+
+            // express scale_to_y_dim to use relative to height of window
+
+            var la_y_dim = $(window).height() - $('#aspect-ratio-div').position().top;
+            var scale_to_y_dim = la_y_dim/4;
+
+            //alert("scale_to_y_dim = " + scale_to_y_dim);
 
             var items = [];
@@ -131,15 +139,4 @@
                 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) {                
@@ -174,4 +171,11 @@
 
           $('#aspect-ratio-div').append("<div class='centredDiv' style='width: 100%'>"+items.join("\n")+"</div>");
+
+
+          // now change the flag tooltip labels into their country names
+          $.getJSON( "../similarity-2d/iso-3166-keyed-by-alpha-2-countrycodes.json", function( data ) {
+
+          });
+
         });
       });
@@ -202,5 +206,5 @@
 	  <h2>Canvas Size</h2>			
 	  
-        <div class="dialog" id="dialog" title="Ratio Select Dialog" width="800px">
+        <div class="dialog" id="dialog" title="Flat Aspect Ratio Selection Panel" widthXX="800px">
             <br><br>
             <h2>Please choose from the following aspect ratios.</h2>
@@ -257,4 +261,6 @@
 	        }                               
             }
+
+
         </script>
 	  	
@@ -264,4 +270,10 @@
 	
       </div><!-- /content -->
+
+<!-- make persistent?
+      <div data-role="footer" style="width:100%;">
+	COSI: Centre of Open Source Innovation @ The University of Waikato.
+      </div>
+-->
       
     </div><!-- /page -->
Index: /other-projects/nz-flag-design/trunk/main-form/choose-palette.html
===================================================================
--- /other-projects/nz-flag-design/trunk/main-form/choose-palette.html	(revision 29786)
+++ /other-projects/nz-flag-design/trunk/main-form/choose-palette.html	(revision 29787)
@@ -35,9 +35,9 @@
 	  <span class="left story-icon research" ></span>
 	  <h2>Choose Colour Palette</h2>
-	  <div>
-	    <h3 style="font-size: large; position: relative; display: inline-block;">
+
+          <div class="dialog" id="dialog" title="Colour Palette Selection Panel" widthXX="800px">
+	    <h2 style="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>
-	    
+	    </h2>	    
 	    <a style="font-size: medium; padding-left: 10px;" 
 	       href="http://www.netstate.com/states/symb/flags/flag_design_principles.htm" target="_blank">
@@ -98,4 +98,10 @@
 
 	console.log("ActivateColourPalette()");
+
+	// Page not shown yet, so the y-position of <svg> is still 0
+	// => make height purely a percentage of height
+        var la_y_dim = $(window).height();
+        var svg_y_dim = 0.5 * la_y_dim;
+	$('#svg-palette').css("height",svg_y_dim+"px");
 
         // init state-keeping variables
@@ -227,4 +233,15 @@
       return false;
     }
+
+
+    $(window).resize(function() {
+        console.log("choose-palette resize()");
+        console.log("position top = " + $('#svg-palette').position().top);
+        console.log("offset top = " + $('#svg-palette').offset().top);
+
+        var la_y_dim = $(window).height() - $('#svg-palette').offset().top;
+        var svg_y_dim = 0.65 * la_y_dim;
+	$('#svg-palette').css("height",svg_y_dim+"px");				       
+    });
 
 
Index: /other-projects/nz-flag-design/trunk/main-form/enter-name.html
===================================================================
--- /other-projects/nz-flag-design/trunk/main-form/enter-name.html	(revision 29786)
+++ /other-projects/nz-flag-design/trunk/main-form/enter-name.html	(revision 29787)
@@ -25,5 +25,7 @@
         </div>  
 	  
- 	<a target="_parent" href="../index.html" class="back-button back-left"></a>	  
+<!--
+ 	<a target="_parent" href="../index.html" class="back-button back-left"></a>
+-->
 	  
 	<div class="story-page">
@@ -31,13 +33,28 @@
 	  <!-- put custom content here -->	  
 	  <div class="story-title">
-	    <h1 id="enter-name-header" class="center">Enter Name</h1>
+	    <h1 id="enter-name-header" class="center">Contact Details</h1>
 <!--
 	    <p class="center">- - xx </p>
 -->
-	    <p>
-	      Your Name: 
-	    </p>
-	    <form>
-	      <input type="text" autofocus="autofocus" style="color: white;" />
+            <style>
+	      input {
+	        color: white;
+	      }
+            </style>
+	    <form style="width: 400px; margin-left:auto; margin-right:auto;">
+	      <p>
+		Your Name: 
+	      </p>
+	      <input type="text" autofocus="autofocus" style="color: white;" name="name" />
+
+	      <p>
+		Contact email: 
+	      </p>
+	      <input type="text" name="email" />
+
+
+	      <div style="padding-top: 120px; padding-left: 100px; padding-right: 100px">
+		<input type="submit" value="Submit Flag Design" />
+	      </div>
 	    </form>
 	  </div>
Index: /other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js
===================================================================
--- /other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js	(revision 29786)
+++ /other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js	(revision 29787)
@@ -5,11 +5,115 @@
 var show_progress = 5;
 
-var start_hist_delay = 4000;
+var start_hist_delay = 1000; // used to be 4000
 var mini_delay = 300;
 
 
-var hasLocalStorage = false;
-var needToComputeHistograms = true;
+var hasLocalStorage = (typeof(Storage) !== "undefined"); // ****
+//var hasLocalStorage = false;
+
 var quantHSLHistogramArray;
+
+//var saveOnServer=true;
+var saveOnServer=false;
+var retrieveFromServer=true;
+
+
+function runlength_encode(int_array) {
+
+    var array_len = int_array.length;
+
+    if (array_len<2) {
+	console.warn("runlength_encode(): unable to run-length encode array of length " + array_len);
+	console.warn("returning null");
+	return null;
+    }
+
+    var int_array_rle = new Array();
+
+
+    var lock_val=int_array[0];
+    var next_val=int_array[1];
+    var i = 1;
+
+    while (i<array_len) {
+	var c=1;
+	while (next_val==lock_val) {
+	    c++;
+	    var next_pos = i+c-1;
+	    if (next_pos<array_len) {
+		next_val = int_array[next_pos];
+	    }
+	    else {
+		// hit end of array
+		break;
+	    }
+	}
+	// come out of a run-length sequence of same val
+	// next_val is one past the run-length sequence
+
+	int_array_rle.push(c);
+	int_array_rle.push(lock_val);
+
+	i+=c;
+
+	if (i<array_len) {
+	    lock_val = next_val;
+	    next_val = int_array[i];
+	}
+	else {
+	    break;
+	}
+    }
+
+    return int_array_rle;
+}
+
+
+
+function runlength_decode(int_array_rle) {
+
+    var array_rle_len = int_array_rle.length;
+
+    if (array_rle_len<2) {
+	console.warn("runlength_decode(): unable to run-length decode array of length " + array_rle_len);
+	console.warn("returning null");
+	return null;
+    }
+
+    var int_array = new Array();
+    for (var i=0; i<array_rle_len; i+=2){
+	var rep = int_array_rle[i];
+	var val = int_array_rle[i+1];
+	for (var r=0; r<rep; r++) {
+	    int_array.push(val);
+	}
+    }
+
+    return int_array;
+}
+
+
+
+function arrays_identical(int_array1, int_array2) {
+
+    var array_len1 = int_array1.length;
+    var array_len2 = int_array2.length;
+
+    if (array_len1 != array_len2) {
+	console.warn("arrays_identical(): array lengths differ, array1("+array_len1+") vs array2(" + array_len2 + ")");
+	return false;
+    }
+
+    var all_ident = true;
+
+    for (var i=0; i<array_len1; i++){
+	if (int_array1[i] != int_array2[i]) {
+	    all_ident = false;
+	    break;
+	}
+    }
+
+    return all_ident;
+}
 
 
@@ -61,5 +165,4 @@
     var y,p;
     for (y=0,p=0; y<imageObj.height; y++) {
-//	setTimeout(function() {
   	  var x;
 	  for (x=0; x<imageObj.width; x++,p+=4) {
@@ -87,5 +190,4 @@
 	    outputArray[result] += count;                    
 	  }
-//	},4);
     }
 
@@ -94,4 +196,21 @@
 	outputArray[i] = outputArray[i] / total;
     }
+
+/*
+    if (saveOnServer) {
+	console.log("Saving HSV quantized histogram on server: " + imageObj.title)
+	//console.log("outputArray = " + JSON.stringify(outputArray));
+
+	var jsonFilename = imageObj.title + ".json";
+	var data = { jsonFilename: jsonFilename, jsonData: JSON.stringify(outputArray)};
+
+	console.log("Saving colour histogram data for " + imageObj.title);
+	$.ajax({
+  	    type: "POST",
+	    url: "../similarity-2d/save-json-data.jsp",
+	    data: data
+	});
+    }
+*/
 
     return outputArray;
@@ -182,6 +301,4 @@
 	*/
 
-
-
 	imageObj.onclick = function(e) {
 	    // Store result of HSL quantization in the image object/tag
@@ -231,6 +348,31 @@
 	// Only need to compute this if it is not
 	// already stored in the object/tag
-	imageObj.quantHSLHist = createHSLHistogram(imageObj,16);
-	//console.log(imageObj.quantHSLHist);
+
+	if (retrieveFromServer) {
+	    // see if it is stored on the server 
+	    console.log("Retrieving stored colour histogram for " + imageObj.title + " ...");
+	    $.ajax({
+		async: false,
+		dataType: "json",
+		url: "../similarity-2d/json-data/" + imageObj.title + ".json",
+		success: function(data) {
+		    console.log("... success");
+		    // 'data' is the array of integer vals we want
+		    imageObj.quantHSLHist = data;
+		},
+		error: function() {
+		    console.log("... not stored on server");
+		    // not stored on the server (currently)
+		    // => need to compute it
+		    imageObj.quantHSLHist = createHSLHistogram(imageObj,16);
+		    //console.log(imageObj.quantHSLHist);
+
+		}
+	    });
+	}
+	else {
+	    imageObj.quantHSLHist = createHSLHistogram(imageObj,16);
+	}
+
     }
 
@@ -294,17 +436,42 @@
 function doneComputingHistograms(img_list_len)
 {
+    quantHSLHistogramArray = new Array(img_list_len);
+    for (var i=0; i<img_list_len; i++) {
+	var flag_id = "flag-img-" + i;
+	var imageObj = document.getElementById(flag_id);
+	quantHSLHistogramArray[i] = imageObj.quantHSLHist;
+    } 
+    var json_hist_data = JSON.stringify(quantHSLHistogramArray);
+
     if (hasLocalStorage) {
 	// build up quantHSLHistogramArray from all the images
 
-	quantHSLHistogramArray = new Array(img_list_len);
-	var i;
-	for (i=0; i<img_list_len; i++) {
-	    var flag_id = "flag-img-" + i;
-	    var imageObj = document.getElementById(flag_id);
-	    quantHSLHistogramArray[i] = imageObj.quantHSLHist;
-	} 
-
 	console.log("Storing computed HSL histograms in localStorage");
-	localStorage.quantHSLHistogramArray = JSON.stringify(quantHSLHistogramArray);
+	localStorage.quantHSLHistogramArray = json_hist_data;
+    }
+
+    if (saveOnServer) {
+	// run-length encode data, so less to send
+	var quantHSLHistogramArrayRLE = new Array(img_list_len);
+	for (var i=0; i<img_list_len; i++) {
+	    //console.log("rle encoding ... i = " + i);
+	    quantHSLHistogramArrayRLE[i] = runlength_encode(quantHSLHistogramArray[i])
+
+	    //var test_decode_array = runlength_decode(quantHSLHistogramArrayRLE[i]);
+	    //console.log("Checking decoded array: " + arrays_identical(test_decode_array,quantHSLHistogramArray[i]));
+	}
+
+
+	var json_hist_data_rle = JSON.stringify(quantHSLHistogramArrayRLE);
+
+	var json_filename = "all-hsv-histograms-rle.json";
+	var data = { jsonFilename: json_filename, jsonData: json_hist_data_rle};
+	
+	console.log("Saving colour histogram data for all flags");
+	$.ajax({
+  	    type: "POST",
+	    url: "../similarity-2d/save-json-data.jsp",
+	    data: data	    
+	});
     }
 }
@@ -312,13 +479,13 @@
 function doneDisplayFlags(img_list,$progressArea,$progressBar)
 {
-    hasLocalStorage = false;
-    needToComputeHistograms = true;
-
-    if (typeof(Storage) !== "undefined") {
-	hasLocalStorage = true;
+    console.log("doneDisplayFlags()");
+
+    var needToComputeHistograms = true;
+
+    if (hasLocalStorage) {
 
 	if (localStorage.quantHSLHistogramArray) {
 
-	    console.log("Retrieving quantized HSL histograms");
+	    console.log("Retrieving quantized HSL histograms from local storage");
 
 	    var stored_hist_array = JSON.parse(localStorage["quantHSLHistogramArray"]);
@@ -336,5 +503,4 @@
 		} 
 
-
 		needToComputeHistograms = false;
 	    }
@@ -345,7 +511,52 @@
     }
 
-
     if (needToComputeHistograms) {
-	computeFlagHistograms(img_list,$progressArea,$progressBar);
+
+	if (retrieveFromServer) {
+	    // before computing histograms from scratch, see if resulting data stored on server
+
+	    console.log("Retrieving stored colour histgram data for all flags ...");
+	    $.ajax({
+		async: true,
+		dataType: "json",
+		url: "../similarity-2d/json-data/all-hsv-histograms-rle.json",
+		success: function(rle_data) {
+		    console.log("... success");
+		    if (rle_data.length != img_list.length) {
+		    console.log("Stored histogram data out of date with flag list.");
+			// what is stored on the sever differed to the number of images displayed
+			computeFlagHistograms(img_list,$progressArea,$progressBar);
+		    }
+		    else {
+			var img_list_len = img_list.length;
+			quantHSLHistogramArray = new Array(img_list_len);
+			
+			// Need to rle decode each entry in this array
+			for (var i=0; i<img_list_len; i++) {
+			    quantHSLHistogramArray[i] = runlength_decode(rle_data[i]);
+			    var flag_id = "flag-img-" + i;
+			    var imageObj = document.getElementById(flag_id);
+			    imageObj.quantHSLHist = quantHSLHistogramArray[i];
+
+			}
+
+			needToComputeHistograms = false;
+
+			$progressArea.slideUp();
+			doneComputingHistograms(img_list.length);
+
+		    }
+		},
+		error: function() {
+		    console.log("... not stored on server");
+		    computeFlagHistograms(img_list,$progressArea,$progressBar);
+		}
+	    });
+
+
+	}
+	else {
+	    computeFlagHistograms(img_list,$progressArea,$progressBar);
+	}
     }
     else {
Index: /other-projects/nz-flag-design/trunk/similarity-2d/list-flags.jsp
===================================================================
--- /other-projects/nz-flag-design/trunk/similarity-2d/list-flags.jsp	(revision 29786)
+++ /other-projects/nz-flag-design/trunk/similarity-2d/list-flags.jsp	(revision 29787)
@@ -2,11 +2,13 @@
       String docBase = getServletContext().getRealPath("/");
       File similarityDir = new File(docBase,"similarity-2d");
-      File imagesDir = new File(similarityDir,"Images");
+
+      String imagesStr = (request.getParameter("imagesDir")!=null) ? request.getParameter("imagesDir") : "import";
+      File imagesDir = new File(similarityDir,imagesStr);
 
       ArrayList<File> imageFileList = listFilesForFolder(imagesDir,".gif");
 
-      File imageUrlBase = new File("Images");
+      File imageUrlBase = new File(imagesStr);
 
-      String action = request.getParameter("action");
+      //String action = request.getParameter("action");
 
       out.println("<script>");
