
function UserMenu (id) {
  var imagePath = 'images/';
  var selectorPrefix = 'usermenu';
  var speed = 5;
  var timer = 10;
  var opacity = 0.9;

  var selector = '#' + selectorPrefix + '_' + id;
  var tab = $$(selector + ' dt')[0];
  var items = $$(selector + ' dd')[0];
  var tabImage = $$(selector + ' dt img')[0];

  if (items) {
    tab.onmouseover = function () {setMenuStatus(true)};
    tab.onmouseout = function () {setMenuStatus(false)};
    items.onmouseover = function () {cancelHide()};
    items.onmouseout = function () {setMenuStatus(false)};
  } else {
    tab.onmouseover = function () {setTabStatus(true)};
    tab.onmouseout = function () {setTabStatus(false)};
  }
  setMenuStatus(false);

  function setTabStatus (flag) {
    if (!tabImage) {
      return;
    }
    if (flag) {
      tabImage.src = imagePath + id + '_on.gif';
    } else {
      tabImage.src = imagePath + id + '.gif';
    }
  }

  function setMenuStatus (flag) {
    setTabStatus(flag);
    if (!items) {
      return;
    }
    clearInterval(items.timer);
    if (flag) {
      if (items.maxHeight && items.maxHeight <= items.offsetHeight) {
        return;
      } else if (!items.maxHeight) {
        items.style.display = 'block';
        items.style.height = 'auto';
        items.maxHeight = items.offsetHeight;
        items.style.height = '0px';
      }
    }
    items.timer = setInterval(function(){slide(flag)}, timer);
  }

  function cancelHide () {
    setTabStatus(true);
    if (!items) {
      return;
    }
    clearInterval(items.timer);
    if (items.offsetHeight < items.maxHeight) {
      items.timer = setInterval(function(){slide(true)}, timer);
    }
  }

  function slide (flag) {
    if (!items) {
      return;
    }
    var y = items.offsetHeight;
    if (flag) {
      items.style.height = y + Math.max(1, Math.round((items.maxHeight - y) / speed)) + 'px';
    } else {
      items.style.height = y + (Math.round(y / speed) * -1) + 'px';
    }
    items.style.opacity = y / items.maxHeight * opacity;
    items.style.filter = 'alpha(opacity=' + (items.style.opacity * 100) + ')';
    if((y < 2 && !flag) || ((items.maxHeight - 2) < y && flag)){
      clearInterval(items.timer);
    }
  }
}
