function sumOffsets( theElem )
{
	if ( theElem.offsetParent == null || theElem.offsetParent == theElem ) {
		return { left:theElem.offsetLeft, top:theElem.offsetTop };
	}
	
	var oo = sumOffsets( theElem.offsetParent );
	oo['left'] += theElem.offsetLeft;
	oo['top'] += theElem.offsetTop;
	
	return oo;
}

function getLinkID( theLink )
{
	if ( theLink == null || theLink.firstChild == null ||
			typeof theLink.firstChild.id == "undefined" ) {
		return null;
	}
	var theID = theLink.firstChild.id;
	if ( theID == "" ) {
		return null;
	}
	return theID;
}

function getLinkSubmenu( theLink )
{
	var theID = theLink.id;
	if ( theID == null ) {
		theID = getLinkID( theLink );
	}
	if ( theID == null ) {
		return null;
	}
	return document.getElementById( theID + "-sub" );
}

var gMenu = null;

function navMouseOver( evt, theLink )
{
	if ( evt == null ) {
		evt = window.event;
	}
	showSubNav( theLink );
}

function navMouseOut( evt, theLink )
{
	if ( evt == null ) {
		evt = window.event;
	}
	var theSub = getLinkSubmenu( theLink );
	gMenu = theSub;
	unPinMenu( theSub );
	setTimeout( hideYourself, 10, theSub );
}

function subMouseOver( evt, theMenu )
{
	if ( evt == null ) {
		evt = window.event;
	}
	pinMenu( theMenu );
}

function subMouseOut( evt, you )
{
	if ( evt == null ) {
		evt = window.event;
	}
	gMenu = you;
	unPinMenu( you );
	// Allow 100ms for someone to re-pin
	setTimeout( hideYourself, 10, you );
}

function showSubNav( theLink )
{
	var theSub = getLinkSubmenu( theLink );
	if ( theSub != null ) {
		// var oo = sumOffsets( theLink );

		theSub.style.top = theLink.offsetTop + "px";
		theSub.style.left = (theLink.offsetLeft + ( theLink.offsetWidth - 30 )) + "px";
		theSub.style.display = "block";
		
		pinMenu( theSub );
	}
}

function hideSubNav( theSub )
{
	if ( typeof theSub == "undefined" || theSub == null ) {
		theSub = gMenu;
		gMenu = null;
	}

	if ( theSub != null && ! menuIsPinned( theSub ) ) {
		theSub.style.display = "none";
	}
}

function hideYourself( you )
{
	if ( typeof you == "undefined" || you == null ) {
		you = gMenu;
		gMenu = null;
	}
	if ( you != null && ! menuIsPinned( you ) ) {
		you.style.display = "none";
	}
}

function pinMenu( menuToPin )
{
	if ( menuToPin == null ) {
		return;
	}
	menuToPin.setAttribute( "pinned", "1" );
}

function unPinMenu( menuToUnPin )
{
	if ( menuToUnPin == null ) {
		return;
	}
	menuToUnPin.removeAttribute( "pinned" );
}

function menuIsPinned( menuInQuestion )
{
	return menuInQuestion.getAttribute( "pinned" );
}

function insertNavigation( pageGroup, curPage )
{
	insertNavigationStart( pageGroup, curPage );
	document.write( '<td width="808" colspan="3" rowspan="9" background="pagedata/body_background.gif"></td>' );
	insertNavigationEnd( pageGroup, curPage );
}

function insertNav( pageGroup, curPage )
{
	var strList = [
		'<ul>',
			'<li><a href="program-overview.html" onmouseover="navMouseOver(event,this)" onmouseout="navMouseOut(event,this)" id="Program Overview">Program Overview</a></li>',
			'<li><a href="types-of-surgery.html" onmouseover="navMouseOver(event,this)" onmouseout="navMouseOut(event,this)" id="Types of Surgery">Types of Surgery</a></li>',
			'<li><a href="about-obesity.html" onmouseover="navMouseOver(event,this)" onmouseout="navMouseOut(event,this)" id="About Obesity">About Obesity</a></li>',
			'<li><a href="dietary-steps.html" onmouseover="navMouseOver(event,this)" onmouseout="navMouseOut(event,this)" id="Dietary Steps">Dietary Steps</a></li>',
			'<li><a href="steps-surgery.html" onmouseover="navMouseOver(event,this)" onmouseout="navMouseOut(event,this)" id="Steps to Surgery">Steps to Surgery</a></li>',
			'<li><a href="life-after-surgery.html" onmouseover="navMouseOver(event,this)" onmouseout="navMouseOut(event,this)" id="Life After Surgery">Life After Surgery</a></li>',
			'<li><a href="patient-resources.html" onmouseover="navMouseOver(event,this)" onmouseout="navMouseOut(event,this)" id="Patient Resources">Patient Resources</a></li>',
			'<li class="register"><a href="http://my.thinnerfuture.com/my_tf/register.cfm">Register Now for My ThinnerFuture</a></li>',
		'</ul>',
		'<div id="Program Overview-sub" class="submenu" onmouseover="subMouseOver(event,this)" onmouseout="subMouseOut(event,this)">',
			'<ul>',
				'<li id="main a"><a href="program-overview.html">ThinnerFuture Program</a></li>',
				'<li id="main b"><a href="what-is-bariatric-surgery.html">What is Bariatric Surgery?</a></li>',
				'<li id="main c"><a href="insurance.html">Insurance Information</a></li>',
				'<li id="main a"><a href="faq.html">Frequently Asked Questions</a></li>',
				'<li id="main b"><a href="terminology.html">Terminology</a></li>',
			'</ul>',
		'</div>',
		'<div id="About Obesity-sub" class="submenu" onmouseover="subMouseOver(event,this)" onmouseout="subMouseOut(event,this)">',
			'<ul>',
				'<li id="obesity a"><a href="obesity-classifications.html">Obesity Classifications</a></li>',
				'<li id="obesity b"><a href="obesity-risks.html">The Risks of Obesity</a></li>',
				'<li id="obesity c"><a href="bmi.html">Body Mass Index Calculator</a></li>',
			'</ul>',
		'</div>',
		'<div id="Dietary Steps-sub" class="submenu" onmouseover="subMouseOver(event,this)" onmouseout="subMouseOut(event,this)">',
			'<ul>',
				'<li id="diet a"><a href="dietary-steps.html">Introduction</a></li>',
				'<li id="diet b"><a href="dietary-stage1.html">Stage One Diet</a></li>',
				'<li id="diet c"><a href="dietary-stage2.html">Stage Two Diet</a></li>',
				'<li id="diet a"><a href="dietary-stage3.html">Stage Three Diet</a></li>',
				'<li id="diet b"><a href="dietary-stage-final.html">Final Stage Diet</a></li>',
				'<li id="diet b"><a href="dietary-longterm.html">Long Term Habits</a></li>',
				'<li id="diet a"><a href="permanent-dietary-changes.html">Permanent Dietary Changes</a></li>',
			'</ul>',
		'</div>',
		'<div id="Types of Surgery-sub" class="submenu" onmouseover="subMouseOver(event,this)" onmouseout="subMouseOut(event,this)">',
			'<ul>',
				'<li id="type a"><a href="roux-en-y.html">Roux-en-Y gastric bypass</a></li>',
				'<li id="type b"><a href="gastric-banding.html">Lap Band</a></li>',
				'<li id="type c"><a href="sleeve-gastrectomy.html">Sleeve Gastrectomy</a></li>',
				'<li id="type a"><a href="robotic-surgery.html">Robotic surgery</a></li>',
				'<li id="type b"><a href="EndoscopicSurgery.html">Endoscopic Surgery</a></li>',
				'<li id="type b"><a href="malabsorptive-procedures.html#malabsorptive">Others</a></li>',
			'</ul>',
		'</div>'
	];
	document.write( strList.join( '' ) );
}

function insertFooter()
{
	document.write( '<div id="footer">Copyright &copy; 2007-2009 ThinnerFuture</div>' );
}

function showMoreInfo( evt )
{
	var $target = $( evt.target );
	if ( ! $target.is( ".moreinfo" ) ) {
		return;
	}
	var $infobox = $( "#infobox" );
	if ( $infobox.length == 0 ) {
		$( "div.content", "#main" ).append( '<div id="infobox">Hello</div>' );
		$infobox = $( "#infobox" );
	}
	var targetPos = $target.position();
	var boxTop = targetPos.top - ( $target.height() + 4 );
	var boxLeft = targetPos.left + $target.width() + 8;
	
	var $contents = $( ".infoContents", $target);                         
	var infoText = $contents.html();
	if ( infoText == null || infoText == "" ) {
		return;
	}
	
	var positionInfo = { "top": boxTop + "px" };
	if ( boxLeft <= 750 ) {
		positionInfo[ "left" ] = boxLeft + "px";
	} else {
		positionInfo[ "left" ] = (targetPos.left - 8) + "px";
		positionInfo[ "top" ] = (boxTop + 40) + "px";
	}
	
	$infobox.html( infoText ).css( positionInfo ).fadeIn();
}

function hideMoreInfo( evt )
{
	var $target = $( evt.target );
	if ( ! $target.is( "a.moreinfo" ) ) {
		return;
	}
	$( "#infobox" ).fadeOut( 100 );
}

$( function () {
    $( "div.content", "#main" ).mouseover( showMoreInfo ).mouseout( hideMoreInfo );
});