window.onload = initPage;

function initPage() {
  // find the thumbnails on the page
  cats = document.getElementById("category").getElementsByTagName("td");

  // set the handler for each image
  for (var i = 0; i < cats.length; i++) {
    cat = cats[i];
    cat.onmouseover= function() {
  this.bgColor="yellow";
    }
        cat.onmouseout= function() {
  //this.innerHTML="green";
   this.bgColor="";
    }
    // create the onclick function
    cat.onclick = function() {
   
      getDetails(this.id);
    }
  }
}

function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (tryMS) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (otherMS) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = null;
      }
    }
  }
  return request;
}

function getDetails(itemName) {
  request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  var url= "ergome_cat_equiplist.php?cat=" + escape(itemName);
  
  request.open("GET", url, true);
  request.onreadystatechange = displayDetails;
  request.send(null);
}

function displayDetails() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      detailDiv = document.getElementById("equiplist");
      detailDiv.innerHTML = request.responseText;
    }
  }
}