Index: other-projects/nz-flag-design/trunk/similarity-2d/display-flags.jsp
===================================================================
--- other-projects/nz-flag-design/trunk/similarity-2d/display-flags.jsp	(revision 29621)
+++ other-projects/nz-flag-design/trunk/similarity-2d/display-flags.jsp	(revision 29622)
@@ -3,4 +3,25 @@
   <head>
     <meta charset="utf-8"/>
+
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
+
+    <link rel="stylesheet" href="style.css" />
+
+    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
+    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
+
+    <script src="flag-processing.js"></script>
+
+    <script>
+      $(function() {
+        $( "#progressBar" ).progressbar({
+	      value: progressVal
+        });
+      });
+    </script>
+
+
+    <title>Display Flags</title>
+
   </head>
 
@@ -25,22 +46,20 @@
     </div>
 
+   <div id="progressArea">
+     <span id="loadingLabel">Loading: </span>
+     <div id="progressBar"></div>
+   </div>
+
+   <div id="flagArea"></div>
+
+
     <script>
 
       if (!is_jsp_active) {
-        document.write("<div>Web server is no JSP active.  Unable to run flag comparison</div>");
+        var mess = "<div>Web server is no JSP active.  Unable to run flag comparison</div>";
+        $('#flagArea').append(mess);
       }
-      var i;
-
-      var root_img_re = /^.*\/(.*?)\..*?$/;
-
-      for (i=0; i<img_list.length; i++) {
-	var img   = img_list[i];
-        var img_matches = root_img_re.exec(img);
-	var title = img_matches[1];
-
-        document.write("<img src=\"" + img_list[i] + "\" "
-	    + "title=\"" + title + "\" "
-	    + "style=\"padding: 4px;\">\n");
-      }
+      
+      displayFlags(img_list,$('#flagArea'),$('#progressArea'),$('#progressBar'));
 
     </script>
Index: other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js
===================================================================
--- other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js	(revision 29622)
+++ other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js	(revision 29622)
@@ -0,0 +1,57 @@
+
+var progressVal = 0;
+
+
+function drawImage(imageObj, canvasId) {
+    "use strict";
+    var imgCanvas = document.getElementById(canvasId),
+        context, imageData, data,
+        imageX = 0, imageY = 0,
+        imageWidth = imageObj.width,
+        imageHeight = imageObj.height;
+    context = imgCanvas.getContext('2d');
+    context.drawImage(imageObj, imageX, imageY, imageWidth, imageHeight);
+    imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight);
+    //data = imageData.data;
+    return imageData;
+}
+
+
+function displayFlags(img_list,$displayDiv,$progressArea,$progressBar)
+{
+    var i;
+	
+    var root_img_re = /^.*\/(.*?)\..*?$/;
+
+    var img_list_len = img_list.length;
+    var progress_step = 100.0 / img_list_len;
+    
+    var callback_count = 0;
+    
+    for (i=0; i<img_list.length; i++) {
+	var img_url     = img_list[i];
+	var img_matches = root_img_re.exec(img_url);
+	var title       = img_matches[1];
+	
+	var imageObj = new Image();
+	imageObj.onload = function () {
+	    callback_count++;
+	    progressVal += progress_step;	
+	    $progressBar.progressbar('value',progressVal);
+	    
+	    //image1Data = drawImage(this, "canvas1");
+	    
+	    if (callback_count == img_list_len) {
+		$progressArea.slideUp();
+	    }
+	};
+	
+	imageObj.src   = img_url;
+	imageObj.title = title;
+	
+	$displayDiv.append(imageObj);
+    }
+}
+
+
+
Index: other-projects/nz-flag-design/trunk/similarity-2d/style.css
===================================================================
--- other-projects/nz-flag-design/trunk/similarity-2d/style.css	(revision 29622)
+++ other-projects/nz-flag-design/trunk/similarity-2d/style.css	(revision 29622)
@@ -0,0 +1,22 @@
+div {
+    font-family: Sans-serif;
+}
+
+img {
+    padding: 4px;
+}
+
+.ui-progressbar-value {
+    background: #a8cb45; /* Fieldays Green */
+}
+
+#progressArea {
+    padding: 8px;
+}
+
+#loadingLabel {
+    padding: 4px;
+    font-size: 120%;
+}
+
+
