function FancyMenu(sPrefix, nItems)
{
  FancyMenu.arMenus[sPrefix] = this;
  this.arItems = new Array();
  this.sMenuPrefix = sPrefix;
  for (var i = 0; i < nItems; i++)
  {
    this.arItems[i] = new FancyMenuItem(i, this.sMenuPrefix);
  }
}

function FancyMenuItem(i, sMenuPrefix)
{
  this.arImages = new Array();
  this.iIndex = i;
  this.itemID = sMenuPrefix + i;
  var myDiv = document.getElementById(sMenuPrefix + "_" + i);
  if ("ie" == nBrowser)
  {
    myDiv.setAttribute("onmouseover", function(){eval("FancyMenu.arMenus['" + sMenuPrefix + "'].menuIn(" + i + ")");});
    myDiv.setAttribute("onmouseout", function(){eval("FancyMenu.arMenus['" + sMenuPrefix + "'].menuOut(" + i + ")");});
  }
  else
  {
    myDiv.setAttribute("onmouseover", "FancyMenu.arMenus['" + sMenuPrefix + "'].menuIn(" + i + ")");
    myDiv.setAttribute("onmouseout", "FancyMenu.arMenus['" + sMenuPrefix + "'].menuOut(" + i + ")");
  }


  var nodes = myDiv.childNodes;
  for (var n in nodes)
  {
    var s = "" + nodes[n].nodeName;
    if ('IMG' == s.toUpperCase())
    {
      this.arImages[this.arImages.length] = nodes[n];
    }
  }

  var submen = document.getElementById(this.itemID + "_s");
  if (submen)
  {
    if ("ie" == nBrowser)
    {
      submen.setAttribute("onmouseover", function(){eval("FancyMenu.arMenus['" + sMenuPrefix + "'].submenuIn(" + i + ")");});
      submen.setAttribute("onmouseout", function(){eval("FancyMenu.arMenus['" + sMenuPrefix + "'].submenuOut(" + i + ")");});
    }
    else
    {
      submen.setAttribute("onmouseover", "FancyMenu.arMenus['" + sMenuPrefix + "'].submenuIn(" + i + ")");
      submen.setAttribute("onmouseout", "FancyMenu.arMenus['" + sMenuPrefix + "'].submenuOut(" + i + ")");
    }
    var it = this.arImages[0];
    // example how to position submenu
    // position submenu below menu item:
    submen.style.top = it.offsetHeight + it.offsetTop;
    // and 10px to the right:
    submen.style.left = it.offsetLeft + 10;
    this.oSubmen = submen;
  }
}

FancyMenu.fadeDownStep = 0.1;
FancyMenu.fadeOutStep = 0.06;
FancyMenu.delayToHide = 100;
FancyMenu.maxSubmenuOpacity = 0.75;

FancyMenuItem.prototype =
{
  arImages : null,
  iIndex : 0,
  itemID : "",
  timerID : 0,
  nFadeVal : 1.0,
  nStatus : 0,
  oSubmen : null,

  setCur : function()
  {
    this.nStatus = 4;
    this.arImages[0].style.visibility = "hidden";
    this.arImages[2].style.visibility = "hidden";
    this.setOpacity(this.arImages[1], 1.0);
  },
  menuIn : function()
  {
    if (4 == this.nStatus)
      return;
    if (this.isMouseOver())
      return;

    this.nStatus = 1;
    this.nFadeVal = 1.0;

    this.setOpacity(this.arImages[2], 0.001);
    this.setOpacity(this.arImages[1], 1.0 - this.nFadeVal);
    this.setOpacity(this.arImages[0], this.nFadeVal);
    if (this.oSubmen)
    {
      this.oSubmen.style.visibility = "visible";
      this.setOpacity(this.oSubmen, 0.0);
    }
    if (this.timerID)
      return;

    var me = this;
    this.timerID = window.setInterval(function(){me.fade();},FancyMenuItem.nTT);
  },
  menuOut : function()
  {
    if (4 == this.nStatus)
      return;
    if (!this.isMouseOver())
      return;

    this.nStatus = 3;
    if (this.timerID)
      return;
    var me = this;
    this.timerID = window.setInterval(function(){me.fade();},FancyMenuItem.nTT);
  },
  fade : function()
  {
    if (1 == this.nStatus)
    {
      this.fadeDown();
    }
    else if (3 == this.nStatus)
    {
      this.fadeOut();
    }
    else
    {
      window.clearInterval(this.timerID);
      this.timerID = 0;
    }
  },
  fadeDown : function()
  {
    this.nFadeVal -= FancyMenu.fadeDownStep;
    if (this.nFadeVal <= 0.0)
    {
      // fade down finished
      this.nStatus = 2;
      window.clearInterval(this.timerID);
      this.timerID = 0;
      this.nFadeVal = 0.0;
    }
    this.setOpacity(this.arImages[1], 1.0 - this.nFadeVal);
    this.setOpacity(this.arImages[0], this.nFadeVal);
    if (this.oSubmen)
    {
      var n = 1.0 - this.nFadeVal;
      if (n < FancyMenu.maxSubmenuOpacity)
        this.setOpacity(this.oSubmen, n);
    }
  },
  fadeOut : function()
  {
    this.nFadeVal += FancyMenu.fadeOutStep;
    if (this.nFadeVal >= 1.0)
    {
      // fade out finished
      this.nStatus = 0;
      window.clearInterval(this.timerID);
      this.timerID = 0;
      this.nFadeVal = 1.0;
      this.setOpacity(document.getElementById(this.itemID + "_2"), 0.0);
      if (this.oSubmen)
      {
        this.oSubmen.style.visibility = "hidden";
      }
    }
    this.setOpacity(this.arImages[1], 1.0 - this.nFadeVal);
    this.setOpacity(this.arImages[2], this.nFadeVal);
    if (this.oSubmen)
    {
      this.setOpacity(this.oSubmen, 1.0 - this.nFadeVal);
    }
  },
  isMouseOver : function()
  {
    return ((this.nStatus == 1) || (this.nStatus == 2));
  },
  setOpacity : function(el,n)
  {
    if (!el)
      return;
    el.style.opacity = n;
    el.style.filter="alpha(opacity=" + Math.round(n * 100) + ")";
    el.style.KhtmlOpacity = n;
    el.style.khtmlOpacity = n;
    el.style.mozOpacity = n;
  }
}

FancyMenu.prototype =
{
  arItems : null,
  sMenuPrefix : "",
  nThisPageItem : -1,
  nCurMenuItem : -1,
  timerID : 0,

  setCur : function(nItem)
  {
    this.nThisPageItem = nItem;
    this.arItems[nItem].setCur();
  },

  menuIn : function(iIndex)
  {
    if (this.nThisPageItem == iIndex)
      return;
    if (this.timerID)
      window.clearTimeout(this.timerID);
    this.timerID = 0;
    this.nCurMenuItem = iIndex;
    for (var i = 0; i < this.arItems.length; i++)
    {
      if (iIndex == i)
        this.arItems[i].menuIn();
      else
        this.arItems[i].menuOut();
    }
  },
  menuOut : function(iIndex)
  {
    if (this.nThisPageItem == iIndex)
      return;
    var me = this;
    this.timerID = window.setTimeout(function(){me.menuOutDelayed(iIndex);},FancyMenu.delayToHide);
  },
  menuOutDelayed : function(iIndex)
  {
    this.arItems[iIndex].menuOut();
  },
  submenuIn : function(iIndex)
  {
    if (this.timerID)
      window.clearTimeout(this.timerID);
    return;
    if (this.nThisPageItem == iIndex)
      return;
    
    for (var i = 0; i < this.arItems.length; i++)
    {
      if (iIndex == i)
        this.arItems[i].menuIn();
      else
        this.arItems[i].menuOut();
    }
  },
  submenuOut : function(iIndex)
  {
    this.menuOut(iIndex);
  }
}


 
function logMsg(s)
{
  document.getElementById("log").innerHTML += s + "<br />";
}

FancyMenuItem.nTT = 20;
FancyMenu.arMenus = new Array();

var nBrowser = "";
if (-1 != navigator.appName.indexOf("Internet Explorer"))
  nBrowser = "ie";
else if (-1 != navigator.appName.indexOf("Netscape"))
  nBrowser = "ns";