window.onload = function() {
  retrieveCategory("All Categories");
  ajaxCaller.get("allPatterns.phtml", null,
                 onServerResponse, false, "allPatterns");
  setTimeout("ajaxCaller.get('ad.html',null,onServerResponse,false,'ad')",
             5000);
}

function onServerResponse(html, headers, elementId) {
  $(elementId).innerHTML = html;
}

function onDrilldownResponse(xml) {

  var category = xml.getElementsByTagName("category")[0];
  var html="";

  var categoryName = category.getAttribute("name");
  html+="<div id='categoryName'>" + categoryName + "</div>";

  var parent = category.getAttribute("parent");
  if (parent && parent.length > 0) {
    var parentName = category.getAttribute("parent");
    html+="<div id='parent' onclick=\"retrieveCategory('" + parent + "')\""
         + "'>Back to <br/>'" + parent + "'</div>";
  }

  var items = category.getElementsByTagName("items")[0].childNodes;
  for (i=0; i<items.length; i++) {
    var item = items[i];
    if (item.nodeName=="link") {
      var name = item.getElementsByTagName("name")[0].firstChild.nodeValue;
      var url = item.getElementsByTagName("url")[0].firstChild.nodeValue;
      html+="<div class='link'><a href='" + url + "'>" + name + "</a></div>";
    } else if (item.nodeName=="category") {
      var name = item.getAttribute("name");
      html+="<div class='category' "
               + "onclick='retrieveCategory(\""+name+"\")'>"+name+"</div>";
    }
  }

  $("drilldown").innerHTML = html;

}

function retrieveCategory(category) {
  ajaxCaller.getXML("drilldown.phtml?categoryName=" + category,
                    onDrilldownResponse);
}