=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/ajax/jsonSystemAuthorities.vm'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/ajax/jsonSystemAuthorities.vm	2011-06-19 09:21:37 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/ajax/jsonSystemAuthorities.vm	2011-06-19 09:59:18 +0000
@@ -2,7 +2,10 @@
 { "systemAuthorities": [
 #foreach( $systemAuthority in $systemAuthorities )
   {
-    "name": "$!encoder.jsonEncode( ${systemAuthority} )"
+  	#set( $name = $i18n.getString( "${systemAuthority}") )
+
+  	"id": "$!encoder.jsonEncode( ${systemAuthority} )",
+    "name": "$!encoder.jsonEncode( $name )"
   }#if( $velocityCount < $size ),#end
 #end
 ]

=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/addRoleForm.vm'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/addRoleForm.vm	2011-04-11 11:16:51 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/addRoleForm.vm	2011-06-19 09:59:18 +0000
@@ -1,72 +1,109 @@
 <script type="text/javascript" src="javascript/addRoleForm.js"></script>
 <script type="text/javascript">
+	jQuery(function() {
+		jQuery("#availableList").dhisAjaxSelect({
+			source: "../dhis-web-commons-ajax-json/getDataSets.action",
+			iterator: 'dataSets',
+			connectedTo: 'selectedList',
+			handler: function(item) {
+				var option = jQuery("<option />");
+				option.text( item.name );
+				option.attr( "value", item.id );
+
+				return option;
+			}
+		});
+
+		jQuery("#availableListAuthority").dhisAjaxSelect({
+			source: "../dhis-web-commons-ajax-json/getSystemAuthorities.action",
+			iterator: 'systemAuthorities',
+			connectedTo: 'selectedListAuthority',
+			handler: function(item) {
+				var option = jQuery("<option />");
+				option.text( item.name );
+				option.attr( "value", item.id );
+
+				return option;
+			}
+		});
+	});
+
 	var i18n_adding_role_failed = '$encoder.jsEscape( $i18n.getString( "adding_role_failed" ) , "'")';
 </script>
 
 <h3>$i18n.getString( "create_new_user_role" )</h3>
 
 <form id="addRoleForm" name="addRoleForm" action="addRole.action" method="post" >
-  <table>
+<table>
+  	<col style="width: 120px"/>
+    <col style="width: 350px"/>
+    <col/>
+    <col style="width: 350px"/>
+  
 	<tr>
 		<th colspan="4">$i18n.getString( "details" )</th>
 	</tr>
+
 	<tr>
 		<td><label for="name">$i18n.getString( "name" ) <em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
 		<td colspan="3"><input type="text" id="name" name="name" style="width:20em"></td>
 	</tr>
+
 	<tr>
 		<td><label for="description">$i18n.getString( "description" ) <em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
 		<td colspan="3"><input type="text" id="description" name="description" style="width:20em""></td>
 	</tr>
-	<tr>
-		<td colspan="4" height="10"></td>
-	</tr>
+
 	<tr>
 		<td></td>
 		<th>$i18n.getString( "available" )</th>
-		<td></td>
+		<th></th>
 		<th>$i18n.getString( "selected" )</th>
 	</tr>
+	
 	<tr>
 		<td><label>$i18n.getString( "data_sets" )</label></td>		
 		<td>
-          <select size="15" id="availableList" name="availableList" multiple="multiple" style="min-width:20em;height:20em" ondblclick="moveSelectedById( 'availableList', 'selectedList' )">
-            #foreach ( $availableDataSet in $availableDataSets )
-              <option value="$availableDataSet.id">$encoder.htmlEncode( $availableDataSet.name )</option>
-            #end
-          </select>
-        </td>
-        <td>
-          <input type="button" value="&lt;" title="$i18n.getString('remove_selected')" onclick="moveSelectedById( 'selectedList', 'availableList' )"/>
-          <input type="button" value="&gt;" title="$i18n.getString('move_selected')" onclick="moveSelectedById( 'availableList', 'selectedList' )"/>
-		</td>
+          <select id="availableList" name="availableList" multiple="multiple" style="height: 200px; width: 100%;"></select>
+        </td>
+
+        <td style="text-align:center">
+        	<input type="button" value="&gt;" title="$i18n.getString( 'move_selected' )" style="width:50px" onclick="dhisAjaxSelect_moveAllSelected( 'availableList' );"/><br/>
+            <input type="button" value="&lt;" title="$i18n.getString( 'remove_selected' )" style="width:50px" onclick="dhisAjaxSelect_moveAllSelected( 'selectedList' );"/><br/>
+			<input type="button" value="&gt;&gt;" title="$i18n.getString('move_all')" style="width:50px" onclick="dhisAjaxSelect_moveAll( 'availableList' );"/><br/>
+			<input type="button" value="&lt;&lt;" title="$i18n.getString('remove_all')" style="width:50px" onclick="dhisAjaxSelect_moveAll( 'selectedList' );"/>
+        </td>
+
 		<td>
-          <select id="selectedList" name="selectedList" multiple="multiple" style="min-width:20em;height:20em" ondblclick="moveSelectedById( 'selectedList', 'availableList' )">
-          </select>
+			<select id="selectedList" name="selectedList" multiple="multiple" style="height: 200px; width: 100%; margin-top: 22px;"></select>
         </td>
 	</tr>
 		
 	<tr>
 		<td><label>$i18n.getString( "authorities" )</label></td>		
-		<td>
-          <select size="15" id="availableListAuthority" name="availableListAuthority" multiple="multiple" style="min-width:20em;height:20em" ondblclick="moveSelectedById( 'availableListAuthority', 'selectedListAuthority' )">
-			#foreach( $authority in $availableAuthorities )
-              <option value="$authority">$i18n.getString($authority)</option>
-			#end
-          </select>
-        </td>
-		<td>
-          <input type="button" value="&lt;" onclick="moveSelectedById( 'selectedListAuthority', 'availableListAuthority' )"/>
-          <input type="button" value="&gt;" onclick="moveSelectedById ( 'availableListAuthority', 'selectedListAuthority' )"/>
-		</td>		
+
+		<td>
+          <select id="availableListAuthority" name="availableList" multiple="multiple" style="height: 200px; width: 100%;"></select>
+        </td>
+
+        <td style="text-align:center">
+        	<input type="button" value="&gt;" title="$i18n.getString( 'move_selected' )" style="width:50px" onclick="dhisAjaxSelect_moveAllSelected( 'availableListAuthority' );"/><br/>
+            <input type="button" value="&lt;" title="$i18n.getString( 'remove_selected' )" style="width:50px" onclick="dhisAjaxSelect_moveAllSelected( 'selectedListAuthority' );"/><br/>
+			<input type="button" value="&gt;&gt;" title="$i18n.getString('move_all')" style="width:50px" onclick="dhisAjaxSelect_moveAll( 'availableListAuthority' );"/><br/>
+			<input type="button" value="&lt;&lt;" title="$i18n.getString('remove_all')" style="width:50px" onclick="dhisAjaxSelect_moveAll( 'selectedListAuthority' );"/>
+        </td>
+
         <td>
-          <select id="selectedListAuthority" name="selectedListAuthority" multiple="multiple" style="min-width:20em;height:20em" ondblclick="moveSelectedById( 'selectedListAuthority', 'availableListAuthority' )">
-          </select>
+          <select id="selectedListAuthority" name="selectedListAuthority" multiple="multiple" style="height: 200px; width: 100%; margin-top: 22px;"></select>
         </td>
 	</tr>	
+
 	<tr>
 		<td></td>
-		<td valign="top"><input type="submit" value="$i18n.getString( 'add' )" style="width:10em"/><input type="button" value="$i18n.getString( 'cancel' )" onclick="window.location.href='allRole.action'" style="width:10em"/></td>
+		<td valign="top">
+			<input type="submit" value="$i18n.getString( 'add' )" style="width:10em"/>
+			<input type="button" value="$i18n.getString( 'cancel' )" onclick="window.location.href='allRole.action'" style="width:10em"/>
+		</td>
 	</tr>
   </table>
 </form>

=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/updateRoleForm.vm'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/updateRoleForm.vm	2011-04-11 11:16:51 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/updateRoleForm.vm	2011-06-19 09:59:18 +0000
@@ -1,4 +1,33 @@
 <script type="text/javascript" src="javascript/updateRoleForm.js"></script>
+<script type="text/javascript">
+	jQuery(function() {
+		jQuery("#availableList").dhisAjaxSelect({
+			source: "../dhis-web-commons-ajax-json/getDataSets.action",
+			iterator: 'dataSets',
+			connectedTo: 'selectedList',
+			handler: function(item) {
+				var option = jQuery("<option />");
+				option.text( item.name );
+				option.attr( "value", item.id );
+
+				return option;
+			}
+		});
+
+		jQuery("#availableListAuthority").dhisAjaxSelect({
+			source: "../dhis-web-commons-ajax-json/getSystemAuthorities.action",
+			iterator: 'systemAuthorities',
+			connectedTo: 'selectedListAuthority',
+			handler: function(item) {
+				var option = jQuery("<option />");
+				option.text( item.name );
+				option.attr( "value", item.id );
+
+				return option;
+			}
+		});
+	});
+</script>
 
 <h3>$i18n.getString( "edit_user_role" )</h3>
 
@@ -8,72 +37,85 @@
   	</div>
 
   	<table>
+	  	<col style="width: 120px"/>
+	    <col style="width: 350px"/>
+	    <col/>
+	    <col style="width: 350px"/>
+
 		<tr>
 			<th colspan="4">$i18n.getString( "details" )</th>        
 		</tr>
+
 		<tr>
 			<td><label for="name">$i18n.getString( "name" ) <em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
 			<td colspan="3"><input type="text" id="name" name="name" value="$!encoder.htmlEncode( $userAuthorityGroup.name )" style="width:20em"></td>
 		</tr>
+
 		<tr>
 			<td><label for="description">$i18n.getString( "description" ) <em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
 			<td colspan="3"><input type="text" id="description" name="description" value="$!encoder.htmlEncode( $userAuthorityGroup.description )" style="width:20em"/></td>
 		</tr>
-		<tr>
-			<td colspan="4" height="10"></td>
-		</tr>
+
 		<tr>
 			<td></td>
 			<th>$i18n.getString( "available" )</th>
-			<td></td>
+			<th></th>
 			<th>$i18n.getString( "selected" )</th>
 		</tr>
+
 		<tr>
 			<td><label>$i18n.getString( "data_sets" )</label></td>	
+
 			<td>
-          		<select size="15" id="availableList" name="availableList" multiple="multiple" style="min-width:20em;height:20em" ondblclick="moveSelectedById( 'availableList', 'selectedList' )">
-            	#foreach ( $availableDataSet in $availableDataSets )
-              		<option value="$availableDataSet.id">$encoder.htmlEncode( $availableDataSet.name )</option>
-            	#end
-        		</select>
+	        	<select id="availableList" name="availableList" multiple="multiple" style="height: 200px; width: 100%;"></select>
         	</td>
-        	<td>
-        		<input type="button" value="&lt;" onclick="moveSelectedById( 'selectedList', 'availableList' )"/>
-        		<input type="button" value="&gt;" onclick="moveSelectedById ( 'availableList', 'selectedList' )"/>
-			</td>
-        	<td>
-        		<select id="selectedList" name="selectedList" multiple="multiple" style="min-width:20em;height:20em" ondblclick="moveSelectedById( 'selectedList', 'availableList' )">
+
+	        <td style="text-align:center">
+	        	<input type="button" value="&gt;" title="$i18n.getString( 'move_selected' )" style="width:50px" onclick="dhisAjaxSelect_moveAllSelected( 'availableList' );"/><br/>
+	            <input type="button" value="&lt;" title="$i18n.getString( 'remove_selected' )" style="width:50px" onclick="dhisAjaxSelect_moveAllSelected( 'selectedList' );"/><br/>
+				<input type="button" value="&gt;&gt;" title="$i18n.getString('move_all')" style="width:50px" onclick="dhisAjaxSelect_moveAll( 'availableList' );"/><br/>
+				<input type="button" value="&lt;&lt;" title="$i18n.getString('remove_all')" style="width:50px" onclick="dhisAjaxSelect_moveAll( 'selectedList' );"/>
+	        </td>
+
+        	<td>
+				<select id="selectedList" name="selectedList" multiple="multiple" style="height: 200px; width: 100%; margin-top: 22px;">
             	#foreach ( $selectedDataSet in $roleDataSets )
               		<option value="$selectedDataSet.id">$encoder.htmlEncode( $selectedDataSet.name )</option>
             	#end
-        		</select>
+				</select>
         	</td>
 		</tr>
 		
 		<tr>
 			<td><label>$i18n.getString( "authorities" )</label></td>
+
 			<td>
-          		<select size="15" id="availableListAuthority" name="availableListAuthority" multiple="multiple" style="min-width:20em;height:20em" ondblclick="moveSelectedById( 'availableListAuthority', 'selectedListAuthority' )">
-				#foreach( $availableAuthority in $availableAuthorities )
-              		<option value="$availableAuthority">$i18n.getString( $availableAuthority )</option>
-				#end
-          		</select>
+          		<select id="availableListAuthority" name="availableList" multiple="multiple" style="height: 200px; width: 100%;"></select>
         	</td>
-        	<td>
-        		<input type="button" value="&lt;" onclick="moveSelectedById( 'selectedListAuthority', 'availableListAuthority' )"/>
-        		<input type="button" value="&gt;" onclick="moveSelectedById ( 'availableListAuthority', 'selectedListAuthority' )"/>
-			</td>
-        	<td>
-				<select id="selectedListAuthority" name="selectedListAuthority" multiple="multiple" style="min-width:20em;height:20em" ondblclick="moveSelectedById( 'selectedListAuthority', 'availableListAuthority' )">
+
+	        <td style="text-align:center">
+	        	<input type="button" value="&gt;" title="$i18n.getString( 'move_selected' )" style="width:50px" onclick="dhisAjaxSelect_moveAllSelected( 'availableListAuthority' );"/><br/>
+	            <input type="button" value="&lt;" title="$i18n.getString( 'remove_selected' )" style="width:50px" onclick="dhisAjaxSelect_moveAllSelected( 'selectedListAuthority' );"/><br/>
+				<input type="button" value="&gt;&gt;" title="$i18n.getString('move_all')" style="width:50px" onclick="dhisAjaxSelect_moveAll( 'availableListAuthority' );"/><br/>
+				<input type="button" value="&lt;&lt;" title="$i18n.getString('remove_all')" style="width:50px" onclick="dhisAjaxSelect_moveAll( 'selectedListAuthority' );"/>
+	        </td>
+
+        	<td>
+          		<select id="selectedListAuthority" name="selectedListAuthority" multiple="multiple" style="height: 200px; width: 100%; margin-top: 22px;">
             	#foreach ( $selectedAuthority in $roleAuthorities )
 					<option value="$selectedAuthority">$i18n.getString( $selectedAuthority )</option>
             	#end
           		</select>
         	</td>
+
 		</tr>	
+
 		<tr>
 			<td></td>
-			<td valign="top"><input type="submit" value="$i18n.getString( 'save' )" style="width:10em"/><input type="button" value="$i18n.getString( 'cancel' )" onclick="window.location.href='allRole.action'" style="width:10em"/></td>
+			<td valign="top">
+				<input type="submit" value="$i18n.getString( 'save' )" style="width:10em" />
+				<input type="button" value="$i18n.getString( 'cancel' )" onclick="window.location.href='allRole.action'" style="width:10em"/>
+			</td>
 			<td></td>
 			<td></td>
 		</tr>