Index: lams_admin/web/userorg.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_admin/web/userorg.jsp,v
diff -u -r1.14 -r1.15
--- lams_admin/web/userorg.jsp	30 Nov 2007 04:48:08 -0000	1.14
+++ lams_admin/web/userorg.jsp	5 Dec 2007 05:52:49 -0000	1.15
@@ -1,15 +1,114 @@
 <%@ include file="/taglibs.jsp"%>
 
-<script language="javascript" type="text/JavaScript">
-function toggleCheckboxes(){
-	<logic:iterate id="user" name="userlist" indexId="index" >
-	document.UserOrgForm.userIds[<bean:write name="index" />].checked=document.UserOrgForm.allCheckboxes.checked;
-	</logic:iterate>
-}
+<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/jquery-1.1.4.pack.js"></script>
+<script>
+	<!--
+	jQuery(document).ready(function() {
+		jQuery("div#existing").load(
+			"user/basiclist.do", 
+			{orgId: <bean:write name="UserOrgForm" property="orgId"/>},
+			function() {
+				updateExistingTotal();
+				jQuery("li", this).each(function() {
+					var rowHtml = jQuery(this).html();
+					jQuery(this).html("<a class='removeLink'>"+rowHtml+"</a>");
+				});
+				bindRemoveLink();
+			}
+		);
+		loadSearchResults(0);
+	});
+	
+	function updateExistingTotal() {
+		jQuery("span#totalUsers").text(jQuery("li", "#existing").size());
+	}
+	
+	function updatePotentialTotal() {
+		jQuery("span#potentialUsers").text(jQuery("li", "#potential").size());
+	}
+	
+	function bindRemoveLink() {
+		jQuery("body").click(function(event) {
+			if (jQuery(event.target).is("a.removeLink")) {
+				if (jQuery(event.target).parent().is("li")) {
+					jQuery(event.target).parent().remove();
+					updateExistingTotal();
+				}
+			}
+		});
+	}
+	
+	function bindAddLink() {
+		jQuery("a.addLink").click(function() {
+			var rowText = jQuery(this).parent().text();
+			var rowId = jQuery(this).parent().attr("id");
+			jQuery("div#existing").append("<li id='"+rowId+"'><a class='removeLink'>"+rowText+"</a></li>");
+			jQuery(this).parent().remove();
+			updateExistingTotal();
+			updatePotentialTotal();
+		});
+	}
+	
+	function loadSearchResults(potential) {
+		if (potential=='1') {
+			jQuery("div#potential").load(
+				"user/basiclist.do",
+				{orgId: <bean:write name="UserOrgForm" property="orgId"/>,
+				potential: potential}, 
+				function() {
+					loadSearchResultsCallback();
+				}
+			);
+		} else {
+			jQuery("div#potential").load(
+				"user/searchsingle.do",
+				{term: jQuery("#term").val(),
+				orgId: <bean:write name="UserOrgForm" property="orgId"/>}, 
+				function() {
+					loadSearchResultsCallback();
+				}
+			);
+		}
+		return false;
+	}
+	
+	function loadSearchResultsCallback() {
+		updatePotentialTotal();
+		jQuery("li", this).each(function() {
+			var rowHtml = jQuery(this).html();
+			jQuery(this).html("<a class='addLink'>"+rowHtml+"</a>");
+		});
+		bindAddLink();
+	}
+	
+	function populateForm() {
+		jQuery("li", "div#existing").each(function() {
+			jQuery("form", "div#form").append("<input type='checkbox' name='userIds' value='"+jQuery(this).attr("id")+"' checked='checked' style='display:none;'>");
+		});
+		return true;
+	}
+	//-->
 </script>
 
-<html-el:form action="/userorgsave.do" method="post">
-<html-el:hidden property="orgId" />
+<style>
+.listBoundingBox {
+	border:thin solid #c1c1c1;
+	margin-left:5px;
+}
+p {
+	margin-left:5px;
+}
+.listScrollable {
+	margin:5px; 
+	height:250px; 
+	overflow-y:auto;
+}
+.floatRight {
+	float:right;
+	margin-top:5px;
+}
+</style>
+
 <h2 class="align-left">
 	<a href="orgmanage.do?org=1"><fmt:message key="admin.course.manage" /></a>
     <logic:notEmpty name="pOrgId">
@@ -27,47 +126,47 @@
 
 <p>&nbsp;</p>
 
+<div align="center"><html-el:errors/></div>
+
 <logic:equal name="orgType" value="2">
 	<p><fmt:message key="msg.remove.from.subgroups"/></p>
 </logic:equal>
 
-<div align="center"><html-el:errors/></div>
-<table class="alternative-color" width=100% cellspacing="0">
-<tr>
-	<th><fmt:message key="admin.user.login"/></th>
-	<th><fmt:message key="admin.user.title"/></th>
-	<th><fmt:message key="admin.user.first_name"/></th>
-	<th><fmt:message key="admin.user.last_name"/></th>
-	<th><input type="checkbox" name="allCheckboxes" onclick="toggleCheckboxes();" onkeyup="toggleCheckboxes();" /></th>
-</tr>
+<h3><fmt:message key="heading.users"/></h3>
+<div class="floatRight"><span id="totalUsers">0</span> <fmt:message key="label.number.of.users"/></div>
+<p>
+	 <fmt:message key="msg.click.remove.user"/>
+</p>
+<div class="listBoundingBox">
+	<div id="existing" class="listScrollable">
+	</div>
+</div>
 
-<logic:iterate id="user" name="userlist">
-	<tr>
-		<td>
-			<bean:write name="user" property="login" />
-		</td>
-		<td>
-			<bean:write name="user" property="title" />
-		</td>
-		<td>
-			<bean:write name="user" property="firstName" />
-		</td>
-		<td>
-			<bean:write name="user" property="lastName" />
-		</td>
-		<td>
-            <html-el:multibox name="UserOrgForm" property="userIds" value="${user.userId}"/>
-		</td>		
-	</tr>
-</logic:iterate>
+<p>&nbsp;</p>
 
-<tr>
-	<td colspan=5 class="align-right">
-		<html-el:submit styleClass="button"><fmt:message key="admin.save"/></html-el:submit>
-		<html-el:reset styleClass="button"><fmt:message key="admin.reset"/></html-el:reset>
-		<html-el:cancel styleClass="button"><fmt:message key="admin.cancel"/></html-el:cancel>
-	</td>
-</tr>
+<h3><fmt:message key="heading.potential.users"/></h3>
+<p>
+	<fmt:message key="msg.click.add.user"/>
+</p>
+<div class="floatRight"><span id="potentialUsers">0</span> <fmt:message key="label.number.of.potential.users"/></div>
+<form onsubmit="return loadSearchResults(0);">
+	<p>
+		<fmt:message key="admin.search"/>: <input id="term" type="text"/> or <a onclick="loadSearchResults(1);"><fmt:message key="msg.show.all.potential.users"/></a>
+	</p>
+</form>
+<div class="listBoundingBox">
+	<div id="potential" class="listScrollable">
+	</div>
+</div>
 
-</table>
-</html-el:form>
\ No newline at end of file
+<p>&nbsp;</p>
+
+<div id="form" class="floatRight">
+	<html:form action="userorgsave.do" method="post">
+		<html:hidden property="orgId" />
+		<html:submit styleClass="button" onclick="return populateForm();"><fmt:message key="label.next"/></html:submit>
+		<html:cancel styleClass="button"><fmt:message key="admin.cancel"/></html:cancel>
+	</html:form>
+</div>
+
+<p>&nbsp;</p>