/**
 * 
 */

var Social = {};
window.addEvent('domready', function() {
	Social.front = new social_Class();
	
});

var social_Class = new Class( {
	
	pop_service: function(id){
		var service = id.id.split('_')[1];
		
		if(document.getElementById('social_popup') != null){
			
				$('social_popup').destroy();
			
		}
		Social.front.create_new_box(service);
		if(service === 'facebook')Social.front.get_data_service_facebook();
		if(service === 'twitter')Social.front.get_data_service_twitter();
		if(service === 'flickr')Social.front.get_data_service_flickr();
		if(service === 'foursquare')Social.front.get_data_service_foursquare();
		if(service === 'linkedin')Social.front.get_data_service_linkedin();
		if(service === 'vimeo')Social.front.get_data_service_vimeo();
		if(service === 'wordpress'|| service === 'blogger' ||service === 'posterous'||service === 'tumblr'||service === 'typepad'||service === 'behance')Social.front.get_data_service(service);
		/*if(service === 'blogger')Social.front.get_data_service();
		if(service === 'posterous')Social.front.get_data_service_();*/
		
			
			
		
	},
	create_new_box: function (name){
		var service_active_request = new Request.JSON({
			method:'post',
			url: site_url+'home/print_social_icon',
			onComplete:function( data ){
			
			var menu  = '<ul id="menu_service">';
				var kolom  = '<div id="kolom_service">';
				$each( data, function( val, key ){
					if( key.contains( 'url' ) == false ){
						
						if(name == val){ cetak_class = 'class="active"';} else{cetak_class = '';}
						menu += '<li onclick="Social.front.get_tab_social(\''+val+'\',this)" '+cetak_class+'>'+val+'</li>';
						kolom +='<div id="'+val+'" '+cetak_class+'></div>';
					
					} else {
						
						menu += '<li><a href="' + val.link + '" title="Open ' + val.title + ' in a New Window" target="_blank" style="text-decoration: none; color: #fff;">' + val.title + '</a></li>';
						
					}
				});
				kolom +='</div>';
				menu +='</ul>';
				Social.front.social_option_popup(menu);
				$('content_popup').innerHTML = kolom;
			}
		}).send('format=json');
	},
	
	get_tab_social: function(name,li){
		var c = $('menu_service').getChildren();
		var k = $('kolom_service').getChildren();
		
		c.removeProperty('class');
		k.removeProperty('class');
		
		li.set('class','active');
		if(k.get('id') == name){
			k.set('class', 'active');
		}
		
		$each(k,function(val, key){
			if (val.get('id') == name){
				val.set('class','active');
				if(val.getChildren('div').length === 0){
				if(name === 'facebook')Social.front.get_data_service_facebook();
				if(name === 'twitter')Social.front.get_data_service_twitter();
				if(name === 'flickr')Social.front.get_data_service_flickr();
				if(name === 'foursquare')Social.front.get_data_service_foursquare();
				if(name === 'linkedin')Social.front.get_data_service_linkedin();
				if(name === 'vimeo')Social.front.get_data_service_vimeo();
				if(name === 'wordpress'||name === 'blogger'||name === 'posterous'||name === 'tumblr'||name === 'typepad'||name === 'behance')Social.front.get_data_service(name);
				//if(name === 'blogger')Social.front.get_data_service(name);
				}
			} 
		} );
		
	},
	
	social_option_popup: function(title){
		
		if( window.innerWidth ){
			var browser_width = window.innerWidth;
			var browser_height = window.innerHeight;
		} else if( document.documentElement.clientWidth ) {
			var browser_width = document.documentElement.clientWidth;
			var browser_height = document.documentElement.clientHeight;
		} else {
			var browser_width = document.body.clientWidth;
			var browser_height = document.body.clientHeight;
		}
		var popup = new Element('div', {
		    'id': 'social_popup',
		    
		    styles: {
		        display: 'block',
		        borderRadius:'3px',
		        width:'607px',
		        zIndex:'25',
		        position:'fixed',
		        top: (browser_height / 2) - 350,
		        left: (browser_width / 2) - 303,
		        height:'auto',
		        minHeight:'200px',
		        background:'#fff'
		        	
		    }
		}).inject(document.body);
		
		var bar = new Element ('div',{
			'id':'bar_popup',
			  styles: {
			        display: 'block',
			        width:'607px',
			        height:'auto',
			        background:'#333333',
			        marginBottom: '0px',
			        color:'#fff'
			    }
		}).inject(popup);
		
		var menu = new Element( 'div', {
			'id' : 'title',
			html: title,
			styles:{
				width: '570px',
				height: 'auto',
				margin: '0',
				padding: '0',
				float: 'left'
			}
		}).inject( bar );
		
		var close = new Element ('div',{
			'id':'close_box',
			styles:{
				display: 'block',
		        width:'30px',
		        height: menu.offsetHeight,
		        background:'url('+public_url+'images/close_dark.png) no-repeat center center',
		        float:'right',
		        borderLeft:'1px solid #222222',
		        marginBottom: '0px',
		        cursor:'pointer'
			},
			events:{
				click:function(){
					$('social_popup').destroy();
				}
				
			}
		}).inject(bar);
		
		var clear = new Element( 'br', {
			styles: {
				'clear': 'both',
				'margin-bottom': '1px'
			}
		}).inject(bar);
		
		var content = new Element('div', {
		    'id': 'content_popup',
		    styles: {
		    	display: 'block',
		    	marginTop: '-8px',
		    	float:'left',
		    	maxHeight: '750px',
		    	overflowX: 'hidden',
		    	overflowY: 'hidden',
		    	width: '607px'
		    }
		}).inject(popup);
		
		return false;
	},
	check_id: function(id){
		
		if(document.getElementById(id) != null){
			return '<span id="active_service"></span>';
			
		}else{
			return '';	
		}
	},
	//@ TODO  wordpress
	get_data_service: function(name){
		var url = site_url+'home/data_service';
		var n = '';
		var myHTMLRequest = new Request.JSON({
			method:'post',
			url: url,
			onComplete:function(jsonData){
				var link= jsonData.link;
				
				var url2 = site_url+'home/blog_feed';
				var req = new Request({
					method:'post',
					url: url2,
					onComplete:function(Data){
						
						$(name).innerHTML = Data;
						
					}
				}).send('service='+name+'&link='+link);
				
				
				
			}
		}).send('service='+name);
		
	},
	/*get_data_service_blogger: function(){
		var url = site_url+'home/data_service';
		var n = '';
		var myHTMLRequest = new Request.JSON({
			method:'post',
			url: url,
			onComplete:function(jsonData){
				var link= jsonData.link;
				console.log(link);
				var url2 = site_url+'home/blog_feed';
				var req = new Request({
					method:'post',
					url: url2,
					onComplete:function(Data){
						
						$('blogger').innerHTML = Data;
						
					}
				}).send('service=blogger&link='+link);
				
				
				
			}
		}).send('service=blogger');
		
	},*/
	get_data_service_linkedin: function(){
		var url = site_url+'home/data_service';
		var n = '';
		var myHTMLRequest = new Request.JSON({
			method:'post',
			url: url,
			onComplete:function(jsonData){
				console.log(jsonData);
			
				
				IN.API.Profile(jsonData.id).fields(["id", "firstName", "lastName", "pictureUrl","headline","connections","industry","educations","location","public-profile-url","current-status","positions"]).result(function(me){
					console.log(me.values);
					var el = me.values[0];
					var current = el.headline;
					var educations = el.educations.values;
					console.log(educations);
					var connections = el.connections._total;
					var industry = el.industry;
					var location  = el.location.name;
					var profile_url = el.publicProfileUrl;
					var ex = el.positions.values;
					 
					
					var lk_html = '<div class="rows_social" ><h2 class="social_name" >@'+realtor_name+'\'s Linkedin	</h2><br/><a class="simple_link" href="'+profile_url+'">View Profile</a></div>';
						lk_html += '<div class="rows_social" ><h2 class="social_name" >'+current+'</h2><p>'+location+':'+industry+':'+connections+'Connections</p></div>';
						lk_html += '<div class="rows_social" ><h2 style="margin:2px; font-size:16px	;" >Current :</h2>\
									<p>'+current+'</p></div>';
						lk_html += '<div class="rows_social" ><h2 style="margin:2px; font-size:16px	;" >Educations:</h2>';
									
						educations.each(function(key,val){
							lk_html += '<p>'+key.schoolName+'</p>';
						});				
						lk_html += '</div>';
						
						lk_html += '<div class="rows_social" ><h2 style="margin:2px; font-size:16px	;" >Experience:</h2>';
						
						ex.each(function(key,val){
							lk_html += '<p><b>'+key.title+'</b><br/>'+key.company.name+','+key.company.industry+'</p>';
						});				
						lk_html += '</div>';
						
						
						$('linkedin').innerHTML = lk_html;
				});
				
			}
		}).send('service=linkedin');
	},
	get_data_service_vimeo: function(){
		var url = site_url+'home/data_service';
		var myHTMLRequest = new Request.JSON({
			method:'post',
			url: url,
			onComplete:function(jsonData){
				var o_t = jsonData.oauth_token;
				var o_t_s = jsonData.oauth_token_secret;
				var id = jsonData.id;
				var username =jsonData.username;
				var profile = jsonData.profileurl;
				var vimeo_html = '		<div class="rows_social header" >' +
									'		<h2>' + jsonData.display_name + '\'s Vimeo</h2>' +
									'		<span style="font-size:12px;color:#555;font-weight:normal;">' +
									'			<a class="profile_link" href="' + jsonData.profile_url + '" target="_blank" >View Profile</a>&nbsp;|&nbsp;' +
									'			<a class="profile_link" href="' + jsonData.videos_url + '" target="_blank" >View Videos</a>' +
									'		</span>' +
									'	</div>';
				
				/* get videos */
				var myJSONP = new Request.JSONP({
				    url: 'http://vimeo.com/api/v2/' + id + '/all_videos.json',
				    callbackKey: 'callback',
				    data: {
				    	
				    },
				    onComplete:function(data){
				    	var firstload = data[ 0 ].url;
				    	
				    	vimeo_html += 	'	<div class="rows_social item">' + 
				    					'		<div id="player_vimeo" style="width:570px; height:400px; margin-left:0px;"></div>' +
				    					'		<div id="player_vimeo_info" style="width:570px; height:auto; margin:20px 0px 0px 0px;"></div>' +
				    					'	</div>';
				    	
				    	$( 'vimeo' ).innerHTML = vimeo_html;
				    	var oEmbedUrl = 'http://vimeo.com/api/oembed.json';
				    	var oEmbedCallback = 'Social.front.embedVideo';
				    	Social.front.loadScript( oEmbedUrl + '?url=' + encodeURIComponent( firstload ) + '&width=570px&height=400px&byline=false&title=false&portrait=false&callback=' + oEmbedCallback );
				    	
				    	var c_html = '';
			    		c_html += 	'	<div id="gallery_container_vimeo" class="gallery-container">';	
			    		c_html += 	'		<div id="thumb_container_vimeo" class="thumb-container">';		
			    		c_html += 	'			<div id="thumbs_vimeo" class="thumbs">';
			    		
				    	$each(data, function(key,val){
				    		var img = key.thumbnail_medium;
				    		c_html += 	'			<a href="'+key.url+'" onclick="Social.front.getVimeoEmbed(this); return false; ">' +
				    					'				<img src="'+public_url+'images/Assets/blank.gif"  data-src="' + img + '" width="50px" height="50px" />' +
				    					'			</a>';
				    		
				    	});
				
						c_html +=	'			</div>'+
									'		</div>' +
									'	</div>';
						
						var vimeo_thumb = new Element('div', {
						    'id': 'vimeo_thumb',
						    'class': 'rows_social item',
						});
						
						$('vimeo').grab( vimeo_thumb );
			    		$('vimeo_thumb').innerHTML = c_html;
			    		 
			    		new SlideItMoo({
			    			itemsVisible:8, // the number of thumbnails that are visible
				    		currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
				    		thumbsContainer: 'thumbs_vimeo',
				    		elementScrolled: 'thumb_container_vimeo',
				    		overallContainer: 'gallery_container_vimeo'
				    	});
				    	
				    	var lazyloader2 = new LazyLoad({ 
						    range: 8, 
						    realSrcAttribute: "data-src", 
						    useFade: true, 
						    elements: 'img', 
						    mode: "horizontal",
						    container: 'thumb_container_vimeo',
						}); 

				    }
				}).send();
					
			}
		}).send('service=vimeo');
	},
	
	getVimeoEmbed: function(el){
		var oEmbedUrl = 'http://vimeo.com/api/oembed.json';
    	var oEmbedCallback = 'Social.front.embedVideo';
		console.log(el.get('href'));
		Social.front.loadScript(oEmbedUrl + '?url=' + encodeURIComponent(el.get('href')) + '&width=570px&height=400px&byline=false&title=false&portrait=false&callback=' + oEmbedCallback);
	},
	
	loadScript: function(url) {
		var js = document.createElement('script');
		js.setAttribute('type', 'text/javascript');
		js.setAttribute('src', url);
		document.getElementsByTagName('head').item(0).appendChild(js);
	},
	
	embedVideo: function(video) {
		videoEmbedCode = video.html;
		document.getElementById('player_vimeo').innerHTML = unescape(video.html);
		document.getElementById('player_vimeo_info').innerHTML = '<p class="venue"><span class="venue_name">' + video.title + '</span><br/><span class="subtitle">by <a href="' + video.author_url + '" target="_blank" title="View Profile in a New Window">' + video.author_name + '</a> | ' + video.duration + ' mins</span></p>';
	},
	
	get_data_service_foursquare: function(){
		var url = site_url+'home/data_service';
		var n = '';
		var myHTMLRequest = new Request.JSON({
			method:'post',
			url: url,
			onComplete:function(jsonData){
				
				
				var id = jsonData.id;
				var token= jsonData.oauth_token;
				var fullname = jsonData.fisrtName + ' ' + jsonData.lastName;
				var profile = 'http://foursquare/user/' + id;
				var foursquare_html = '		<div class="rows_social header">' +
										'		<h2>' + realtor_name + '\'s Foursquare</h2>' +
										'		<a class="profile_link" href="' + profile + '">View Profile</a>' +
										'	</div>';
				
				
				var myJSONP = new Request.JSONP({
				    url: 'https://api.foursquare.com/v2/users/'+id+'/checkins',
				    callbackKey: 'callback',
				    data: {
				    	oauth_token:token
				    },
				    onComplete:function(data){
				    		
				    	$('foursquare').innerHTML = foursquare_html ;
				    	var checkin = data.response.checkins.items;
				    	var count = data.response.checkins.count;
				    	
				    	var c_html = '<h2 class="sub-header">Check-ins('+count+')</h2><div class="space"></div>';
				    	var v = new Array();
				    	var i = 0;

				    	for(i; i<3; i++) {
				    		c_html += '<p class="venue"><span class="venue_name">'+checkin[i].venue.name+':</span>&nbsp;<a href="http://www.foursquare.com/venue/'+checkin[i].venue.id+'" title="Open in a New Window"  target="_blank" />'+checkin[i].venue.location.address+','+checkin[i].venue.location.state+'</a><br/><span class="subtitle">'+Social.front.cal_Date(checkin[i].createdAt*1000)+'</a></p>';
				    	}
				    	var checkin_count = new Element('div', {
						    'id': 'checkin_count',
						    'class': 'rows_social item',
						    
						});
				    	$('foursquare').grab(checkin_count);
				    	$('checkin_count').innerHTML = c_html;
				    	
				    	Social.front.foursquare_callback_badges(token,id);
				    	
				  
				    	
				    }
				}).send();
				
				
				
			}
		}).send('service=foursquare');
	},
	foursquare_callback_badges: function(t,id){
		var myJSONP = new Request.JSONP({
		    url: 'https://api.foursquare.com/v2/users/'+id+'/badges',
		    callbackKey: 'callback',
		    data: {
		    	oauth_token:t
		    },
		    onComplete:function(data){
		    	var badges = data.response.badges;
		    	
		    	var c_html = 	'	<h2 class="sub-header">Badges</h2>';
		    		c_html += 	'	<div id="gallery_container4" class="gallery-container">';	
		    		c_html += 	'		<div id="thumb_container4" class="thumb-container">';		
		    		c_html += 	'			<div id="thumbs4" class="thumbs">';
		    		
		    	$each(badges, function(key,val){
		    		if(key.unlocks[0]){
		    			var img = key.image.prefix+''+key.image.sizes[0]+''+key.image.name;
		    			c_html += 	'			<a class="no_link"><img src="'+public_url+'images/Assets/blank.gif"  data-src="'+img+'" width="50px" height="50px" class="no-border"/></a>';
		    		}
		    	});
		
				c_html +=		'			</div>' +
								'		</div>' +
								'	</div>';
				
				var foursquare_badges = new Element('div', {
				    'id': 'foursquare_badges',
				    'class': 'rows_social item',
		
				});
				
				$('foursquare').grab(foursquare_badges);
	    		$('foursquare_badges').innerHTML = c_html;
	    		
	    	
	    	
		    	new SlideItMoo({itemsVisible:8, // the number of thumbnails that are visible
		    		currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
		    		thumbsContainer: 'thumbs4',
		    		elementScrolled: 'thumb_container4',
		    		overallContainer: 'gallery_container4'
		    	});
		    	
		    	var lazyloader2 = new LazyLoad({ 
				    range: 10, 
				    realSrcAttribute: "data-src", 
				    useFade: true, 
				    elements: 'img', 
				    mode: "horizontal",
				    container: 'thumb_container4',
				}); 
			    	
		    	
			    Social.front.foursquare_callback_friend(t,id);		
			    return false;
		    	
		    }
		}).send();
	},
	
	foursquare_callback_friend: function(t,id){
		var myJSONP = new Request.JSONP({
		    url: 'https://api.foursquare.com/v2/users/'+id+'/friends',
		    callbackKey: 'callback',
		    data: {
		    	oauth_token:t
		    },
		    onComplete:function(data){
		    	var friends = data.response.friends;
		    	
		    	
		    
		    	var c_html = 	'	<h2 class="sub-header">Recent Friends ('+friends.count+')</h2>';
		    		c_html += 	'	<div id="gallery_container5" class="gallery-container">';	
		    		c_html += 	'		<div id="thumb_container5" class="thumb-container">';		
		    		c_html += 	'			<div id="thumbs5" class="thumbs">';
		    	friends.items.each(function(key,val){
		    		var img = key.photo;
		    		c_html += 	'				<a href="http://www.foursquare.com/user/'+key.id+'" target="_blank"><img src="'+public_url+'images/Assets/blank.gif"  data-src="'+img+'" width="50px" height="50px" /></a>';
		    		
		    	});
		    	
				c_html +=		'			</div>' +
								'		</div>' +
								'	</div>';
				
				var foursquare_photos = new Element('div', {
				    'id': 'foursquare_photos',
				    'class': 'rows_social item'
				});
				
				$('foursquare').grab(foursquare_photos);
	    		$('foursquare_photos').innerHTML = c_html;
	    		
	    	
	    	
	    	new SlideItMoo({itemsVisible:8, // the number of thumbnails that are visible
	    		currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
	    		thumbsContainer: 'thumbs5',
	    		elementScrolled: 'thumb_container5',
	    		overallContainer: 'gallery_container5'});
	    	
	    	var lazyloader2 = new LazyLoad({ 
			    range: 10, 
			    realSrcAttribute: "data-src", 
			    useFade: true, 
			    elements: 'img', 
			    mode: "horizontal",
			    container: 'thumb_container5',
			}); 
		    	return false;
		    	
		    	
		    		
		    	
		    	
		    }
		}).send();
	},
	
	get_data_service_flickr: function(){
		var url = site_url+'home/data_service';
		var n = '';
		var myHTMLRequest = new Request.JSON({
			method:'post',
			url: url,
			onComplete:function(jsonData){
				var key = 'e0f31872f5efa42bed18a3fbde16f8c3';
				var secret= '024b25ac9d8dd9f1';
				var myJSONP = new Request.JSONP({
				    url: 'http://api.flickr.com/services/rest/',
				    callbackKey: 'jsoncallback',
				    data: {
				    	
				    	method:'flickr.people.getPublicPhotos',
				    	api_key: key,
				    	user_id:jsonData.nsid,
				    	format:'json',
				    },
				    onComplete:function(data){
				    	var profile = 'http://www.flickr.com/people/' + jsonData.nsid + '/';
				    	var photostream = 'http://www.flickr.com/photos/' + jsonData.nsid+ '/';
				    	/*var nm = $('realtor_list_footer').get('html');
			    		nm = nm.split('|')[0];*/
				    	var flickr_html = 	'	<div class="rows_social header">';
				    		flickr_html += 	'		<h2>' + realtor_name + '\'s Flickr</h2><span style="font-size:12px;color:#555;font-weight:normal;"><a class="profile_link" href="' + profile + '">View Profile</a> | <a class="profile_link" href="' + photostream + '">View Photostream</a></span>' +
				    						'	</div>';
				    		flickr_html += 	'	<div id="big_photo" class="rows_social item"></div>';
				    		flickr_html += 	'	<div class="rows_social item" id="photos_flickr">';	
				    		flickr_html += 	'		<div id="gallery_container3" class="gallery-container">';	
				    		flickr_html += 	'			<div id="thumb_container3" class="thumb-container">';		
				    		flickr_html += 	'				<div id="thumbs3" class="thumbs">';
				    		
				    	/*data.data.each(function(key,val){
				    			var img = 'http://graph.facebook.com/'+key.id+'/picture';
				    			
				    			fb_html += 	'<a href="#"    ><img id="img_f" src="'+public_url+'images/Assets/blank.gif" data-src="'+img+'"  width="50px" height="50px"    title="'+key.name+'"/></a>';
				    	});*/
				    	data.photos.photo.each(function(key,val){
				    		//console.log(key);
					    	var img = 'http://farm' + key.farm + '.static.flickr.com/' + key.server + '/' + key.id + '_' + key.secret + '_s.jpg';
					    	var img_b =	'http://farm' + key.farm + '.static.flickr.com/' + key.server + '/' + key.id + '_' + key.secret + '.jpg';
					    		flickr_html += 	'				<a href="' + img_b + '" title="' + key.title + '" onclick="Social.front.flickr_bigimage(this); return false;"><img id="img_f" src="' + public_url + 'images/Assets/blank.gif" data-src="' + img + '" width="50px" height="50px"/></a>';
					    	});
				    	flickr_html +=		'				</div>' +
				    						'			</div>' +
				    						'		</div>' +				    						
				    						'	</div>';
				    		
				    	
				    	
				    	$('flickr').innerHTML = flickr_html;
				    	var img = $('thumbs3').getChildren()[0].get('href');
				    	$('big_photo').innerHTML = '<img src="' + img + '" title="' + key.title + '"/>';
				    	new SlideItMoo({itemsVisible:8, // the number of thumbnails that are visible
				    		currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
				    		thumbsContainer: 'thumbs3',
				    		elementScrolled: 'thumb_container3',
				    		overallContainer: 'gallery_container3'});
				    	
				    	var lazyloader = new LazyLoad({ 
						    range: 9, 
						    realSrcAttribute: "data-src", 
						    useFade: true, 
						    elements: 'img', 
						    mode: "horizontal",
						    container: 'thumb_container3',
						}); 
				    }
				}).send();
			}
		}).send('service=flickr');
		
	},
	flickr_bigimage: function(el){
		var ur = el.get('href');
		var img = '<img src="'+public_url+'images/Assets/blank.gif" data-src="'+ur+'" title=""/>';
		
		$('big_photo').empty();
		$('big_photo').innerHTML = img;
		
		var lazyloader3 = new LazyLoad({ 
		    range: 10, 
		    realSrcAttribute: "data-src", 
		    useFade: true, 
		    elements: 'img', 
		   
		    container: 'big_photo',
		}); 
	},
	
	get_data_service_facebook: function(){
		var url = site_url+'home/data_service';
		var n = '';
		var myHTMLRequest = new Request.JSON({
			method:'post',
			url: url,
			onComplete:function(jsonData){
				var token = jsonData.access_token;
				var id = jsonData.id;
				//get data fb 
				Social.front.fb_callback(token,id);
			}
		}).send('service=facebook');
		
		
	},
	
	fb_callback: function(t,id){
		var myJSONP = new Request.JSONP({
		    url: 'https://graph.facebook.com/'+id,
		    callbackKey: 'callback',
		    data: {
		    	access_token:t
		    },
		    onComplete:function(data){
		    	var name =  data.name;
		    	var public_profile = data.link ;
		    	var fb_html = '		<div class="rows_social header">' +
		    					'		<h2>' + realtor_name + '\'s Facebook Profile</h2>' +
		    					'		<a class="profile_link" href="' + public_profile + '" target="_blank">View Public Profile</a>' +
		    					'	</div>';
		    	$('facebook').empty();
		    	$('facebook').innerHTML = fb_html;
		    	Social.front.fb_callback_status(t,id);
		    }
		}).send();
		
	},
	
	fb_callback_friend: function(t,id){
		
		var myJSONP = new Request.JSONP({
		    url: 'https://graph.facebook.com/'+id+'/friends',
		    callbackKey: 'callback',
		    data: {
		    	access_token:t
		    },
		    onComplete:function(data){
		    	/*console.log(data);
		    	return false;*/
		    	if( data.data ){
		    		
			    	var fb_html = 	'	<h2 class="sub-header">Friends</h2>';
			    		fb_html += 	'		<div id="gallery_container" class="gallery-container">';	
			    		fb_html += 	'			<div id="thumb_container" class="thumb-container">';		
			    		fb_html += 	'				<div id="thumbs" class="thumbs">';
			    		
			    	for( var val = 0; val < 32 && val < data.data.length ; val++ ){
			    		var key = data.data[ val ];
			    		
			    		var img = 'http://graph.facebook.com/' + key.id + '/picture';
			    			
			    		fb_html += 	'					<a href="http://www.facebook.com/' + key.id + '" target="_blank"><img id="img_f" src="' + public_url + 'images/Assets/blank.gif" data-src="' + img + '"  width="50px" height="50px" title="' + key.name + '"/></a>';
			    	}
			    	fb_html += 			'			</div>' +
			    						'		</div>' +
			    						'	</div>';
		    	
		    	} else {
		    		var fb_html = '<h2 class="sub-header" >Friends</h2>';
		    		fb_html		+= '<span style="font-style:italic;color:#ccc;">User does not have any friend yet.</span>';
		    	}
		    	
		    	var fb_photo = new Element('div', {
				    'id': 'photos_fb',
				    'class': 'rows_social item',
				});
		    	
		    	
		    	$('facebook').grab(fb_photo);
		    	$('photos_fb').innerHTML = fb_html;
		    	Social.front.fb_callback_photos(t,id);	
		    	
		    	if( data.data ){
			    	new SlideItMoo({itemsVisible:8, // the number of thumbnails that are visible
			    		currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
			    		thumbsContainer: 'thumbs',
			    		elementScrolled: 'thumb_container',
			    		overallContainer: 'gallery_container'});
			    	
			    	var lazyloader = new LazyLoad({ 
					    range: 9, 
					    realSrcAttribute: "data-src", 
					    useFade: true, 
					    elements: 'img', 
					    mode: "horizontal",
					    container: 'thumb_container',
					}); 
		    	}
		    	
		    }
		}).send();
	},
	
	fb_callback_photos: function(t,id){
		var myJSONP = new Request.JSONP({
		    url: 'https://graph.facebook.com/'+id+'/photos',
		    callbackKey: 'callback',
		    data: {
		    	access_token:t
		    },
		    onComplete:function(data){
		    	if( data.data.length > 1 ){
		    	
			    	var fb_html = 	'	<h2 class="sub-header" >Photos</h2>';
			    		fb_html += 	'	<div id="gallery_container2" class="gallery-container">';	
			    		fb_html += 	'		<div id="thumb_container2" class="thumb-container">';		
			    		fb_html += 	'			<div id="thumbs2" class="thumbs">';
			    	
			    	data.data.each( function( key, val ) {
			    		if( val < 32 ){
			    			fb_html += 	'				<a href="' + key.link + '" ><img src="' + public_url + 'images/Assets/blank.gif" data-src="' + key.images[2].source + '" width="110px" height="77px" /></a>';
			    		}
			    	});
			    	
			    	fb_html +=		'			</div>' +
			    					'		</div>' +
			    					'	</div>';
		    	} else {
		    		var fb_html = '<h2 class="sub-header" >Photos</h2>';
		    		fb_html		+= '<span style="font-style:italic;color:#ccc;">User has not uploaded any photo yet.</span>';
		    	}
		    	
		    	var fb_photo = new Element('div', {
				    'id': 'photos_coll',
				    'class': 'rows_social item',
				});
		    	
		    	$('facebook').grab(fb_photo);
		    	$('photos_coll').innerHTML = fb_html;
		    	
		    	if( data.data ){
			    	new SlideItMoo({itemsVisible:4, // the number of thumbnails that are visible
			    		currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
			    		thumbsContainer: 'thumbs2',
			    		elementScrolled: 'thumb_container2',
			    		overallContainer: 'gallery_container2'
			    	});
			    	
			    	var lazyloader2 = new LazyLoad({ 
					    range: 10, 
					    realSrcAttribute: "data-src", 
					    useFade: true, 
					    elements: 'img', 
					    mode: "horizontal",
					    container: 'thumb_container2',
					}); 
		    	}
		    }
		}).send();
	},
	
	fb_callback_status: function(t,id){
		var myJSONP = new Request.JSONP({
		    
		    url: 'https://graph.facebook.com/'+id+'/statuses',
		    callbackKey: 'callback',
		    data: {
		    	access_token:t
		    },
		    onComplete:function(data){
		    	
		    	if( data.data[ 0 ] ){
		    		var message =  data.data[0].message;
		    	} else {
		    		var message = '<span style="font-style:italic;color:#ccc;">User has not updated his/her status yet.</span>';
		    	}
		    	
		    	var fb_html = '<h2 class="sub-header">Recent Status</h2>';
		    	 fb_html += '<div style="margin-bottom:5px;">'+message+'</div>';
		    	
		    	var fb_status = new Element('div', {
				    'id': 'status_coll',
				    'class': 'rows_social item',
				});
		    	
		    		$('facebook').grab(fb_status);
		    		$('status_coll').innerHTML = fb_html;
		    		Social.front.fb_callback_friend(t,id);	
		    	
		    	
		    	
		    }
		}).send();
	},
	
	get_data_service_twitter: function(){
		
		var url = site_url+'home/data_service'
		var myHTMLRequest = new Request.JSON({
			method:'post',
			url: url,
			onComplete:function(jsonData){	
				
				// Retrieve tweets
				var myJSONP = new Request.JSONP({
				    url: 'https://api.twitter.com/1/statuses/user_timeline.json',
				    callbackKey: 'callback',
				    data: {
				    	include_entities:true,
				    	include_rts: true,
				    	screen_name: jsonData.screen_name,
				    	count: 20	
				    },
				   
				    onComplete: function(data){
				    	var screen_name = data[0].user.screen_name;
				    	var name = data[ 0 ].user.name;
				    	var first_name = name.split( ' ' );
				    	first_name = first_name[ 0 ];
				    	
				    	/*var nm = $('realtor_list_footer').get('html');
			    		nm = nm.split('|')[0];*/
				    	var follow_btn = 'http://platform0.twitter.com/widgets/follow_button.html?_=1311044824819&align=&button=grey&id=twitter_tweet_button_0&lang=en&link_color=&screen_name='+screen_name+'&show_count=false&show_screen_name=false&text_color=%23333333';
				    	var twit_html = '<div class="rows_social header" ><a class="social_name" href="http://twitter.com/#!/'+screen_name+'" target="_blank">@'+screen_name+'</a>\'s Tweets<iframe class="twitter-follow-button" frameborder="0" scrolling="no" allowtransparency="true" src="'+follow_btn+'" style="width: 300px; height: 20px; float:left; clear:both; margin-top:10px;" title=""></iframe></div>';
				    	var whos =  Array();
				    	data.each(function(key, val){
				    		var in_reply =  key.in_reply_to_screen_name;
				    		if(in_reply !== null){
				    			if(!Social.front.in_array(in_reply,whos)){
				    				whos.push(in_reply); 
				    			}
				    		}
				    		
				    		if( val < 4 ){
					    	   var t  = Social.front.cal_Date(key.created_at);
					    	   
					    	   twit_html += '<div class="rows_social item">' +
					    		   			   '<div class="avatar"><img src="'+key.user.profile_image_url+'"></div>' +
					    		   			   '<div class="text">' +
					    		   			   		'<span class="screen_name"><b>'+screen_name+'</b></span>' +
					    		   			   		'<span class="tweet_options">' +
					    		   			   			'<a class="tweet_reply" title="Reply to this Tweet" href="http://twitter.com/intent/tweet?in_reply_to='+key.id_str+'" target="_blank"></a>&nbsp;' +	
					    		   			   			'<a class="tweet_retweet" title="Retweet this Post" href="http://twitter.com/intent/retweet?tweet_id='+key.id_str+'" target="_blank"></a>&nbsp;' +
					    		   			   			'<a class="tweet_favorite" title="Favorite this Tweet" href="http://twitter.com/intent/favorite?tweet_id='+key.id_str+'" target="_blank"></a>&nbsp;' +
					    		   			   			'<a class="tweet_date" href="https://twitter.com/'+screen_name+'/status/'+key.id_str+'" target="_blank">'+t+'</a>' +
					    		   			   		'</span>' +
					    		   			   		'<p class="tweet_content">' + key.text + '</p>'+
					    		   			  '</div>'+
					    		   			'</div>';
									    	   
				    		}
					    });			
				    	twit_html += '<div class="rows_social who_reply"><h3>Who ' + first_name + ' @replies</h3>';
				    	whos.each( function( key, val ){
				    		if( val < 3 ){
				    			twit_html +='<div class="whos_reply"><img src="https://api.twitter.com/1/users/profile_image/'+key+'" ><span><a class="screen_name" href="http://twitter.com/' + key + '">@'+key+'</a></span></div>';
				    		}
				    	});
				    	twit_html += '</div>';
				    	
				    	
				    	//retrive who retweets
				    	var myJSONP = new Request.JSONP({
						    url: 'https://api.twitter.com/1/statuses/retweeted_by_user.json',
						    callbackKey: 'callback',
						    data: {
						    	include_entities:true,
						    	screen_name: jsonData.screen_name,
						    	count: 10	
						    },
						   
						    onComplete: function(data){
						    	
						    	var whos =  Array();
						    	twit_html += '<div class="rows_social who_reply"><h3>Who ' + first_name + ' @retweets</h3>';
						    	var who_retweets_arr = Array();
						    	var j = 0;
						    	data.each(function(key, val){
						    		if( key.retweeted_status.user && j < 3 ){
						    			var retweeted_name = key.retweeted_status.user.screen_name;
						    			if( who_retweets_arr.contains( retweeted_name ) == false ){
						    				who_retweets_arr.include( retweeted_name );
						    				twit_html +='<div class="whos_reply"><img src="https://api.twitter.com/1/users/profile_image/' + retweeted_name + '" ><span><a class="screen_name" href="http://twitter.com/' + retweeted_name + '">@' + retweeted_name + '</a></span></div>';
						    				j++;
						    			}
						    		}
						    		
							    });			
						    	
						    	
						    	twit_html += '</div>';
						    	$('twitter').empty();
						    	$('twitter').innerHTML = twit_html;
						    	
						       
						    }
						}).send();
				       
				    }
				}).send();
				
				
			}
		}).send('service=twitter');
		
	},
	cal_Date: function (time){
		var date = new Date(time),
			diff = (((new Date()).getTime() - date.getTime()) / 1000),
			day_diff = Math.floor(diff / 86400);
				
		if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
			return;
				
		return day_diff == 0 && (
				diff < 60 && "just now" ||
				diff < 120 && "1 minute ago" ||
				diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
				diff < 7200 && "1 hour ago" ||
				diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
			day_diff == 1 && "Yesterday" ||
			day_diff < 7 && day_diff + " days ago" ||
			day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
	},
	in_array: function (needle, haystack, argStrict) {
	    
	    var key = '',
	        strict = !! argStrict;
	 
	    if (strict) {
	        for (key in haystack) {
	            if (haystack[key] === needle) {
	                return true;
	            }
	        }
	    } else {
	        for (key in haystack) {
	            if (haystack[key] == needle) {
	                return true;
	            }
	        }
	    }
	 
	    return false;
	},
});