<%@ include file="/WEB-INF/decorators/include.jsp"%>

<html>
<head>
<script type='text/javascript' src='./javascripts/prototype.js'></script>
<script type='text/javascript' src='./javascripts/scriptaculous.js'></script>
<script type='text/javascript' src='./dwr/engine.js'></script>
<script type='text/javascript' src='./dwr/util.js'></script>
<script type='text/javascript' src='./dwr/interface/DispatchArticlesJS.js'></script>
<script type="text/javascript">
	var selectedElement;
	var articleId;
	
	function showDetail(artId){
		var articleId = artId;
		var divTitle = 'title'+artId;
		var divArticle = 'article'+artId;
		if (!$(divTitle).hasClassName('selected')){
			
			if($('dispatcher')!= null){
				$('dispatcher').remove();
				selectedElement.removeClassName('selected');
			}
			selectedElement = $(divTitle);
			$(divTitle).addClassName('selected');
			initDispatcher(divArticle);
			
		}else{
			$(divTitle).removeClassName('selected');
			new Effect.SlideUp('dispatcher', {afterFinish:function(){$('dispatcher').remove();}});
		}
	}	
	
	function initDispatcher(elementId){
		
		//container
		var pattern = $('dispatcherPattern').innerHTML;		
		var elem = new Element('div',
			{'class':'dynamicListItem',
			'style':'background:pink;display:none',
			'id':"dispatcher"}).update(pattern);
			$(elementId).insert(elem);
			new Effect.SlideDown('dispatcher');
		
		//listes	
		//DispatchArticlesJS.sayHello("maxime",retour);
		DispatchArticlesJS.getMembersWithoutTheArticle(articleId,fillListMembers);
		DispatchArticlesJS.getMembersWithTheArticle(articleId,fillListArticleMembers);
		
		//buttons
		$('addButton').observe("click",addRemote());
		$('removeButton').observe("click",removeRemote());		
	}
	
	function retour(data){
		alert(data);
	}	
	
	function fillListArticleMembers(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());
		
		}
	}
	
	function fillListMembers(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', select(elem));
		}
	}
	
	function select(item){
		if(item.hasClassName('selected')){
			item.removeClassName('selected');
		} else {
			item.addClassName('selected');
		}
	}
	
	function removeRemote() {
		var itemsToRemove = $('membersList').select('div.selected');
		var membersId = itemsToRemove.pluck('id');
		//var articleId = $('articleId').value;
		DispatchArticlesJS.removeMembers(membersId, articleId, remove);
	}
			
	function remove() {
		var itemsToRemove = $('membersArticleList').select('div.selected');
		//suppression dans la premiè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);
			}
		}
	} 
	
	function addRemote(){
		var itemsToAdd = $('membersList').select('div.selected');
		var membersId = itemsToAdd.pluck('id');
		//var articleId = $('articleId').value;
		DispatchArticlesJS.removeMembers(membersId, articleId, add());

	}
	
	function add() {
		var itemsToAdd = $('membersList').select('div.selected');
		//suppression dans la premiè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);
			}
		}
	}
</script>

</head>
<body>

<div id='dispatcherPattern' style="display:none">
	<table> 
		<tr><td>
			<h1><fmt:message key="members.List1"/></h1>	
			<div id="membersList">	
			</div>
		</td><td>
			<input type="button" id="addButton" value="add>>>"/><br/>
			<input type="button" id="removeButton" value="<<<remove"/>
		</td><td>
			<h1><fmt:message key="members.List2"/></h1>			
			<div id="membersArticleList">
			</div>
		</td></tr>
	</table>
</div>

<h4 class="title"><fmt:message key="disptachArticle.choose" /></h4>
<c:forEach var="article" items="${articles}">
<div id="article${article.id}">
	<div id="title${article.id}" onclick="showDetail(${article.id})">	
		<h2>
			<table>
			<tr>		
				<td>title : ${article.title} 
				<br/>theme: ${article.topic}
				<br/>main author: ${article.mainAuthor.firstName}{article.mainAuthor.lastName}
				<td><a href="${article.URL_article}">download the article</a></td>
				
			</tr>	
			</table>
		</h2>	
	</div>
</div>
</c:forEach>
	
</body>

<div>
</html>