anchor.diff:  			}
           }
           
  -         AutocompleterManager.addAutocompleter(sponsorSiteAutocompleterProps);
  -         
  -         
  -       var instanceRowInserterProps = {
  +    var instanceRowInserterProps = {
          add_row_division_id: "investigatorsTable", 	        /* this id belongs to element where the row would be appended to */
          skeleton_row_division_id: "dummy-row",
  -       initialIndex: ${fn:length(command.healthcareSite.investigatorGroups[selected_site].siteInvestigatorGroupAffiliations)},   /* this is the initial count of the rows when the page is loaded  */
  +       initialIndex: ${newGroup?0:fn:length(command.healthcareSite.investigatorGroups[groupIndex].siteInvestigatorGroupAffiliations)},   /* this is the initial count of the rows when the page is loaded  */
          softDelete: ${softDelete == 'true'},
  -	   path: "healthcareSite.investigatorGroups[${selected_site}].siteInvestigatorGroupAffiliations",                            /* this is the path of the collection that holds the rows  */
  +	   path: "healthcareSite.investigatorGroups[${groupIndex}].siteInvestigatorGroupAffiliations",                            /* this is the path of the collection that holds the rows  */
          postProcessRowInsertion: function(object){
  -        clonedRowInserter=Object.clone(principalInvestigatorAutocompleterProps);
  -		clonedRowInserter.basename=clonedRowInserter.basename+object.localIndex;
  -		AutocompleterManager.registerAutoCompleter(clonedRowInserter);
  -    },
  -    onLoadRowInitialize: function(object, currentRowIndex){
  -		clonedRowInserter=Object.clone(principalInvestigatorAutocompleterProps);
  -		clonedRowInserter.basename=clonedRowInserter.basename+currentRowIndex;
  -		AutocompleterManager.registerAutoCompleter(clonedRowInserter);
  -    }
  -};
  -
  -var instanceGroupRowInserterProps = {
  -       add_row_division_id: "groupsTable", 	        /* this id belongs to element where the row would be appended to */
  -       skeleton_row_division_id: "dummy-group",
  -       initialIndex: ${fn:length(command.healthcareSite.investigatorGroups)},   /* this is the initial count of the rows when the page is loaded  */
  -       softDelete: ${softDelete == 'true'},
  -	   path: "healthcareSite.investigatorGroups",                            /* this is the path of the collection that holds the rows  */
  -};
  -RowManager.addRowInseter(instanceGroupRowInserterProps);
  +	       	inputDateElementLocal="investigators["+object.localIndex+"].startDate";
  +	        inputDateElementLink="investigators["+object.localIndex+"].startDate-calbutton";
  +	        Calendar.setup(
  +	        {
  +	            inputField  : inputDateElementLocal,         // ID of the input field
  +	            ifFormat    : "%m/%d/%Y",    // the date format
  +	            button      : inputDateElementLink       // ID of the button
  +	        }
  +	                );
  +	        inputDateElementLocal="investigators["+object.localIndex+"].endDate";
  +	        inputDateElementLink="investigators["+object.localIndex+"].endDate-calbutton";
  +	        Calendar.setup(
  +	        {
  +	            inputField  : inputDateElementLocal,         // ID of the input field
  +	            ifFormat    : "%m/%d/%Y",    // the date format
  +	            button      : inputDateElementLink       // ID of the button
  +	        }
  +	                );
  +	        clonedRowInserter=Object.clone(principalInvestigatorAutocompleterProps);
  +			clonedRowInserter.basename=clonedRowInserter.basename+object.localIndex;
  +			AutocompleterManager.registerAutoCompleter(clonedRowInserter);
  +					}
  +	};
   RowManager.addRowInseter(instanceRowInserterProps);  
  -         
  -         function handleShowGroups(){
  -         	var organizationId = document.getElementById("healthcareSite-hidden").value;
  -         	<tags:tabMethod method="getInvestigatorGroups"  divElement="'groupsList'" 
  -						javaScriptParam="'organizationId='+organizationId" params="'showGroups='+showGroups" formName="'tabMethodForm'"/>
  -         };
  -         function handleShowSiteAffiliations(){
  -         	var selected_site = document.getElementById("selected_site").value;
  -         	<tags:tabMethod method="getSiteAffiliations"  divElement="'investigators'" 
  -						javaScriptParam="'selected_site='+selected_site" params="'showGroups='+showGroups" formName="'tabMethodForm'"/>
  -         };
  -         function handleAddGroup(){
  -         	document.getElementById("_addGroup").value="true";
  -			document.getElementById("command").submit();
  -         };
  -         function chooseSites() {
  -		    document.getElementById("_action").value="siteChange";
  -		    document.getElementById("_selectedSite").value=document.getElementById('site').value;
  -		    document.getElementById("command").submit();
  +  AutocompleterManager.addAutocompleter(sponsorSiteAutocompleterProps);
  +
  +		function hover()
  +		{
  +		    //var sel = $("disease-sub-category")
  +		    //alert (sel.value)
  +		
   		};
  +		function updateGroups(id,selectedId,saveEvent){
  +		
  +			OrganizationAjaxFacade.getInvestigatorGroups(id, function(categories) {
  +		        var sel = $("disease-sub-category")
  +		        sel.size = categories.length < 10 ? categories.length + 2 : 10;
  +		        //sel.size= 10
  +		        sel.options.length = 0
  +		        categories.each(function(cat) {
  +		            var opt = new Option(cat.name, cat.id)
  +		            opt.groupName=cat.name
  +		            opt.groupDesc=cat.descriptionText
  +		            opt.startDate=cat.startDate;
  +		            opt.endDate=cat.endDate;
  +		            sel.options.add(opt)
  +		            if(selectedId!="" && cat.id==selectedId)
  +		            opt.selected=true;
  +		        })
  +		        if(sel.options[0]!=null && selectedId==""){
  +		         	sel.options[0].selected = true;
  +		         }
  +		        showAffiliations(saveEvent)
  +	    	})
  +		};
  +		
  +		function showAffiliations(saveEvent) {
  +		    var categoryId = $("disease-sub-category").value
  +		    var opts=$("disease-sub-category").options
  +		    var subCategorySelect = $("disease-sub-category")
  +		    // If all is selected
  +		    
  +	    	new Ajax.Updater('groupDisplay', 'getGroup', {method:"get", asynchronous:true, evalScripts:true, onComplete:function(){ new Effect.Highlight('groupDisplay');}, 
  +		    												parameters: { decorator:"nullDecorator", groupId: categoryId, healthcareSite: $(sponsorSiteAutocompleterProps.basename+"-hidden").value}
  +		    											});
  +		}
  +		
  +	function handleAddGroup(){
  +		new Ajax.Updater('groupDisplay', 'getGroup', {method:"get", asynchronous:true, evalScripts:true, onComplete:function(){ new Effect.Highlight('groupDisplay');}, 
  +		    												parameters: { decorator:"nullDecorator", healthcareSite: $(sponsorSiteAutocompleterProps.basename+"-hidden").value}
  +		    											});
  +	}
  +
  +	Event.observe(window, "load", function() {
  +	    Event.observe("disease-sub-category", "change", function() {
  +	        showAffiliations('true');
  +	    })
  +	//    populateSelectsOnLoad();
  +	
  +	    // Element.update("flow-next", "Continue &raquo;")
  +	})
  +	function submitGroupForm(){
  +		new Element.show("savingIndicator");
  +		new Ajax.Request($('groupForm').action, {method:'post', asynchronous:true, parameters:Form.serialize('groupForm'),  evalScripts:true,
  +																	onSuccess:function(t)
  +																		{ 
  +																			new Element.hide("savingIndicator")
  +																			new Element.show("savedIndicator");
  +																			updateGroups($(sponsorSiteAutocompleterProps.basename+'-hidden').value, t.responseText, true);
  +																		}
  +															});
  +								 return false;
  +	}
   </script>
  +<script type="text/javascript" src="/c3pr/js/CalendarPopup.js"></script>	
   </head>
   <body>
   <div class="tabpane">
  
positive.code:             afterUpdateElement: function(inputElement, selectedElement, selectedChoice) {
      								hiddenField=sponsorSiteAutocompleterProps.basename+"-hidden"
  	    							$(hiddenField).value=selectedChoice.id;
  	    							document.getElementById("_siteChanged").value="true";
  	    							document.getElementById("command").submit();
  			 }
          }
         
      var principalInvestigatorAutocompleterProps = {
              basename: "investigator",
              populator: function(autocompleter, text) {
                  OrganizationAjaxFacade.matchStudyOrganizationInvestigatorsGivenOrganizationId(text,document.getElementById("healthcareSite-hidden").value, function(values) {
                      autocompleter.setChoices(values)
                  })
              },
  
negative.code: 		    <input type="hidden" name="_siteChanged" id="_siteChanged" value="false">
  		</div>
  		<tags:errors path="*" />
  		
  
   <chrome:division title="Organization" id="disease">
            Search for an Organization<br>
            <input type="hidden" id="healthcareSite-hidden"
  					name="healthcareSite" value="${command.healthcareSite.id}" /> <input
  					id="healthcareSite-input" size="60" type="text" name="xyz"
  					value="${command.healthcareSite.name}"
  					class="autocomplete validate-notEmpty" /> 
  					<input type="button" id="healthcareSite-clear"
                          value="Clear"/>
  					<tags:indicator	id="healthcareSite-indicator" />
  				<div id="healthcareSite-choices" class="autocomplete"></div>
  				 <p id="disease-selected" style="display: none"></p>
  
            <br><br>Select a Group<br>
            <select multiple size="1" onmouseover="javascript:hover()" style="width:400px" id="disease-sub-category">
                <option value="">Please select a Group first</option>
            </select>
            
            <div align="right"><input type="button" value="Add Group" onclick="handleAddGroup()"/></div>
  
        </chrome:division>
  		
  <div id="groupDisplay"/>
  </tags:panelBox></div>
  
  </body>
  </html>
  
  