<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Friend Dump" description="Prints a list of the viewer's friends and demonstrates setting some PersonAppData">
		<Require feature="opensocial-0.5"/>
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
    <script type="text/javascript">
      var console = console || {};
      console.log = console.log || function(msg) {};
    </script>
    <style type="text/css">
      body {
        font: 12px Arial;
      }
      .person { 
        font-size: 22px;
        width: 400px;
        background: #9bf;
        border: 1px solid #68d;
        margin: 5px;
        padding: 2px;
        vertical-align: top;
      }
      .hugged {
        font-size: 12px;
        margin: 3px 0;
      }
      .photo {
        vertical-align: middle;
        margin: 0 4px 4px 0;
      }
      button {
        margin: 0 auto;
        display: block;
      }
      #output {
        overflow: scroll;
      }
    </style>
    <h1>Friend Dump</h1>
    <h3>Status</h3>
    <div id="output"></div>
    <h2>Me</h2>
    <div id="me" class="person"></div>
    <br style="clear: both;" />
    <h2>Friends</h2>
    <div id="friends"></div>
    <br style="clear: both;" />
   <script type="text/javascript">
      //DOM handle for output
      var output = null;
      var server_url = "http://sandbox.orkut.com";
      var me = null;
      var my_data = null;
      var friends = null;
      var friends_data = null;

      /**
       * Updates a person's app data.  Completely changed in 0.5
       */
      function updateMyData(key, value, callback) {
        var req = opensocial.newDataRequest();
        req.add(req.newUpdatePersonAppDataRequest("VIEWER", key, value));
        req.send(callback);
      };
        
      /**
       * callback for when friend data is loaded
       */
      function gotFriends(data) {
        var dom_me = document.getElementById("me");
        var dom_friends = document.getElementById("friends");
        output.innerHTML += "got friends <br/>";
        console.log("gotFriends", data);
        me = data.get('viewer');
        my_data = data.get('viewerData');
        friends = data.get('viewerFriends');
        friends_data = data.get('viewerFriendsData');
				//New error handling support in 0.5
        if (me.hadError() || 
            friends.hadError() || 
            friends_data.hadError() ||
            my_data.hadError()) {
          alert([ "There was a problem: ",
                  (me.getError() || 
                   friends.getError() || 
                   friends_data.getError() ||
                   my_data.getError()) ].join(""));
          return;
        } 

        //Note the .getData() addition to 0.5 data responses
        me = me.getData() || {};
        my_data = my_data.getData() || {};
        friends = friends.getData() || {};
        friends_data = friends_data.getData() || {};
        console.log("friends", friends);
        dom_me.innerHTML = "";
        dom_friends.innerHTML = "";
        renderPerson(me, dom_me);
        renderPersonCollection(friends, dom_friends);
        //Resize the Iframe to match our content
        _IG_AdjustIFrameHeight();
      };

      /**
       * Renders a person object to the supplied container
       */
      function renderPerson(person, elem) {
				console.log("renderPerson", person.getDisplayName(), person);
        
				//New in 0.5 - arbitrary field name
        var profile_pic = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
        var profile_name = person.getDisplayName();
        var profile_data = friends_data[person.getId()] || my_data[person.getId()] || {};
        var profile_lastaction = profile_data['LastActed'];

        //If the profile picture was not loaded, then just use a placeholder
        if (profile_pic == null || profile_pic == "" || profile_pic.indexOf('null') != -1) {
          profile_pic = server_url + "/img/i_nophoto64.gif";
        }
        
        //User photo element
        var dom_photo = document.createElement("img");
        dom_photo.className = "photo";
        dom_photo.src = profile_pic;

        //Name label
        var dom_name = document.createTextNode(profile_name);

        //Button to click to "hug" someone
        var dom_button = document.createElement("button");
        dom_button.innerHTML = "Hug " + profile_name;
        dom_button.onclick = getHandler(person);

        //Append the new elements to the supplied parent element
        elem.appendChild(dom_photo);
        elem.appendChild(dom_name);
        elem.appendChild(dom_button);
        
        //If the user has "last hugged" app data, then render it
        if (profile_lastaction != null && profile_lastaction != "") {
          var dom_lastaction = document.createElement("div");
          dom_lastaction.className = "hugged";
          var dom_em = document.createElement("em");
          dom_em.innerHTML = profile_name + " last hugged " + profile_lastaction;
          elem.appendChild(dom_lastaction);
          dom_lastaction.appendChild(dom_em);
        }
      };
        
      /**
       * Renders a collection of people into the supplied container
       */
      function renderPersonCollection(people, elem) {
        people.each(function(person) {
          var dom_div = document.createElement("div");
          dom_div.className = "person";
          elem.appendChild(dom_div);
          renderPerson(person, dom_div);
        });
      };

      /**
       * Returns a handler to act on a given name
       */
      function getHandler(person) {
        return function() {
          updateMyData("LastActed", 
                       person.getDisplayName(), 
                       function(response) {
                         alert("You hugged " + person.getDisplayName());
                         renderPeopleData();
                       });
        };
      };

      /**
       * Initiates a request for people data.  Completely changed in 0.5
       */
      function renderPeopleData() {
        var req = opensocial.newDataRequest();
        req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
        req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'), 'viewerFriends');
        //Note the explicit request for app data
        req.add(req.newFetchPersonAppDataRequest('VIEWER', ['LastActed']), 'viewerData');
        req.add(req.newFetchPersonAppDataRequest('VIEWER_FRIENDS', ['LastActed']), 
                'viewerFriendsData');
        req.send(gotFriends);
      };

      output = document.getElementById("output");
      output.innerHTML += "At: " + window.location.href + "<br/>";
      output.innerHTML += "requesting friends <br/>";
      renderPeopleData();
    </script>

  ]]>
  </Content>
</Module>e

