{% load static %}{% load url from future %}
<script src="{% static 'webcam/camera.js' %}"></script>
<script src="{% static 'webcam/jquery.webcam.js' %}"></script>
--{{ value }}--
{{ attrs }}
<img id="{{ name }}-picture" src="" with="320" heigh="240">
<textarea id="{{ name }}-area" rows="" cols=""></textarea>
<div id="{{ name }}-camera" class="camera"></div>
<div id="camera-commands" class="camera">
    <a id="{{ name }}-camera-snap" class="btn" href="#" rel="nofollow">snap</a>
    <a id="{{ name }}-camera-delete" class="btn" href="#" rel="nofollow">clear</a>
    <a id="{{ name }}-camera-show" class="btn" href="#" rel="nofollow">show</a>
</div>

<script type="text/javascript">
    var CANVAS_WIDTH = 320;
    var CANVAS_HEIGHT = 240;

    var pos = 0, ctx = null, saveCB, image = [];

    var canvas = document.createElement("canvas");
    canvas.setAttribute('width', CANVAS_WIDTH);
    canvas.setAttribute('height', CANVAS_HEIGHT);

    if (canvas.toDataURL) {
        ctx = canvas.getContext("2d");
        image = ctx.getImageData(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
        saveCB = function (data) {
            var col = data.split(";");
            var img = image;
            for (var i = 0; i < CANVAS_WIDTH; i++) {
                var tmp = parseInt(col[i]);
                img.data[pos + 0] = (tmp >> 16) & 0xff;
                img.data[pos + 1] = (tmp >> 8) & 0xff;
                img.data[pos + 2] = tmp & 0xff;
                img.data[pos + 3] = 0xff;
                pos += 4;
            }
            if (pos >= 4 * CANVAS_WIDTH * CANVAS_HEIGHT) {
                ctx.putImageData(img, 0, 0);
                $("{{ name }}-camera-area").val(canvas.toDataURL("image/png"))
{#                $.post("{{ url }}?save", {type:"data", image:canvas.toDataURL("image/png")}, _post_snap);#}
                pos = 0;
            }
        };
    } else {
        saveCB = function (data) {
            image.push(data);
            pos += 4 * CANVAS_WIDTH;
            if (pos >= 4 * CANVAS_WIDTH * CANVAS_HEIGHT) {
                $.post("{{ url }}", {type:"pixel", image:image.join('|')}, _post_snap);
                pos = 0;
            }
        };
    }
    _post_snap = function(){};
    $("#{{ name }}-camera").webcam({
        width:CANVAS_WIDTH,
        height:CANVAS_HEIGHT,
        mode:"callback",
        swffile:"{% static "webcam/jscam.swf" %}",
        onSave:function (data) { saveCB(data);},
        onCapture:function () { webcam.save();},
        onLoad:function () { var cams = webcam.getCameraList();}
    });
    $("#{{ name }}-camera-snap").click(function () {webcam.capture()});
    $("#{{ name }}-camera-delete").click(function () { $.post( "{{ url }}?rem") });
    $("#{{ name }}-camera-show").click(function () { $("#{{ name }}-camera, #{{ name }}-picture").toggle() });
</script>

