simple_gadget

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Wave Gadget Title" height="200">
    <Require feature="wave" /> 
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
    <style>
      td { width:50px; }
      td { height:50px; }
      td { background-color:gray; }
      td.o { background-color:red; }
      td.x { background-color:blue; }
    </style>

    <table>
      <tr>
        <td id="c00" onclick="stateChange(0, 0)" />
        <td id="c01" onclick="stateChange(0, 1)" />
        <td id="c02" onclick="stateChange(0, 2)" />
      </tr>
      <tr>
        <td id="c10" onclick="stateChange(1, 0)" />
        <td id="c11" onclick="stateChange(1, 1)" />
        <td id="c12" onclick="stateChange(1, 2)" />
      </tr>
      <tr>
        <td id="c20" onclick="stateChange(2, 0)" />
        <td id="c21" onclick="stateChange(2, 1)" />
        <td id="c22" onclick="stateChange(2, 2)" />
      </tr>
    </table>

    <script type="text/javascript">
      var ClassTable = {'':'o', 'o':'x', 'x':''};
      
      function stateChange(r, c) {
        var state = wave.getState();
        if (state) {
          var cell = document.getElementById('c' + r + c);
          cell.className = ClassTable['' + cell.className];
          state.submitValue(cell.id, cell.className);
state.submitValue('array', [1,2,3]);
state.submitValue('array', '[1,2,3]');
        }
      }

      function stateChanged() {
        var state = wave.getState();
alert(state);
        var ids = state.getKeys();
        for (var i = 0; i < ids.length; i++) {
          var id = ids[i];
          var elm = document.getElementById(id);
if (elm)
          elm.className = state.get(id, '');
        }
      }

      function init() {
        if (wave && wave.isInWaveContainer()) {
          wave.setStateCallback(stateChanged);
        }
      }
      gadgets.util.registerOnLoadHandler(init);
    </script>
    ]]>
  </Content>
</Module>