Template:Popular Names Code

From OpenSocial Directory

<?xml version="1.0" encoding="UTF-8" ?>
<Module>

	<ModulePrefs title="Popular Names">
		<Require feature="opensocial-0.5"/>
		<Require feature="dynamic-height"/>
	</ModulePrefs>
	<UserPref name="sortby" display_name="Sort by" datatype="enum" default_value="popularity">
		<EnumValue value="popularity" display_value="Name Popularity"/>
		<EnumValue value="alpha" display_value="Alpha"/>
	</UserPref>

 <Content type="html">

 <![CDATA[
<script type="text/javascript" src="http://opensocial-resources.googlecode.com/svn/samples/tutorial/trunk/SocialNorms.js"></script>
<script type="text/javascript" src="http://positionfixed.com/tylerkeen/jquery-1.2.1.min.js"></script> 
<script type="text/javascript" src="http://positionfixed.com/tylerkeen/lightbox/jquery.lightbox-0.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://positionfixed.com/tylerkeen/lightbox/jquery.lightbox-0.3.css" media="screen" />


<style type="text/css">
	div.loading{
		background-image:url(http://positionfixed.com/tylerkeen/spinner.gif);
		background-repeat:no-repeat;
		background-position:center center;
		height:150px;
	}
	ol{
		margin:0 5px 0 0;
		padding:0;
		background:#fff;
	}
	ol li{
		font-family:verdana;
		list-style-type:none;
		clear:both;
		background:#EFF6FF;
		border:1px solid #D9E6F7;
		-moz-border-radius: 5px;
		overflow:auto;
		margin:0 0 5px 0;
		padding:5px;
	}
	
	a, a:visited{
		font-family:verdana;
		color:#314973;
		font-size:12px;
	}
	
	a:hover{
		color:#091933;
	}
	
	#message ol li p a{
		font-size:10px;	
	}
	
	ol li div{
		float:left;
	}
	
	ol li p{
		margin:0;
		padding:2px 0;
	}
	
	#message ol li p.title, #message ol li p.title a{
		font-size:14px;
		font-weight:bold;
		text-decoration:none;
	}
	
	ol li img{
		float:left;
		background:#fff;
		border:1px solid #333;
		margin-right:5px;
	}
	
	a.chart_view{
		padding-left:18px;
		padding-top:2px;
		padding-bottom:2px;
		background-image:url(http://positionfixed.com/tylerkeen/chart_pie.png);
		background-repeat:no-repeat;
		background-position:left middle;
	}
	
	#chart{
		display:none;
	}
	
	.show-chart #chart{
		display:block;
	}
	
	#nav{
		text-align:right;
		margin:0;
		padding:5px 10px;
	}
	
	.show-chart #list{
		display:none;
	}
	
	#chart img{
		display:block;
		margin:0 auto;
	}

	
</style>


 <script type="text/javascript">

 /**
  * Request for friend information when the page loads.
  */

	var i = 0;

	function getData(){
		document.getElementById('message').className = 'loading';
		var req = opensocial.newDataRequest();
		req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
		req.add(req.newFetchPeopleRequest ('VIEWER_FRIENDS'), 'viewerFriends');
		req.send(onLoadFriends);
	};
	
	function getViewerName(){
		var data_req = opensocial.newDataRequest();
		data_req.add(data_req.newFetchPersonRequest('VIEWER'), 'viewer');
		console.debug(data_req.send());
	}
	
	function handleName(data){
		
	}

	function sort_names(a,b){
		var x = a.name_count;
		var y = b.name_count;
		var r = x - y;
		return r;
	};

	function parse_friends(friend_list){
		friend_list.reverse();	
		var final_friends_list = [];
		
		for(n = 0;n < friend_list.length; n++){
			var name_count = friend_list[n].name_count;
			if(name_count > 0 && friend_list[n].fname != '' && friend_list[n].lname != ''){
				final_friends_list.push(friend_list[n]);
			}
		}/*end for loop*/
		build_display(final_friends_list);
	};

  function onLoadFriends(dataResponse){
	friend_list = [];
	var viewer = dataResponse.get('viewer').getData();
	var viewerFriends = dataResponse.get('viewerFriends').getData();

	viewerFriends.each(function(person){
		var person_viewing = {};
		var full_name = person.obj_.FullName;
		var first_name = full_name.GivenName.replace(/[^a-z|\s]/gi,'').replace(/\s/g,'_');
		var last_name = full_name.FamilyName.replace(/[^a-z|\s]/gi,'').replace(/\s/g,'_');
		var profile_url = person.getField(opensocial.Person.Field.PROFILE_URL);
		var thumbnail_url = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
		if(thumbnail_url == null || thumbnail_url == "" || thumbnail_url.indexOf('null') != -1){
			thumbnail_url = 'http://www.orkut.com/img/i_nophoto64.gif';
		}
						
		_IG_FetchContent('http://names.whitepages.com/fullcount/' + first_name + '/' + last_name,
			function(responsetext){
				var name_totall = responsetext.replace(/\D/g,'');

				if(i <= viewerFriends.asArray().length){i++};
		
				var friend = {};
				friend.display_name = person.getDisplayName();
				friend.fname = first_name;
				friend.lname = last_name;
				friend.url = profile_url;
				friend.thumb = thumbnail_url;
				friend.name_count = parseInt(name_totall);

				friend_list.push(friend);

				if(i == viewerFriends.asArray().length){
					friend_list.sort(sort_names);
					parse_friends(friend_list);
				};
		
		});/* end FetchContent */
		
		
    });/* end loop */
	
  };
	
	function sendActivity(sender_name, receiver_name, name_count){
		var activity = opensocial.newActivity(
		opensocial.newStream("main", "name stream"),
		sender_name + " told " + receiver_name + " that there are " + name_count + " " + receiver_name + "'s in the US with the Popular Names application");
		opensocial.requestCreateActivity(activity, "LOW");
	}
	
	function map_link(fname,lname,display_name){
		var body_width = $('body').width();
		if(body_width > 790){
			return '<p><a title="' + display_name + "'s in the US" + '" href="http://names.whitepages.com/map/' + fname + '.' + lname + '.US.gif" class="map">' + 'View Heatmap of US' + '</a></p>';
		}else{
			return '';
		}
	};
	
/* "<p><a href=" + "'" + "javascript:sendActivity('" + "boo" + "'," + "'" + display_name + "'" + "," + "'" + name_count + "'" + ");" + " class='let_know'>Let " + display_name + " know how popular they are</a></p>" + */

	function build_display(final_friends_list){
		var img_url = 'http://chart.apis.google.com/chart?cht=p&chco=7B43A2&chs=520x275&chtt=Your%20Friends%20Name%20Popularity%20in%20the%20US';
		var pie_data = '&chd=t:';
		var pie_labels = '&chl=';
		var html = '<p id="nav"><a href="#" class="chart_view">Toggle Chart View</a></p><ol id="list">';
		for(t=0;t < final_friends_list.length; t++){
			var display_name = final_friends_list[t].display_name;
			var fname = final_friends_list[t].fname;
			var lname = final_friends_list[t].lname;
			var image = final_friends_list[t].thumb;
			var url = final_friends_list[t].url;
			var name_count = final_friends_list[t].name_count;
			var link = 'http://names.whitepages.com/' + fname + '/' + lname;
			
			html += '<li>' + '<a href="' + link + '" target="_blank">'
			+ '<img src="' + image + '" border="0" /></a><div><p class="title"><a href="' + link + '" target="_blank">' 
			+ name_count + ' ' + display_name + "'" + 's found</a></p>' +
			'<p><a href="' + link + '" target="_blank">View More Info</a></p>' + 
			map_link(fname,lname,display_name)
			+ '<p class="profile_link"><a href="' + _args()["parent"] + url + '" target="_top">' + display_name + "'s" + ' Profile</a></p>' + '</div>' + '</li>';
			pie_data += name_count;
			if((t + 1) < final_friends_list.length){
				pie_data += ',';
			}
			pie_labels += display_name + '(' + name_count + ')' + '|';
		}/* end for loop */
		img_url += pie_data + pie_labels;
		html += '</ol>';
		
		html += '<div id="chart"><img src="' + img_url + '" /></div>';
		
		document.getElementById("message").className = 'done_loading';
		document.getElementById("message").innerHTML = html;
		$('a.map').lightBox();
		$('#nav a').click(function(){
			$('#message').toggleClass("show-chart");
			$(this).blur();
		});
		_IG_AdjustIFrameHeight();
	};
	getViewerName();
  _IG_RegisterOnloadHandler(getData);

  </script>
  <div id="message"> </div>
  
  <!--<div id="opensocialexa" class="K761f22b2c1593d0bb87e0b606f990ba4974706de"/><script src="http://opensocialexa.com/opensocialexa_v1.js"></script>-->
  ]]>
  </Content>
</Module>