Index: other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js
===================================================================
--- other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js	(revision 29805)
+++ other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js	(revision 29806)
@@ -9,6 +9,6 @@
 
 
-var hasLocalStorage = (typeof(Storage) !== "undefined"); // ****
-//var hasLocalStorage = false;
+//var hasLocalStorage = (typeof(Storage) !== "undefined"); // ****
+var hasLocalStorage = false;
 
 var quantHSLHistogramArray;
@@ -132,13 +132,9 @@
 }
 
-function createHSLHistogram(imageObj, quant)
+
+
+function createHSLHistogramFromCanvasData(imageData, imageWidth, imageHeight, quant)
 {
     var i;
-
-    if (!$('#hsl_canvas').length) {
-	$('<canvas>', {id: 'hsl_canvas'}).hide().appendTo('body');
-    }
-
-    var imageData = drawImage(imageObj,'hsl_canvas');
 
     var outputLength = quant * quant * quant;
@@ -164,7 +160,7 @@
     //Loop through each pixel
     var y,p;
-    for (y=0,p=0; y<imageObj.height; y++) {
+    for (y=0,p=0; y<imageHeight; y++) {
   	  var x;
-	  for (x=0; x<imageObj.width; x++,p+=4) {
+	  for (x=0; x<imageWidth; x++,p+=4) {
 	    // convert 4 byte data value into a colour pixel
 	    var rgb_c = new RGBColour(data[p],data[p+1],data[p+2],data[p+3]/255.0);
@@ -192,4 +188,10 @@
     }
 
+    if (total == 0) {
+	// entire image must have been blank
+	// make total '1' to stop NaN being generated
+	total = 1;
+    }
+
     //Normalise the histogram, based on the number of opaque pixels
     for (i=0; i<outputArray.length; i++) {
@@ -197,13 +199,27 @@
     }
 
+    return outputArray;
+}
+
+
+function createHSLHistogram(imageObj, quant)
+{
+    if (!$('#hsl_canvas').length) {
+	$('<canvas>', {id: 'hsl_canvas'}).hide().appendTo('body');
+    }
+
+    var imageData = drawImage(imageObj,'hsl_canvas');
+
+    var outputArray = createHSLHistogramFromCanvasData(imageData,imageObj.width,imageObj.height,quant);
+
 /*
     if (saveOnServer) {
-	console.log("Saving HSV quantized histogram on server: " + imageObj.title)
+	console.log("Saving HSV quantized histogram on server: " + imageObj.title.toLowerCase())
 	//console.log("outputArray = " + JSON.stringify(outputArray));
 
-	var jsonFilename = imageObj.title + ".json";
+	var jsonFilename = imageObj.title.toLowerCase() + ".json";
 	var data = { jsonFilename: jsonFilename, jsonData: JSON.stringify(outputArray)};
 
-	console.log("Saving colour histogram data for " + imageObj.title);
+	console.log("Saving colour histogram data for " + imageObj.title.toLowerCase());
 	$.ajax({
   	    type: "POST",
@@ -235,6 +251,7 @@
     }
 
-    alert("Product for HSL histogram: " + quant_product);
-
+    console.log("Product for HSL histogram: " + quant_product);
+
+    return quant_product;
 }
 
@@ -316,5 +333,5 @@
 		if (clicked_on_count==2) {
 		    // trigger comparison
-		    quantizedColourHistogramComparison(flag_comparison_array[0],flag_comparison_array[1]);
+		    alert("Similarity score: " + quantizedColourHistogramComparison(flag_comparison_array[0],flag_comparison_array[1]));
 		    clicked_on_count=0;
 		}
@@ -330,5 +347,6 @@
 	
 	imageObj.src   = img_url;
-	imageObj.title = title;
+	imageObj.title = title.toUpperCase();
+	imageObj.country = imageObj.title;
 	imageObj.id    = "flag-img-" + i;
 
@@ -336,4 +354,90 @@
     }
 }
+
+
+
+
+
+function calcSimilarityValues(newFlagQuantHSLHist, $displayDiv,$progressArea,$progressBar)
+{
+    console.log("*** calcSimilarityValues()");
+
+    var iframe = $('#similarity-2d-iframe').contents();
+
+    var img_obj_list = iframe.find('#flagArea').children('img').toArray();
+
+    var img_obj_list_len = img_obj_list.length;
+
+    if (img_obj_list_len==0) {
+	return;
+    }
+    else if (img_obj_list_len>show_progress) {
+	// number of images to process non-trivial
+	$progressArea.slideDown();
+    }
+
+    var progress_step = 100.0 / img_obj_list_len;
+    
+    for (var i=0; i<img_obj_list.length; i++) {
+	var imgObj = img_obj_list[i];
+
+	var existingQuantHSLHist = imgObj.quantHSLHist;
+
+	var similarity_score = quantizedColourHistogramComparison(newFlagQuantHSLHist,existingQuantHSLHist);
+	imgObj.similarityScore = similarity_score;
+	imgObj.title = imgObj.country + ", Similarity score: " + similarity_score;
+
+	progressVal += progress_step;	
+	console.log("*** i = " + i);
+	console.log("*** pbar = " + $progressBar.progressbar);
+	if ($progressBar.progressbar) {
+	    $progressBar.progressbar('value',progressVal);
+	}
+    }
+
+    //progressVal = 100;
+    //$progressBar.progressbar('value',progressVal);
+
+    if (img_obj_list_len>show_progress) {
+	$progressArea.slideUp();
+    }
+}
+
+function sortUsingAttribute(parent, childSelector, field) {
+    var items = parent.children(childSelector).sort(function(a, b) {
+        var vA = a.attr(field);
+        var vB = b.attr(field)
+        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
+    });
+
+    parent.empty(childSelecctor);
+    parent.append(items);
+}
+
+
+function compareSimilarityValue(a,b) { 
+
+    //var vA = a.similarityScore;
+    //var vB = b.similarityScore;
+    //return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
+    
+    return (b.similarityScore - a.similarityScore); 
+}
+
+function sortFlagsBySimilarityValue($iframe)
+{
+    var img_obj_list = $iframe.find('#flagArea > img').toArray();
+
+    var sorted_img_obj_list = img_obj_list.sort(compareSimilarityValue);
+    //console.log("*** sorted img len = " + sorted_img_obj_list.length);
+
+    $iframe.find('#flagArea').empty('img');
+
+    $iframe.find('#flagArea').append(sorted_img_obj_list);
+
+    //sortUsingAttribute('#flagArea','img','similarityValue');
+}
+
+
 
 function computeFlagHistogramChain(chain_count, img_list_len,
@@ -351,9 +455,9 @@
 	if (retrieveFromServer) {
 	    // see if it is stored on the server 
-	    console.log("Retrieving stored colour histogram for " + imageObj.title + " ...");
+	    console.log("Retrieving stored colour histogram for " + imageObj.title.toLowerCase() + " ...");
 	    $.ajax({
 		async: false,
 		dataType: "json",
-		url: "../similarity-2d/json-data/" + imageObj.title + ".json",
+		url: "../similarity-2d/json-data/" + imageObj.title.toLowerCase() + ".json",
 		success: function(data) {
 		    console.log("... success");
@@ -524,5 +628,6 @@
 		    console.log("... success");
 		    if (rle_data.length != img_list.length) {
-		    console.log("Stored histogram data out of date with flag list.");
+			console.log("Stored histogram data out of date with flag list.");
+			console.log("rle len = " + rle_data.length + ", img_list len = " + img_list.length);
 			// what is stored on the sever differed to the number of images displayed
 			computeFlagHistograms(img_list,$progressArea,$progressBar);
