<?xml version="1.0" encoding="UTF-8"?>
<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="setprefs" />
</ModulePrefs>

<UserPref name="words"
  default_value="*see|*the|*stone|*set|*in|*your|*eyes|*i|*wait|*for|*you|*you|*gave|*it|*all|*but|*i|*want|*more|*my|*hands|*are|*tied|*my|*body|*bruised|*and|*nothing|*else|*to|*lose|*carefree|*days|*and|*summer|*sounds|*my|*feeble|*ways|*is|*and|*we|*green|*and|*you've|*been|*hoping|*this|*year|*will|*be|*better|*than|*the|*last"
  datatype="hidden" />

<Content type="html"><![CDATA[
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>

  <script>
  var prefs;
  var magnets;
    
  function saveState() {
    res = "";
    words = $(".block");
    for (var i = 0; i < words.length; i++) {
      var word = words.eq(i);
      if (res != '') {
        res += '|';
      }
      res += word.text() + '|'
      var position = word.position();
      res += position.left + '|' + position.top;
    }
    prefs.set("words", res);
  }

  function updateField() {
    $(".block").remove();
    var words = magnets.split("|");
    i = 0;
    while (i < words.length) {
      word = words[i];
      if (word.charAt(0) == '*') {
        word = word.substr(1);
        x = Math.ceil(280 * Math.random());
        y = Math.ceil(240 * Math.random());
        i += 1;
      } else {
        x = words[i + 1];
        y = words[i + 2];
        i += 3;
      }
      var html = '<div class="block" style="left:' + x + 'px; top:' + y + 'px">' + word + '</div>'
      div = $(html);
      div.draggable();
      div.mouseup(function(){
        saveState();
      })
      $("#container").append(div);
    }
  }
    
  function setPref() {
    var args = this["a"];
    var name = args[1];
    var value = args[2];
    if ((name == "words") && (magnets != value)) {
      magnets = value;
      updateField();
    }
  }

  $(document).ready(function(){
    gadgets.rpc.register("set_pref", setPref);
    prefs = new _IG_Prefs(__MODULE_ID__);
    magnets = prefs.getString("words");
    updateField();
  });
  </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">
  </div>

]]></Content>
</Module>

