function debug(content)
{
  var debug_pre = document.getElementById("debug_pre");
  if (debug_pre != null)
  {
    debug_pre.appendChild(document.createElement("br"));
    debug_pre.appendChild(document.createTextNode((new Date()).getTime() + " " + content));
    debug_pre.scrollTop = debug_pre.scrollHeight;
  }
}

function go(n)
{
  document.location.href = n + ".php";
}

function showproduct(reference)
{
  var firstcomma = reference.search(",");
  document.location.href = "products/" + reference.substring(0, firstcomma) + ".php?showproduct=" + reference.substr(firstcomma + 1);
}

// the products popups show up on all pages, so it has to be coded in common.js
// OBJECT PopupProduct
function PopupProduct(name, url, childGroup)
{
  this.childGroup = childGroup;
  
  // parent points to the parent PopupGroup (if applicable)
  this.parent = null;
  
  // I can set the childGroup's parent to me!
  this.childGroup.parent = this;
  // combined with PopupGroup, now I have a doubly-linked-list!
  
  // now for the button itself...
  this.element = document.createElement("div");
  this.element.className = "popup_menu_button";
  this.element.innerHTML = name;
  this.element.onClick = "document.location.href='" + url + "'";
  this.element.onMouseOver = function (){ popup_product_mouseover; };
  this.element.onMouseOut = function (){ debug("popup_product mouseout"); };
}
// OBJECT PopupGroup
function PopupGroup(children)
{
  this.element;

  // children is an array of objects of type PopupProduct
  // !!TREAT AS IMMUTABLE!!
  this.children = children;
  
  // parent points ot the parent PopupProduct (if applicable)
  this.parent;
  
  // I can set the parent value of the PopupProducts in children to me!
  for (var i = 0; i < this.children.length; i++) this.children[i].parent = this;
  // combined with PopupProduct, now I have a doubly-linked-list!
  
  this.show = function()
  {
    debug('show!');
    if (undefined == this.element)
    {
      debug('start showing popup group for ' + ((undefined == this.parent) ? 'root' : this.parent.element.innerHTML));
      this.element = document.createElement("div");
      this.element.className = "popup_menu";
      this.element.zIndex = 100;
      this.element.position = "absolute";
      this.element.top = 200;
      this.element.left = 200;
      this.element.onMouseOver = function (){ debug("popup_group mouseover") };
      this.element.onMouseOut = function (){ popup_product_mouseout() };
      for (var i = 0; i < this.children.length; i++)
      {
        debug('adding child element: ' + this.children[i].element.innerHTML);
        this.element.appendChild(this.children[i].element);
      }
    }
    else
    {
      debug('poof! ' + this.element.name);
    }
    this.element.style.display = "block";
  }
}

var pp_jerky = new PopupProduct("Dried Meat Products", "products/jerky.php", new PopupGroup(new Array()));
var pp_frozen = new PopupProduct("Frozen Food Products", "products/frozen.php", new PopupGroup(new Array()));

// top level group, it's not attached to a parent PopupProduct (it's "attached" to the Products menu button)
var popup_products = new PopupGroup(new Array(pp_jerky, pp_frozen));

// to point to the current popup being shown
var current_popup = null;
// timer used in global popup_product_mouseover and popup_product_mouseout methods (as is current_popup)
var popup_timeout;
// point to the Products menu button
var products_button;

function products_mouseover(element)
{
  return; // TODO DISABLED!!!
  products_button = element;
  popup_product_mouseover(element);
}
function products_mouseout()
{
  return; // TODO DISABLED!!!
  popup_product_mouseout();
}

function popup_product_mouseover(element)
{
  clearTimeout(popup_timeout);
  popup_timeout = setTimeout(function() { do_popup_product_mouseover.call(this, element); }, 667);
}
function popup_product_mouseout()
{
  clearTimeout(popup_timeout);
  popup_timeout = setTimeout(function() { do_popup_product_mouseout(); }, 1000);
}

function do_popup_product_mouseover(element)
{
  debug('popup_product_mouseover ' + element.className);
  var previous_popup = current_popup;
  if (element == products_button) 
  {
    debug('yes! products button!');
    popup_products.show();
    current_popup = popup_products;
  }
  // now clean up the previous popups
  // TODO
  // now, draw the new set of popups (if necessary)
  // TODO
}
function do_popup_product_mouseout()
{
  debug('popup_product_mouseout');
  // do_popup_product_mouseout will only get called if there was no mouseover for any of the popup elements
  // (because the clearTimeout would have been called)
  // -- so, clean everything up
  // TODO
}