<?php
	if (!isset($_SESSION['nazwa'])) {
		header('Location: login.php');
		exit();
	}
?>
	<script src="gry/formularz/js/jquery-3.2.1.js"></script>
	<script src="gry/formularz/js/jquery-ui.js"></script>
	<link rel="stylesheet" href="gry/formularz/css/style.css" />
<div id="kontener">
	<div id="div_button">
		<input id="button2" type="button" value="Zamknij" />
			Uwaga! Jeżeli nie potrafisz rozwiązać testu kliknij na przycisk: <b>Zamknij</b><br />
			Test nie zostanie zaliczony, będzie można zaliczyć go później.<br />
			---------------------
	</div>
	<div id="tytul"><h1 style="text-align: center; color: #009; font-weight: bold;font-family: 'Comic Sans MS', cursive, sans-serif;">Ankieta</h1></div>
	<div id="content_test">
		<div id="div_pytanie">
			<span style="color: #E00">Pytanie:</span>
			Jak podoba Ci się strona www.wasznet.pl czyli „Wirtualny asystent”?
		</div>
		<div id = "pt1"><p id="p_odpowiedz">Pierwsza odpowiedź</p>
			<div id="div_numeracja">1</div>
			<div id = "p1">
				<p>Nie podoba się</p>
			</div>
			
		</div>
	
		<div id = "pt2"><p id="p_odpowiedz">Druga odpowiedź</p>
		<div id="div_numeracja">2</div>
			<div id = "p2">
				<p>Podoba się, ale coś bym zmienił(a)</p>
			</div>
		</div>
		
		<div id = "pt3"><p id="p_odpowiedz">Trzecia odpowiedź</p> 
			<div id="div_numeracja">3</div>
			<div id = "p3">
				<p>Podoba się</p>
			</div>
		</div>	
		
		<div id = "pt4"><p id="p_odpowiedz">Czwarta odpowiedź</p>
			<div id="div_numeracja">4</div>
			<div id = "p4">
				<p>Bardzo mi się podoba</p>
			</div>
		</div>
		<div style="width: 570px; height: 2px; border: 2px dotted #0F8; position: relative; top: 33px; margin: 0 auto"></div>
		  <div id = "droppable" class = "ui-widget-header">
			 <p id="p_droppable">Przeciągnij i upuść tutaj wybraną przez Ciebie odpowiedź</p>
		  </div>
		  <input id="button1" type="button" value="Zapisz" />	
		<div id="div_info">
			Najedź kursorem myszki nad wybraną przez Ciebie odpowiedź, następnie wciśnij lewy klawisz myszki
			i przeciągnij tę odpowiedź nad pole<br /> 
			z napisem: Przeciągnij i upuść tutaj wybraną przez Ciebie odpowiedź.
			Puść lewy klawisz myszki. To wszystko co musisz zrobić. Po przeciągnięciu jednej z odpowiedzi 
			zostanie wyświtlony klawisz: Zapisz. Kliknij na niego, aby zakończyć zadanie. Jeżeli chcesz zmienić
			wybór odpowiedzi przeciągnij inną odpowiedź tak, jak poprzednio, odpowiedzi zostaną zamienione. 
			
		</div>
	</div>

</div>

<script type="text/javascript">
	var elposy = [-33, -33, 60, 80];
	var elposdy = [267, 195, 123, 51];
	var eldrag = [false, false, false, false];
	var id = '';
	var idn = -1;
	var nr_odp = 0;
<?php
	echo 'var idu = '.$_SESSION['id'].';';
	echo "var strona = 'http://".$_SERVER['HTTP_HOST']."/index.php?m=10&gry=0';";
?>

$(document).ready(function(){	
	var szer = window.innerWidth;
	var wys = window.innerHeight;

	$('#kontener').width(szer-12);
	$('#kontener').height(wys-12);
	
	/*
	$("#emoty").css({bottom: 90, left: szer-540});
	$('#emoty').height(wys-136);
	$("#wiadomosci_tlo").css({bottom: 48});
	$("#wiadomosci_tlo").height(wys-142);
	$('#rysowanie').width(szer-10);
	$('#rysowanie').height(wys-7);
	$("#div_menu").css({bottom: 48});
	$("#div_menu").css({left: szer-790});
	$("#div_menu").height(wys-142);
	$(".zamknij_rysowanie").css({left: szer-50});
	*/
	
		$(function(event, ui) {
			$( "#p1" ).draggable({
				axis: "y",
				start: startd,
				stop: stopd,
				opacity: 0.9,
				containment: '#content',
				stack: '#content',
				zIndex: 104
			});
			$( "#p2" ).draggable({
				axis: "y",
				start: startd,
				stop: stopd,
				opacity: 0.9,
				containment: '#content',
				stack: '#content',
				zIndex: 103
			});
			$( "#p3" ).draggable({
				axis: "y",
				start: startd,
				stop: stopd,
				opacity: 0.9,
				containment: '#content',
				stack: '#content',
				zIndex: 102
			});
			$( "#p4" ).draggable({
				axis: "y",
				start: startd,
				stop: stopd,
				opacity: 0.9,
				containment: '#content',
				stack: '#content',
				zIndex: 101
			});
			
			$("#droppable").droppable({
               drop: function (event, ui) {			  
				  if (id!='') {
					animacja(id, idn);
					eldrag[idn] = false;
					$('#'+id).draggable( 'enable' );
					$('#'+id).css('z-index', 105-idn);
					$('#'+id).css('-webkit-box-shadow', '4px 3px 3px #666');
					$('#'+id).css('-moz-box-shadow', '4px 3px 3px #666');
					$('#'+id).css('box-shadow', '4px 3px 3px #666');
				  }
				  id = $(ui.draggable).attr("id");
				  idn = id.substring(1, 2)-1;
				  eldrag[idn]=true;
				  $('#'+id).css({top: elposdy[idn]});
				   $('#'+id).css('z-index', 105-idn);
				  ui.draggable.draggable( 'disable' );
				  $('#'+id).css('-webkit-box-shadow', '4px 3px 4px #666');
				  $('#'+id).css('-moz-box-shadow', '4px 3px 4px #666');
				  $('#'+id).css('box-shadow', '4px 3px 4px #666');
				  $('#button1').show(500);	
				  $('#div_info').css('margin', '-10px auto');
				  nr_odp = idn+1;
               }
            });
			
			function stopd( event, ui ) {
			  var xPos = parseInt( ui.offset.left );
			  var yPos = parseInt( ui.offset.top );
			  var ids = $(this).attr("id");
			  var idns = ids.substring(1, 2)-1;
			  if (!eldrag[idns]) {
				animacja(ids, idns);
				$('#'+ids).css('-webkit-box-shadow', '4px 3px 4px #666');
				$('#'+ids).css('-moz-box-shadow', '4px 3px 4px #666');
				$('#'+ids).css('box-shadow', '4px 3px 4px #666');
			  }
			}
			
		});
		
		
		function animacja(id, nr) {
			var el = $('#'+id);
			$( el ).animate({
			  top: -35
			}, 700 );
        } 
		
		
		function startd( event, ui ) {
			var ids = $(this).attr("id");
			$('#'+ids).css('-webkit-box-shadow', '8px 6px 8px #666');
			$('#'+ids).css('-moz-box-shadow', '8px 6px 8px #666');
			$('#'+ids).css('box-shadow', '8px 6px 8px #666');
		}
		
		$(document).on("click", "#button2", function () {
			ankietaZamknij();
		});
		
		$(document).on("click", "#button1", function () {
			$.ajax({
				type:"POST", 
				url:"gry/formularz/ajax_ankieta.php", 
				data: {k1:idn, k2:idu},						 
					success:function() {
						alert('Dziękuję za udzielenie odpowiedzi');
						ankietaZamknij();
					},
				error: function(blad) {
				console.log("Błąd: wysyłanie formularz - test"); 
				}
			});
		});
			  
		function ankietaZamknij() {
			$("#kontener").animate({
				opacity: 0,
				top: "+=250",
				left: "+=200"
			  }, 1300, function() {
				$("#kontener").css('display', 'none');
			  });
			  $("#content_test").animate({
				opacity: 0,
				left: "+=200"
			  }, 1300, function() {
				$("#content_test").css('display', 'none');
			  });
			  setTimeout(function(){window.location.href = strona;}, 1200);
		}
});
</script>
