<Module>
  <ModulePrefs
    title="Magnetic Fridge Poetry"
    height="320"
    description="Create poetry by moving words around in the gadget like they were sitting on your fridge"
    author="Douwe Osinga"
    author_email="douwe@gmail.com">
   <Require feature="rpc"/>
  </ModulePrefs>

<UserPref name="words"
  datatype="hidden" />

  <Content type="html">
  <![CDATA[
  <script src="http://wave-api-dmo.appspot.com/public/jquery.js"></script>
  <script src="http://wave-api-dmo.appspot.com/public/jquery-ui.js"></script>
  <script type="text/javascript"
      src="http://wave-api.appspot.com/public/wave.js"></script>

  <script>
    var words = "hear|the|marshmallow|upset|in|your|ears|i|pursue|for|you|you|offered|it|nothing" +
                "|so|i|need|less|my|feet|are|untied|my|head|healed|and|something" +
                "|else|to|gain|resigned|nights|and|winter|sights|my|strength|ways|is" +
                "|and|we|blue|and|you've|been|dreading|this|day|will|be|worse|than|the|first";
    words = words.split("|");


  function stateUpdated() {
    var state = wave.getState();
    var delta = {};
    var dirty = false;
    for (var i = 0; i < words.length; ++i) {
      var pos = state.get('word_' + i);
      if (!pos) {
        x = Math.ceil(150 * Math.random());
        y = Math.ceil(150 * Math.random());
        delta['word_' + i] = '' + x + '|' + y;
        dirty = true;
      } else {
        var pos = pos.split('|');
        x = parseInt(pos[0]);
        y = parseInt(pos[1]);
      }
      $('#word_' + i).css({left: x + 'px', top: y + 'px', position: 'absolute'});
    }
    if (dirty) {
      state.submitDelta(delta);
    }
  }

  function main() {
    for (var i = 0; i < words.length; ++i) {
      var html = '<div class="block" id="word_' + i + '" >' + words[i] + '</div>'
      div = $(html);
      div.draggable();
      div.mouseup(function(){
        var delta = {};
        var position = $(this).position();
        delta[$(this).attr('id')] = position.left + '|' + position.top;
        wave.getState().submitDelta(delta);
      });
      $("#container").append(div);
    }
    if (wave && wave.isInWaveContainer()) {
      wave.setStateCallback(stateUpdated);
    }
  };

  gadgets.util.registerOnLoadHandler(main);
  </script>

  <style>
  .block {
    border-left: 1px solid #101010;
    border-top: 1px solid #101010;
    border-right: 2px solid #101010;
    border-bottom: 2px solid #101010;
    background-color: #F8F8F8;
    height: 1px;
    width: 1px;
    display: table;
    margin: 3px;
    padding: 1px;
    cursor: pointer;
    font-family: arial;
    font-size: 14px;
    position: absolute;
  }

  </style>
  <div id="container" style="width:100%; height:100%; border: 0px; position:relative">
    Content3!
  </div>

]]></Content>
</Module>

