function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
  }
  return [curleft,curtop];
}

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

function getSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth,myHeight];
}

function elementById(id)  
{
  return document.getElementById(id);
}

function hide_sub(item_id)
{
  var sub =  elementById('sub' + item_id);
  sub.style.left = '-1000px';
}

function getDistanceToBottom(item, sub)
{
  var pos = findPos(item);
  var windowSize = getSize();
  var scrollXY = getScrollXY();
  
  return (windowSize[1] + scrollXY[1]) - (pos[1] + sub.offsetHeight);
}

function show_sub(item_id)
{
  
  var item = elementById(item_id);
  var pos = findPos(item);
  var sub =  elementById('sub' + item_id);
  var distanceToBottom = getDistanceToBottom(item, sub);
  var scrollXY = getScrollXY();
  
  if(item.parentNode.className == 'level2')
  {
    var pos = findPos(item);
    var parentPos = findPos(item.parentNode.parentNode.parentNode);
    
    sub.style.left = ''+  item.parentNode.parentNode.parentNode.parentNode.parentNode.offsetWidth  + 'px';

    if(distanceToBottom >= 0)
    {
      // popdown
      sub.style.top = '' + (pos[1] - (parentPos[1] + 1)) + 'px';
    } 
    else 
    {
      // popup
      var topPos = (((pos[1] - parentPos[1]) - sub.offsetHeight) + item.offsetHeight);
      if(topPos - (scrollXY[1] - parentPos[1]) < 0) topPos = scrollXY[1] - parentPos[1];
      
      sub.style.top = '' + topPos + 'px';
    }
  } 
  else
  {
    sub.style.left = ''+  item.parentNode.parentNode.parentNode.offsetWidth + 'px';
    if(distanceToBottom >= 0)
    {
      // popdown
      sub.style.top = '' + (item.offsetTop - 1) + 'px';
    } 
    else 
    {
      // popup
      var parentPos = findPos(item.parentNode.parentNode.parentNode);
      var topPos = ((item.offsetTop - sub.offsetHeight)  + item.offsetHeight);
      if(topPos - (scrollXY[1] - parentPos[1]) < 0) topPos = scrollXY[1] - parentPos[1];
      
      

      sub.style.top = '' + topPos + 'px';
    }
  }  
}