﻿<?php 
header("X-UA-Compatible: IE=edge,chrome=1");
$duggaPageName="index.php";
$courseName="DA133G Webbutveckling - datorgrafik G1N, 7,5hp (IKI)";
$courseOccasion="HT-12 LP4";
$duggaNr=8;
$ajaxPath="../../../quizAjax/";

//$_POST['answerString']="T5,RP,D1,RN2,T4,S2,D2";
//$_POST['answerString']="PUSH,RN2,T4,RN3,S3,D2,PUSH,RN,T2,S1,D3,POP,RN,T3,S3,RP,D1,POP,RP,T7,S4,RP3,D2,RP2,T2,S2,D3";
if(isset($_GET['answerString'])) $answerString=$_GET['answerString'];
if(isset($_GET['courseOccasion'])) $courseOccasion=$_GET['courseOccasion'];
//$answerString="kkPUSH,RN2,T4,RN3,S3,D2,PUSH,RN,T2,S1,D3,POP,RN,T3,S3,RP,D1,POP,RP,T7,S4,RP3,D2,RP2,T2,S2,D3";

include "../../../../php/dugga_checklogin.php";
if ($accountname=checklogin($errorMsg, $courseName, $courseOccasion, $duggaNr)): 
?>
<html>
	<head>
		<meta charset="UTF-8"/>	
		<style>
			p, a, h1, h2, h3, h4, h5, table, td, th, label, caption{font-family:Helvetica, Arial, sans-serif;}
		</style>
		<script type="text/javascript" src="../../../../js/jquery.js"></script>
		<script type="text/javascript" src="../../../../js/dugga.js"></script>		
		<script lang='Javascript'>
					var account="<?php echo $accountname ?>";		
					var duggaNr="<?php echo $duggaNr ?>";		
					var courseName="<?php echo $courseName ?>";		
					var courseOccasion="<?php echo $courseOccasion ?>";	
					var quizObjectsIDs=new Array();
					var templateURI="";
					
					var startString="<?php if(isset($answerString)) echo $answerString ?>";
					
					$(document).ready(function() {
				
						fetchQuiz();
						
					});
					
					function fetchQuiz(){
						$.post("<?php echo $ajaxPath?>getQuiz.php", 
							   {loginName: account, courseName: courseName, courseOccasion: courseOccasion, quizNr: duggaNr }, 
								fetchQuizCallBack,
								"json"
						);
					}
					
					function fetchQuizCallBack(data){
						if (typeof data.Error != 'undefined') {
							$("#result").html("<p>"+data.Error+"</p>");
							if(typeof data.answerHash != 'undefined'){
								$("#result").append("<p>Svarskod: "+data.answerHash.substr(0,8)+"</p>");
							}
						} else {
							$("#quizInstructions").append(data.quizData);
							quizObjectsIDs=data.quizObjectIDs.split(" ");
							if(data.storedAnswer!=null && startString=="") startString=data.storedAnswer;
							fetchQuizObject("template");
						}
					}
					
					function checkAnswer(submitstr){
						$.post("<?php echo $ajaxPath?>answerQuiz.php", 
							{loginName: account, courseName: courseName, courseOccasion: courseOccasion, quizNr: duggaNr, quizAnswer: submitstr}, 
							checkAnswerCallBack,
							"json"
						);
					}
								
					function fetchQuizObject(objectName){
						$.post("<?php echo $ajaxPath?>getQuizObject.php", 
							   {objectID: objectName, courseName: courseName, courseOccasion: courseOccasion, quizNr: duggaNr, loginName: account}, 
								fetchQuizObjectCallBack,
								"json"
						);
					}

					function fetchQuizObjectCallBack(data){
						if (typeof data.Error != 'undefined') {
							$("#result").append("<br/><h3>Error:"+data.Error+"</h3>");
						} else {
							templateURI=data.objectData;
							setupcanvas();
							acanvas.style.backgroundImage="url('"+templateURI+"')";
							acanvas.style.backgroundSize="600px";
							acanvas.addEventListener('mousemove', ev_mousemove, false);
							acanvas.addEventListener('mouseup', ev_mouseup, false);
							acanvas.addEventListener('mousedown', ev_mousedown, false);
							if(startString!="") populateOperationsList();
							setTimeout("foo();",100);
							
							//init();
						}
					}
		</script>
	

	</head>
	<body>
		<div>

				<canvas id='a' width='600' height='600' style='border:2px solid black;float:left;' >
				</canvas>


				<div style="border:2px solid black;background-color:#fed;width:300;min-height:450;float:left;margin-left:10px;overflow:auto;">
					<div id="infobox" style="padding:4px;">
					<div id="quizInstructions"></div>
					

					<form>
					
					Function: 
					<select id="function" name="function" >

							<option value="T1">Translate 1</option>
							<option value="T2">Translate 2</option>
							<option value="T3">Translate 3</option>
							<option value="T4">Translate 4</option>
							<option value="T5">Translate 5</option>
							<option value="T6">Translate 6</option>
							<option value="T7">Translate 7</option>
							<option value="T8">Translate 8</option>
							<option value="RP">Rotate +</option>
							<option value="RP2">Rotate +2</option>
							<option value="RP3">Rotate +3</option>
							<option value="RN">Rotate -</option>
							<option value="RN2">Rotate -2</option>
							<option value="RN3">Rotate -3</option>
							<option value="S1">Scale 0.3</option>
							<option value="S2">Scale 0.4</option>
							<option value="S3">Scale 0.6</option>
							<option value="S4">Scale 0.8</option>
							<option value="S5">Scale 1.2</option>
							<option value="D1">Draw R</option>
							<option value="D2">Draw G</option>
							<option value="D3">Draw B</option>
							<option value="PUSH">Push (remember state)</option>
							<option value="POP">Pop (jump back)</option>

					</select>			
					<button type="button" onclick="newbutton();">NEW</button>
					
					<br>Operations:<br> 
					<select style="width:145px;float:left;" size="20" id="operations" name="operations">
					</select>			
					<div style="border:1px solid #000;margin:5px;padding:5px;float:left;width:125px;">
						<label><strong>Template</strong></label><br />
						<label>show
						<input type="radio" name="displayTemplate" id="showTemplateRadio" checked="checked" onclick="toggleTemplate();" />
						</label>
						<label>hide
						<input type="radio" name="displayTemplate" id="hideTemplateRadio" onclick="toggleTemplate();" />
						</label>
					</div>
					<br>
					<button type="button" onclick="moveupbutton();">MOVE UP</button>
					<button type="button" onclick="movedownbutton();">MOVE DOWN</button>
					<button type="button" onclick="deletebutton();">DELETE</button><br>
					<br />
					<br />
					<br />
					<button type="button" onclick="submbutton();">SEND</button>
					<br>
							
					</form>		
					<div id="result"></div>
					</div>
					</div>
				</div>

	</div>	
	
	
	<script lang='Javascript'>
		
		function populateOperationsList()
		{

			var startOperations=startString.split(',');
			
			var functionList=document.getElementById("function");
			
			var opList=document.getElementById("operations");

			for(var i=0;i<startOperations.length;i++){
				var text="";
				for(var j=0;j<functionList.options.length;j++){
					if(startOperations[i]==functionList.options[j].value) text=functionList.options[j].innerHTML;
				}
				
				opList.innerHTML+="<option value='"+startOperations[i]+"'>"+text+"</option>";
			}
		}
	
	// User Interface Variables
		var mx=100,my=100,clickstate=1;
		
		// Application state variables
		var v=0,vv=0;
		
		// Handlers for clicks -- works equally on touch and keyboard+mouse devices
		function handler_mouseup()
		{
				if(clickstate==0){
						clickstate=1
				}else if(clickstate==1){
						clickstate=2
						v=0;
				}else{
						clickstate=0;
						v=0;
				}
		}

		function handler_mousedown()
		{
		}
		
		function handler_mousemove(cx,cy)
		{
		
		}		
		
		function newbutton()
		{
				var funclist;
				var oplist;
				
				funclist=document.getElementById('function');
				oplist=document.getElementById('operations');
				
				oplist.innerHTML+="<option value='"+funclist.options[funclist.selectedIndex].value+"'>"+funclist.options[funclist.selectedIndex].text+"</option>";
								
		}
		
		function deletebutton()
		{
				var elSel = document.getElementById('operations');
  			var i=0;
  			for (i=elSel.length-1;i>=0;i--) {
    				if (elSel.options[i].selected) {
      				elSel.remove(i);
    				}
  			}
		}
		
		function moveupbutton()
		{
				var elSel = document.getElementById('operations');
				var ind=elSel.selectedIndex;
				var val;
				var tex;

				if(elSel.selectedIndex>0){
						
						val=elSel.options[ind].value;
						tex=elSel.options[ind].text;

						elSel.options[ind].value=elSel.options[ind-1].value;
						elSel.options[ind].text=elSel.options[ind-1].text;
						
						elSel.options[ind-1].value=val;
						tex=elSel.options[ind-1].text=tex;
							
						elSel.selectedIndex--;				
				}
		}

		function movedownbutton()
		{
				var elSel = document.getElementById('operations');
				var ind=elSel.selectedIndex;
				var val;
				var tex;

				if(elSel.selectedIndex<elSel.length-1){
						
						val=elSel.options[ind].value;
						tex=elSel.options[ind].text;

						elSel.options[ind].value=elSel.options[ind+1].value;
						elSel.options[ind].text=elSel.options[ind+1].text;
						
						elSel.options[ind+1].value=val;
						tex=elSel.options[ind+1].text=tex;
							
						elSel.selectedIndex++;				
				}
				
		}

			
		function foo()
		{
				acanvas.width = acanvas.width;				
				
				if(clickstate==0){
						v+=0.1;
				}else if(clickstate==1){
						v+=0.02;
				}

				context.translate(300,300);
				context.save(); 
				                
				var elSel = document.getElementById('operations');
  			var i=0;
  			
  			var pushcount=0;
  			
  			for (i=0;i<=elSel.length-1;i++) {
						if(elSel.options[i].value=="T1"){
									context.translate(35,0);
						}if(elSel.options[i].value=="T2"){
									context.translate(55,0);
						}if(elSel.options[i].value=="T3"){
									context.translate(90,0);
						}if(elSel.options[i].value=="T4"){
									context.translate(120,0);
						}if(elSel.options[i].value=="T5"){
									context.translate(160,0);
						}if(elSel.options[i].value=="T6"){
									context.translate(200,0);
						}if(elSel.options[i].value=="T7"){
									context.translate(240,0);
						}if(elSel.options[i].value=="T8"){
									context.translate(280,0);
						}if(elSel.options[i].value=="RP"){
									context.rotate(v);
						}if(elSel.options[i].value=="RN"){
									context.rotate(-v);
						}if(elSel.options[i].value=="RP2"){
									context.rotate(v*2.0);
						}if(elSel.options[i].value=="RN2"){
									context.rotate(-v*2.0);
						}if(elSel.options[i].value=="RP3"){
									context.rotate(v*3.0);
						}if(elSel.options[i].value=="RN3"){
									context.rotate(-v*3.0);
						}if(elSel.options[i].value=="S1"){
									context.scale(0.30,0.30);
						}if(elSel.options[i].value=="S2"){
									context.scale(0.40,0.40);
						}if(elSel.options[i].value=="S3"){
									context.scale(0.60,0.60);
						}if(elSel.options[i].value=="S4"){
									context.scale(0.80,0.80);
						}if(elSel.options[i].value=="S5"){
									context.scale(1.20,1.20);
						}if(elSel.options[i].value=="D1"){
								drawball(0,0,30,20,10,"#f84",45.0,22.5);
//		function drawball(cx,cy,radie,innerradie,ballradie,col1,inangle,inangleadd)
						}if(elSel.options[i].value=="D2"){
								drawball(0,0,30,20,10,"#4f8",45.0,22.5);
						}if(elSel.options[i].value=="D3"){
								drawball(0,0,30,20,10,"#84f",45.0,22.5);
						}if(elSel.options[i].value=="PUSH"){
								// Must count saves
								context.save();
								pushcount++;
						}if(elSel.options[i].value=="POP"){
								if(pushcount>0){
										context.restore();
								}
						}
  			}

				// Restore equal amount of times
				for(i=0;i<pushcount;i++){
						context.restore();
				}
  			
				context.restore();
				context.globalAlpha = 0.5				
				context.rotate(-v*0.6);								
				drawsun();

				setTimeout("foo();",50);
				
	  }
	  
		
		function makeString(){
			var s="";
			var elSel = document.getElementById('operations');
				oplist=new Array();
				for(var i=0;i<elSel.length;i++){
					s+=elSel.options[i].value;
					if(i!=elSel.length-1) s+=",";
				}
			return s;
		}
		
		function submbutton()
		{
			checkAnswer(makeString());
		}
		
		function checkAnswerCallBack(data){
			if (typeof data.Error != 'undefined') {
				$("#result").css("background-color","#ffcccc");
				$("#result").html("<p>"+data.Error+"</p>");
				if(typeof data.answerHash != 'undefined'){
					$("#result").append("<p>Svarskod: "+data.answerHash.substr(0,8)+"</p>");
				}
			} else {
				/*if(data.isCorrect=="false"){
					$("#result").css("background-color","#ffcccc");
					$("#result").html("Du har tyvärr svarat fel");
				} else {
					$("#result").css("background-color","#ccffcc");
					$("#result").html("Du har svarat rätt");
					$("#result").append("<br />Din svarskod:"+data.hashedAnswer);
					$("#result").append("<br />Spara alltid din svarskod!");
				*/	
					if(data.Success=="false"){
						$("#result").css("background-color","#ffcccc");
						$("#result").append("<br />Ett problem har uppstått, ditt svar har inte sparats. Det är mycket viktigt att du sparar din svarskod och kontaktar kursansvarige omgående.");
						$("#result").append("<br />Din svarskod:"+data.hashedAnswer);
					} else {
						$("#result").css("background-color","#ccffcc");
						$("#result").html("Your answer has been stored.");
						$("#result").append("<br />Answer receipt:"+data.hashedAnswer);
						$("#result").append("<br />");
					}
				//}
				
			}
		}			
	
		function toggleTemplate(){
			if(document.getElementById("showTemplateRadio").checked){
				acanvas.style.backgroundImage="url('"+templateURI+"')";
			} else {
					acanvas.style.backgroundImage="";
			}
		}
	</script>
	
	</body>
</html>

<?php 

else:
    include "../../../../php/dugga_loginwindow.php";
endif;

?>

