Groups Application

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Groups"
        description="Lets a user view the groups he is a member of."
        author="Luc Castera (Intellum)"
        author_email="lcastera@intellum.com" 
        author_location="Atlanta, GA" 
        author_affiliation="Intellum" 
        author_link="http://intellum.com"
        thumbnail="http://dev.groupdock.com/images/groups-app-thumbnail.png" 
        screenshot="http://dev.groupdock.com/images/groups-app-screenshot.png" >
    <Require feature="opensocial-1.0"/>
    <Require feature="osapi" />
  </ModulePrefs>
  <Content type="html" views="canvas">
    <![CDATA[
      <style>
        div#groups ul {
          margin: 0;
          padding: 0;
        }
        div#groups li {
          list-style: none;
          font-size: 2em;
          padding: 10px 20px;
          margin: 0px;
          border-bottom: 1px solid #ccc;
        }
      </style>
      <script type="text/javascript">
	gadgets.util.registerOnLoadHandler(init);
			 
	function init() {
	  loadGroups();
	}
	function loadGroups() {
	  osapi.groups.get({'userId': '@owner'}).execute(function (ownerGroups) {
	    console.log(ownerGroups);
	    var groupsDiv = document.getElementById('groups');
	    var htmlStr = '<ul>';
	    for (var i =0; i < ownerGroups.list.length; i++) {
	      var group = ownerGroups.list[i];
	      htmlStr += '<li>' + group.name + '</li>';
	    }
	    htmlStr += '</ul>';
	    groupsDiv.innerHTML = htmlStr;
	  });
	}
      </script>
      <div id="groups">loading...</div>
    ]]>
  </Content>
</Module>