<?php
  include "include.php";
  session_start();
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="eng" xml:lang="eng">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>mobileSELECT Step 2</title>
  <!-- Ajax-->

  <!--Tooltip Hover for Phones-->
  <!--link href="css/blitzer/jquery-ui-1.10.2.custom.css" rel="stylesheet"-->
  <?php include_googles_jquery(); ?>
  <script type="text/javascript">
  
var settings;
</script>

  <!--Buttons-->
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <!--link rel="stylesheet" href="/resources/demos/style.css" /-->

  <!--link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /-->

  <link href="style.css" rel="stylesheet" type="text/css" />
  <script>
  
  var settings;
  function onChangeOrder() 
  {
	  settings.impairments = $("#sortable").children().toArray().map(function(e) { return e.id; });
	  localStorage.settings = JSON.stringify(settings);

	var url1 = "Step2results.php?array=";
	var url2 = url1 + settings.impairments.join(',') + "&arrays=" + localStorage.settings;
	$('#container1').load(url2, null, function() {	
		$('.phone a').click(function(ev) {
			$('a').css({ 'font-weight': '', 'text-decoration': 'underline' });
			$(ev.target).css({ 'font-weight': 'bold', 'text-decoration':'none' });
			$('#populate-phones').load(this.id);
		});
	});	  
  }
  
  

  function updatePanel() 
  { 

	var arr = $("input[type=radio]:checked").toArray().map(function(e) { return e.name + "=" + e.value; });
	settings.impairments = $("input[type=radio]:checked").toArray().map(function(e) { return e.value; });
	localStorage.settings = JSON.stringify(settings);

	$("#rank-results").load("Step2b.php?" + arr.join("&") + "&arrays=" + encodeURIComponent(localStorage.settings), null, function() {

	if (settings.impairments.length > 1)
		$(".prioritise, #rank-results").show();
	else
		$(".prioritise, #rank-results").hide();

			$("div.tool-tip").hide();
			
			$("ul#sortable .ui-state-default").mouseover(function(){
				$(".tool-tip",this).show();
			}).mouseout(function(){
				$(".tool-tip",this).hide();
			});
			
		onChangeOrder();  
		$("#sortable").sortable({
			stop : onChangeOrder
		});
		$("#sortable").disableSelection();
	});
  }
  
  $(document).ready(function(){
	  console.log(localStorage.settings);
	  settings = JSON.parse(localStorage.settings || 0) || { needs:[], impairments:[], preferences:[] };
	  console.log(settings);

	$("#clear-all").click(clearAll);
	$("#clear-some").click(clearSome);
	$("#next").click(next);
	$("#previous").click(previous);
	

   	$("div.tool-tip").hide();
	$("div.level").hide();
	//$("input.impairment").hide();
    
   	$("div.impairment-outer").mouseover(function(){
    	    $(".tool-tip",this).show();
    	}).mouseout(function(){
    		$(".tool-tip",this).hide();
    	});
		  settings.impairments.forEach(function(s) {
		  var s1 = s.replace(/-.*/, ""); 
		  var ee = $("[type=checkbox][name=" + s1 + "]");
		  ee[0].checked = true;
		  ee.parent().children(".level").show();
		  $("[type=radio][value=" + s + "]")[0].checked = true;
		})
//	  updatePanelFirst();
//	  $(".level").hide();
	  
// todo: update checked variable based on settings.impairments	
	
	updatePanel();

//	$('input.impairment').click(function () {
 //     $(".level").toggle(this.checked);
  //  });
	$("input[type=radio]").click(updatePanel);
	$("input[type=checkbox]").click(function(ev) {
		if (ev.target.checked) {
  			$(ev.target).parent().children(".level").show();
			updatePanel();
  		} else {
	  		$(ev.target).parent().children(".level").hide();
			$(ev.target).parent().find("input[type=radio]").prop('checked', false);
			updatePanel();
		}
	});
});

function clearSome()
{
	$("[type=checkbox],[type=radio]").each(function(i, e){ e.checked = false;  });
	$("div.level").hide();
	settings.impairments = [];
	settings.preferences = [];
	localStorage.settings = JSON.stringify(settings);
	updatePanel();
}
function clearAll()
{
	settings = { needs:[], impairments:[], preferences:[] };
	localStorage.settings = "";
	document.location.href = "StartPage.php";
}

function next()
{
	document.location.href = "Step3a.php";
}
function previous()
{
	document.location.href = "Step1.php";
}	
  </script>
  </head>
  <body>
<div class="all-content">
    <div class="header">
    <div class="headerText">mobileSELECT &gt; Step Two &gt; Your Abilities</div>
  </div>
    <div id="main">
    <h1>mobileSELECT</h1>
    <h2>Step Two: Your Abilities</h2>
    <p class="question">The following asks about your current abilities to effectively use the mobile device.</p>
    <p class="question">Which of the following impairments do you have that limit/restricts your ability to use the mobile device effectively?</p>
    <p class="italics">Select the categories that apply to you and the level of difficulty you experience with a mobile device related to that category.</p>
    <div class="tip-placeholder-step2"></div>
    <ul>
        <?php
  $con = get_database_connection();
  
  /* 1. PRINT THE USER INTERFACE*/
  //Get all the needs and print them to checkboxes
  $result = mysqli_query($con,"SELECT Name, RequirementID as ID, Description FROM UserRequirement WHERE Type = 'Impairment-base' ORDER BY SortOrder");
//print_r($result6); echo mysqli_error($con);
  while($row = mysqli_fetch_array($result))
  {
	  echo "<div class='impairment-outer'><input id='".$row['ID']."' type='checkbox' name='".$row['ID']."' class='impairment' tabindex=".$row['ID']."><label for=".$row['ID']."><strong>".$row['Name']."</strong></label><div class='tool-tip'>".$row['Description']."</div>";
	  
	  echo"<div class='level' id='".$row['ID']."'><label><input type='radio' name='".$row['ID']."' value='".$row['ID']."-1' id='Difficulty_0' class='difficulty'>Some difficulty</label><label><input type='radio' name='".$row['ID']."' value='".$row['ID']."-2' id='Difficulty_1' class='difficulty'>Great difficulty</label><label><input type='radio' name='".$row['ID']."' value='".$row['ID']."-3' id='Difficulty_2' class='difficulty'>Cannot do</label><br></div></div>";
  }
  ?>
      </ul>
    <div id="rank-results">  </div>

    <div class="footer">
    <span class="button-left">
    <button id="clear-all">Restart</button>
      <button id="clear-some">Clear</button>
   
    </span>
    <span class="button-right">
     
    <button id="previous">Previous</button>
   
   
    <button id="next">Next</button>
 
    </span>
    <!--button><u>N</u>ext</button-->
  </div>
  </div>
 
<div id ="container1"></div>
<div id="dynamicPhone"></div>
</div>
 </div>
</body>
</html>
