<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Wave Gadget API Test" height="500">
  <Require feature="opensocial-templates"/>
  <Require feature="opensocial-data"/>
</ModulePrefs>
<Content type="html"><![CDATA[
  <script type="text/javascript"
      src="http://wave-api.appspot.com/public/wave.js"></script>
  <script type="text/javascript">
    function updateKey() {
      var data = {
        'key': document.getElementById('keyValue').value
      };
      wave.getState().submitDelta(data);
    }
    function renderInfo() {
      var data = {
        'viewer': wave.getViewer(),
        'participants': wave.getParticipants(),
        'state': wave.getState()
      };
      os.getTemplate('info').renderInto(
          document.getElementById('info'), data);
    }
    function main() {
      if (wave && wave.isInWaveContainer()) {
        wave.setParticipantCallback(renderInfo);
        wave.setStateCallback(renderInfo);
      }
    }
    gadgets.util.registerOnLoadHandler(main);
  </script>

  <!-- Info Template -->
  <script type="text/os-template" name="info">
    <h3>Participants</h3>
    <b>Viewer:</b> ${viewer.id} <br/>
    <b>Participants:</b>
    <ul>
      <li repeat="participants">${Cur.id}</li>
    </ul>
    <h3>State</h3>
    <b>Value:</b> ${state.key}<br/>
  </script>

  <div id="info"></div>
  <form action="#" onsubmit="updateKey(); return false;">
    <input id="keyValue" size="10" type="text" value=""/>
    <input type="submit" value="Update Key Value"/>
  </form>
]]></Content>
</Module>


