<%@ 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'>

function init() {
  fillTable2();
  fillTable(); 
  dwr.util.setValues({ id:-1, label:null, min:1, max:5 }); 
}

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

function fillTable() {
  AddCriteriaJS.getCriteriaAdded(function(criteria) {
    // Delete all the rows except for the "pattern" row
    dwr.util.removeAllRows("criteriabody", { filter:function(tr) {
      return (tr.id != "pattern");
    }});
    // Create a new set cloned from the pattern row
    var person, id;
    criteria.sort(function(p1, p2) { return p1.label.localeCompare(p2.label); });
    if (criteria.length == 0)
    	$("tableCriterion").style.display = "none";
    for (var i = 0; i < criteria.length; i++) {
      person = criteria[i];
      id = person.id;
      dwr.util.cloneNode("pattern", { idSuffix:id });
      dwr.util.setValue("tableCriterion" + id, person.label);
      dwr.util.setValue("tableCriterionMin" + id, person.min);
      dwr.util.setValue("tableCriterionMax" + id, person.max);
      $("tableCriterion").style.display = "";
      $("pattern" + id).style.display = "";
      peopleCache2[id] = person;
    }
  });
}

function fillTable2() {
  AddCriteriaJS.getCriteriaAll(function(criteria) {
    // Delete all the rows except for the "pattern" row
    dwr.util.removeAllRows("criteriabodyAll", { filter:function(tr) {
      return (tr.id != "patternAll");
    }});
    // Create a new set cloned from the pattern row
    var person, id;
    criteria.sort(function(p1, p2) { return p1.label.localeCompare(p2.label); });
    if (criteria.length == 0)
    	$("tableCriterionAll").style.display = "none";
    for (var i = 0; i < criteria.length; i++) {
      person = criteria[i];
      id = person.id;
      dwr.util.cloneNode("patternAll", { idSuffix:id });
      dwr.util.setValue("tableCriterionAll" + id, person.label);
      dwr.util.setValue("tableCriterionMinAll" + id, person.min);
      dwr.util.setValue("tableCriterionMaxAll" + id, person.max);
      $("tableCriterionAll").style.display = "";
      $("patternAll" + id).style.display = "";
      peopleCache[id] = person;
    }
  });
}

function editClicked(eleid) {
  // we were an id of the form "edit{id}", eg "edit42". We lookup the "42"
  var person = peopleCache2[eleid.substring(4)];
  dwr.util.setValues(person);
}

function deleteClicked(eleid) {
  // we were an id of the form "delete{id}", eg "delete42". We lookup the "42"
  var person = peopleCache2[eleid.substring(6)];
  if (confirm("Are you sure you want to delete " + person.label + "?")) {
    dwr.engine.beginBatch();
    AddCriteriaJS.deleteCriterion(person);
    fillTable2();
    fillTable();
    dwr.engine.endBatch();
  }
  viewed = -1;
  dwr.util.setValues({ id:-1, label:null, min:1, max:5 });
}

function addClicked(eleid) {
  var person = peopleCache[eleid.substring(3)];
  //person.id = -1;
  dwr.engine.beginBatch();
  AddCriteriaJS.setCriterion(person);
  fillTable2();
  fillTable();
  dwr.engine.endBatch();
  viewed = -1;
  dwr.util.setValues({ id:-1, label:null, min:1, max:5 });
 }

function writePerson() {
  var person = { id:viewed, label:null, min:null, max:null };
  dwr.util.getValues(person);
  
  if (person.max <= person.min) {
  	dwr.util.setValues({id:person.id, label:person.label, min:null, max:null });
  	dwr.util.setValues({errorMax:"The max value should'nt be superior to the min value"});
  }
  else { 
  	dwr.engine.beginBatch();
  	AddCriteriaJS.setCriterionClick(person);  
  	fillTable();
  	dwr.engine.endBatch();
  	dwr.util.setValues({ id:-1, label:null, min:1, max:5 });
  }
}

function clearPerson() {
  viewed = -1;
  dwr.util.setValues({ id:-1, label:null, min:1, max:5 });
}

var CritereManager = Class.create({
	initialize: function(inputField, inputField2, inputField3){
		$(inputField).observe("keypress", this.KeyPressHandler.bindAsEventListener(this));
		$(inputField2).observe("keypress", this.KeyPressHandler.bindAsEventListener(this));
		$(inputField3).observe("keypress", this.KeyPressHandler.bindAsEventListener(this));
	},
	KeyPressHandler: function(event){
		switch(event.keyCode){
			case Event.KEY_RETURN:
				writePerson();
				event.stop();
				return false;
		}
	}
});
</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>

<form:form commandName="formConference" name="monForm">
	Step (4/5) <br/>

	This step allows you to add criterion which will be used when someone will evaluate an article.<br/>
	You can add a new criterion using the input form, or add an existing criterion.<br/>
	<br/>

	<fieldset><legend>Existing criteria</legend>
	<table border="1" id="tableCriterionAll" style="display: none;">
		<thead>
			<tr>
				<th>Criterion</th>
				<th>Min</th>
				<th>Max</th>
				<th>Action</th>
			</tr>
		</thead>
		<tbody id="criteriabodyAll">
			<tr id="patternAll" style="display: none;">
				<td><span id="tableCriterionAll">Criterion</span></td>
				<td><span id="tableCriterionMinAll">Min</span></td>
				<td><span id="tableCriterionMaxAll">Max</span></td>
				<td>
					<a id="add" href="#" onclick="addClicked(this.id)" >Add</a>
				</td>
			</tr>
		</tbody>
	</table>
	</fieldset>

	<br />


	<fieldset><legend>Criteria</legend>
	<table class="plain">
		<tr>
			<td>Label:</td>
			<td><input id="label" type="text"/></td>
		</tr>
		<tr>
			<td>Min:</td>
			<td><input id="min" type="text"/></td>
		</tr>
		<tr>
			<td>Max:</td>
			<td><input id="max" type="text"/></td>
			<td><span id="errorMax"></span></td>
		</tr>
		<tr>
			<td colspan="2" align="right"><span id="id" style="display: none;">-1</span>
			<a href="#" onclick="writePerson()">Save</a>
			<a href="#" onclick="clearPerson()">Clear</a>
			</td>
			<td></td>
		</tr>
	</table>
	</fieldset>

	<script type="text/javascript">
    	new CritereManager('label', 'min', 'max');
	</script>
	
	<br />
	<table border="1" id="tableCriterion" style="display: none;">
		<thead>
			<tr>
				<th>Criterion</th>
				<th>Min</th>
				<th>Max</th>
				<th>Actions</th>
			</tr>
		</thead>
		<tbody id="criteriabody">
			<tr id="pattern" style="display: none;">
				<td><span id="tableCriterion">Criterion</span></td>
				<td><span id="tableCriterionMin">Min</span></td>
				<td><span id="tableCriterionMax">Max</span></td>
				<td>
					<a id="edit" href="#" onclick="editClicked(this.id)" >Edit</a>
					<a id="delete" href="#" onclick="deleteClicked(this.id)" >Delete</a>
				</td>
			</tr>
		</tbody>
	</table>

	<br />

	<input type="submit" align="middle" name="_target2" value="Back">
	<input type="submit" align="middle" name="_target4" value="Next"/>


</form:form>


<script type="text/javascript">
	init();
</script>

<br />
<br />
<a href="<c:url value="main.htm"/>">Home</a>

</body>
</html>