function writeMasthead()
	{
	
	var menuItem = new Array();
	// info about images for masthead and the height of the masthed.
	menuItem["add_roadmap"] = new Array ({"width":167, "height":22, "alt":"The ADD Roadmap", "mastheadHeight":"140px"})
	menuItem["manage_your_add"] = new Array ({"width":157, "height":22, "alt":"Manage Your ADD", "mastheadHeight":"140px"})
	menuItem["organize_your_life"] = new Array ({"width":163, "height":22, "alt":"Organize Your Life!", "mastheadHeight":"140px"})
	menuItem["parenting_tips"] = new Array ({"width":200, "height":22, "alt":"Positive Parenting Tips", "mastheadHeight":"140px"})
	menuItem["success_in_classroom"] = new Array ({"width":223, "height":18, "alt":"Success in the Classroom", "mastheadHeight":"136px"})
	
	// get url of current page
	var page = location.href;
	// parse out the page name .../page_name... from .../path/folder/page_name.html
	// use this to determine the "active" link in the nav
	var whichPage = page.substring(page.lastIndexOf('/pop_')+5, page.lastIndexOf('.'));
	
	var imgData = menuItem[whichPage];
	var imgWidth = imgData[0]["width"];
	var imgHeight = imgData[0]["height"];
	var imgAlt = imgData[0]["alt"];
	var mastheadHeight = imgData[0]["mastheadHeight"];
	
	// the popup masthead including masthead / close window
	// and page headline and print me and email me
	// info dynamically filled.
	// don't worry, there's nothing for you to fill in :-)		
	var masthead='<!-- begin masthead -->\n';
	masthead += '<table border="0" cellspacing="0" cellpadding="0" class="mastheadTable" width="100%"><tr valign="top">\n';
	masthead += '<td><img src="/widgets/images/popup/global/masthead.gif" title="Additude: Living well with ADD and learning disabilities" alt="Additude: Living well with ADD and learning disabilities" width="246" height="63" border="0"></td>\n';
	masthead += '<td align="right"><div class="closeWindow"><a href="#" onclick="window.close();"><img src="/widgets/images/popup/global/close_window.gif" alt="Close Window" width="91" height="14" border="0" /></a></div></td>\n';
	masthead += '</tr></table>\n';
	masthead += '<!-- begin masthead -->\n';
	masthead += '<div class="headlineContainer">\n';
	masthead += '<div class="headline">\n';
	masthead += '<img src="/widgets/images/popup/'+whichPage+'/hed_'+whichPage+'.gif" title="'+imgAlt+'" alt="'+imgAlt+'" width="'+imgWidth+'" height="'+imgHeight+'" border="0" />\n';
	masthead += '</div><!-- end headline -->\n';
	masthead += '<div class="emailPrint">\n';
	masthead += '<img src="/widgets/images/popup/global/email_print.gif" alt="Email / Print" width="119" height="15" border="0" usemap="#emailPrint">\n';
	masthead += '<map name="emailPrint">\n';
	masthead += '<area shape="rect" title="Email: '+imgAlt+'" alt="Email: '+imgAlt+'" coords="0,0,60,15" href="mailto:?subject='+imgAlt+'&body=I saw &#10;&#10;&#34;'+imgAlt+'&#34; on '+page+' &#10;&#10;and thought you might be interested.">\n';
	masthead += '<area shape="rect" title="Print: '+imgAlt+'" alt="Print: '+imgAlt+'" coords="62,0,119,15" href="#" onclick="window.print(); return false;">\n';
	masthead += '</map></div><!-- end emailPrint -->\n';
	masthead += '</div><!-- end headlineContainer -->\n';
	
	// only reason might need to change the height,
	// is "success in the classroom" header is only 18px high (all others are 22px)
	// this way the layout of the masthead stays visually consistent
	//  
	// also, the height of the masthead is set in stylesheets. so the space for the masthead
	// is set aside while the rest of the page lays out.
	// this helps the layout look smooth.
	// otherwise the "masthead" div would have a height of zero,
	// then get populated and have have a height.
	// then the content would be pushed down.
	document.getElementById("masthead").style.height = mastheadHeight;
	
	document.getElementById("masthead").innerHTML = masthead;

	}