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

<html>
<head>

<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' src='./javascripts/prototype.js'></script>
<script type='text/javascript' src='./javascripts/scriptaculous.js'></script>

<script type='text/javascript'>
	
	
	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è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è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);
			}
		}
	}
	
	
});

Event.observe(window,'load', function(){
	new DispatcheManager('addButton','removeButton')});
	
	
</script>

</head>
<body>

<div id=dispatcher></div>

<h4 class="title">NO NAME</h4>

<h4 class="title"><fmt:message key="disptachArticle.choose" /></h4>

<input type=hidden id="articleId" value="${article.id}">

<div style="display:inline;border:1px">
	<h2><fmt:message key="members.List1"/></h2>	
	<div id="membersList">
		
	</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>

