Policy failures:

Code warning
- failed on resource dispatchArticleList.jsp. Reason: Invalid location of tag (table)., line 165
- failed on resource dispatchArticleList.jsp. Reason: No end tag (</div>)., line 18
Override reason:   
a

YACOSWeb/WebContent/WEB-INF/jsp/dispatchArticle.jsp

@@ -7,74 +7,140 @@
 <script type='text/javascript' src='./dwr/util.js'></script>
 <script type='text/javascript' src='./dwr/interface/DispatchArticlesJS.js'></script>
 <script type='text/javascript' src='./javascripts/prototype.js'></script>
+<script type='text/javascript' src='./javascripts/scriptaculous.js'></script>
 
 <script type='text/javascript'>
-	function addMember(memberId, articleId){
-		DispatchArticlesJS.addMember(memberId, articleId, fillTable);
+	
+	
+	var InvitationsManager = Class.create({
+	initialize: function(buttonAdd,buttonRemove){
+		this.buttonAdd = buttonAdd;
+		this.buttonRemove = buttonRemove;
+		
+		$(buttonAdd).observe("click",this.addRemote.bind(this));
+		$(buttonRemove).observe("click",this.removeRemote.bind(this));
+		
+		DispatchArticlesJS.getMembersWithTheArticle($('articleId').value,this.fillListArticleMembers.bind(this));
+		DispatchArticlesJS.getMembersWithoutTheArticle($('articleId').value,this.fillListMembers.bind(this));
+	},
+	
+	fillListArticleMembers: function(data){
+		
+		for (var i = 0; i < data.length; i++) {  	
+  			var member = data[i];
+  			var value= member.firstName+" "+member.lastName +'(' + member.nbArticles + ')'
+  					+ " preferences:"+ member.Preference;
+			var elem = new Element('div',
+			{'class':'dynamicListItem','id':member.login}).update(value);
+			$('membersArticleList').insert(elem);
+			elem.observe('click', this.select.bindAsEventListener());
+				
+			
+		//a placer sur tous les items :
+		//elem.observe('click', this.select.bindAsEventListener());
+		}
+	},
+	
+	fillListMembers: function(data){
+		
+		for (var i = 0; i < data.length; i++) {  	
+  			var member = data[i];
+  			var value= member.firstName+" "+member.lastName +'(' + member.nbArticles + ')'
+  					+ " preferences:"+ member.Preference;
+			var elem = new Element('div',
+			{'class':'dynamicListItem','id':member.login}).update(value);
+			$('membersList').insert(elem);
+			elem.observe('click', this.select.bindAsEventListener());
+		}
+	},
+	
+	select: function(event){
+		var item = event.element();
+		if(item.hasClassName('selected')){
+			item.removeClassName('selected');
+		} else {
+			item.addClassName('selected');
+		}
+	},
+	
+	removeRemote: function() {
+		var itemsToRemove = $('membersList').select('div.selected');
+		var membersId = itemsToRemove.pluck('id');
+		var articleId = $('articleId').value;
+		DispatchArticlesJS.removeMembers(membersId, articleId, this.remove.bind(this));
+	},
+			
+	remove: function() {
+		var itemsToRemove = $('membersArticleList').select('div.selected');
+		//suppression dans la premi<6D>re liste
+		itemsToRemove.invoke('remove');
+		
+		//ajout dans la seconde liste
+		if (itemsToRemove.length != 0){
+			for (var i = 0; i < itemsToRemove.length; i++) {
+				item = itemsToRemove[i];
+				item.removeClassName('selected');
+				$('membersList').insert(item);
+			}
+		}
+	}, 
+	
+	addRemote: function(){
+		var itemsToAdd = $('membersList').select('div.selected');
+		var membersId = itemsToAdd.pluck('id');
+		var articleId = $('articleId').value;
+		DispatchArticlesJS.removeMembers(membersId, articleId, this.add.bind(this));
+
+	},
+	
+	add: function() {
+		var itemsToAdd = $('membersList').select('div.selected');
+		//suppression dans la premi<6D>re liste
+		itemsToAdd.invoke('remove');
+		
+		//ajout dans la seconde liste
+		if (itemsToAdd.length != 0){
+			for (var i = 0; i < itemsToAdd.length; i++) {
+				item = itemsToAdd[i];
+				item.removeClassName('selected');
+				$('membersArticleList').insert(item);
+			}
+		}
 	}
 	
-	function removeMember(memberId, articleId){
-		DispatchArticlesJS.removeMember(memberId, articleId, fillTable);
-	}
-	function fillTable(data) {
-		//dwr.util.removeAllRows('members');
-		//dwr.util.addRows('members',data, cellFuncs);
-		
-	}
-		
+	
+});
+
+Event.observe(window,'load', function(){
+	new DispatcheManager('addButton','removeButton')});
+	
+	
 </script>
 
 </head>
-<body>
+<body>
+
+<div id=dispatcher></div>
 
 <h4 class="title">NO NAME</h4>
 
 <h4 class="title"><fmt:message key="disptachArticle.choose" /></h4>
-
-<input type="button" value="hello" onclick="sayHello('max');"/>
-<p>
-	Article's description :
-	<br/>title : ${article.title}
-	<br/> theme: ${article.topic}
-	<br/> main author: ${article.mainAuthor.firstName}{article.mainAuthor.lastName}
-	<br/><a href="${article.URL_article}">download the article</a>
-</p>
-<br/>
-			
-	<b>members of the conference</b>
-			
-	<table border="1px" id="members">
-		<tr>
-			<th>name</th>
-			<th>preference</th>
-			<th>nb of articles for this conference</th>
-			<th></th>
-		</tr>
-		<c:forEach var="m" items="${members}">
-			<tr>
-				<td>${m.firstName} ${m.lastName}</td>
-				<td>${m.preference}</td>
-				<td>${m.nbArticles}</td>
-				<td><input type="button" value="add" onclick="addMember('${m.login}','${article.id}');"/></td>
-			</tr>
-		</c:forEach>
-	</table>
+
+<input type=hidden id="articleId" value="${article.id}">
+
+<div style="display:inline;border:1px">
+	<h2><fmt:message key="members.List1"/></h2>	
+	<div id="membersList">
 		
-	<table border="1px" id="articleMembers">
-		<tr>
-			<th>name</th>
-			<th>preference</th>
-		</tr>
-		<c:forEach var="am" items="${articleMembers}">
-			<tr>
-				<td>${am.firstName} ${am.lastName}</td>
-				<td>${m.preference}</td>
-				<td><input type="button" value="delete" onclick="removeMember('${am.login}','${article.id}');"/></td>
-			</tr>
-		</c:forEach>
-	</table>
-		
-
+	</div>
+	
+	<input type="button" id="addButton" value="add"/>
+	<input type="button" id="removeButton" value="remove"/>
+	
+	<h2><fmt:message key="members.List2"/></h2>			
+	<div id="membersArticleList">
+	</div>
+</div>
   </body>
 </html>