# HG changeset patch
# User Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
# Date 1428667163 -3600
# Node ID 97ade670d7c1fc44b6dff04fc1f307f5fa777245
# Parent  44d281129d550668a95204c3b40d8a42d56c4651
Improved formatting for comment boxes

diff -r 44d281129d55 -r 97ade670d7c1 ape.css
--- a/ape.css	Fri Apr 10 12:48:07 2015 +0100
+++ b/ape.css	Fri Apr 10 12:59:23 2015 +0100
@@ -45,6 +45,19 @@
 	background-color: rgb(100,200,100);
 }
 
+div.comment-div {
+	border:#444444;
+	border-style:solid;
+	border-width:1px;
+	width: 624px;
+	float: left;
+	margin: 5px;
+}
+div.comment-div span {
+	margin-left: 15px;
+}
+
+
 div.popupHolder {
 	width: 500px;
 	height: 250px;
diff -r 44d281129d55 -r 97ade670d7c1 ape.js
--- a/ape.js	Fri Apr 10 12:48:07 2015 +0100
+++ b/ape.js	Fri Apr 10 12:59:23 2015 +0100
@@ -137,12 +137,13 @@
 	if (preTest != undefined && preTest.children.length >= 1)
 	{
 		
-		var preTestHolder = document.createElement('div');
-		preTestHolder.id = 'preTestHolder';
-		preTestHolder.className = 'popupHolder';
-		preTestHolder.style.position = 'absolute';
-		preTestHolder.style.left = (window.innerWidth/2)-250 + 'px';
-		preTestHolder.style.top = (window.innerHeight/2)-125 + 'px';
+		var popupHolder = document.createElement('div');
+		popupHolder.id = 'popupHolder';
+		popupHolder.className = 'popupHolder';
+		popupHolder.style.position = 'absolute';
+		popupHolder.style.left = (window.innerWidth/2)-250 + 'px';
+		popupHolder.style.top = (window.innerHeight/2)-125 + 'px';
+		
 		// Parse the first box
 		var preTestOption = document.createElement('div');
 		preTestOption.id = 'preTest';
@@ -168,9 +169,9 @@
 		nextButton.innerHTML = 'Next';
 		nextButton.onclick = preTestButtonClick;
 		
-		preTestHolder.appendChild(preTestOption);
-		preTestHolder.appendChild(nextButton);
-		insertPoint.appendChild(preTestHolder);
+		popupHolder.appendChild(preTestOption);
+		popupHolder.appendChild(nextButton);
+		insertPoint.appendChild(popupHolder);
 	}
 
 	// Load the full interface
@@ -219,6 +220,7 @@
 		audioEngineContext.newTrack(trackURL);
 		// Create document objects to hold the comment boxes
 		var trackComment = document.createElement('div');
+		trackComment.className = 'comment-div';
 		// Create a string next to each comment asking for a comment
 		var trackString = document.createElement('span');
 		trackString.innerHTML = 'Comment on track '+index;
@@ -297,22 +299,29 @@
 		}
 	} else {
 		// Time to clear
-		preTestHolder.style.zIndex = -1;
-		preTestHolder.style.visibility = 'hidden';
-		var blank = document.getElementsByClassName('testHalt')[0];
-		blank.style.zIndex = -2;
-		blank.style.visibility = 'hidden';
+		preTestOption.innerHTML = null;
+		hidePopup();
 	}
 }
 
 function showPopup()
 {
-	
+	var popupHolder = document.getElementById('popupHolder');
+	popupHolder.style.zIndex = 2;
+	popupHolder.style.visibility = 'visible';
+	var blank = document.getElementsByClassName('testHalt')[0];
+	blank.style.zIndex = 2;
+	blank.style.visibility = 'visible';
 }
 
 function hidePopup()
 {
-	
+	var popupHolder = document.getElementById('popupHolder');
+	popupHolder.style.zIndex = -1;
+	popupHolder.style.visibility = 'hidden';
+	var blank = document.getElementsByClassName('testHalt')[0];
+	blank.style.zIndex = -2;
+	blank.style.visibility = 'hidden';
 }
 
 function dragEnd(ev) {