var z = 10;
function toggle(id) {  
	 var state = document.getElementById(id).style.display;  
			 if (state == 'block') {  
					 document.getElementById(id).style.display = 'none';  
			 } else {  
					 document.getElementById(id).style.display = 'block';
					document.getElementById(id).style.zIndex = z++;					 
			 }  
	 }
	 

var contentElem = null; // where to display the recipes
var filename = null; // the filename for the selected recipe

/*
Sets up the event handlers.
*/
function init()
{
	var recipeListDiv = document.getElementById('seven');
	var recipes = recipeListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}
	
	var recipe1ListDiv = document.getElementById('meat');
	var recipes = recipe1ListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}
	
	var recipe2ListDiv = document.getElementById('appies');
	var recipes = recipe2ListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}
	
	var recipe3ListDiv = document.getElementById('bread');
	var recipes = recipe3ListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}
	
	var recipe4ListDiv = document.getElementById('dairy');
	var recipes = recipe4ListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}

	var recipe5ListDiv = document.getElementById('dips');
	var recipes = recipe5ListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}

	var recipe6ListDiv = document.getElementById('more');
	var recipes = recipe6ListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}

	var recipe7ListDiv = document.getElementById('pasta');
	var recipes = recipe7ListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}

	var recipe8ListDiv = document.getElementById('rice');
	var recipes = recipe8ListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}

	var recipe9ListDiv = document.getElementById('soup');
	var recipes = recipe9ListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}
	
	var recipe10ListDiv = document.getElementById('vegan');
	var recipes = recipe10ListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}

	var recipe11ListDiv = document.getElementById('vegetarian');
	var recipes = recipe11ListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}
	
	var recipe12ListDiv = document.getElementById('veggies');
	var recipes = recipe12ListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}
	
	var recipe13ListDiv = document.getElementById('wheat');
	var recipes = recipe13ListDiv.getElementsByTagName('li');

		for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}
	
	var recipe14ListDiv = document.getElementById('dressing');
	var recipes = recipe14ListDiv.getElementsByTagName('li');

			for(var i = 0; i < recipes.length; i++)
			{
				recipes[i].onmouseover = mouseoverPlay;
				recipes[i].onmouseout = mouseoutPlay;
				recipes[i].onclick = mouseclickPlay;
			}
	
	// define the element where the recipes are to be disrecipeed	
	contentElem = document.getElementById('recipeBox');
}

/*
Mouseclick event handling.
*/
function mouseclickPlay()
{
	// remove highlight from previously selected recipe
	if (filename != null && filename != "" && filename != "undefined")
		document.getElementById(filename).className = '';

	this.className='recipeClick'; // highlight
	filename = this.id;
	sendRequest();
}

/*
Mouseover event handling..
*/
function mouseoverPlay()
{
	if (this.className != 'recipeClick')
		this.className='recipeMouseOver';
}

/*
Mouseout event handling..
*/
function mouseoutPlay()
{
	if (this.className != 'recipeClick')
		this.className='recipeMouseout';
}


function sendRequest() 
{
   var request = null;
   
   if (window.XMLHttpRequest) 
   {
      request = new XMLHttpRequest();
	} 
	else 
	{
  	   request = new ActiveXObject("Microsoft.XMLHTTP");
   }

	// don't send the request unless we have a valid filename
   if (filename != null && filename != "" && filename != "undefined")
   {
      var url = "recipes/" + filename + ".xml";
      if (request) 
      {
         request.open("GET", url, true);
         request.onreadystatechange =
    		function() 
    		{
    			if (request.readyState == 4) 
    			{
    				if (request.status == 200) 
    				{
						// clear any previous nodes
         			contentElem.innerHTML = "";
      			   processXML(request.responseXML);
    			   }
  			   }
    		}
    	   request.send(null);
     	} 
      else 
      {
    		alert("Sorry, you must upserve your browser before seeing" +
      		   " Ajax in action.");
      }
   }
}

/*
Parses the xml and creates the HTML DOM nodes.
*/
function processXML(xml_doc)
{
   // get the root element
	var root_elem = xml_doc.documentElement;

	// outer 'div' tag
	var divTag = document.createElement("div");
	divTag.className = "recipe";

	// title
	var title = root_elem.getElementsByTagName("title")[0];
	var spanTag = document.createElement("span");
	spanTag.className = "recipeName";
	spanTag.appendChild(document.createTextNode(title.firstChild.nodeValue));
	divTag.appendChild(spanTag);
	
		// servings
	var serve = root_elem.getElementsByTagName("serve")[0];
	pTag = document.createElement('p');
	pTag.className = "recipeServes";
	pTag.appendChild(document.createTextNode(serve.firstChild.nodeValue));
	divTag.appendChild(pTag);
	contentElem.appendChild(divTag);
	
  //List items
	var list = root_elem.getElementsByTagName("listItem");	
		for (var i = 0; i < list.length; i++)
		{
			var listItem = list[i];
			var pTag = document.createElement("p");
			pTag.className = "ingredients";
			pTag.appendChild(document.createTextNode(listItem.firstChild.nodeValue));
			divTag.appendChild(pTag);
		}

  //List item last
	var listlast = root_elem.getElementsByTagName("listItemlast");	
		for (var i = 0; i < listlast.length; i++)
		{
			var listItemlast = listlast[i];
			var pTag = document.createElement("p");
			pTag.className = "ingredientslast";
			pTag.appendChild(document.createTextNode(listItemlast.firstChild.nodeValue));
			divTag.appendChild(pTag);
		}	
		
  //List totals
	var total = root_elem.getElementsByTagName("listtotal");	
		for (var i = 0; i < total.length; i++)
		{
			var listtotal = total[i];
			var pTag = document.createElement("p");
			pTag.className = "ingredients";
			pTag.appendChild(document.createTextNode(listtotal.firstChild.nodeValue));
			divTag.appendChild(pTag);
		}			

  //Ger all Ponse items
	var ponselist = root_elem.getElementsByTagName("ponse");	
		for (var i = 0; i < list.length; i++)
		{
			var ponse = ponselist[i];
			var pTag = document.createElement("p");
			pTag.className = "recipeMethod";
			pTag.appendChild(document.createTextNode(ponse.firstChild.nodeValue));
			divTag.appendChild(pTag);
		}

}


// initialize the event handlers.
window.onload = init;