<%@page language="java" %>
<%@page import="java.util.*" %>
<%@page import="java.io.*" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html><head>
<meta http-equiv="expires" content="0">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<title>Sort The Items</title>

<%
cmu.survey.Maintenance.setEmailToSendBugsTo("apowers+bug@cmu.edu");
cmu.survey.Maintenance.setLabelOfProgram("Clustering Survey: Version 2003.4.30");

try {
String topicOfQuestions="topics of communication";


// Creating the Items
Vector items = new Vector();
//for (int i=0; i<9; i++)
//	items.add("Item "+(i+1));
items.add("yo");
items.add("como");
items.add("estas");
items.add("a");
items.add("b");
items.add("c");
items.add("d");



// Code to export to a file:
int maxUsers=200;
if (pageContext.getRequest().getParameter("textfield1")!=null) {

String dirToSaveIn="C:\\clusteringOutput\\";// should be a parameter in the tag

File dir=new File(dirToSaveIn);
String[] done=dir.list();
boolean[] doneNums=new boolean[maxUsers];
System.out.println("files: "+done.length);
for (int i=1; i<=done.length; i++) {
	System.out.println("file: "+done[i-1]);
  if (done[i-1].endsWith(".esd")) {
    try {
      int one = Integer.parseInt(done[i-1].substring(0, done[i-1].indexOf(".")));
      doneNums[one]=true;
      System.out.println("done: "+one);
    } catch (NumberFormatException e) { e.printStackTrace(); }
  }
}

String userID=null;
loop: for (int i=1; i<doneNums.length; i++) {
  if (!doneNums[i]) {
    userID=i+"";
    break loop;
  }
}
System.out.println("userID="+userID);


String output=">Cardnames\r\n";
for (int i=0; i<items.size(); i++) {
  output+=items.get(i)+"\r\n";
}

int groupNumber[]=new int[items.size()];
for (int i=0; i<items.size(); i++) {
  String textFieldData=(String)pageContext.getRequest().getParameter("textfield"+(i+1));
// this line is new:
  output+="textfield"+(i+1)+"="+textFieldData+"\n";

  String itemText=(String)pageContext.getRequest().getParameter("ItemText"+(i+1));
  output+="ItemText"+(i+1)+"="+itemText+"\n";

  String extraItemText=(String)pageContext.getRequest().getParameter("ExtraItemText"+(i+1));
  output+="ExtraItemText"+(i+1)+"="+extraItemText+"\n";


  

// Commented out:  for parsing in Java  
/*  if (textFieldData!=null && textFieldData.length()>4){
    StringTokenizer tokenizer = new StringTokenizer(textFieldData, "\n\r\f");
    while (tokenizer.hasMoreTokens()) {
      String token=(String)tokenizer.nextElement();
      if (token!=null && token.length()>=5)
         groupNumber[Integer.parseInt(token.substring(4))-1]=i;
    }
  }*/
}
/*for (int i=0; i<items.size(); i++) {
  output+=(groupNumber[i]+1)+",1\r\n";
}*/

System.out.println("Output: -----------------------");
System.out.println(output);
System.out.println("End Output -----------------------");

try {

  
  PrintStream outputStream = new PrintStream(new FileOutputStream(dirToSaveIn+userID+".esd", false));
  outputStream.println(output);
} catch (IOException e) {
  cmu.survey.Maintenance.sendBug(e);
}


  out.println("<body>Thank you!</body></html>");
  return;
}
// End code to export to a file.

int itemWidth=216;
int itemHeight=25;

int groupWidth=400;
int groupHeight=90;

String textfield="textfield";



// The Styles section: this has the style for the divs
out.print("<style type=\"text/css\">");
out.print("<!--\n");

	out.print("#dragWarning {"+
		"  position:relative;"+
		"  background-color:#ffffff;"+
		"  border:2px solid #FF2222;"+
		"}\n"
		);

for (int i=1; i<=items.size(); i++) {
	out.print("#EnglishItem"+i+" {"+
		"  position:relative;"+
		"  background-color:#ffffff;"+
		"  border:2px solid #000099;"+
		"}\n"+
		"#group"+i+" {  position:relative;  background-color:#ffffff;  border:1px solid #000099;}\n");

	out.print("#item"+i+" {"+
		"  position:relative;"+
		"  background-color:#ffffff;"+
		"  border:2px solid #000099;"+
		"}\n");
	out.print("#extraItem"+i+" {"+
		"  position:relative;"+
		"  background-color:#ffffff;"+
		"  border:2px solid #000099;"+
		"}\n");
}
out.print("#fakeGroup {  position:relative;  background-color:#ffffff;  border:1px dashed #000099;}\n");
out.print("#Trash {  position:relative;  background-color:#ffffff;  border:1px dashed #000099;}\n");
out.print("#EmptyBlocks {  position:relative;  background-color:#ffffff;  border:1px dashed #000099;}\n");
out.print("-->\n");
out.print("</style>");
out.print("</head>");



// Start of Body:

out.print("<body bgcolor=\"#ffffff\">");
out.print("<p>");
out.print("<form name=\"form1\" method=\"post\" action=\"\">");
out.print("  <script language=\"JavaScript\" type=\"text/javascript\" src=\"wz_dragdrop.js\"></script>");
out.print("<script language=\"JavaScript\" type=\"text/javascript\" src=\"libraryFunctions.js\"></script>");
out.print("</p>");
out.print("<p><b>Group the following "+topicOfQuestions+"</b></p>"+
	"The phrases on the left describe "+topicOfQuestions+". We want to know which topics are similar to each other. Drag each item into one of the groups on the right. Put similar items into the same group. Each group can have any number of topics in it, from only a single topic to many of them. "+
	"<br><br>Press <input type=\"button\" value=\"Submit\" onClick=\"javascript:submitASort();\"> when you are done.  <a href=\"mailto:apowers+clusteringSurvey@cmu.edu\">Do you have any problems or questions?</a><br><br>"+
	""+
	"");

out.print("<table>");
out.print("<tr><td valign=\"top\">");
out.print("<table border=\"0\">");

for (int i=0; i<items.size(); i++) {
	out.print("<tr>");
        int thisItemNum=i+1;
	out.print("<td><div id=\"EnglishItem"+(thisItemNum)+"\" style=\"z-index: 54;  width: "+itemWidth+"px; height: "+itemHeight+"px;\">&nbsp;<font face=\"Arial, Helvetica, sans-serif\" size=\"2\">English:"+items.get(thisItemNum-1)+"</font></div></td>");
	out.print("<td><div id=\"item"+(thisItemNum)+"\" style=\"cursor: move; z-index: 54;  width: "+itemWidth+"px; height: "+itemHeight+"px;\">&nbsp;<font face=\"Arial, Helvetica, sans-serif\" size=\"2\"><input type=\"text\" value=\""+items.get(thisItemNum-1)+"\" name=\"ItemText"+(i+1)+"\"></font></div></td>");
	out.print("</tr>");
	out.print("<tr><td height=30>Both yo & como</td><td></td></tr>");
}

out.print("</table>");
out.print("</td><td>");
out.print("<table border=\"0\">");
// Fake div
out.print("<tr>");
out.print("<td height=\""+(groupHeight+5)+"\"><div id=\"Trash\" style=\"z-index: 50;  width: "+groupWidth+"px; height: "+groupHeight+"px;\"><b><font face=\"Arial, Helvetica, sans-serif\" size=\"3\"><br><center>Trash</center><br><br></b></font></div></td>");
out.print("</tr>");
out.print("<tr>");
out.print("<td height=\""+(groupHeight+5)+"\"><div id=\"EmptyBlocks\" style=\"z-index: 50;  width: "+groupWidth+"px; height: 250px;\"><b><font face=\"Arial, Helvetica, sans-serif\" size=\"3\"><br><center>Extra Blocks</center>");

for (int i=1; i<=items.size(); i++) {
	out.print("<div id=\"extraItem"+i+"\" style=\"cursor: move; z-index: 54;  width: "+itemWidth+"px; height: "+itemHeight+"px;\">&nbsp;<font face=\"Arial, Helvetica, sans-serif\" size=\"2\"><input type=\"text\" value=\"blank\" name=\"ExtraItemText"+(i+i)+"\"></font></div>");
}
out.print("</b></font></div></td>");
out.print("</tr>");

out.print("</table>");
for (int i=0; i<items.size(); i++) {
	out.print("");
}
out.print("</td></tr><table>\n");

out.print("<div id=\"dragWarning\" style=\"z-index: 600000;  width: 300px; height: 100px;\">&nbsp;<font face=\"Arial, Helvetica, sans-serif\" size=\"2\"><b>Please use the scrollbars on the right to scroll.  You can't drag the item and scroll at the same time.</b></font></div>");

out.print("<input id=\"bottomSubmitButton\" type=\"button\" value=\"Submit\" onClick=\"javascript:submitASort();\"><br>\n");
for (int i=0; i<items.size(); i++) {
	//out.print("<input type=\"text\" name=\""+textfield+(i+1)+"\">");
	//out.print("<input type=\"hidden\" name=\""+textfield+(i+1)+"\">");
	out.print("<textarea cols=\"40\" rows=\"4\" name=\""+textfield+(i+1)+"\"></textarea>");
}

//out.print("<textarea cols=\"40\" rows=\"8\" name=\"output\"></textarea>");
%>

<script language="JavaScript" type="text/javascript">
<!--
<%

out.print("SET_DRAGGABLE(CURSOR_MOVE, NO_ALT, NO_SCROLL, RESET_Z, \"dragWarning\"+NO_DRAG, \"fakeGroup\"+NO_DRAG, \"Trash\"+NO_DRAG");
for (int i=0; i<items.size(); i++) {
	out.print(", \"item"+(i+1)+"\"");
}
for (int i=0; i<items.size(); i++) {
	out.print(", \"extraItem"+(i+1)+"\"");
}
out.print(");\n");

out.print("dd.elements[\"dragWarning\"].hide();\n");

out.print("var numGroups="+items.size()+";\n");

out.print("var nextGroupToShow=1;\n");
out.print("for (var i=nextGroupToShow; i<=numGroups; i++) {\n");

out.print("	if(window.dd && dd.elements[\"group\"+i]){\n");
out.print("		dd.elements[\"group\"+i].hide();\n");

out.print("	}\n");
out.print("}\n");


out.print(	"function checkIfAllAreSorted() {"+
		""+
		"	for(var i=0; i<"+items.size()+"; i++)"+
		"		checkIfDroppedInAGroup(dd.elements[\"item\"+(i+1)]);"+
		"}\n");

out.print("function showANewGroup() {");
out.print("	if (dd.elements[\"group\"+nextGroupToShow]) {");
out.print("		var nextGroup=getAnObject(\"group\"+(nextGroupToShow));\n");
out.print("		var fakeGroup=getAnObject(\"fakeGroup\");\n");
out.print("		if (document.createElement) {\n"+
			"	if (nextGroupToShow>="+items.size()+") {"+
//			"		dd.elements[\"fakeGroup\"].hide();"+
			"		fakeGroup.parentNode.removeChild(fakeGroup);"+
			"	} else "+
			"document.getElementById('row'+(nextGroupToShow+1)).appendChild(fakeGroup);"+
			"document.getElementById('row'+(nextGroupToShow)).appendChild(nextGroup);"+
			"}\n");
			//"else alert('No setAttribute available -- your browser\\'s too old!');");
out.print("		dd.elements[\"group\"+nextGroupToShow].show();");
out.print("		nextGroupToShow++;");
out.print("		for(var i=0; i<"+items.size()+"; i++)");
out.print("		  checkIfDroppedInAGroup(dd.elements[\"item\"+(i+1)]);");
out.print("	} else {");
//out.print("		alert(\"Sorry, you've reached the max number of groups.  You cannot add more groups than number of items.\");");
out.print("	}");
out.print("}\n");

out.print("function checkIfDroppedInAGroup(draggedItem) {");
out.print("	var itemNumber = draggedItem.name.substring(4);");
out.print("	var itemObject = getAnObject(draggedItem.name);");
out.print("	var drHeight = itemObject.offsetHeight;");
out.print("	var drWidth = itemObject.offsetWidth;");
out.print("	var found=false;");
out.print("	var moveMessageSent=false;");
%>
	savePosition(draggedItem);
	// Filter items into the Trash -- incompleted
	var groupItem = dd.elements["Trash"];
	var groupItemObject = getAnObject("Trash");
	var grWidth=groupItemObject.offsetWidth;
	var grHeight=groupItemObject.offsetHeight;

	var field = getAnObject("<%=textfield%>2");
/*  // good for debugging output:
	field.value = "x="+groupItem.x+"\n"+
		"y="+groupItem.y+"\n"+
		"height="+groupItemObject.offsetHeight+"\n"
	;*/

	if (groupItem.x<draggedItem.x+drWidth &&
		 groupItem.y<draggedItem.y+drHeight &&
		 groupItem.x+grWidth>draggedItem.x &&
		 groupItem.y+grHeight>draggedItem.y) {
		trashItem(draggedItem);
	}

<%

/*out.print("	for (var i=1; i<nextGroupToShow && i<"+items.size()+"; i++) {");
out.print("		if(window.dd && dd.elements[\"group\"+i]) {");
out.print("			var groupItem = dd.elements[\"group\"+i];");
out.print("			var groupItemObject = getAnObject(\"group\"+i);");
out.print("			var grWidth=groupItemObject.offsetWidth;");
out.print("			var grHeight=groupItemObject.offsetHeight;");

out.print("			if (groupItem.x<draggedItem.x+drWidth &&");
out.print("				 groupItem.y<draggedItem.y+drHeight &&");
out.print("				 groupItem.x+grWidth>draggedItem.x &&");
out.print("				 groupItem.y+grHeight>draggedItem.y) {");
out.print("				if (found && !moveMessageSent) {");
out.print("					alert(\"An item is on the boundary of multiple groups!  Please move it so it is only in one group.\");");
out.print("					moveMessageSent=true;");
out.print("				} else ");
out.print("				addToAGroup(i, draggedItem.name);");
out.print("				found=true;");
out.print("			} else {");
//out.print("				//alert(\"groupItem.x=\"+groupItem.x+\"  draggedItem.x+drWidth=\");");
out.print("			}");
out.print("		} else {");
out.print("			alert(\"bug: not finding group #\"+i+\" in the length of \"+dd.elements.length);");
out.print("		}");
out.print("	}");
out.print("	if (!found) {");
out.print("		var groupItem = getAnObjectNoErrorMessage(\"fakeGroup\");");
out.print("		if (groupItem==null) return;");
//out.print("		alert('groupItem.x+w='+(groupItem.offsetLeft+groupItem.offsetWidth)+' dr.x='+draggedItem.x);");
out.print("		var grWidth=groupItem.offsetWidth;");
out.print("		var grHeight=groupItem.offsetHeight;");
out.print("		if (groupItem.offsetLeft<draggedItem.x+drWidth &&");
out.print("			 groupItem.offsetTop<draggedItem.y+drHeight &&");
out.print("			 groupItem.offsetLeft+grWidth>draggedItem.x &&");
out.print("			 groupItem.offsetTop+grHeight>draggedItem.y) {");
out.print("			showANewGroup();checkIfDroppedInAGroup(draggedItem);");
out.print("		} else {");
out.print("			removeFromAllGroups(draggedItem.name);");
out.print("		}");
out.print("	}");*/
out.print("}\n");

%>
function savePosition(draggedItem) {
	var itemName=draggedItem.name;
	var field = getAnObject("<%=textfield%>1");
	var itemObject = getAnObject(itemName);
//	if (field.value.indexOf(itemName)>-1) {
//	} else {
	field.value +=   itemName+" -- y="+draggedItem.y+" -- height="+itemObject.offsetHeight+"\n";
//	}
}
function trashItem(draggedItem) {
	var itemName=draggedItem.name;
	var field = getAnObject("<%=textfield%>1");
	var itemObject = getAnObject(itemName);
//	if (field.value.indexOf(itemName)>-1) {
//	} else {
		field.value +=   itemName+" -- trashed\n";
//	}
}
<%
out.print("function addToAGroup(groupNum, itemName) {\n");
out.print("	removeFromAllGroups(itemName);");
out.print("	var field = getAnObject(\""+textfield+"\"+groupNum);");
out.print("	if (field.value.indexOf(itemName)>-1) {");
out.print("	} else {");
out.print("		field.value+=itemName+\"\\n\";");
out.print("	}");
out.print("}\n");

out.print("function removeFromAllGroups(itemName) {\n");
//out.print("	// Remove it from the group it's in");
out.print("	for (var i=1;i<=numGroups; i++) {");
out.print("		removeFromAGroup(i, itemName);");
out.print("	}");
out.print("}\n");

out.print("function removeFromAGroup(groupNum, itemName) {\n");
out.print("	if (groupNum<=numGroups) {");
out.print("		var field = getAnObject(\""+textfield+"\"+groupNum);");
out.print("		var index = field.value.indexOf(itemName);");
out.print("		if (index>-1) {");
out.print("			field.value=field.value.substring(0, index)+field.value.substring(index+itemName.length+1);");
out.print("		}");
out.print("	} else {");
out.print("		alert(\"removeFromAGroup called with a group that doesn't exist: \"+groupNum);");
out.print("	}");
out.print("}\n");

out.print("function submitASort(){");
out.print("	checkIfAllAreSorted();");
out.print("	var theForm = getAnObject('form1');");
out.print("	if (theForm==null) {");
out.print("		alert(\"You can only submit this in a newer browser.  JavaScript on this browser is implemented wrong.\");");
out.print("		return false;");
out.print("	}");
out.print("	theForm.submit('submit');");
out.print("	return true;");
out.print("}");

out.print("//-->\n");
out.print("</script>\n");
out.print("</p>\n");



out.print("</form>");

/* Current bugs:
Current Bugs:
- set maxUsers to something that'll expand as needed
- turn into a tag
*/
} catch (Exception e) {
	cmu.survey.Maintenance.sendBug(e);
}
%>
<a href="mailto:apowers+clusteringSurvey@cmu.edu">Email Aaron Powers if you have any questions or problems in using the survey.</a>
</body></html>