Stuff

<html>
<style type="text/css">
<!--
body {
	height: 250px;
	width: 250px;
}

.backStyle {
        position: absolute;
        width: 250px;
        height: 250px;
        left: 0px;
        top: 0px;
        z-index: 0;
        visibility: visible;
}

.textStyle {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #FFFFFF;
        position: absolute;
        z-index: 1;
        left: 26px;
        top: 85px;
        visibility: visible;
}

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

.outputStyle{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
	position: absolute;
	z-index: 1;
	width: 200px;
	Height: 90px;
	left: 28px;
	top: 106px;
        visibility: visible;
}
.outputStyleFrame{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
	position: absolute;
	z-index: 1;
	width: 190px;
	Height: 85px;
	left: 0px;
	top: 0px;
}
.changeSize{
	font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
	position: absolute;
	z-index: 1;
	left: 100px;
	top: 200px;
        visibility: visible;
}




A:link{
	color: white;
	text-decoration: none;
}
A:visited{
	color: white;
	text-decoration: none;
}
A:active{
	color: black;
	text-decoration: none;
}
A:hover{
	color: white;
	text-decoration: none;
}

iframe {
	background-color: transparent;
}

-->
</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 += '<li> <a href="http://www.indiefoodnetwork.com/gadget/recipes/' +typeFolder+ '/' +nameArray[i].firstChild.nodeValue+ '" style="">' +displayName.replace(/.doc/,"")+ '</a></li>\n';
		}
		var resultsFrame = document.getElementById('myFrame');
                var doc = resultsFrame.contentDocument;
                if (doc == undefined || doc == null)
                    doc = resultsFrame.contentWindow.document;
                doc.open();
                doc.write('<html>\n<style type="text/css"><!-- body {background-color: transparent;}A:link{text-decoration:none;color:white;}A:visited{color: white;text-decoration: none;}A:active{color: white;text-decoration: none;}A:hover{color: white;text-decoration: none;}li{line-height:12px;font-size:11px;font-family="Arial,Helvetica,sans-serif";margin-left:0;} --></style>\n<body>\n<p>\n');
                doc.write(returnString);
                doc.write('</p>\n</body>\n</html>');
                doc.close();       

                document.getElementById('myFrame').style.visibility="visible";
	     }	   
		   document.getElementById('myFrame').innerHTML = writeArray();

	  }
	 }
	 xmlhttp.send(null)

	 }

}

//////////////////////////////////////////////////////////////////////////
///
///
///
//////////////////////////////////////////////////////////////////////////

var bodySize = "large";
var backgroundImage = new BackgroundImageController();

function BackgroundImageController(){

	this.isLarge = true;

	this.setImage = function ()
	{
		if(this.isLarge == false){ // show mini bg
			document.getElementById('bground').src = "./default_small.png";
		}
		else{ // show large bg
			document.getElementById('bground').src = "./default.png";
		}
	}
}

//////////////////////////////////////////////////////////////////////////

function toggleInterface()
{
	if( bodySize == "large" )
	{
		bodySize = "small";
		document.body.style.height = "100px",
		document.body.style.width = "100px";
		document.getElementById('bground').style.width = "100px";
		document.getElementById('bground').style.height = "100px";
		backgroundImage.isLarge = false;
		backgroundImage.setImage();
		document.getElementById('TextLayer').style.visibility = "hidden";
		document.getElementById('InputLayer').style.visibility = "hidden";
		document.getElementById('OutputLayer').style.visibility = "hidden";
		document.getElementById('Change').style.top = "50px";
		document.getElementById('Change').style.left = "20px";
		document.getElementById('MaxOrMin').innerHTML = "Maximize"
	}
	else
	{
		bodySize = "large";
		document.body.style.height = "250px";
		document.body.style.width = "250px";
		document.getElementById('bground').style.width = "250px";
		document.getElementById('bground').style.height = "250px";
		backgroundImage.isLarge = true;
		backgroundImage.setImage();
		document.getElementById('TextLayer').style.visibility = "visible";
		document.getElementById('InputLayer').style.visibility = "visible";
		document.getElementById('OutputLayer').style.visibility = "visible";
		document.getElementById('Change').style.top = "200px";
		document.getElementById('Change').style.left = "100px";
		document.getElementById('MaxOrMin').innerHTML = "Minimize"
	}
}



</script>

<body>

<div id="BackgroundLayer" class="backStyle">
<img id="bground" src="default.png" style=
    "position:absolute;left:0px;width:250px;height:250px;
    top:0px;z-index:-999;" />        <div id="TextLayer" class="textStyle">
                <div align="center">Search for Recipes:</div>
        </div>
</div>

<div id="InputLayer" class="inputStyle">
	<form action="http://www.indiefoodnetwork.com/gadget/xml.php" method="get" name="recipeType">
	 <select name="type" id="recipeName" onChange="loadDoc('http://www.indiefoodnetwork.com/gadget/xml.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">
<iframe allowtransparency="true"  id="myFrame"  frameborder="0"  vspace="0"  hspace="0"  marginwidth="0"
marginheight="0"  width="100"  scrolling=auto height="100"
 class="outputStyleFrame" 
style="visibility:hidden"></iframe>

</div>

<div id="Change
" class="changeSize">
<a id="MaxOrMin" onclick="toggleInterface();">Minimize</a>
</div>



</body>
</html>