<!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 1</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();
    
    $(".need-outer").mouseover(function(){
        $(".tool-tip",this).show();
    }).mouseout(function(){
        $(".tool-tip",this).hide();
    });
    
	$("input[type=checkbox]").click(onCheck).each(function(i, e) {
		e.checked = settings.needs.indexOf(e.id) >= 0;
	});
	$("#clear-all").click(clearAll);
	$("#next").click(next);
	onCheck();
});

function clearAll()
{
	$("[type=checkbox]").each(function(i, e){ e.checked = false;  });
	settings = { needs:[], impairments:[], preferences:[] };
	localStorage.settings = "";
	onCheck();
}
function next()
{
	document.location.href = "Step2.php";
}
//    $("input[type=checkbox]").click(function() {
	function onCheck() 
	{
   		var IDarray = $("input:checked").map(function(i, e) { return e.id; }).toArray();
		settings.needs = IDarray;
		localStorage.settings = JSON.stringify(settings);
		if (IDarray.length) {
			$(".button-left a, .button-right a").removeClass("disable-link");
			var url = "Step1results.php?array=" + IDarray.join(',') + "&arrays=" + encodeURIComponent(localStorage.settings);
			$('#container1').load(url, null, function() {	
				$('.phone a').click(function(e) {
					console.log(55);
					$('#phone-grid').load(this.id);
				});
			});	  
		} else {
			$(".button-left a, .button-right a").addClass("disable-link");
			$('#container1').html("");
		}
	}
  

	
  </script>


</head>

<body>
<div class="all-content">
    <div class="header">
    <div class="headerText">MobileSELECT &gt; Step One &gt; Your Needs</div>
  </div>
    <div id="main">
    <h1>mobileSELECT</h1>
<h2>Step One: Your Needs</h2>
<div class="bodytext">
<p class="question">What do you <strong>need</strong> to use the mobile communication device for?</p>
<p class="italics">Select the option(s) that are most IMPORTANT to you</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 = 'Need'");
  while($row = mysqli_fetch_array($result))
  {
	  echo "<div class='need-outer'><input value='".$row['ID']."' type='checkbox' name='".$row['ID']."' id='".$row['ID']."' tabindex=".$row['ID']."><label for=".$row['ID'].">".$row['Name']."</label><div class='tool-tip'>".$row['Description']."</div></div>";  
	   
  }
  ?> 
  <br/><br/>
  <span class="button-left"><button id="clear-all" title="Clears the current selections on this screen">Clear</button></span>
    <span class="button-right"><button id="next">Next</button></span>
</div>
  <div id ="container1"></div>
    <div id="dynamicPhone"></div>
</div>
</body>
</html>
