function update_header_box() {
	
	//alert('load fb');
	var html = '';
	
	html += '<div style="float:left;">';
	html += '<fb:profile-pic uid="loggedinuser" facebook-logo="true" size="square"></fb:profile-pic>';
	html += '</div>';
	html += '<div style="float:left;margin:0 0 0 10px;text-align:left;color:#fff;">';
	html += '<span id="facebook-link">Welcome, <fb:name uid="loggedinuser" useyou="false"></fb:name></span><br/>';
	html += '<a href="#" onclick="FB.Connect.logout(function() { location.reload(true); }); return false;" style="color:#87634d;font-weight:bold;">Logout</a>';
	html += '</div>';
	
	$("#connect-container").html(html);
	
	
	// check for instructions div
	if($("#facebook-instructions").length) {
	
		var html = '';
		//html += '<div id="fb_yellowButtons">';
		html += '<div style="text-align:center;width:154px;margin:30px 0 0 80px;">';
		html += '<div onclick="friendPopup()" class="fb_yellowButton">Send HERSHEY\'S HAPPINESS to a friend</div>';
		html += '<div class="fb_or">OR</div>';
		html += '<div onclick="publishToWall(0)" class="fb_yellowButton" style="float:left;">Post this on<br />your wall</div>';
		html += '</div>';
		
		$("#facebook-instructions").html(html);
	}
	
	// check for existence of the div below
	/*
	if($("#fb_profile_pics").length) {
		// create the popup
		
		var left = ($(window).width()/2) - 223;

		var html = '<div id="fb_hover"><div id="fb_hoverInner">'
		+ '<div id="fb_popup2_close" onclick="closePopup1();" style="position:absolute; display:inline; color: #cc3300;font-size: 11px; margin: -17px 0 0 367px;cursor:pointer;">CLOSE X</div>'
		+ '<div id="fb_hoverLeft">'
		+ '<div id="fb_hoverPic">'
		+ '<fb:profile-pic uid="loggedinuser" facebook-logo="true" size="square"></fb:profile-pic></div>'
		+ '<div id="fb_connectName">'
		+ '<span style="padding-left:3px;">Welcome <fb:name uid="loggedinuser" useyou="false"></fb:name></span><br />'
		+ '<span style="padding-left:3px;"><a href="#" onclick="FB.Connect.logout(function() { location.reload(true); }); return false;" >Logout</a></span>'
		+ '</div></div>'
		+ '<div id="fb_yellowButtons">'
		+ '<div onclick="friendPopup()" class="fb_yellowButton">Send HERSHEY\'S HAPPINESS to a friend</div>'
		+ '<div style="font-weight:bold; color:#dccfb1; font-size: 14px; font-family: verdana; line-height:14px;margin: 8px 0 8px 0;">OR</div>'
		+ '<div onclick="publishToWall(0)" class="fb_yellowButton">Post this on<br />your wall</div>'
		+ '</div></div>';
		
		$("#popup-holder").html(html); 
		
		document.getElementById("fb_hover").style.left = left + "px";
		document.getElementById("fb_hover").style.top = "200px";
	}
	*/
	
	FB.XFBML.Host.parseDomTree();

}

function showpopup() {
	getPics(1)
}

function update_user_box() {

	var user_box = document.getElementById("user");
	
	var left = ($(window).width()/2) - 223;
	
	user_box.innerHTML =
	'<div id="fb_hover"><div id="fb_hoverInner">'
	+ '<div id="fb_popup2_close" onclick="closePopup1();" style="position:absolute; display:inline; color: #cc3300;font-size: 11px; margin: -17px 0 0 367px;cursor:pointer;">CLOSE X</div>'
	+ '<div id="fb_hoverLeft">'
	+ '<div id="fb_hoverPic">'
	+ '<fb:profile-pic uid="loggedinuser" facebook-logo="true" size="square"></fb:profile-pic></div>'
	+ '<div id="fb_connectName">'
	+ '<span style="padding-left:3px;">Welcome <fb:name uid="loggedinuser" useyou="false"></fb:name></span><br />'
	+ '<span style="padding-left:3px;"><a href="#" onclick="FB.Connect.logout(function() { location.reload(true); }); return false;" >Logout</a></span>'
	+ '</div></div>'
	+ '<div id="fb_yellowButtons">'
	+ '<div onclick="friendPopup()" class="fb_yellowButton">Send HERSHEY\'S HAPPINESS to a friend</div>'
	+ '<div style="font-weight:bold; color:#dccfb1; font-size: 14px; font-family: verdana; line-height:14px;margin: 8px 0 8px 0;">OR</div>'
	+ '<div onclick="publishToWall(0)" class="fb_yellowButton">Post this on<br />your wall</div>'
	+ '</div></div>';
	
	FB.XFBML.Host.parseDomTree();
	
	document.getElementById("fb_hover").style.left = left + "px";
	document.getElementById("fb_hover").style.top = "200px";

}

function closePopup1() {

	document.getElementById('fb_hover').style.display="none";

}

function closePopup2() {

	document.getElementById('fb_profile_pics').style.display="none";

}

function publishToWall(x) {

	var message = "Milton Hershey's Legacy spreads joy and goodness everyday for children in need. Please accept this gift on behalf of me and MILTON HERSHEY SCHOOL."

	var attachment = { 
		'name': 'Enjoy some sweet HERSHEY\'S HAPPINESS', 
		'href': ' http://www.thehersheylegacy.com/index.asp', 
		'caption': '{*actor*} would like to give you this virtual Hershey Bar.',
		'media': [{ 
			'type': 'image', 
			'src': 'http://www.thehersheylegacy.com/images/fb_images/littleBar5.jpg', 
			'href': 'http://www.thehersheylegacy.com/index.asp'}] }; 
			
	if (x == 0) {
		FB.Connect.streamPublish(message, attachment, null);
	} else {
		FB.Connect.streamPublish(message, attachment, null, x);
	}

}

function getPics(x) {

	var fullid = FB.Facebook.apiClient.get_session().uid;
	var widget_div = document.getElementById("fb_profile_pics");
	var perpg = 12;
	var p = x * perpg;
	var r = (x * perpg) + perpg;
	var markup = 
	
	'<div id="fb_profile_pics_inner">'
	
	+ '<div id="fb_popup2_close" onclick="closePopup2();" style="z-index:20;position:absolute; display:inline; color: #cc3300;font-size: 11px; margin: -10px 0 0 728px;width: 55px;cursor:pointer;">CLOSE X</div>'
	
	+ '<div id="selectAFriend"><img src="images/fb_images/selectAFriend.jpg" /></div>'
	
		+ '<div id="fb_friendHeader">'
	
			+ '<div id="fb_friendHoverContainer">'
	
				+ '<div id="fb_friendHoverPic">'
					+ '<fb:profile-pic uid="loggedinuser" facebook-logo="true" size="square"></fb:profile-pic>'
				+ '</div>'
	
				+ '<div id="fb_connectName">'
					+ '<span style="padding-left:3px;">Welcome <fb:name uid="loggedinuser" useyou="false"></fb:name></span><br />'
					+ '<span style="padding-left:3px;"><a href="#" onclick="FB.Connect.logout(function() { location.reload(true); }); return false;" style="color:#cc3300">Logout</a></span>'
				+ '</div>'
				
			+ '</div>'
			
		+ '</div>'
	
	
	
	+ '<div style="clear:both;"></div>';
	
	FB.ensureInit(function () {
		FB.Facebook.apiClient.fql_query("SELECT uid FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1=" + fullid + ") ORDER BY name ASC", function(result) {
			
			
			var num_friends = result.length;
			if (num_friends > 0) {
				for (var i=p; i<r; i++) {
					markup +=
						'<div class="fb_friend_wrapper" onclick="publishToWall(' + result[i].uid + ')"><div class="fb_container"><div class="fb_pic" style="overflow:hidden;"><fb:profile-pic size="small" height="65" uid="'
						+ result[i].uid
						+ '" facebook-logo="false" linked="false">'
						+ ' </fb:profile-pic></div><div class="fb_name"><fb:name uid="'
						+ result[i].uid
						+ '" linked="false" /></div></div></div>';
						var text = markup;
						FB.JSON.parse=function(text,reviver){
							var j;
							function walk(a,c)
							{
								var b,d,e=a[c];
								if(e&&typeof e==='object')
									for(b in e)
										if(Object.hasOwnProperty.call(e,b))
										{
											d=walk(e,b);
											if(d!==undefined){
												e[b]=d;
											}else delete e[b];
										}
									return reviver.call(a,c,e);
							}
							var cx=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
							cx.lastIndex=0;
							if(cx.test(text)){
								text=text.replace(cx,function(a){ return '\\u'+('0000'+a.charCodeAt(0).toString(16)).slice(-4); });
							}
		
							var replacedText = text.replace(/\\\'/g, '\'');
							replacedText = replacedText.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,'@').replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,']').replace(/(?:^|:|,)(?:\s*\[)+/g,'');
							if(/^[\],:{}\s]*$/.test(replacedText))
							{
								j=eval('('+text+')');
								return typeof reviver==='function'?walk({'':j},''):j;
							}
							throw new SyntaxError('JSON.parse');
						};
						if (i==num_friends - 1) {
							break;
						}             
					}
			}
			var pg = '<div class="fb_pagination">';
			pg += '<div style="float:left;">';
			var echo = x + 1;
			pg += '<span style="padding-left: 22px;padding-right:20px;">Page ' + echo + '</span>Go to page&nbsp;&nbsp;';
			var pv = x - 1;
			var nx = x + 1;
			pg += '</div><div style="width:550px;float:right;">'
			pg += '<a onclick="getPics(' + pv + ');" style="color: #cc3300;">&laquo; </a>&nbsp;';
			var t = Math.ceil(num_friends/perpg);
			
				for (var i = 1; i<t+1; i++) {
					m = i - 1;
					if (i==x+1) {
						pg += '<span style="color:#ddcfb4">' + i + '</span> ';	
					} else {
						pg += '<a onclick="getPics(' + m + ');" style="color: #cc3300;">' +i + '</a> ';
					}
					
					pg += '&nbsp;';
					
				}
			
			pg += '<a onclick="getPics(' + nx + ');" style="color: #cc3300;">&raquo;</a> ';
			pg += '</div></div>';
			widget_div.innerHTML = markup;
			widget_div.innerHTML += pg;
			
			var left = ($(window).width()/2) - 400;
	
			widget_div.style.left = left + "px";
			widget_div.style.top = "200px";
			
			FB.XFBML.Host.parseDomElement(widget_div);
		});
	});

}

function friendPopup() {
	
	document.getElementById('fb_profile_pics').style.display="";

	
	
	getPics(0);
	
}