<%@ 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">
// Mandatory for XHTML strict validation
//<![CDATA[
	var selectedArticleId;
	var articleId;
	var pattern;
		
	function showDetail(artId){
		articleId = artId;	
		var divTitle = 'title'+artId;
		var divArticle = 'article'+artId;
		
		if (!$(divTitle).hasClassName('selected')){	
			if(selectedArticleId != null){
				removeAll(selectedArticleId);
				$('title'+selectedArticleId).removeClassName('selected');
				new Effect.SlideUp('dispatcher'+selectedArticleId);
				
			}
			selectedArticleId = articleId;
			$(divTitle).addClassName('selected');
			initDispatcher(divArticle);
			
		}else{
			removeAll(articleId);
			new Effect.SlideUp('dispatcher'+articleId);
			$(divTitle).removeClassName('selected');
			selectedArticleId = null;
		}
	}	
	
	function initDispatcher(elementId){
		
		//listes	
		
		DispatchArticlesJS.getMembersWithoutTheArticle(articleId,fillListMembers);
		DispatchArticlesJS.getMembersWithTheArticle(articleId,fillListArticleMembers);
		
		new Effect.SlideDown('dispatcher'+articleId);	
	}
	
	function fillListArticleMembers(data){
		
		for (var i = 0; i < data.length; i++) {  	
  			var member = data[i];
  			var pref;
  			if (member.preference=="LIKE"){
  				pref = "<span id='pref' style='color:green;font-weight:bold'>LIKE</span>";
  			}
  			if (member.preference=="DISLIKE"){
  				pref = "<span id='pref' style='color:red;font-weight:bold'>DISLIKE</span>";
  			}else { 
  				pref = "<span id='pref' style='font-weight:bold'>INDIFFERENT</span>";
  			}
  			var value= member.firstName+" "+member.lastName +' nb articles:' + member.nbArticles 
  					+ " pref: "+ pref;
			var elem = new Element('div',
			{'class':'dynamicListItem','id':member.login,
			"style":"border:1px"}).update(value);
			$('membersArticleList'+articleId).insert(elem);
			elem.observe('click', function(event){
  										select(Event.element(event));
					 				});
		}
	}
	
	function fillListMembers(data){
		for (var i = 0; i < data.length; i++) {  	
  			var member = data[i];
  			var pref;
  			if (member.preference=="LIKE"){
  				pref = "<span id='pref' style='color:green;font-weight:bold'>LIKE</span>";
  			}
  			if (member.preference=="DISLIKE"){
  				pref = "<span id='pref' style='color:red;font-weight:bold'>DISLIKE</span>";
  			}else { 
  				pref = "<span id='pref' style='font-weight:bold'>INDIFFERENT</span>";
  			}
  			var value= member.firstName+" "+member.lastName +' nb articles:' + member.nbArticles 
  					+ " pref: "+ pref;
			var elem = new Element('div',
			{'class':'dynamicListItem','id':member.login,
			"style":"border:1px"}).update(value);
			$('membersList'+articleId).insert(elem);
			elem.observe('click', function(event){
  										select(Event.element(event));
							 				});
			
		}
	}
	
	function select(elem){
		var item = elem;
		if(item.id != 'pref'){
			if(item.hasClassName('selected')){
				item.removeClassName('selected');
			} else {
				item.addClassName('selected');
			}
		}
	}
	
	function removeRemote() {
		var itemsToRemove = $('membersArticleList'+articleId).select('div.selected');
		var membersId = itemsToRemove.pluck('id');
		DispatchArticlesJS.removeMembers(membersId, articleId, remove);
	}
			
	function remove() {
		var itemsToRemove = $('membersArticleList'+articleId).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'+articleId).insert(item);
			}
		}
	} 
	
	function addRemote(){
		var itemsToAdd = $('membersList'+articleId).select('div.selected');
		var membersId = itemsToAdd.pluck('id');
		DispatchArticlesJS.addMembers(membersId, articleId, add());

	}
	
	function add() {
		var itemsToAdd = $('membersList'+articleId).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'+articleId).insert(item);
			}
		}
	}
	
	function removeAll(artId){
		var itemsToRemove = $('membersArticleList'+artId).select('div.dynamicListItem');
		itemsToRemove.invoke('remove');
		itemsToRemove = $('membersList'+artId).select('div.dynamicListItem');
		itemsToRemove.invoke('remove');
	}
//]]>
</script>

</head>
<body>

<h4 class="title"><fmt:message key="dipatchArticle.choose" /></h4>
<p class="formHelp">
	<fmt:message key="disptachArticle.help" />
</p>
<c:forEach var="article" items="${articles}">
<div style="border:1px solid orange;">
	<div id="article${article.id}">
		<div id="title${article.id}" onclick="showDetail(${article.id})">	
			<table style="width:100%;text-align:center;">
					<tr>
						<td width="20%"><img src="./images/cc-wp-24x24.png"></td>
						<td width="60%"><a href="<c:url value='detailArticle.htm?id=${article.id}'/>"><b>${article.title}</b></a> by ${article.mainAuthor.firstName}&nbsp;${article.mainAuthor.lastName}
						
						</td>
						<td width="20%"><img src="./images/1uparrow.png"></td>
					</tr>
				</table>
		</div>
		<div id='dispatcher${article.id}' class="textBox" style="display:none;">
			<table style="width:100%;"> 
				<tr><td>
					<h1><fmt:message key="members.list1"/></h1>
					
					<div id="membersList${article.id}" style="border:1px solid black; max-height:150px;overflow:auto;">	
					</div>
					
				</td><td>
					<img id="addButton" src="./images/agt_forward.png" onclick="addRemote()"><br />
					<img id="removeButton" src="./images/agt_back.png" onclick="removeRemote()">
				</td><td>
					<h1><fmt:message key="members.list2"/></h1>			
					<div id="membersArticleList${article.id}" style="border:1px solid black; max-height:150px;overflow:auto;">
					</div>
				</td></tr>
			</table>
		</div>
	</div>
</div>
</c:forEach>

</body>

</html>
