<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 3</title>

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

 var settings;

$(document).ready(function(){
	settings = JSON.parse(localStorage.settings || 0) || { needs:[], impairments:[], preferences:[] };
    $("div.tool-tip").hide();
	 $(".level").hide();
	   
	$("#clear-all").click(clearAll);
	$("#clear-some").click(clearSome);
	$("#previous").click(previous);

	// todo: update checked variable based on settings.preferences	
	settings.preferences.forEach(function(s) {
		var ee = $("[type=radio][value=" + s + "]");
		ee[0].checked = true;
	 });

    $(".preference").mouseover(function(){
        $(".tool-tip", this).show();
    }).mouseout(function(){
        $(".tool-tip",this).hide();
    });

	  updatePanel();
	 $("input[type=radio]").click(updatePanel);  
    
});
  function updatePanel() 
  { 
    settings.preferences = $("input[type=radio]:checked").toArray().map(function(e) { return e.value; }).filter(function(s) { return s; });
	localStorage.settings = JSON.stringify(settings);
     var url1 = "Step3results.php?array=";
	var url2 = url1 + settings.preferences.join(',') + "&arrays=" + encodeURIComponent(JSON.stringify(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 clearSome()
{
	$("[type=radio]").each(function(i, e){ e.checked = !e.value;  });
	settings.preferences = [];
	localStorage.settings = JSON.stringify(settings);
	updatePanel();
}
function clearAll()
{
	settings = { needs:[], impairments:[], preferences:[] };
	localStorage.settings = "";
	document.location.href = "StartPage.php";
}

function previous()
{
	document.location.href = "Step2.php";
}	

	
  </script>
</head>

<body>
<div class="all-content">
    <div class="header">
    <div class="headerText">mobileSELECT &gt; Step Three &gt; Your Preferences</div>
  </div>
    <div id="main">
    <h1>mobileSELECT</h1>
<h2>Step Three: Your Preferences</h2>
<div>
<p>The following questions asks about your preferences on the type of mobile device that you would use based on your needs and capabilities.</p>
<p class="italics">Select your preference.</p>
</div>
<div class="tip-placeholder"></div>

<?php
  $con = get_database_connection();
  
  /* 1. PRINT THE USER INTERFACE*/
  //Get all the needs and print them to checkboxes
  $result = mysqli_query($con,"SELECT RequirementID as ID, Name, Description FROM UserRequirement WHERE Type = 'Preference-B'");
  
    $result2 = mysqli_query($con,"SELECT RequirementID as ID, Name, Description FROM UserRequirement WHERE Type = 'Preference-K'");
	
	  $result3 = mysqli_query($con,"SELECT RequirementID as ID, Name, Description FROM UserRequirement WHERE Type = 'Preference'");
  echo "<p><strong>What type of mobile device (style) do you prefer to use? </strong></p>";
   echo "<div class='preference'><input value='' type='radio' name='preferences' id='zero' tabindex='1' checked><label for='zero'>No preference</label></div>";
  while($row = mysqli_fetch_array($result))
  {
	  echo "<div class='preference'><input value='".$row['ID']."' type='radio' name='preferences' id='".$row['ID']."' tabindex=".$row['ID']."><label for=".$row['ID'].">".$row['Name']."</label><div class='tool-tip'>".$row['Description']."</div></div>";
  }
  echo "<p><strong>How do you prefer to physically access your mobile device?</strong></p>";
  echo "<div class='preference'><input value='' type='radio' name='preferences-physical' id='zero1' tabindex='1' checked><label for='zero1'>No preference</label></div>";
   while($row = mysqli_fetch_array($result2))
  {
	  echo "<div class='preference'><input value='".$row['ID']."' type='radio' name='preferences-physical' id='".$row['ID']."' tabindex=".$row['ID']."><label for=".$row['ID'].">".$row['Name']."</label><div class='tool-tip'>".$row['Description']."</div></div>";
  }
  ?> 
  <div class="float-right">
  </div>

  <div class="footer">
   
    <button id="clear-all">Restart</button>
        <button id="previous">Previous</button>

        
     
     </div>
</div>

   <div id ="container1"></div>
    <div id="phone-grid" class="scroll-pane ui-widget ui-widget-header ui-corner-all"-->
    <div id="dynamicPhone"></div>
</div>
</div>
</body>
</html>
