// This function changes the image src on mouse rollover / rollout.
function rcMenuChange() {
  var rcItems = document.getElementById('rcMenu').getElementsByTagName('IMG');
  for(i=0; i<rcItems.length; i++){
    rcItems[i].onmouseover = function(){ 
      this.src = this.src.replace('-off', '-on');
    } 
    rcItems[i].onmouseout = function(){
      this.src = this.src.replace('-on', '-off');
    }  
  }
}

// This function makes the drop down menu's visible.
function sfHover() { 
	var sfEls = document.getElementById("rcMenu").getElementsByTagName("LI");	
	for (var i=0; i<sfEls.length; i++) {  
		sfEls[i].onmouseover=function() {    
			for(j=0; j<this.childNodes.length; j++){		
			  if(this.childNodes[j].nodeName == "UL"){	
			    this.childNodes[j].style.left = (this.className == "rightAlign") ? (this.offsetWidth + getOffset(this)) - this.childNodes[j].offsetWidth - 20 + "px" : getOffset(this) + "px";
				break;
			  }
			}
		}
		sfEls[i].onmouseout=function() {    
			for(j=0; j<this.childNodes.length; j++){		
			  if(this.childNodes[j].nodeName == "UL" ){	 	 
			    this.childNodes[j].style.left = "-999px"
				break;
			  }
			}
		}
	}
}

// This simply calls the above functions once the page has fully loaded.
window.onload = function(){
  sfHover();
  rcMenuChange();
}	


// Function to find the absolute left position of a passed element
function getOffset(obj) {  
  oLeft = obj.offsetLeft;    
  while(obj.offsetParent!=null) 
  {    
    oParent = obj.offsetParent     
    oLeft += oParent.offsetLeft 
    obj = oParent 	
  }			  
  return oLeft
}