Untitled

<!DOCTYPE HTML>
<html>
	<head>
		<title>Brian Foran | Monarchy</title>
		<style>
			#selName {
				vertical-align:top;
			}


		</style>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
		<link rel="stylesheet" href="/resources/demos/style.css">
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
		<script>

			$(document).ready(function() {
				var myResults;
				$.getJSON('monarchy.json', function (data) {
			        JSON_Response = data;  //JSON_Response declared globally
			        //alert(JSON_Response.dogs[0].dogName);

			        //adapted from http://www.w3schools.com/jsref/met_select_add.asp
			        var mySelect = document.getElementById("selName");
			        for (i = 0; i < JSON_Response.Monarchy.length; i++) {
			            var myOption = document.createElement("option");
			            myOption.text = JSON_Response.Monarchy[i].monarchName;
			            myOption.value = i;
			            try {
			                // for IE earlier than version 8
			                mySelect.add(myOption, mySelect.options[null]);
			            }
			            catch (e) {
			                mySelect.add(myOption, null);
			            }

			        } //end for


			    });
			    $("#selName").change(function() {
				    	var curr = $("#selName").val();
				    	$("#divNameInfo").html(JSON_Response.Monarchy[curr].monarchName + "<br>Reign: " + JSON_Response.Monarchy[curr].monarchStartYear + " - " + JSON_Response.Monarchy[curr].monarchEndYear + "<br>" + JSON_Response.Monarchy[curr].monarchHouse)
				    	$("#imgMonarch").attr("src", JSON_Response.Monarchy[curr].monarchImage);
				    });

				    $("#selHouse").change(function() {
				    	var curr = $("#selHouse").val();
				    	myResults = jQuery.grep(JSON_Response.Monarchy, function (a, i) {
				    		return a.monarchHouse.indexOf(curr) != -1;
				    	}
				    	/*
				    	$("#taHouseInfo").val("");
		                var finalResults = "";
		                for (var i = 0; i < myResults.length; i++) {
		                    finalResults += myResults[i].name + "\n";
		                }

		                $("#taHouseInfo").val(finalResults);*/
				    });
			});
		</script>
		<script>
			$(function() {
		    	$("#tabs").tabs();
		  	});
		</script>
	</head>
	<body>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Individual Monarchs</a></li>
				<li><a href="#tabs-2">Houses</a></li>
				<li><a href="#tabs-3">Time Line</a></li>
			</ul>

		  <div id="tabs-1">
		    	<select id="selName"></select>

			    <div id="divNameInfo">

			    </div>
			    <img src="qe2.jpg" id="imgMonarch" />
		  </div>
		  <div id="tabs-2">
		  	<select id="selHouse">
                <option value="default">Select a House</option>
                <option value="House of Windsor">House of Windsor</option>
                <option value="House of Saxe-Coburg-Gotha">House of Saxe-Coburg-Gotha</option>
                <option value="House of Brunswick">House of Brunswick</option>
                <option value="House of Stuart">House of Stuart</option>
                <option value="House of Stuart (Restored)">House of Stuart (Restored)</option>
                <option value="House of Orange and Stuart">House of Orange and Stuart</option>
                <option value="House of Tudor">House of Tudor</option>
                <option value="The Commonwealth">The Commonwealth</option>
            </select>
		  	<div id="divHouseInfo"></div>
		  	<textarea id="taHouseInfo" cols="20" rows="10" disabled="disabled"></textarea>
		  </div>
		  <div id="tabs-3">


		  </div>
		</div>
	</body>

</html>