NIHVIVO-194. Added a close button with click event listener to the custom form addNew div.

productMods/edit/forms/css/customForm.css

@@ -87,6 +87,16 @@ option {
     margin-bottom: 1.25em;
 }
 
-.close {
+#content form a.close {
-    display: none; /* Hide if Javascript disabled. Javascript will show. */
+    float: right;
-}
+    margin-right: 1em;
+    font-size: 90%;    
+}
+
+#content form a.close:link, 
+#content form a.close:visited {
+    /*display: none;  Hide if Javascript disabled. Javascript will show. */
+    border-color: #FF7700;
+    color: #FF7700;
+
+}

productMods/edit/forms/js/customForm.js

@@ -135,7 +135,9 @@ var customForm = {
     doAddFormStep1: function() {
     	
     	if (this.formSteps == 1) {
+    		customForm.addNewLink.css('margin-bottom', '1em');
     		customForm.doAddFormStep2();
+    		customForm.doClose();
     		return;
     	}
     	
@@ -250,7 +252,7 @@ var customForm = {
     unbindEventListeners: function() {
     	customForm.cancel.unbind('click');
     	customForm.button.unbind('click');    
-    	customForm.addNewLink.unbind('click');   	
+    	customForm.addNewLink.unbind('click');   
     },
     
     clearFormData: function() {
@@ -299,6 +301,7 @@ var customForm = {
     hideFields: function(el) {
         // Clear any input, so if we reshow the element the input won't still be there.
         customForm.clearFields(el);
+        customForm.toggleRequiredHints('remove', el);
         el.hide();
     },
 
@@ -325,17 +328,34 @@ var customForm = {
     	customForm.addNewLink.unbind('click');
     	customForm.addNewLink.bind('click', function() {
             $(this).hide();
+            
             // Make sure to clear out what's in the existing select element,
             // else it could be submitted even when hidden.
+            // RY When we have multiple existing and addNew divs, we won't
+            // show/hide them all, only the siblings of the addNewLink.
             customForm.hideFields(customForm.existing);
             customForm.showFields(customForm.addNew);
             
             if (buttonText) {
                 customForm.button.val(buttonText);            	
             }
+            return false;
         });  
     },
     
+    doClose: function() {
+    	// This can be bound once on page load, doesn't need to be unbound
+    	// or rebound.
+    	customForm.close.click(function() {
+    		// RY When we have multiple existing and addNew divs, we won't
+    		// show/hide them all, only the siblings of the addNewLink.
+    		customForm.showFields(customForm.existing);
+    		customForm.hideFields(customForm.addNew);
+    		customForm.addNewLink.show();
+    		return false;
+    	});
+    },
+    
     // Return true iff there are validation errors on the form
     findValidationErrors: function() {
 

productMods/edit/forms/personHasEducationalBackground.jsp

@@ -380,9 +380,11 @@ core:organizationGrantingDegree (EducationalBackground : Organization) - no inve
             If your organization is not listed, please <a href="#">add a new organization</a>.    
         </div>
       
-        <div class="new">
+        <div class="new">            
+            <a class="close" href="#">close</a>
             <h6>Add a New Organization</h6>
-            <v:input type="text" label="Organization Name" labelClass="required" id="newOrgName" />
+
+            <v:input type="text" label="Organization Name" labelClass="required" id="newOrgName" size="30" />
             <v:input type="select" label="Select Organization Type" labelClass="required" id="newOrgType" />
         </div>   
     </div> 

productMods/edit/forms/personHasPositionHistory.jsp

@@ -318,7 +318,7 @@
       
         <div class="new">
             <h6>Add a New Organization</h6>
-            <v:input type="text" label="Organization Name" labelClass="required" id="newOrgName" />
+            <v:input type="text" label="Organization Name" labelClass="required" id="newOrgName" size="30" />
             <v:input type="select" label="Select Organization Type" labelClass="required" id="newOrgType" />
         </div>   
     </div>