<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Piano" height="180">
    <Require feature="rpc" />
  </ModulePrefs>
  <Content type="html">
    <![CDATA[     
    <script type="text/javascript" src="http://wave-api.appspot.com/public/wave.js"></script>
    <style>
      .piano {
        /*
        background-color: black;
        color: white;
        text-align: center;
        */
        height: 150px;
        overflow: hidden;
      }
      img.key {
        margin: 0;
        padding: 0;
        float: left;
        width: 30px;
        height: 137px;
      }
    </style>
    <div class="piano">
      <img class="key" src="http://wave-instruments.appspot.com/image/piano_wb.png" onclick="javascript:preparePlay('piano-c1')">
      <img class="key" src="http://wave-instruments.appspot.com/image/piano_bb.png" onclick="javascript:preparePlay('piano-d')">
      <img class="key" src="http://wave-instruments.appspot.com/image/piano_bw.png" onclick="javascript:preparePlay('piano-e')">
      <img class="key" src="http://wave-instruments.appspot.com/image/piano_wb.png" onclick="javascript:preparePlay('piano-f')">
      <img class="key" src="http://wave-instruments.appspot.com/image/piano_bb.png" onclick="javascript:preparePlay('piano-g')">
      <img class="key" src="http://wave-instruments.appspot.com/image/piano_bb.png" onclick="javascript:preparePlay('piano-a')">
      <img class="key" src="http://wave-instruments.appspot.com/image/piano_bw.png" onclick="javascript:preparePlay('piano-b')">
      <img class="key" src="http://wave-instruments.appspot.com/image/piano_wb.png" onclick="javascript:preparePlay('piano-c2')">

      <script type="text/javascript">
        function preparePlay(sound) {
          wave.getState().submitDelta({'sound': sound + ',' + new Date()});
        };

        function play(soundId) {
          if (soundId) {
            var soundURL = 'http://wave-instruments.appspot.com/sound/' + soundId.split(',')[0] + '.mp3';
            var embed = document.createElement('embed');
            embed.setAttribute('src', soundURL);
            embed.setAttribute('hidden', true);
            embed.setAttribute('autostart', true);
            document.body.appendChild(embed);
            setTimeout(function(){document.body.removeChild(embed)}, 15000);
          }
        };

        function stateUpdated() {
          play(wave.getState().get('sound'));
        };

        function main() {
          if (wave && wave.isInWaveContainer()) {
            wave.setStateCallback(stateUpdated);
          }
        };

        gadgets.util.registerOnLoadHandler(main);
      </script>
    </div>
    ]]>
  </Content>
</Module>


