Index: other-projects/nz-flag-design/trunk/main-form/enter-name.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/enter-name.html	(revision 29926)
+++ other-projects/nz-flag-design/trunk/main-form/enter-name.html	(revision 29927)
@@ -2,6 +2,6 @@
 <html id="story">
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- jQuery -->
@@ -12,20 +12,13 @@
   <body>
     <div data-role="page" id="enter-name-page" 
-	 class="demo-page" 
-	 data-dom-cache="true" 
-	 data-prev="iterative-design">
-
-      <div data-role="content">
+	  class="demo-page" 
+	  data-dom-cache="true" 
+	  data-prev="iterative-design">
+
+      <div data-role="content">	  
+	<div data-role="controlgroup" class="control" data-mini="true">        
+	  <a href="#" class="prev left-button gen-back" style="left:1%;"></a>
+	</div>  
 	  
-	<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>  
-	  
-<!--
- 	<a target="_parent" href="../index.html" class="back-button back-left"></a>
--->
 	  
 	<div class="story-page">
@@ -34,7 +27,6 @@
 	  <div class="story-title">
 	    <h1 id="enter-name-header" class="center">Contact Details</h1>
-<!--
-	    <p class="center">- - xx </p>
--->
+
+
             <style>
 	      input {
@@ -52,30 +44,124 @@
 		Flag Name: 
 	      </p>
-	      <input type="text" autofocus="autofocus" style="color: white;" name="pub-name" />
-
-
-
-	      <p>
+	      <input id="myFlagName" type="text" autofocus="autofocus" style="color: white;" name="pub-name" />
+	      <p id="nameTaken" 
+	          class="ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c"
+	          style="display:none; background-color: #400000; color: white; padding: 10px; font-size: 180%;">
+	        <i>
+	          This flag name is already taken.  <br/> Please enter a different name.
+		</i>		
+	      </p>
+
+
+	      <p id="myNameLabel" class="enterNameDisabled">
 		Your Name: 
 	      </p>
-	      <input type="text" style="color: white;" name="name" />
-
-	      <p>
+	      <input id="myName" type="text" style="color: white;" name="name" disabled="disabled"/>
+
+
+	      <p id="myEmailLabel" class="enterNameDisabled">
 		Contact email: 
 	      </p>
-	      <input type="text" name="email" />
-
-	      <p>
+	      <input id="myEmail" type="text" name="email" disabled="disabled"/>
+
+	      <p id="myDescLabel" class="enterNameDisabled">
 		Motivation for your flag design:
 	      </p>
-	      <textarea name="desc" style="height: 250px;" >Describe your design ...</textarea>
+	      <textarea id="myDesc" name="desc" style="height: 250px;" disabled="disabled">Describe your design ...</textarea>
 	      
 
 	      <div style="padding-top: 20px; padding-left: 10px; padding-right: 10px">
-		<input type="submit" value="Submit Flag Design" />
+		<input id="mySubmit" type="submit" value="Submit Flag Design" disabled="disabled" />
 	      </div>
 	    </form>
 
+	    <style>
+	      .enterNameEnabled {
+	        color: white;
+	      }
+
+	      .enterNameDisabled {
+	        color: #909090;
+	      }
+
+	    </style>
+
 	    <script>
+	      var rest_of_form_disabled = true;
+	      var submit_button_disabled = true;
+
+	      var stage1_input_valid = ["myName","myEmail","myDesc"];
+	      var stage1_label_valid = ["myNameLabel","myEmailLabel","myDescLabel"];
+
+	      var stage2_input_valid = ["mySubmit"];
+	      var stage2_label_valid = [];
+
+	      function disableRestOfForm()
+	      {	     
+	          for (var i=0; i<stage1_label_valid.length; i++) {
+		    $('#'+stage1_label_valid[i]).toggleClass("enterNameEnabled",false)
+		    $('#'+stage1_label_valid[i]).toggleClass("enterNameDisabled",true)
+		  }
+
+	          for (var i=0; i<stage1_input_valid.length; i++) {
+		    //$('#'+stage1_input_valid[i]).attr("disabled","disabled")
+		    $('#'+stage1_input_valid[i]).textinput("disable")
+		  }
+		  disableSubmit();
+		  rest_of_form_disabled = true;
+
+	      }
+
+	      function enableAllButSubmit()
+	      {
+	          for (var i=0; i<stage1_label_valid.length; i++) {
+		    $('#'+stage1_label_valid[i]).toggleClass("enterNameDisabled",false);
+		    $('#'+stage1_label_valid[i]).toggleClass("enterNameEnabled",true);
+		  }
+
+	          for (var i=0; i<stage1_input_valid.length; i++) {
+		    //$('#'+stage1_input_valid[i]).removeAttr("disabled")
+		    //$('#'+stage1_input_valid[i]).prop("disabled",false)
+		    $('#'+stage1_input_valid[i]).textinput("enable");
+		  }
+		  reset_of_form_disabled = false;
+	      }
+
+
+	      function disableSubmit()
+	      {
+	          for (var i=0; i<stage2_label_valid.length; i++) {
+		    $('#'+stage2_label_valid[i]).toggleClass("enterNameEnabled",false);
+		    $('#'+stage2_label_valid[i]).toggleClass("enterNameDisabled",true);
+		  }
+
+	          for (var i=0; i<stage2_input_valid.length; i++) {
+		    //$('#'+stage2_input_valid[i]).attr("disabled","disabled");
+		    $('#'+stage2_input_valid[i]).button("disable");
+		  }
+
+	          submit_button_disabled = true;
+
+	      }
+
+
+	      function enableSubmit()
+	      {
+
+	          for (var i=0; i<stage2_label_valid.length; i++) {
+		    $('#'+stage2_label_valid[i]).toggleClass("enterNameDisabled",false)
+		    $('#'+stage2_label_valid[i]).toggleClass("enterNameEnabled",true)
+		  }
+
+	          for (var i=0; i<stage2_input_valid.length; i++) {
+		    //$('#'+stage2_input_valid[i]).removeAttr("disabled")
+		    $('#'+stage2_input_valid[i]).button("enable");
+		  }
+
+	          submit_button_disabled = false;
+
+	      }
+
+
               var jsession_id = $.cookie('JSESSIONID') || new Date().getTime();
 	      $('#publish-data').append('<input type="hidden" name="myid" value="' + jsession_id + '"/>');
@@ -84,7 +170,77 @@
 
 	      //$('#publish-data').append('<img src="../render-3d/images/flag-' + jsession_id + '.png"/>');
+	      
+	      var taken_list   = null;
+	      var taken_lookup = null;
+	      $myFlagName = $('#myFlagName');
+	      $myFlagName.keyup(function() {
+
+	          if (taken_list == null) {
+
+		    $.ajax({
+		        url: 'published-names.jsp',
+			async: false,
+			success: function(datastr) { 
+			  var clean_datastr = datastr.replace(/^\s+/,"");
+			  //alert("OK:" +  clean_datastr); 
+			  var data = eval("(" + clean_datastr + ")");
+			  //alert("OK:" +  JSON.stringify(data)); 
+			  taken_list  = data;
+			  //console.log("****** !!!! taken list = " + JSON.stringify(taken_list));
+			  taken_lookup = {}; 
+			  for (var i=0; i<taken_list.length; i++) {
+			    var pub_name = taken_list[i];
+			    taken_lookup[pub_name] = 1;
+			  }
+			  //console.log("****** !!!! taken lookup = " + JSON.stringify(taken_lookup));
+
+			},
+			error:   function(data) { 
+			  console.log("Error:" +  JSON.stringify(data)) 
+			  }
+			});
+
+
+                  }
+
+		  var flag_name = $myFlagName.val();
+		  flag_name = flag_name.replace(/^\s+/,"").replace(/\s+$/,"").replace(/\s+/g," ");
+
+		  if (flag_name.length==0) {
+	            //$('#nameTaken').hide("blind",{duration: 200});
+	            $('#nameTaken').hide();
+		    disableRestOfForm();
+		  }
+		  else {
+		    if (rest_of_form_disabled) {
+		      enableAllButSubmit();
+		    }
+		  }
+
+		  if (taken_lookup != null) {
+		    if (taken_lookup[flag_name]) {
+		      // current flag_name NOT available
+		      if (!submit_button_disabled) {
+	                //$('#nameTaken').show("Blind",{duration: 200});
+	                $('#nameTaken').show();
+		        disableSubmit();
+		      }
+		    }
+		    else {
+		      if (submit_button_disabled) {
+	                //$('#nameTaken').hide("blind",{duration: 200});
+			$('#nameTaken').hide();
+		        enableSubmit();
+		      }
+		    }
+		  }
+
+		      
+
+	          //console.log("entered field: " +  $myFlagName.val());
+
+	      });
 
 	    </script>
-
 
 	  </div>
