window.onload = initPage;

function initPage() {
  // find the thumbnails on the page
  var links = 
    document.getElementById("leftBar").getElementsByTagName("a");

  // set the handler for each image
  for (var i = 0; i < links.length; i++) {
    var link1 = links[i];
    
    // create the onclick function
    link1.onclick = function() {
      // find the image name
      var detailURL = '_images/' + this.title + '.jpg';
      document.getElementById("itemDetail").src = detailURL;
      getDetails(this.title);
    }
  }
}

function getDetails(itemName) {
  request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  // Version for XML server-side script
  var url= "getDetailsXML.php?ImageID=" + escape(itemName);
  request.open("GET", url, true);
  request.onreadystatechange = displayDetails;
  request.send(null);
}

function displayDetails() {
  if (request.readyState == 4) {
    if (request.status == 200) {
	
//     var detailDiv = document.getElementById("fullDescription");
      var btdiv = document.getElementById("bNameDes");
	  var ftdiv = document.getElementById("fNameDes");
	  var ctdiv = document.getElementById("cNameDes");
	  var prtdiv = document.getElementById("pUsed");
	  var habdiv = document.getElementById("habitat");
	  var pofdiv = document.getElementById("pOffer");
	  var desdiv = document.getElementById("Des");
	  
	  var btrdiv = document.getElementById("bRow");
	  var ftrdiv = document.getElementById("fRow");
	  var ctrdiv = document.getElementById("cRow");
	  var prtrdiv = document.getElementById("pRow");
	  var habrdiv = document.getElementById("hRow");
	  var pofrdiv = document.getElementById("pofRow");
	  var desrdiv = document.getElementById("desRow");
	  var frontdiv = document.getElementById("front");


  // Remove existing item details (if any)
      for (var i=frontdiv.childNodes.length; i>0; i--) {
        frontdiv.removeChild(frontdiv.childNodes[i-1]);
      }
	   // Remove existing item details (if any)
      for (var i=btrdiv.childNodes.length; i>0; i--) {
        btrdiv.removeChild(btrdiv.childNodes[i-1]);
      }
	  	   // Remove existing item details (if any)
      for (var i=ftrdiv.childNodes.length; i>0; i--) {
        ftrdiv.removeChild(ftrdiv.childNodes[i-1]);
      }
	  	  	   // Remove existing item details (if any)
      for (var i=ctrdiv.childNodes.length; i>0; i--) {
        ctrdiv.removeChild(ctrdiv.childNodes[i-1]);
      }
	  	  	   // Remove existing item details (if any)
      for (var i=prtrdiv.childNodes.length; i>0; i--) {
        prtrdiv.removeChild(prtrdiv.childNodes[i-1]);
      }
	  	  	   // Remove existing item details (if any)
      for (var i=habrdiv.childNodes.length; i>0; i--) {
        habrdiv.removeChild(habrdiv.childNodes[i-1]);
      }
	  	  	  	   // Remove existing item details (if any)
      for (var i=pofrdiv.childNodes.length; i>0; i--) {
        pofrdiv.removeChild(pofrdiv.childNodes[i-1]);
      }
	  	  	  	   // Remove existing item details (if any)
      for (var i=desrdiv.childNodes.length; i>0; i--) {
        desrdiv.removeChild(desrdiv.childNodes[i-1]);
      }



// Remove existing item details (if any)
      for (var i=btdiv.childNodes.length; i>0; i--) {
        btdiv.removeChild(btdiv.childNodes[i-1]);
      }
	  	   // Remove existing item details (if any)
      for (var i=ftdiv.childNodes.length; i>0; i--) {
        ftdiv.removeChild(ftdiv.childNodes[i-1]);
      }
	  	  	   // Remove existing item details (if any)
      for (var i=ctdiv.childNodes.length; i>0; i--) {
        ctdiv.removeChild(ctdiv.childNodes[i-1]);
      }
	  	  	   // Remove existing item details (if any)
      for (var i=prtdiv.childNodes.length; i>0; i--) {
        prtdiv.removeChild(prtdiv.childNodes[i-1]);
      }
	  	  	   // Remove existing item details (if any)
      for (var i=habdiv.childNodes.length; i>0; i--) {
        habdiv.removeChild(habdiv.childNodes[i-1]);
      }
	  	  	  	   // Remove existing item details (if any)
      for (var i=pofdiv.childNodes.length; i>0; i--) {
        pofdiv.removeChild(pofdiv.childNodes[i-1]);
      }
	  	  	  	   // Remove existing item details (if any)
      for (var i=desdiv.childNodes.length; i>0; i--) {
        desdiv.removeChild(desdiv.childNodes[i-1]);
      }

      // Add new item details
	  var responseDoc = request.responseXML;
	  //botanical name
      var botanicalname = responseDoc.getElementsByTagName("botanicalName")[0];
      var botanicalnameText = botanicalname.firstChild.nodeValue;
      var botanicalnameP = document.createElement("p");
      var boxB = document.createElement("b");
	  
	  boxB.appendChild(
        document.createTextNode("Botanical Name: "));
      btrdiv.appendChild(boxB);
	  
	  botanicalnameP.appendChild(
        document.createTextNode(botanicalnameText));
      btdiv.appendChild(botanicalnameP);
      //family name
      var familyname = responseDoc.getElementsByTagName("familyName")[0];
      var familynameText = familyname.firstChild.nodeValue;
      var familynameP = document.createElement("p");
	  var foxB = document.createElement("b");
	  
	  foxB.appendChild(
        document.createTextNode("Family Name: "));
      ftrdiv.appendChild(foxB);
	  
	  
      familynameP.appendChild(
        document.createTextNode(familynameText));
      ftdiv.appendChild(familynameP);
	  //common Name
	  var commonname = responseDoc.getElementsByTagName("commonName")[0];
      var commonnameText = commonname.firstChild.nodeValue;
      var commonnameP = document.createElement("p");
	  var coxB = document.createElement("b");
	  
	  coxB.appendChild(
        document.createTextNode("Common Name: "));
      ctrdiv.appendChild(coxB);
	  
	  
      commonnameP.appendChild(
        document.createTextNode(commonnameText));
      ctdiv.appendChild(commonnameP);
	  //Part Used
	  var partused = responseDoc.getElementsByTagName("partUsed")[0];
      var partusedText = partused.firstChild.nodeValue;
      var partusedP = document.createElement("p");
	  var paroxB = document.createElement("b");
	  
	  paroxB.appendChild(
        document.createTextNode("Part USed: "));
      prtrdiv.appendChild(paroxB);
	  
	  
      partusedP.appendChild(
        document.createTextNode(partusedText));
      prtdiv.appendChild(partusedP);
	  //Habitat
	  var habitat = responseDoc.getElementsByTagName("habitat")[0];
      var habitatText = habitat.firstChild.nodeValue;
      var habitatP = document.createElement("p");
	  var hoxB = document.createElement("b");
	  
	  hoxB.appendChild(
        document.createTextNode("Habitat: "));
      habrdiv.appendChild(hoxB);
	  
	  
      habitatP.appendChild(
        document.createTextNode(habitatText));
      habdiv.appendChild(habitatP);
	  //productOffered
	  var productoffered = responseDoc.getElementsByTagName("productOffered")[0];
      var productofferedText = productoffered.firstChild.nodeValue;
      var productofferedP = document.createElement("p");
	  var prtofoxB = document.createElement("b");
	  
	  prtofoxB.appendChild(
        document.createTextNode("Part Offered: "));
      pofrdiv.appendChild(prtofoxB);
	  
	  
      productofferedP.appendChild(
        document.createTextNode(productofferedText));
      pofdiv.appendChild(productofferedP);
	  
	  //description
      var description = responseDoc.getElementsByTagName("description")[0];
      var descriptionText = description.firstChild.nodeValue;
      var descriptionP = document.createElement("p");
	  var desoxB = document.createElement("b");
	  
	  desoxB.appendChild(
        document.createTextNode("Use: "));
      desrdiv.appendChild(desoxB);
	  
	  
      descriptionP.appendChild(
        document.createTextNode(descriptionText));
      desdiv.appendChild(descriptionP);
      
      
    }  
  }
}