{% load static %}{% load url from future %}
<script src="{% static 'webcam/camera.js' %}"></script>
<script src="{% static 'webcam/jquery.webcam.js' %}"></script>
<style>
    #camera-frame{
        /*position: absolute;*/
        border:1px solid black;
        width: 320px;
        height: 240px;
    }
    #camera-monitor {
        /*position: relative;*/
        width: 320px;
        height: 240px;

    }
</style>
<div id="camera-frame" class="camera">
    <img id="camera-monitor" width="320" height="240" src="{{ initial }}"/>
    <div id="camera-flv" class="camera"></div>
</div>
<div id="camera-commands" class="camera">
    <a id="camera-on" class="btn" href="#" rel="nofollow">Camera On</a>
    <a id="camera-snap" class="btn" href="#" rel="nofollow" style="display:none;">snap</a>
    <a id="camera-delete" class="btn" href="#" rel="nofollow">clear</a>
{#    <a id="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);
                $.post("{{ url }}", {op:"save", type:"data", image:canvas.toDataURL("image/png")}, {{ callback }}, 'json');
                pos = 0;
            }
        };
    } else {
        saveCB = function (data) {
            image.push(data);
            pos += 4 * CANVAS_WIDTH;
            if (pos >= 4 * CANVAS_WIDTH * CANVAS_HEIGHT) {
                $.post("{{ url }}", {op:"save", type:"pixel", image:image.join('|')}, {{callback}}, 'json');
                pos = 0;
            }
        };
    }
    _callback = function(data, textStatus, jqXHR){
        $('#camera-monitor').attr("src", "http://10.11.69.142:8000/static/core/css/images/wait.gif");
        $('#camera-monitor').attr("src", data.refresh);

        $("#camera-on").click();
    };
    $("#camera-flv").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 () {
            $("#camera-commands").show();
        }
    });
    $("#camera-snap").click(function (event) {
        event.preventDefault();
        webcam.capture()
    });
    $("#camera-delete").click(function (event) {
        $.post("{{ url }}", {op:"rem"}, {{callback}})
    });
    $("#camera-on").toggle(function (event) {
            $('#camera-monitor').hide();
            $("#camera-flv object").show();
            $("#camera-snap").show();
            $("#camera-on").text('Off Camera')
        }, function(){
            $('#camera-monitor').show();
            $("#camera-flv object").hide();
            $("#camera-snap").hide();
            $("#camera-on").text('On Camera')
        }
    );
</script>