sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

/**
 * Find how many pixel an element is from the top of the document (not window)
 * @param {Object} obj
 */
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
	//return curtop;
}


$(".mainLink").hover(function () {
		// height of viewable area
		var windowHeight = $(window).height();
		
		// heigt of element
		var navHeight = $(this).next('ul').height();
		
		// get the element
		var navEl = $(this).next('ul').get();
		
		// height from the top of the element to the top and left of the document
		var elPos = findPos(navEl[0]);
		
		var elHeightFromTop = elPos[1];
		var elWidthtFromleft = elPos[0];
		
		// height of the area that has been scrolled away.
		var scrolledPx = $(window).scrollTop();
		
		// calculate the top of the element to the top of the window
		var topHeight = elHeightFromTop - scrolledPx;
		
		// calculate the top of the element to the top of the window plus the height of the element
		var totalHeight = topHeight + navHeight;
		
		// cacluate any overlap with the window's height
		var overFlowBottom = totalHeight - windowHeight + 20;
		
		var elStyle = $(this).next('ul').attr('class');
		var elMargin = $(this).next('ul').css('margin-top');	
		
		// check if there is overlap with the bottom
		if(overFlowBottom < 0 || overFlowBottom === 0 || elStyle === 'changed' || -overFlowBottom < elMargin){
			return;
		}
		else {
			var margin = '-'+overFlowBottom+'px';
			$(this).next('ul').css('margin-top', margin);
			$(this).next('ul').attr('class', 'changed'); // is used to check to see if condition was hit
		}		
  	}, 
  	function () {/* on mouse out callback*/}
);

$(".hasSubs").hover(function () {
	
		// height of viewable area
		var windowHeight = $(window).height();
		
		// width of viewable area
		var windowWidth = $(window).width();
		
		// heigt of element
		var navHeight = $(this).next('ul').height();
		
		var navWidth = $(this).next('ul').width();
		
		// get the element
		var navEl = $(this).next('ul').get();
		
		// height from the top of the element to the top and left of the document
		var elPos = findPos(navEl[0]);
		
		var elHeightFromTop = elPos[1];
		var elWidthtFromleft = elPos[0];
		
		// height of the area that has been scrolled away.
		var scrolledPx = $(window).scrollTop();
		
		// calculate the top of the element to the top of the window
		var topHeight = elHeightFromTop - scrolledPx;
		
		// calculate the top of the element to the top of the window plus the height of the element
		var totalHeight = topHeight + navHeight;
		
		// cacluate any overlap with the window's height
		var overFlowBottom = totalHeight - windowHeight + 53;
		
		var totalWidth = elWidthtFromleft + navWidth;
		
		var elStyle = $(this).next('ul').attr('class');
		var elMargin = $(this).next('ul').css('margin-top');
		
		// check if there is overflow with the side
		if(totalWidth > windowWidth) {
			$(this).next('ul').css('margin-left', '-14em');
		}		
		
		
		// check if there is overlap with the bottom
		if(overFlowBottom < 0 || overFlowBottom === 0 || elStyle === 'changed' || -overFlowBottom < elMargin){
			return;
		}
		else {
			var margin = '-'+overFlowBottom+'px';
			$(this).next('ul').css('margin-top', margin);
			$(this).next('ul').attr('class', 'changed'); // is used to check to see if condition was hit
		}
		
  	}, 
  	function () {/* on mouse out callback*/}
);