<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Are You In?" height="100" width="500">
  <Require feature="opensocial-templates"/>
  <Require feature="opensocial-data"/>
  <Require feature="dynamic-height"/>
</ModulePrefs>
<Content type="html"><![CDATA[
  <!-- TODO: Remove the need for jquery and use google.load instead. -->
  <script type="text/javascript"
    src="http://wave-api.appspot.com/public/gadgets/areyouin/jquery.js"></script>
  <script type="text/javascript" src="http://wave-api.appspot.com/public/wave.js"></script>
  <script type="text/javascript" src="http://wave-api.appspot.com/public/gadgets/areyouin/main.js"></script>
  <style type="text/css">
    body {
      font-family: sans-serif, arial;
      font-size: 10pt;
    }
    table {
      width: 100%;
      border: 0px;
    }
    td {
      font-family: sans-serif, arial;
      font-size: 10pt;
    }
    a:link {text-decoration: none; color: blue}
    a:visited {text-decoration: none; color: blue}
    a:active {text-decoration: none; color: blue}
    a:hover {text-decoration: underline; color: red;}
    .container {
      width: 450px;
    }
    .answer-table {
    }
    .answer-table thead {
    }
    .answer-table thead tr {
      font-weight: bold;
      text-align: center;
    }
    .answer-table thead td {
      font-size: 14pt;
      width: 150px;
      padding: 6px;
    }
    .answer-table thead td {
      background-color: #5690D2;
      color: white;
      cursor: pointer;
      border: 1px solid white;
      border-right: 1px solid gray;
      border-bottom: 1px solid gray;
      margin: 1px solid white;
    }
    .answer-table thead td.yes {
      background-color: #339933;
    }
    .answer-table thead td.maybe {
      background-color: #CCCC00;
    }
    .answer-table thead td.no {
      background-color: #990000;
    }
    .answer-table thead td:hover {
      cursor: pointer;
      border-right: 1px solid gray;
      border-bottom: 1px solid gray;
      border: 1px solid yellow;
      padding: 1px solid yellow;
    }
    .answer-table thead td:active {
      border: 1px solid gray;
      border-right: 1px solid white;
      border-bottom: 1px solid white;
      padding: 1px solid yellow;
    }
    .participant {
      width: 150px;
      vertical-align: center;
      padding-top: 4px;
      padding-bottom: 4px;
    }
    .participant img {
      float: left;
      padding-right: 4px;
    }
    .participant .name {
      text-align: left;
      font-size: 12px;
      font-weight: bold;
    }
    .participant .msg {
      text-align: left;
      font-size: 10px;
      color: gray;
    }
    .top {
      text-align: right;
      font-size: 10px;
    }
    .status-box {
      border: 1px solid black;
    }
    .yes {
      background-color: #E3F6CE;
    }
    .no {
      background-color: #FBEFEF;
    }
    .maybe {
      background-color: #F7F8E0;
    }
    .visible {
    }
    .hidden {
      display: none;
    }
    .summary {
      font-size: 10px;
    }
    #status-box {
      border: 1px solid black;
      font-size: 10px;
    }
    #status-submit {
      font-size: 10px;
    }
    .smiley {
      width: 16px;
      height: 16px;
    }
  </style>

  <script type="text/os-template" name="answers-template">
    <table class="answer-table">
      <thead>
        <tr>
          <td class="yes" onclick="onAnswer(ANSWER_Yes)">
            <div>Yes</div>
          </td>
          <td class="no" onclick="onAnswer(ANSWER_No)">
            <div>No</div>
          </td>
          <td class="maybe" onclick="onAnswer(ANSWER_Maybe)">
            <div>Maybe?</div>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr if="total gt 0">
          <td align="center" valign="top" class="yes">
            <div repeat="y">
              <table><tr><td align="center">
                <os:showParticipant person="${Cur}"/>
              </td></tr></table>
            </div>
          </td>
          <td align="center" valign="top" class="no">
            <div repeat="n">
              <table><tr><td align="center">
                <os:showParticipant person="${Cur}"/>
              </td></tr></table>
            </div>
          </td>
          <td align="center" valign="top" class="maybe">
            <div repeat="m">
              <table><tr><td align="center">
                <os:showParticipant person="${Cur}"/>
              </td></tr></table>
            </div>
          </td>
        </tr>
        <tr>
          <td class="summary" valign="top" align="center">
            <img class="smiley" src="http://wave-api.appspot.com/public/gadgets/areyouin/yes.png"/>
            ${y.length}
          </td>
          <td class="summary" valign="top" align="center">
            <img class="smiley" src="http://wave-api.appspot.com/public/gadgets/areyouin/no.png"/>
            ${n.length}
          </td>
          <td class="summary" valign="top" align="center"><img class="smiley" src="http://wave-api.appspot.com/public/gadgets/areyouin/maybe.png"/>
            ${m.length}
          </td>
        </tr>
        <tr if="total gt 0">
          <td></td>
          <td></td>
          <td align="right" valign="top">
            <div if="!responded" class="summary">
              You have not yet responded.
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </script>

  <script type="text/os-template" tag="os:showParticipant">
    <div class="participant">
      <img width="24" height="24" src="${My.person.icon}"/>
      <div class="name">${My.person.displayName}</div>
      <div class="msg">${My.person.status}</div>
    </div>
  </script>

  <div id="container">
    <div id="answer-table"></div>
    <table><tr><td align="right"><div class="top">
      <a href="#" id="status-link">Set my status</div>
      <div id="status-div">
        <form action="" id="status-form">
          <input id="status-box" type="text" size="20"/>
          <input id="status-submit" type="submit" value="Set"/>
        </form>
      </div>
    </div></td></tr></table>
  </div>
]]></Content>
</Module>

