Stuff

<html>
<style type="text/css">
<!--
.backStyle {
        position: absolute;
        width: 269px;
        height: 250px;
        left: 0px;
        top: 0px;
        z-index: 0;
        visibility: visible;
}

.textStyle {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000000;
        position: absolute;
        z-index: 1;
        left: 67px;
        top: 68px;
}

.inputStyle{
        position: absolute;
        z-index: 2;
        left: 67px;
        top: 87px;
        visibility: visible;
}

.outputStyle{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
	position: absolute;
	z-index: 1;
	width: 200px;
	Height: 45px;
	left: 68px;
	top: 118px;
}
A:link{
	color: black;
	text-decoration: none;
}
A:visited{
	color: slategray;
	text-decoration: none;
}
A:active{
	color: darkgray;
	text-decoration: none;
}
A:hover{
	color: darkgray;
	text-decoration: none;
}

-->
</style>

<script language="javascript">
var xmlhttp=false;

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {

	try {
      xmlhttp = new XMLHttpRequest();
    } catch (e) {
      xmlhttp = false;
    }

}

function loadDoc(docname) {

	if (xmlhttp) {
	
	xmlhttp.open("GET", docname,true);
	 xmlhttp.onreadystatechange=function() {
	  if (xmlhttp.readyState==4) {

		if (xmlhttp.responseXML == null) {
			var parser = new DOMParser();
			var myXml = parser.parseFromString(xmlhttp.responseText, "text/xml");
		} else {
			var myXml = xmlhttp.responseXML;
		}
		var nameArray = myXml.getElementsByTagName('fileName');
		var displayNameArray = nameArray
		var recipeType = myXml.getElementsByTagName('type');
		var typeFolder = recipeType[0].firstChild.nodeValue;

	     function writeArray() {
		var returnString = '';
		for(var i = 0; i < nameArray.length; i++)
		{
		   var displayName = nameArray[i].firstChild.nodeValue;
 		   returnString += '<a href="./recipes/' +typeFolder+ '/' +nameArray[i].firstChild.nodeValue+ '">' +displayName.replace(/.docx/,"")+ '</a> <br>\n';
		}
		return returnString;
	     }	   
		   document.getElementById('OutputLayer').innerHTML = writeArray();

	  }
	 }
	 xmlhttp.send(null)

	 }

}


</script>

<body>
<div id="BackgroundLayer" class="backStyle">
  <center>
        <img src="./default.png" width="269" height="250">
  </center>
        <div id="TextLayer" class="textStyle">
                <div align="center">Search for Recipes:</div>
        </div>
</div>

<div id="InputLayer" class="inputStyle">
	<form action="test.php" method="get" name="recipeType">
	 <select name="type" id="recipeName" onChange="loadDoc('test.php?type='+this.value)" size="1" border="0">
	  <option value="null" selected> </option>
	  <option value="appetizer" name="appetizer">Appetizers</option>
	  <option value="lunch" name="lunch">Lunches</option>
	  <option value="dinner" name="dinner">Dinners</option>
	  <option value="dessert" name="dessert">Desserts</option>
	 </select>
	</form>
</div>

<div id="OutputLayer" class="outputStyle">


</div>





</body>
</html>