<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Yes/No/Maybe" height="100" width="550">
  <Require feature="opensocial-templates"/>
  <Require feature="opensocial-data"/>
  <Require feature="dynamic-height"/>
  <Require feature="wave"/>
</ModulePrefs>
<Content type="html"><![CDATA[
  <!-- TODO: Remove the need for jquery and use google.load instead. -->
  <script type="text/javascript"
      src="//wave-api.appspot.com/public/gadgets/areyouin/jquery.js"></script>
  <script type="text/javascript"
      src="//wave-api.appspot.com/public/gadgets/areyouin/ynm.js"></script>
  <style type="text/css">
    /* Zero default margin & padding around common elements */
    body, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, li, ol, p, ul {
      margin: 0;
      border: 0 none #FFFFFF;
      padding: 0;
    }

    body {
      background-color: #FFFFFF;
      color: #000000;
      line-height: 1.4;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 85%;
      text-align: left;
    }

    a {
      color: #0066CC;
      text-decoration: underline;
    }

    a:visited {
      color: #0066CC;
    }

    a:hover {
      text-decoration: none;
    }

    img {
      border: 0 none transparent;
    }

    input, select, table, textarea {
      font-size: 100%;
      font-family: Arial, Helvetica, sans-serif;
    }

    .canvas {
      max-width: 50em;
    }

    td {
      width: 33.3%;
      padding: 6px;
      background-color: #E7EEDA;
      vertical-align: top;
    }

    #yes {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      -moz-border-radius-topleft: 6px;
      -moz-border-radius-bottomleft: 6px;
      -webkit-border-bottom-left-radius: 6px;
      -webkit-border-bottom-left-radius: 6px;
    }

    #no {
      background-color: #F4D9D9;
    }

    #maybe {
      background-color: #FFF0D9;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      -moz-border-radius-topright: 6px;
      -moz-border-radius-bottomright: 6px;
      -webkit-border-bottom-right-radius: 6px;
      -webkit-border-bottom-right-radius: 6px;
    }

    .button {
      border: 1px solid #527b09;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      font-size: 16px;
      text-align: center;
    }

    .button a {
      display: block;
      height: 25px;
      border-top: 1px solid #b1cb40;
      border-left: 1px solid #b1cb40;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      background-color: #99BB00;
      background-image: url('//wave-api.appspot.com/public/gadgets/areyouin/button_gradient.png');
      background-repeat: repeat-x;
      background-position: 0 100%;
      color: #ffffff;
      line-height: 25px;
      text-shadow: rgba(0,0,0,0.5) 1px 1px 0;
      text-decoration: none;
    }

    .button.selected a {
      outline: none;
      border-top: 1px solid transparent !important;
      border-left: 1px solid transparent !important;
      background-image: url('//wave-api.appspot.com/public/gadgets/areyouin/button_gradient_flipped.png');
    }

    .button:hover {
      border-color: #FCDD65;
    }

    #no .button {
      border-color: #660000;
    }

    #no .button:hover {
      border-color: #FCDD65;
    }

    #no .button a {
      border-color: #B55252;
      background-color: #cc0000;
    }

    #maybe .button {
      border-color: #7F6500;
    }

    #maybe .button:hover {
      border-color: #FCDD65;
    }

    #maybe .button a {
      border-color: #FCDD65;
      background-color: #FFCC00;
    }

    .button a span {
      margin-left: 0.25em;
      opacity: 0.66;
      text-shadow: none;
    }

    ul {
      margin: 0 6px 0 6px;
      list-style: none;
    }

    ul li {
      min-height: 29px;
      margin-top: 12px;
      padding-left: 35px;
    }

    .avatar {
      float: left;
      margin-left: -35px;
      border: 1px solid rgba(0, 0, 0, 0.25);
    }

    h2 {
      font-size: 13px;
      line-height: 1.2;
    }

    p {
      font-size: 80%;
      opacity: 0.66;
    }

    .canvas {
    }

    table.columns td.yes {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      -moz-border-radius-topleft: 6px;
      -moz-border-radius-bottomleft: 6px;
      -webkit-border-bottom-left-radius: 6px;
      -webkit-border-bottom-left-radius: 6px;
    }

    table.columns td.no {
      background-color: #f4d9d9;
    }

    table.columns td.maybe {
      background-color: #fff0d9;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      -moz-border-radius-topright: 6px;
      -moz-border-radius-bottomright: 6px;
      -webkit-border-bottom-right-radius: 6px;
      -webkit-border-bottom-right-radius: 6px;
    }

    .status-box {
      position: absolute;
    }

    .status-box input {
      border: 1px solid black;
      font-size: 8pt;
    }

    #status-input {
      display: none;
      border: 1px solid blue;
      background-color: white;
      font-size: 8pt;
      width: 11em;
    }

    .footer {
    }

    .footer img {
      padding: 4px;
      width: 38px;
      height: 23px;
    }

    .footer td {
      padding: 0px;
      background-color: white;
    }

    .footer div {
      text-align: center;
      font-size: 9pt;
      color: gray;
    }
  </style>

  <script type="text/os-template" name="answers-template"
      require="dont_auto_render">
    <table cellspacing="2" cellpadding="0" summary="" width="100%">
      <tr>
        <td id="yes">
          <div class="button">
            <a href="javascript:void()">Yes <span>(${y.length})</span></a>
          </div>
          <ul>
            <li repeat="y"><os:showParticipant person="${Cur}"/></li>
          </ul>
        </td>
        <td id="no">
          <div class="button">
            <a href="javascript:void()">No <span>(${n.length})</span></a>
          </div>
          <ul>
            <li repeat="n"><os:showParticipant person="${Cur}"/></li>
          </ul>
        </td>
        <td id="maybe">
          <div class="button">
            <a href="javascript:void()">Maybe <span>(${m.length})</span></a>
          </div>
          <ul>
            <li repeat="m"><os:showParticipant person="${Cur}"/></li>
          </ul>
        </td>
      </tr>
      <tr if="!responded" id="footer" class="footer">
        <td colspan="3">
          <div>
            <img src="//wave-api.appspot.com/public/gadgets/areyouin/directions.png"/>
            <div>Click an option to cast your vote</div>
          </div>
        </td>
      </tr>
    </table>
  </script>

  <script type="text/os-template" tag="os:showParticipant">
    <img src="${My.person.icon}" width="27" alt="Avatar" class="avatar"/>
    <h2>
      ${My.person.displayName}
    </h2>
    <p id="status-anchor">
      ${My.person.status}
      <a if="My.person.set" href="#" onclick="return onSetStatus(this);" class="link">Set your status</a>
      <a if="My.person.edit" href="#" onclick="return onSetStatus(this);" class="link">Edit</a>
    </p>
  </script>

  <div id="canvas">
    <div id="answer-table"></div>
  </div>

  <!-- Floating stuff -->
  <div id="status-box" class="status-box">
    <form action="" onSubmit="return onSubmitStatus();" id="status-form">
      <input id="status-input" type="text"/>
    </form>
  </div>
]]></Content>
</Module>


