{% extends "base.html" %}

{% block extrahead %}
<link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" charset="utf-8" />
<style type="text/css">
    #target {
        border: 2px solid red;              
        background-color: aqua;
        padding: 10px;
        
    }

    #cursor {
        background: black;
        color: white;        
        margin: 0em;
        margin-right: -1px;
        padding: 0em;
        border-right: 1px solid black;
    }
</style>
{% endblock %}

{% block maincontent %}
<div>
    <p>
        Przykładowy tekst, bo ala ma
        <a href="#" class="button"><span class="button-text">Przycisk</span>
            <span class="upper-bg"></span><span class="lower-bg"></span></a>
        ślicznego kotka i burego psa.
    </p>
    <p style="border: 1px solid fuchsia; line-height: 20pt; font-size: 12pt;">
        Ta linijka ma 2pt wysokości, oraz czcionkę 12pt. <button type="button" ><span>Przycisk 2</span></button>  jest super.
    </p>
</div>
{% endblock %}

{% block extrabody %}

<script type="text/javascript">
<![CDATA[    
    $('#target').bind('keydown', function(event) {
        console.log("Keydown:", String.fromCharCode(event.keyCode), event);
        console.log("Selection:", window.getSelection() );
        if(event.keyCode == 37 
         || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40)
            return true;

        if(event.keyCode == 8)
        {
            var selection = window.getSelection();
            if(selection.anchorOffset == 0)
            {
                var r = selection.getRangeAt(0);
                r.setStartBefore( $("#elem")[0] );                

                return true;
            }
            return true;
        }
        
        return true;
    }).
        bind('dragstart', function() { console.log('dragstart'); }).
        bind('dragenter', function() { console.log('dragenter'); }).
        bind('dragover', function() { console.log('dragover'); }).
        bind('dragover', function() { console.log('dragend'); }).
        bind('drag', function() { console.log('drag'); });

    $('*').bind('drop', function(event) { console.log('drop on:', event.target, 'received on', this); });
        

]]>
</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 %}