i have tried 5 different versions of this code and have spent over a week trying to figure out what is wrong with my code and doing research on javascript and jquery. i am still really new at this but from what i understand this should work.... please enlighten me if you can. thanks in advanced for any time spent on this.

full page can be viewed at:

Here is my html [shortened]:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- this links me to google's jquery -->
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAfTvB0zxqdEo_cKdiVKxP9RTdimEjm_zfAymfsul3b9DFTsP8oBTAtXDprFlwzfgu5jszlxU1zEs_BA"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<!-- this links me to google's jquery -->

// Triggers whenever the window is scrolled
$(window).scroll(function () {
var D = 0, y = 0, height = 0;

/*Get the height of the document*/
var D = document.documentElement.offsetHeight;

/* Querying the vertical scrollbar position of window */
function getScrollOffsets(w) {
// Use the specific window or the current window if no arguement
var w = w || window;
var d = w.document;
y = w.pageYOffset || d.documentElement.scrollTop || d.body.scrollTop;
/*Querying the viewport height of a window*/
// Return the viewport size as w and h properties of an object
function getViewportSize() {
var w = w || window;
var d = w.document;
height = w.innerHeight || d.documentElement.clienHeight || d.body.clientHeight;
if ( y >= ( D - height - 100 )) {
} else { $("div#flyoutWidget").hide();

<link href="/css/firstprinciples.css" rel="stylesheet" type="text/css" media="screen" />
<link href="/css/menu.css" rel="stylesheet" type="text/css" media="screen" />
<link href="/css/flyoutwidget.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css"><!--
some CSS

<div id="container">

<div id="menu">
horizontal menu bar
</div> <!--closes out "menu" div-->

<div id="content">
</div> <!--closes out "content" div-->

<div id="flyoutWidget" style="right: 0px; ">
<h5>More around the Web</h5>
<h6><a href="#">Related Article</a></h6>
<span><a href="#">Read More &#187;</a></span>
<div id="flyoutWidgetSubscribe">
<a href="#">Subscribe</a>
</div> [closes div for subscribe link]
<button id="flyoutClose">Close</button>
</div> <!-- close div for flyout widget -->

</div><!--closes out "container" div-->