<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Share Image /w URL">
    <!-- <Require feature="wave-preview" /> -->
    <Require feature="rpc" /> 

  </ModulePrefs>
  <Content type="html">
    <![CDATA[     
       <script src="http://antimatter15.com/misc/wave/pygowave.js"></script>
       <script src="http://antimatter15.com/misc/wave/diff_match_patch.js"></script>
       <img id ="image" src=""/>
       <textarea id="text" style="width: 100%;height: 20px;position:absolute:top:0;left:0;border:0;padding:0;margin:0" onkeyup="keyUp()"></textarea>
       <script type="text/javascript">
        var caret = null;
        var lasttext = ""
        
        var diff = new diff_match_patch()
          
        function updatePosition(){
          var ta = document.getElementById("text");
          if(typeof ta.createTextRange != "undefined")
            caret = document.selection.createRange().duplicate();
        }
        
        function keyUp(){
          var ta = document.getElementById("text");
          var state = {}
          var time = wave.getTime();
          if(lasttext != ta.value){
            if(ta.value == ""){resetGadget()}
            var d = diff.diff_main(lasttext, ta.value)
            var patches = diff.patch_make(lasttext, ta.value, d)
            var text = diff.patch_toText(patches);
            state[time.toString()] = text
            wave.getState().submitDelta(state)
            lasttext = ta.value
          }
        }
        
        function resetGadget(){
          var keys = wave.getState().getKeys()
          var state = {}
          for(var i = 0; i < keys.length; i++){
            state[keys[i]] = null;
          }
          wave.getState().submitDelta(state)
        }
        
        function stateChanged(){
          updatePosition();
          var ta = document.getElementById("text");
          try{
            if(ta.selectionStart){
              var begin = ta.value.substr(0, ta.selectionStart);
              var scroll = ta.scrollTop;
            }
          }catch(err){}
          
          
          var keys = wave.getState().getKeys().sort(function(a,b){
            return a-b
          })
          newval = "";
          var last = 0
          for(var i = 0; i < keys.length; i++){
              try{
                last = parseInt(keys[i])
                
                var d = diff.patch_fromText(wave.getState().get(keys[i]))
                var results = diff.patch_apply(d, newval)
                newval = results[0]
              }catch(err){
                console.error(err)
              }
          }
          ta.value = newval
          lasttext = ta.value
          
          try{
            if(caret && ta.createTextRange){
              caret.select();
            }else if(ta.selectionStart){
              var scroll = ta.scrollTop;
              if(ta.setSelectionRange){
                  ta.focus();
                  ta.setSelectionRange(begin.length, begin.length);
              }
              ta.scrollTop = scroll;
            }
          }catch(err){}

          var im = document.getElementById("image");
          im.src = ta.value;
        }
        
        function init(){
          if(wave && wave.isInWaveContainer()){
            wave.setStateCallback(stateChanged)
          }
          var ta = document.getElementById("text");
          ta.onchange = ta.onclick = ta.onselect = function(){updatePosition()};
        }
        gadgets.util.registerOnLoadHandler(init);
        
       </script>

    ]]>
  </Content>
</Module>

