Codebase.load("http://codebase.gd-ks.com/js/Event.js");
Codebase.load("http://codebase.gd-ks.com/js/DOM.js");
Codebase.load("http://codebase.gd-ks.com/js/Style.js");
Codebase.load("http://codebase.gd-ks.com/js/Ajax.js");
Codebase.load("http://codebase.gd-ks.com/js/JSON.js");
Codebase.load("http://codebase.gd-ks.com/js/Element.js");

var navDropdown, parentNav, navTimer;

function initNav()
{
   navDropdown=$E("div", {"style":"position:absolute; display:none; border:1px solid black; background:#FFF; padding:10px;"});
   
   DOM.insert(navDropdown);
   
   var productCategories=JSON.parse(Ajax.Request({"url":"/php/datasource.product_categories.php?format=json", "async":false}).responseText);
   
   var html="";
   
   for(var i=0; i<productCategories.length; i++)
   {
      html+="<a href='view_product_category.php?id=" + productCategories[i].id + "'>" + productCategories[i].title + "</a><br>";
   }
   
   navDropdown.innerHTML=html;
   
   delete html;
   
   // Setup Listeners
   parentNav=$("products_nav");
   
   Event.observe(parentNav, "mouseover", showNav);
   Event.observe(parentNav, "mouseout", expire);
   
   Event.observe(navDropdown, "mouseover", cancelExpire);
   Event.observe(navDropdown, "mouseout", expire);
}

function showNav()
{
   Style.setAttributes(navDropdown, {"display":"block", "top":parseInt(Element.getTop(parentNav))+parseInt(Element.getHeight(parentNav))-2 + "px", "left":parseInt(Element.getLeft(parentNav)) + "px"});
   
   cancelExpire();
}

function cancelExpire()
{
   clearTimeout(navTimer);
}

function expire()
{
   navTimer=setTimeout(function(){ Style.setAttributes(navDropdown, {"display":"none"}); }, 100);
}

Event.observe(window, "load", initNav);