//*********************************************************************** global variables
// these can be overriden per html file, by using <script> tags in their headers
var menu_nudgeX=20;  // ornamental horizontal displacment of menu-item groups
var menu_nudgeY=-8;   // vertical displacment (mainly to avoid border-thickness)

//****************************************************************************************
// create a simple link to be used within a menu list
//********************************************************************* menu_itemCreate()
function menu_itemCreate(item)
{
if (!item) return null;
if (!item.caption || !item.href) return null;
var node;
try
  {
  node=document.createElement("a");
  var imgSrc=(item.img)?"<img src=\""+ldr_makeRelativeLink(item.img)+"\">":"";
  node.setAttribute("href", ldr_makeRelativeLink(item.href));
  //instead of: node.appendChild(document.createTextNode(item.caption)); prefer
  // this: node.innerHTML=item.caption; to make use of &nbsp; within the caption
  node.innerHTML=imgSrc+item.caption;
  node.className="menuItem";
  if (item.target) node.setAttribute("target", item.target);
  if (item.id) node.setAttribute("id", item.id);
  node.onmouseover=function(evnt)
    {
    if (!this.dfltClr) this.dfltClr=util_getCurrentStyleAttrib(this, 'color');
    this.style.color="rgb(0,70,255)";
    }
  node.onmouseout=function(evnt) { this.style.color=this.dfltClr; }
  }
catch (error) { node=null; alert("menu_itemCreate: "+error); }
return node;
}

//****************************************************************************************
// create a link-list to be used with a a drop-down top-menu item
//********************************************************************* menu_listCreate()
function menu_listCreate(list)
{
if (!list) return null;
if (!list.length) return null;
var node, item;
try
  {
  node=document.createElement("div");
  node.className="menuList";
  if (list.id) node.setAttribute("id", item.id);
  var item;
  for (var i=0; i<list.length; i++)
    {
    item=menu_itemCreate(list[i])
    item.style.display="block";
    node.appendChild(item);
    node.onmouseout=menu_listMouseOut;
    }
  }
catch (error) { node=null; alert("menu_listCreate: "+error); }
return node;
}

//****************************************************************************************
// the onMouseOut event handler for a menu drop-down list
//******************************************************************* menu_listMouseOut()
function menu_listMouseOut(evnt)
{
if (window.event && (event.toElement==this || event.toElement.parentNode==this)) return;
else if (evnt && (evnt.relatedTarget==this || evnt.relatedTarget.parentNode==this)) return;
this.style.display="none";
}

//****************************************************************************************
// create a top-menu item and associate it with it's drop down list
//******************************************************************** menu_groupCreate()
function menu_groupCreate(group, horizontal)
{
if (!group) return null;
if (!group.caption) return null;
if (!group.href && !group.list) return null;
var node;
try
  {
  node=document.createElement("div");
  if (group.href)
    {
    node.className="menuGroupNoList";
    node.appendChild(menu_itemCreate(group));
    }
  else
    {
    node.className="menuGroup";
    // instead of "node.appendChild(document.createTextNode(group.caption))" use the
    // next 2 lines, so &nbsp; can be used in innerHtml= (cannot in createTextNode())
    var span=document.createElement("span");
    var imgSrc=(group.img)?"<img src=\""+ldr_makeRelativeLink(group.img)+"\">":"";
    span.innerHTML=imgSrc+group.caption;
    node.appendChild(span);
    if (group.id) node.setAttribute("id", item.id);
    var list=menu_listCreate(group.list);
    if (list)
      {
      document.body.appendChild(list);
      node.list=list;  // remeber the contained menu list
      node.listOffsetLeft=-1;  // remember where list appears. Both are
      node.listOffsetTop=-1;   // calculated in lazy initialization
      }
    }
  node.style.display=(horizontal)?"inline":"block";
  node.onclick=menu_listMouseClick;
  }
catch (error) { node=null; alert("menu_groupCreate: "+error); }
return node;
}

//****************************************************************************************
// the onMouseClick event handler for a top-menu item
//***************************************************************** menu_listMouseClick()
function menu_listMouseClick(evnt)
{
var divs=this.parentNode.getElementsByTagName(this.tagName);
for (var i=0; i<divs.length; i++)
  { var div=divs.item(i); if (div.list) div.list.style.display="none"; }
if (!this.list) return;
if (this.listOffsetLeft<0) this.listOffsetLeft=util_calcOffsetLeft(this)+menu_nudgeX;
if (this.listOffsetTop<0) this.listOffsetTop=util_calcOffsetTop(this)+
                                             this.offsetHeight+1+menu_nudgeY;
this.list.style.left=this.listOffsetLeft+"px";
this.list.style.top=this.listOffsetTop+"px";
this.list.style.display="block";
}

//**************************************************************************************
// create all the top-menu items of a horizontal menu
//*************************************************************** menu_horizontalCreate()
function menu_horizontalCreate(menuBar, logo, horizontal)
{
if (!menuBar) return null;
if (!menuBar.length) return null;
var node;
try
  {
  node=document.createElement("div");
  node.className="menu"+((horizontal)?"Horizontal":"Vertical");
  if (logo.length)
    {
    var imgNode=document.createElement("img");
    imgNode.setAttribute("src", logo);
    imgNode.className="menuBarLogo";
    node.appendChild(imgNode);
    }
  else // add more empty space on top of a vertical menu
    {
    if (!horizontal) node.style.paddingTop="3em";
    }
  for (var i=0; i<menuBar.length; i++) node.appendChild(menu_groupCreate(menuBar[i], horizontal));
  }
catch (error) { node=null; alert("menu_horizontalCreate: "+error); }
return node;
}

//*****************************************************************************************
// the interface function to be called by web-pages containing an id=menuId menu-holding
// element
//************************************************************************** menu_insert()
function menu_insert(menuId, menu, logo, horizontal)
{
if (!menuId || !menu) return;
var parentNode=document.getElementById(menuId);
if (!parentNode) parentNode=document.body;
parentNode.appendChild(menu_horizontalCreate(menu, logo, horizontal));
}