<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="HTML Gadget" height="120">
  <Require feature="rpc" />
  <Require feature="dynamic-height"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
    <style type="text/css">
      .CodeMirror-line-numbers {
        width: 2.2em;
        color: #aaa;
        background-color: #eee;
        text-align: right;
        padding-right: .3em;
        font-size: 10pt;
        font-family: monospace;
        padding-top: .4em;
      }
      .CodeMirror-line-numbers > div {
        font-size: 10pt;
        font-family: monospace;
      }
    </style>

    <script type="text/javascript" src="http://wave-api.appspot.com/public/wave.js"></script>
    <script type="text/javascript" src="http://wave-ide.appspot.com/codemirror/js/codemirror.js"></script>
    <script type="text/javascript">

    var editor;
    var previewPane, editorPane, toolbarPane, editPreviewButton;
    var editPreviewState = false;
    var currentCode;
    var firstUpdate = true;

    function stateUpdated() {
        var state = wave.getState ();
        if (firstUpdate) {
            firstUpdate = false;
            onFirstUpdate (state);
        }
        else {
            onUpdate (state);
        }
    }

    function onFirstUpdate (state) {
        currentCode = state.get('code', 'Put your HTML code here');
        setPreview(currentCode);
        gadgets.window.adjustHeight();
    }

    function onUpdate (state) {
      var code = state.get('code', 'Put your HTML code here');
      if (code != currentCode) {
        currentCode = code;
        if (editor)
            editor.setCode (code);
      }
      setPreview(code);
      gadgets.window.adjustHeight();
    }

    function main() {
      currentCode = '';
      initControls ();
      wave.setStateCallback(stateUpdated);

    }

    function initControls () {
      previewPane = document.getElementById('previewPane');
      editorPane = document.getElementById('editorPane');
      toolbarPane = document.getElementById('toolbarPane');
      editPreviewButton = document.getElementById('editPreviewButton')
    }

    function createEditor (callback) {
      var textarea = document.getElementById('code');
      editor = new CodeMirror(CodeMirror.replace(textarea), {
        height: "250px",
        width: "100%",
        content: currentCode,
        parserfile: ["parsexml.js", "parsecss.js", "tokenizejavascript.js", "parsejavascript.js", "parsehtmlmixed.js"],
        stylesheet: ["http://wave-ide.appspot.com/codemirror/css/xmlcolors.css", "http://wave-ide.appspot.com/codemirror/css/jscolors.css", "http://wave-ide.appspot.com/codemirror/css/csscolors.css"],
        path: "http://wave-ide.appspot.com/codemirror/js/",
        autoMatchParens: true,
        lineNumbers : true,
        initCallback: function(editor){
            callback ();
            gadgets.window.adjustHeight();
        }
      });
    }

    function onView () {
      var code = editor.getCode ();
      if (code != currentCode) {
        currentCode = code;
        wave.getState().submitDelta ({'code' : code});
      }
      setPreview(code);
      previewPane.style.display = '';

      editorPane.style.display = 'none';
      gadgets.window.adjustHeight();
    }

    function onEdit () {
      if (!editor) {
        setPreview('<div style="background-color: #efffff; font-size: 10pt"><i>Loading editor...</i></div>');
        createEditor (function () {
          previewPane.style.display = 'none';
          editorPane.style.display = '';
          gadgets.window.adjustHeight();
        });
      }
      else {
          previewPane.style.display = 'none';
          editorPane.style.display = '';
      }
      gadgets.window.adjustHeight();
    }

    function onEditPreview () {
        if(editPreviewState) {
            editPreviewState = false;
            editPreviewButton.innerHTML = 'Edit';
            onView ();
        }
        else {
            editPreviewState = true;
            editPreviewButton.innerHTML = 'View';
            onEdit ();
        }
    }

    function setPreview(code) {
        if((code.indexOf('<script') != -1) || (code.indexOf('<SCRIPT') != -1)) {
            var iframe = document.createElement("iframe");
            previewPane.innerHTML = '';
            previewPane.appendChild(iframe);
            iframe.setAttribute('frameborder', '0');
            iframe.setAttribute('height', '200');
            iframe.setAttribute('width', '100%');

            var doc;
            if ( iframe.contentDocument ) { // DOM
                doc = iframe.contentDocument;
            } else if ( iframe.contentWindow ) { // IE win
                doc = iframe.contentWindow.document;
            }
            doc.__complete = function() {
                var size = doc.getElementById ("__content").clientHeight;
                if (!size)
                    size = 200;
                iframe.height=size;
            };
            doc.__init = function(w) {
                w.wave = wave;
            };
            doc.write("<html><body style=\"margin: 0px;\"><div id=\"__content\">");
            doc.write("<script type=\"text/javascript\">");
            doc.write("document.__init(window);</");
            doc.write("script>");
            doc.write(code);
            doc.write("<script type=\"text/javascript\">");
            doc.write("document.__complete();</");
            doc.write("script>");
            doc.write("</div></body></html>");
            doc.close ();
        }
        else {
            previewPane.innerHTML = code;
        }
    }

    gadgets.util.registerOnLoadHandler(main);
    </script>
    <div style="background-color: #eee; padding: 3px;">
        <div style="background-color: white; padding: 0px;">
            <div id="toolbarPane" style="background-color: #eee; padding:3px">
                <a id="editPreviewButton" href="#" onclick="onEditPreview ();" style="font-size: 9pt;">Edit</a>
            </div>
            <div>
                <div id="editorPane"  style="display: none;">
                    <textarea id="code"></textarea>
                </div>
                <div id="previewPane""></div>
            </div>
        </div>
    </div>
  ]]>
  </Content>
</Module>