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

<script type='text/javascript'>
//<![CDATA[
function init() {
  dwr.engine.setAsync(false); // a vérifier
  //AddCriteriaJS.initPerson();
  dwr.engine.setAsync(true);	
  setTimeout("fillTable()", 500);
  setTimeout("fillTable2()", 500);
}

var peopleCache = { };
var peopleCache2 = { };
var viewed = -1;

function fillTable() {
  AddCriteriaJS.getUsersFiltered(function(people) {
    // Delete all the rows except for the "pattern" row
    dwr.util.removeAllRows("personbody", { filter:function(tr) {
      return (tr.id != "pattern");
    }});
    // Create a new set cloned from the pattern row
    var person, id;
    people.sort(function(p1, p2) { return p1.firstName.localeCompare(p2.firstName); });
    
    if (people.length == 0)
    	$("tableName").style.display = "none";
    
    for (var i = 0; i < people.length; i++) {
      person = people[i];
      id = person.id;
      dwr.util.cloneNode("pattern", { idSuffix:id });
      dwr.util.setValue("tablePerson" + id, person.firstName + " " + person.lastName);
      $("tableName").style.display = "";
      $("pattern" + id).style.display = "";
      peopleCache[id] = person;
    }
  });
}

function fillTable2() {
  AddCriteriaJS.getUsersAdded(function(people) {
    // Delete all the rows except for the "pattern" row
    dwr.util.removeAllRows("personbodyadded", { filter:function(tr) {
      return (tr.id != "patternadded");
    }});
    // Create a new set cloned from the pattern row
    var person, id;
    people.sort(function(p1, p2) { return p1.firstName.localeCompare(p2.lastName); });
    
    if (people.length == 0)
    	$("tableNameAdded").style.display = "none";
    
    for (var i = 0; i < people.length; i++) {
      person = people[i];
      id = person.id;
      dwr.util.cloneNode("patternadded", { idSuffix:id });
      dwr.util.setValue("tablePersonadded" + id, person.firstName + " " + person.lastName);
      $("tableNameAdded").style.display = "";
      $("patternadded" + id).style.display = "";
      peopleCache2[id] = person; // voir ici pr re-remplir après le back :)
    }
  });
}

function addPerson(eleid) {
  var person = peopleCache[eleid.substring(6)];
  dwr.engine.beginBatch();
  AddCriteriaJS.setPerson(person);
  fillTable();
  fillTable2();
  dwr.engine.endBatch();
}

function deletePerson(eleid) {
  var person = peopleCache2[eleid.substring(11)];
  if (confirm("Are you sure you want to remove " + person.firstName + " " + person.lastName + "?")) {
    dwr.engine.beginBatch();
    AddCriteriaJS.deletePerson(person);
    filterUser(null, dwr.util.getValue("myfilter"));
    fillTable();
    fillTable2();
    dwr.engine.endBatch();
  }
}

Event.observe(window, 'load', function() {
	new Form.Element.Observer('myfilter', 1, filterUser)
});

function filterUser(el, value) {
  AddCriteriaJS.fillUser(value);
  setTimeout("fillTable()", 500);
}
//]]>
</script>

</head>
<body>

<h4 class="title"><c:choose>
	<c:when test="${param['action'] eq 'modify'}">
		<fmt:message key="conference.titleModify" />
	</c:when>
	<c:otherwise>
		<fmt:message key="conference.titleAdd" />
	</c:otherwise>
</c:choose></h4>

<c:choose>
<c:when test="${currentConference != null and currentConference.currentPhase != 'CALL_FOR_PAPER'}">
	<div class="warningBox">
		Sorry, you can't modify anymore this part of the conference because the call for paper is already over.
	</div>
	<form:form commandName="formConference">
		<input type="submit" name="_target3" value="Back">
		<input type="submit" name="_finish" value="Finish" />
	</form:form>
</c:when>
<c:otherwise>
<fmt:message key="step">
	<fmt:param value="5" />
	<fmt:param value="5" />
</fmt:message>

<p class="formHelp"><fmt:message key="conference.help.step5" /></p>

<form:form commandName="formConference">
	<table>
		<tbody>
			<tr>
				<td class="formLabel"><img alt="<fmt:message key="conference5.findUsers" />" src="./images/search.png"/>
				</td>
				<td><form:input id="myfilter" path="myfilter" /> <br />
				<br />
				<table border="1" id="tableName" style="display: none;">
					<thead>
						<tr>
							<th>Name</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody id="personbody">
						<tr id="pattern" style="display: none;">
							<td><span id="tablePerson">Person</span></td>
							<td><a id="addNew" href="#" onclick="addPerson(this.id)">Add</a>
							</td>
						</tr>
					</tbody>
				</table>
				</td>
			</tr>
			<tr>
				<td class="formLabel"><fmt:message key="conference5.usersList" />
				</td>
				<td><br />
				<table border="1" id="tableNameAdded" style="display: none;">
					<thead>
						<tr>
							<th>Name</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody id="personbodyadded">
						<tr id="patternadded" style="display: none;">
							<td><span id="tablePersonadded">Person</span></td>
							<td><a id="supprPerson" href="#"
								onclick="deletePerson(this.id)">Remove</a></td>
						</tr>
					</tbody>
				</table>
				</td>
			</tr>
			<tr>
				<td class="formLabel"><fmt:message
					key="conference5.invitation.send" /></td>
				<td><input id="emailAddress" type="text" /> <input
					type="button" name="inviteButton" id="inviteButton" value="Invite" />
				</td>
			</tr>
			<tr>
				<td class="formLabel"><fmt:message
					key="conference5.invitationList" /></td>
				<td>
				<div id="invitationList" class="dynamicList">
				<div class="dynamicListHeader"><fmt:message
					key="form.addConference.invitationsHeader" /></div>
				</div>
				<input type="button" id="removeInvitationButton"
					name="removeInvitation"
					value="<fmt:message key="button.removeSelected" />" /> <br />
				</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>&nbsp;</td>
				<td><input type="submit" name="_target3" value="Back">
				<input type="submit" name="_finish" value="Finish" /></td>
			</tr>
		</tfoot>
	</table>

</form:form>

<script type="text/javascript">
	init();
</script>
</c:otherwise>
</c:choose>

</body>
</html>