<!doctype html>
<title>Weasyprint testing web interface</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
  margin: 20px;
}
img {
  display: block;
}
textarea {
    width: 40em;
    min-height: 50em;
    float: left;
}
#rendered {
    display: block;
    -webkit-box-shadow: 0px 0px 12px #aaa;
       -moz-box-shadow: 0px 0px 12px #aaa;
}
iframe {
    width: 800px;
    height: 800px;
    display: none;
}
#spinner {
    visibility: hidden;
    float: left;
    margin: 0 20px;
}
</style>
<textarea id=html>{{ content }}</textarea>
<img id=spinner src="/static/spinner.gif">
<iframe id=iframe src=""></iframe>
<img id=rendered src="">

<script>
(function() {
    var timeout = null;
    var textarea = document.getElementById('html');
    var image = document.getElementById('rendered');
    var iframe = document.getElementById('iframe');
    var spinner = document.getElementById('spinner');
    var old_content;

    function update_now() {
        if (textarea.value != old_content) {
          old_content = textarea.value;
          spinner.style.visibility = 'visible';
          image.src = '/render.png?html=' + encodeURIComponent(textarea.value);
        }
    }

    function update() {
        if (timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(update_now, 300);
    }

    image.onload = function() {
        spinner.style.visibility = 'hidden';
        iframe.style.display = 'none';
        image.style.display = 'block';
    }

    image.onerror = function() {
        spinner.style.visibility = 'hidden';
        image.style.display = 'none';
        iframe.style.display = 'block';
        iframe.src = image.src;
    }

    textarea.onchange = update;
    textarea.onkeydown = update;
    textarea.onkeyup = update;
    update_now();
})();
</script>
