var SITE_ID = '04411997976602038080';
var viewer, ownerFriends, activities;

google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.loadOpenSocialApi({ 
        site: SITE_ID,
        onload: function() { initAllData(); }});


function initAllData() {
  var params = {};
  params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] =
    [opensocial.Person.Field.ID,opensocial.Person.Field.NAME,opensocial.Person.Field.THUMBNAIL_URL,opensocial.Person.Field.PROFILE_URL];
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest('VIEWER', params), 'viewer');
  req.add(req.newFetchPeopleRequest(
    new opensocial.IdSpec({'userId' : 'OWNER', 'groupId' : 'FRIENDS'}), params), 
    'ownerFriends');
  req.add(req.newFetchActivitiesRequest(new opensocial.IdSpec({'userId' : 'OWNER', 'groupId' : 'FRIENDS'})), 'activities');
  req.send(setupData);
};


function getActivity(data){

	if(data == undefined || data == ''){
		initAllData();
	}
	
	var tab_users = new Array();
	
  ownerFriends = data.get('ownerFriends').getData().asArray();
  var html = "";
  for (var i = 0; i < ownerFriends.length && i < 8; i++) {
    var person = ownerFriends[i];
    personId = person.getField("id");
    
    personHtml = "<div style='text-align:center'><a title='" + person.getField("displayName") + "' href='" + person.getField("profileUrl") + "'>";
    personHtml += "<img width='45px' class='memberPhoto' src='" + person.getField("thumbnailUrl")  + "'/>";
    personHtml += "</a><br><span style='font-size:10px'>"+person.getField("displayName")+"</span></div>";
    
    tab_users[personId] = personHtml;
    
    html += personHtml;
  };
	
	if(myExternalId == undefined || myExternalId == ''){
		myExternalId = 0;
	}
	
	activities = data.get('activities').getData();
  html = "";
  if (activities) {
    activities = activities.asArray();
    for (var i = 0; i < activities.length && i < 6; i++) {
      var activity = activities[i];
     	var external_id = activity.getField('externalId', {escapeType: 'none'});
     	if( (myExternalId == 0) || (myExternalId == external_id) ){
     	
	      var activity_id = activity.getField('id', {escapeType: 'none'});
	     	var user_id = activity.getField('userId', {escapeType: 'none'});
	      var title = activity.getField('title', {escapeType: 'none'});
	      var body = activity.getField('body', {escapeType: 'none'});
	      
	      var bodySpecial = tab_users[user_id];
	      if (bodySpecial) {
	          //html += "<div class='item'><b>" + title + "</b><br>"+ body + "</div>";
	          
	          html += "<div class='item'><b>"+ bodySpecial + "</b></div>";
	      } else {
	          html += "<div class='item'>" + title + "</div>";
	      }
	    }
    };
  } else {
    html = "<div class='item'>Be the first to pick your color!</div>";
  }

  return html;
}

function setupData(data) {
	var tab_users = new Array();
	
  ownerFriends = data.get('ownerFriends').getData().asArray();
  var html = "";
  for (var i = 0; i < ownerFriends.length && i < 8; i++) {
    var person = ownerFriends[i];
    personId = person.getField("id");
    
    personHtml = "<div style='text-align:center'><a title='" + person.getField("displayName") + "' href='" + person.getField("profileUrl") + "'>";
    personHtml += "<img class='memberPhoto' src='" + person.getField("thumbnailUrl")  + "'/>";
    personHtml += "</a><br><span style='font-size:10px'>"+person.getField("displayName")+"</span></div>";
    
    tab_users[personId] = personHtml;
    
    html += personHtml;
  };
	
	if(document.getElementById('members')){
	
  	//document.getElementById('members').innerHTML = html;
	}
	
  viewer = data.get('viewer').getData();
  if (viewer) {
    //document.getElementById('memberstate').innerHTML = viewer.getField("displayName")+" : Ętes-vous fan ?";
  } else {
    //document.getElementById('memberstate').innerHTML = "Vous ętes fan ? Identifiez-vous d'abord..";
  }

  viewer = data.get('viewer').getData();
  if (viewer) {
    //document.getElementById('profile').innerHTML = 
    '<img align="left" src="' + viewer.getField("thumbnailUrl")  + '">' +
    '<b>Salam ' +  viewer.getField("displayName") + '!</b><br>' +
    '<a href="#" onclick="google.friendconnect.requestSettings(); return false;">Settings</a><br>' +
    '<a href="#" onclick="google.friendconnect.requestInvite(\'Come and pick a color!\'); return false;">Invite</a><br>' +
    '<a href="#" onclick="google.friendconnect.requestSignOut(); return false;">Sign out</a><br>';
  } else {
    google.friendconnect.renderSignInButton({ 'id': 'profile' });
  }
  
  
	var myExternalId = 0;
 	var html = getActivity(data);
 	document.getElementById('activities').innerHTML = html;
 	
};

function createActivity(id_sujet,txt_sujet,url_sujet,photo_sujet) {
  if (viewer) { 
    var activity = opensocial.newActivity({
      'title': viewer.getDisplayName() + ' est fan de <a href="'+ url_sujet +'" style="font-weight: bold;">'+ txt_sujet+ '</a>'
      ,'externalId': ''+id_sujet+''
      ,'body': '<a href="http://www.fansite.fr/"><img style="float:left" height="50" border="0" src="'+ photo_sujet +'"></a>'+ viewer.getDisplayName() + ' est fan de '+ txt_sujet +''
      });
    opensocial.requestCreateActivity(activity, "HIGH", 
      function() { setTimeout(initAllData,1000); });
  }else{
  	alert("Il vous faut d'abord vous connecter...");
 	}
};