var current = null;

function on_load()
{
  //
  // bind clicks to the tabs
  //
  var links = $("tabnav").immediateDescendants();
  
  for (var i = 0;  i < links.length;  i++)
  {
  	Event.observe(links[i], "click", on_tab_click);
  }
  
  current = $("toteproducts");
}

function on_tab_click(event)
{
  //
  // remove the 'selected' style from the current element
  // and add the 'selected' style to the new element
  //
  var links = $("tabnav").immediateDescendants();
  
  for (var i = 0;  i < links.length;  i++)
  {
  	if (links[i].hasClassName("selected"))
  	{
  	  links[i].removeClassName("selected");
  	  break;
  	}
  }
  
  var clicked = Event.element(event);
  var ancestors = clicked.ancestors();
  ancestors[0].addClassName("selected");
    
  
	var id = clicked.readAttribute("id");
	var productsid = id + "products";
	
	if (current)
	{
		current.toggle();
	}
	
	current = $(productsid);
	current.toggle();
	
	Event.stop(event);
}