<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="what"></div>

<div id="scope" style="position:relative">
  <div id="serverError" style="display:none;position:absolute">Hello</div>

  <div id="container"> 
  	  <div id="inst"><p>Read the following statement.  Then, click Next.</p></div>
      <div id="step1">
          <span id="serverQuestion"><p>Loading....</p></span>
      </div>
      
      <div id="step2" style="display:none">
        <div id="slider" style="width:75%; margin-left:auto; margin-right:auto; color:#990033;"></div>
        <div id="amount">Neutral</div>
      </div>
      
      <div id="step3" style="display:none">
      	<form id="demo1Form">
          <p>In what year were you born?<br />
          <select id="yearpicker">
          	<option>Select</option>
          </select></p>
          <p>What is your gender<br /> 
          <input type="radio" name="sex" value="1">Male
          <input type="radio" name="sex" value="2">Female
          <input type="radio" name="sex" value="3">Other</p>
          <p>What is your race?<br />
          <select id="race">
          	  <option value"select">Select</option>
              <option value="1">White</option>
              <option value="2">Black or African American</option>
              <option value="3">Native American or American Indian</option>
              <option value="4">Asian or Pacific Islander</option>
              <option value="5">Asian or Pacific Islander</option>
          </select></p>
          <p>What is your ethnicity?<br />
          <input type="radio" name="ethnicity" value="1">Hispanic or Latino
          <input type="radio" name="ethnicity" value="2">Non-Hispanic</p>
        </form>
      </div>
      
      <div id="step4" style="display:none">
      	<form id="demo2Form">
          <p>How many years of education have you completed?<br />
             <select id="education">
                <option>Select</option>
             	<option value="1">Some High School</option>
                <option value="2">High School Degree</option>
                <option value="3">Associate's Degree</option>
                <option value="4">Bachelor's Degree</option>
                <option value="5">Master's Degree</option>
                <option value="6">Doctorate</option>
             </select></p>
          <p>What was your household income in 2014?<br />
            <select id="income">
                <option>Select</option>
             	<option value="1">No Income</option>
                <option value="2">10k</option>
                <option value="3">20k</option>
                <option value="4">30k</option>
                <option value="5">40k</option>
                <option value="6">50k</option>
                <option value="7">60k</option>
                <option value="8">70k</option>
                <option value="9">80k</option>
                <option value="10">90k</option>
                <option value="11">100k</option>
                <option value="12">>100k</option>
             </select></p>
          <p>How would you describe your sociopolitical ideology?
           <div id="ideologySlider" style="width:50%; margin-left:auto; margin-right:auto; color:#990033;"></div>
           <span id="ideologyAmount">Moderate</span>
          </p>
          <!--<script>
		  	makeIdeologySlider();
		  </script>-->
          <p>What is your party affiliation?<br />
           <select id="party">
           	 <option>Select</option>
             <option value="1">Democrat</option>
             <option value="2">Independent</option>
             <option value="3">Republican</option>
             <option value="4">Other</option>
           </select></p>
          <p>What is your current health coverage?<br />
           <select id="healthCare">
           	 <option>Select</option>
             <option value="1">None</option>
             <option value="2">Employer Provided</option>
             <option value="3">Medicaid</option>
             <option value="4">Medicare</option>
             <option value="5">ACA Plan or State Health Exchange</option>
             <option value="6">Private Plan</option>
             <option value="7">Other</option>
           </select></p>
       	</form>
      </div>
      
      <div id="next" onClick="nextStage()"><p><img src="http://localhost/peachy/next_button.png" /></p></div> 
  </div>
  
</div>

<script>
centerWithin("container", "scope");
</script>

<!--<script>
	centerHorizontal("serverError", "scope");
	makeSlider();
	makeIdeologySlider();
	centerWithin("container", "scope");
	loadQuestion();
	buildYears();
</script>-->