var results = new Array();
		  var resultsIndex = 0;

		  var initial_decks    = initial_card;
		  var additional_decks = additional_card;

		
		
		var deckCount = 0;
		var initial_voi;
		var handCount = 0;
		var startTime = 0;
		var endTime = 0;
		var elapsedTime = 0;
		var resultString;
		var colorString = "border-color:red";
		var relString;
		var scaleString;


		function newSession(){
			handCount = 0;
			
			var deck_str = $("#session_select option:selected").attr("value");
			deckCount = parseInt(deck_str);
			
			if(voiScale())
				scaleString = "Hard Scale";
			else
				scaleString = "Soft Scale";
			
			
			results[resultsIndex++] = "Deck " + (deckCount+1) + " " + scaleString;
			document.getElementById('session').setAttribute("disabled","true");
			document.getElementById('scores').removeAttribute("disabled");
			dealHand();

		}
		
		function printResults(){
			resultString ="";
			for(var i = 0; i < results.length; i++)
				resultString += results[i] + "\n";
			console.log(resultString);
		}
	

		
		function beginTest(){
			var session_str;
			var i;
			for ( i = 0; i < initial_decks.length; i++ ){
				
				session_str += "<option value=\"" + i + "\">Session " + (i+1) + "</option>";
			
			}
		
			document.getElementById('session_select').innerHTML = session_str;
			document.getElementById('testContainer').removeAttribute("hidden");
			document.getElementById('submissionContainer').setAttribute("hidden",true);	
		}
		
		function exitTest(){
			results[resultsIndex-1] = "";
			beginResults();	
		}
		
		function editDemo(){
			document.getElementById('demographics').removeAttribute("hidden");
			document.getElementById('demoBtn').setAttribute("hidden",true);
		}
		
		function beginResults(){
			printResults();
			document.getElementById('submissionContainer').removeAttribute("hidden");
			document.getElementById('results').removeAttribute("hidden");
			document.getElementById('demographics').setAttribute("hidden",true);
			document.getElementById('testContainer').setAttribute("hidden",true);
			document.getElementById('resultsText').innerHTML =resultString;
			moveToResults ();		
		}
		
		function endSession(){
		
			results[resultsIndex++] = "\n";

		$(".fade").fadeIn(500);
		$(".fadeLabel").fadeIn(500);
		
			window.alert("Thank you for finishing Session " + (deckCount + 1) + ". " +
						 "If you have not completed all sessions, please use the Session drop down box on the right to select a new session to complete when you are ready." +
 						 "You may also return to the website at a later time to complete the remaining sessions," +
						 "but you will be asked to submit demographic information again so your previous results can be linked to the additional results." +
						 "If you have completed all session please press the Exit button."+
						 "This was a test run and I appreciate your time.");
					
			document.getElementById('counter').setAttribute("value","0");
			document.getElementById('session').removeAttribute("disabled");
			
			
			document.getElementById('scores').setAttribute("disabled", "true");


			document.getElementById('div1').innerHTML = "";
			document.getElementById('div2').innerHTML ="";
		}
		
		
		function nextHand(){
		
			
			endTime = new Date();
			elapsedTime = Math.round((endTime.getTime() - startTime.getTime())/1000);
			<!-- console.log(elapsedTime); -->
			
			gatherRankedSequence();
			
			dealHand();
				
		}
		
		function resetHand(){
			handCount--;
			resultsIndex--;
			dealHand();	
		}
		
		function gatherRankedSequence(){
			var sequenceStr = "Adjusted VoI : ";
			
			sequenceStr += document.getElementById("voi_value").getAttribute("value");

			sequenceStr += " number of sec " + elapsedTime;
			results[resultsIndex++] = sequenceStr;
		
		}
		
		function gatherOriginalSequence(){
			var sequenceStr = "Intel Card Set : ";


			sequenceStr += initial_decks[deckCount][handCount] + " " + additional_decks[deckCount][handCount][0] + " Complement Factor: " + additional_decks[deckCount][handCount][1] + "  Initial VoI: " + document.getElementById("voi_value").getAttribute("value");;
			results[resultsIndex++] = sequenceStr;

		
		}
		
		
		function dealHand(){
			
		
		
			
			if(handCount >= initial_decks[deckCount].length) {
				<!-- deckCount++; -->					
				endSession();
			}
			else{
		
				var initial_hand;
				var additional_hand;
				var new_voi;
				var old_voi;
				initial_hand    = initial_decks[deckCount][handCount];
				additional_hand = additional_decks[deckCount][handCount];
				
				if(voiScale()){
					if (handCount >= 0)
						new_voi = VoI_Calculation( allCards[(initial_hand-1)]);
					else
						new_voi = 5;
						
					old_voi = document.getElementById("voi_value").getAttribute("value");
					document.getElementById("voi_value").setAttribute("value", new_voi);

					if (new_voi > old_voi)
						document.getElementById("voi_slider").stepUp((new_voi - old_voi)/.1);
					else
						document.getElementById("voi_slider").stepDown((old_voi - new_voi)/.1);
				}
				else{
					new_voi = 5;
					old_voi = document.getElementById("voi_value").getAttribute("value");
					document.getElementById("voi_value").setAttribute("value", new_voi);
					
					console.log(new_voi);
					console.log(old_voi);

					if (new_voi > old_voi)
						document.getElementById("voi_slider").stepUp((new_voi - old_voi)/.1);
					else
						document.getElementById("voi_slider").stepDown((old_voi - new_voi)/.1);
				}
				
				document.getElementById('div1').innerHTML = "<img id=\"card" + initial_hand +   "src=/attachment/card" + initial_hand + ".png\">";
				document.getElementById('div2').innerHTML = "<img id=\"card" + additional_hand[0] + "src=/attachment/card" + additional_hand[0] + ".png\">";
				$(".fade").fadeIn();
			

			
				gatherOriginalSequence();
				handCount++;
				var counterString = handCount + " of " + initial_card[deckCount].length;
				document.getElementById('counter').setAttribute("value",counterString);
				startTime = new Date();
			}
		
		}

		
		function moveToResults (){window.location.hash="RESULTS";}

		function loadFile(){
			//reader.open('get', 'cards.js', true);
		}

	
		$(function () {
    setTimeout(function () {
        $("#justinevoi").fadeOut("slow", function () {
            $("#demographics").show();
        });
    }, 1000);
});


	//</script>  

	<div id="justinevoi">
	<img id="justinevoiImg" src="/attachment/justinevoi.png" style="margin: 0px auto;display:block;width:50%;border:2px solid; border-color:black"/>
	</div>

	<div id="testContainer" hidden style="margin-left:auto;margin-right:auto;width:1236px;">
		<a name="TEST"></a>
		<h1 id="titleName" style="text-align:center; color:Yellow;">Likert Survey</h1>


		<div id="intel" style="width:432px;float:left;">
			<h3 style="text-align:left;color:White;">Question for Thought:</h3>
	    		<div id="div1"></div>
				<div id="divshell">
					<h3> </h3>
					<span >
						<div id="div2" class="fade"></div>
						<h3 id="rel_label" class="fadeLabel" style="text-align:center;margin:-10px;"></h3>
					</span>
				</div>
				
			<br><br><br><br><br><br><br><br><br><br>
			
				

		</div>


		<div id="voi" style="width:362px;float:left;text-align:center;">
			<h3 style="width:362px;float:left;text-align:center;color:Red;"> Determining Change in<br>Maryland Public Schools</h3>

			<div id="voi_scale" style="width:161px;float:left;text-align:center;">
				<script type="text/javascript">
					if(voiScale())
						document.getElementById("voi_scale").innerHTML="<br><div style=\"height: 80px;width:150px;text-align:right;color:Red;\">Strongly Agree</div><br><br>" +
                                                                       "<div style=\"height: 105px;width:150px;text-align:right;color:Red;\">Somewhat Agree</div>" +
																	   "<div style=\"height: 95px;width:150px;text-align:right;color:Red;\">Neither Agree/Disagree</div>" +
                                                                       "<div style=\"height: 95px;width:150px;text-align:right;color:Red;\">Somewhat Disagree</div>" +
                                                                       "<div style=\"height: 200px;width:150px;text-align:right;color:Red;\">Strongly Disagree</div>";
					else
						document.getElementById("voi_scale").innerHTML="<div style=\"height: 115px;width:161px;text-align:right;\">Significantly Increased</div>" +
											                           "<div style=\"height: 115px;width:161px;text-align:right;\">Moderately Increased</div>" +
											                           "<div style=\"height: 115px;width:161px;text-align:right;\">No Change</div>" +
											                           "<div style=\"height: 115px;width:161px;text-align:right;\">Moderately Decreased</div>" +
											                           "<div style=\"height: 15px;width:161px;text-align:right;\">Significantly Decreased</div>";
				</script>

			</div>

			<div style="width:201px;float:left;text-align:left;">			

				<input type="range" id="voi_slider" style="height: 475px;" min="0" max="10" value="5" orient="vertical"  step="0.1" oninput="showValue(this.value)"/>
				<p id="voi_box" style="color:Red;">
					Numeric Likert Score: <input type='text' autocomplete="off" id="voi_value" style="height: 29px; width: 69px;" value="5" readonly/>		
				</p>
				
				<script type="text/javascript">
					function showValue(newValue)
					{
							document.getElementById("voi_value").setAttribute("value",newValue);
					}
						

				</script>
			</div>
		</div>

		<div id="controls" style="width:292px;float:left;">
			<div style="height: 115px; width: 258px; color:White;" ><b>Instructions</b>: Read the statement over. Move the slider up or down accordingly to match your opinion.
			</div>
			<p style="color:Red;">
				Session: <select id="session_select"></select>
			</p>
			<p>
			   <input type='button' id='session' autocomplete="off" style="height: 75px; width: 156px" value='Begin Session' onclick="newSession();" />
			</p>
			<p>
			   <input disabled type='button' id='scores' autocomplete="off" style="height: 75px; width: 156px" value='Enter Scores' onclick="nextHand();"  />
			</p>
<!--
			<p>
			   <input type='button' id='reset' autocomplete="off" style="height: 75px; width: 156px" value='Reset' onclick="resetHand();"  />
			</p>
-->
			<p>
			   <input type='button' id='exit' autocomplete="off" style="height: 75px; width: 156px" value='Exit' onclick="exitTest();"  />
			</p>
			<p style="color:Red;">
			   Count: <input type='text' autocomplete="off" id="counter" style="height: 29px; width: 69px" value='0' readonly ></input>				  
			</p>
		</div>
	</div>











	
	<div style="clear:both;margin-left:auto;margin-right:auto;width:720px;" id="submissionContainer" >


		<form id='form' action='voi_results.php' method="post" >
			<div id='demographics' style="display:none">

				<h1 style="color:Yellow;">Demographics</h1>
				<p style="color:Yellow;">Please provide as much of the information requested below as possible.  It is not required, but the information will help with the analysis of the results.  Thank you.
				</p>
				<p style="color:Red;">
					Name: <input type='text' autocomplete="off" style="height: 29px; width: 200px" id="name" name='name' />
					<script type="text/javascript">					
						document.getElementById("name").onkeypress = function(evt) {
							evt = evt || window.event;
							var charCode = evt.keyCode || evt.which;
							if (charCode == 13) {
       
								if (evt.preventDefault) {
									evt.preventDefault();
								}
								evt.returnValue = false;
							}
						};
					</script>
				</p>
				<p style="color:Red;">
					Email: <input type='email' autocomplete="off" style="height: 29px; width: 200px" id="email" name='email' />
					<script type="text/javascript">					
						document.getElementById("email").onkeypress = function(evt) {
							evt = evt || window.event;
							var charCode = evt.keyCode || evt.which;
							if (charCode == 13) {
       
								if (evt.preventDefault) {
									evt.preventDefault();
								}
								evt.returnValue = false;
							}
						};
					</script>
				</p>
				<p style="color:Red;">
					Age: <input type='text' autocomplete="off" style="height: 29px; width: 69px" id="age" name='age' />
					<script type="text/javascript">					
						document.getElementById("age").onkeypress = function(evt) {
							evt = evt || window.event;
							var charCode = evt.keyCode || evt.which;
							if (charCode == 13) {
       
								if (evt.preventDefault) {
									evt.preventDefault();
								}
								evt.returnValue = false;
							}
						};
					</script>
				</p>
				<p style="color:Red;">
					Highest Level of Education: <form action="action_page.php">
					<select name="education">
					<option value="High school">High School</option>
					<option value="Associates Degree">Associates Degree</option>
					<option value="Bachelors Degree">Bachelors Degree</option>
					<option value="Masters Degree">Masters Degree</option>
					<option value="Doctoral Degree">Doctoral Degree</option>
					</select>
				</form>
				</p>
				
				<p style="color:Red;">
				# of Children in household: <input type='text' autocomplete="off" style="height: 29px; width: 69px" id="children" name='children' />
				<script type="text/javascript">					
						document.getElementById("children").onkeypress = function(evt) {
							evt = evt || window.event;
							var charCode = evt.keyCode || evt.which;
							if (charCode == 13) {
       
								if (evt.preventDefault) {
									evt.preventDefault();
								}
								evt.returnValue = false;
							}
						};
					</script>
				</p>

				<p>
					<input type='button' id='demoBtn' autocomplete="off" style="height: 75px; width: 156px" value='Submit Demographics' onClick="beginTest()" />
				</p>
			</div>
			
			<div id='results' hidden='true'>
				<a name="RESULTS"></a>
				<h1 style="color:White;">Exercise Complete</h1>
					<input type='button' id='editDemoBtn' autocomplete="off" style="height: 75px; width: 156px" value='Edit Demographics' onClick="editDemo()" />
				</p>
				<p>
					<input type='submit' id='resultsBtn' autocomplete="off" style="height: 75px; width: 156px" value='Submit Results' />
				</p>
			</div>
	   </form>
	</div>

</body>