{% extends "base.html" %}

{% block extrahead %}
<link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" charset="utf-8" />
<script src="{{STATIC_URL}}js/lib/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>
{% endblock %}

{% block maincontent %}

<!-- <button type="button" id="render">Render</button>

<table width="100%" align="center">
    <tr>
        <td width="50%">
                <textarea id="source" cols="70" rows="30" ></textarea>
        </td>
        <td width="50%">
                <textarea id="dest" cols="70" rows="30" ></textarea>
        </td>
    </tr>
</table>
<iframe>
    
</iframe> -->
<div id="target"> </div>
{% endblock %}

{% block extrabody %}

<script type="text/javascript">
<![CDATA[
    var editor = new CodeMirror(CodeMirror.replace("target"), {
  parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
  path: "{{STATIC_URL}}js/lib/codemirror",
  stylesheet: "{{STATIC_URL}}css/xmlcolors.css",
  content: "Hello world!"
});
]]>
</script>

{% comment %}
<script type="text/javascript">
<![CDATA[
    function serializeAttribute(attr, acc) {
        return acc + ' ' + attr.nodeName + '="'+ attr.nodeValue + '"';
    }

    function serializeElement(element, acc, level)
    {
        var isBlock = false;

        if(element.nodeName != 'span' && element.nodeName != 'p')
            isBlock = true;

        if(isBlock) {
            for(var i=0; i < level; i++)
                acc += '  ';
        }
        
        acc += "<" + element.nodeName;
        
        for(var i=0; i < element.attributes.length; i++)
            acc = serializeAttribute(element.attributes.item(i), acc);

        if(element.firstChild)
        {
            acc += ">\n";

            if(element.firstChild)
                acc = serializeNode(element.firstChild, acc, level+1);

            acc += "\n";
            
            for(var i=0; i < level; i++)
                acc += '  ';

            acc += "</"+element.nodeName + ">";            
        }
        else {
            acc += " />";
        }

        if(isBlock) acc += "\n";
        
        return acc;
    }


    // step-by-step serializer
    function serializeNode(node, acc, level)
    {
        

        if(node.nodeType == 11)
            return serializeNode(node.firstChild, acc, level);

        if(node.nodeType == 1)
            acc = serializeElement(node, acc, level);
        
        else if(node.nodeType == 3)
            acc += node.nodeValue;

        if(node.nextSibling)
            return serializeNode(node.nextSibling, acc, level);
        else
            return acc;
    }

    function serializeXML(element) {
        return serializeNode(element, '', 0);
    }

    // w3c version first
    var there = new XSLTProcessor();
    var here = new XSLTProcessor();

    $.ajax({
        url: "/static/xsl/wl2html_client.xsl",
        dataType: 'xml',
        success: function(data) {
            there.importStylesheet(data);
            console.log('There XSL loaded successfully');
        },
        async: false
    });

    $.ajax({
        url: "/static/xsl/html2wl_client.xsl",
        dataType: 'xml',
        success: function(data) {
            here.importStylesheet(data);
            console.log('Here XSL loaded successfully');
        },
        async: false
    });
    
    $('#render').click(function()
    {
        src = $('#source').val();
        src = src.replace(/\/\s+/g, '<br />');
        var doc = (new DOMParser()).parseFromString(src, "text/xml");
        // console.log("Parsed", doc);
        var along = there.transformToDocument(doc).documentElement;
        // console.log("HTML", along, serializeXML(along) );
        var xfrm = here.transformToDocument(along).documentElement;
        // console.log("WLML", xfrm, serializeXML(xfrm) );
        var out = (new XMLSerializer()).serializeToString(xfrm);
        $('#dest').val(out);
    });
]]>
</script>
{% endcomment %}
{% endblock %}