function agu_toggleMenu(elem) {
  var startNode = getParent(elem);
  var myArrow = startNode.getElementsByTagName("img");
  var mySubList = startNode.getElementsByTagName("UL");
  if ( mySubList[0].style.display == "block" ) {
    myArrow[0].src=approoturl+"gfx/agu/arrow_right.gif";
    elem.style.textDecoration="none"; 
    elem.style.color="#000000";
    mySubList[0].style.display="none";
  } else {
    mySubList[0].style.display="block";
    myArrow[0].src=approoturl+"gfx/agu/arrow_down.gif";
    elem.style.textDecoration="underline"; 
    elem.style.color="#CC3333";
  }  
  function getParent( o ) { 
    while ( o.parentNode.nodeName != "LI" && o.parentNode.nodeName != "DD") {
        o = o.parentNode; 
    }
    return o.parentNode; 
  } 
}

//////// INTERNAL FUNCTIONS ////////

// ds: hideLayer ( 'layerName' )
//     internal functon to hide a layer
function hideLayer(layerName) {
  var layerType = getLayerType(layerName);
  
  // set the new value according to the cssType
  if ( layerType == "visibility" ) {
    var newStyle = "hidden";
  } else if ( layerType == "display" ) {
    var newStyle = "none";
  }
  
  // set the new value to the element
  if ( newStyle ) {
    document.getElementById(layerName).style[layerType] = newStyle;
  }
}


// ds: showLayer ( 'layerName' )
//     internal function to show a layer
function showLayer(layerName) {
  var layerType = getLayerType(layerName);
  
  // set the new value according to the cssType
  if ( layerType == "visibility" ) {
    var newStyle = "visible";
  } else if ( layerType == "display" ) {
    var newStyle = "inline";
  }
  
  // set the new value to the element
  if ( newStyle ) {
    document.getElementById(layerName).style[layerType] = newStyle;
  }
}



// ds: getRef( layername )
//     internal function used to get the path to an object
function getRef(obj){
  if (typeof obj == "string") {
    obj = document.getElementById(obj);
  }
  return obj;
}





function getLayerType ( layerName ) {
  // check if 'visibility' or 'display' is used
  var layerTypeValue = getStyle(layerName, 'visibility');

  switch ( layerTypeValue ) {
    case 'visible':
      var layerType = 'visibility';
      break;
    case 'hidden':
      var layerType = 'visibility';
      break;
    case 'inherit':
      var layerType = 'display';
      break;
    case 'NA':
      var layerType = 'NA';
      break;
  }
  return layerType;
}





// ds: getStyle ( 'layerName', 'style' )
//     used to return the value of a style element of a layer
function getStyle(obj, style) {
  // catch browsers that don't understand 'getElementById'
  if (!document.getElementById) return;
  
  var obj = getRef(obj);
  
  if ( obj != null ) {
    var value = obj.style[style];

    // if the style isn't set with JS get it from the defaultView	 
    if (!value) {
      if (document.defaultView) {
    	  value = document.defaultView.getComputedStyle(obj, "").getPropertyValue(style);
    	} else if (obj.currentStyle) {
  	    value = obj.currentStyle[style];
      }
    }
  } else {
    value = "NA";
  } 

  return value;
}

function getClass(obj) {
  // catch browsers that don't understand 'getElementById'
  if (!document.getElementById) return;
  
  var obj = getRef(obj);
  var value = obj.className;

  return value;
}


// ds: setStyle ( 'elementName', 'style', 'newValue' )
//     used to set the value of a style element
function setStyle(obj, style, value) {
  var obj = getRef(obj);

  // set the new value to the element
  document.getElementById(obj).style[style] = newValue;
}

// sk: setClass ( 'elementName, 'class' )
//     used to set an new class for an object
function setClass(obj, value) {
  //var obj = getRef(obj);
  document.getElementById(obj).className = value;
}



// ds: getVisibility ( 'layerName' )
//     internal function to check if a layer is visible or not
function getVisibility(layerName) {
  if ( getStyle(layerName, 'visibility') == "visible" || getStyle(layerName, 'display') == "inline" ) {
      return true;
  } else {
      return false;
  }
}