var viewWidth = 768;
var viewHeight = 576;
var checkboxSize = 8;
var gridWidth = viewWidth / checkboxSize;
var gridHeight = viewHeight / checkboxSize;
var samplingCanvas, samplingCtx;
var video;
var checkboxHolder = document.getElementById("checkbox_holder");
var checkboxes = [];

var gui,
    settings = {};
settings.threshold = 100;

initGui();
initSamplingCanvas();
initCheckboxes();
getWebcamStream();

function initGui() {
    gui = new dat.GUI();
    gui.add(settings, 'threshold', 0, 255).step(1);
}

function initSamplingCanvas() {
    samplingCanvas = document.getElementById("sampling_canvas");
    samplingCanvas.width = gridWidth;
    samplingCanvas.height = gridHeight;
    samplingCtx = samplingCanvas.getContext('2d');
    samplingCtx.translate(gridWidth, 0);
    samplingCtx.scale(-1, 1)
}

function initCheckboxes() {
    checkboxHolder.style.width = (viewWidth) + "px";
    checkboxHolder.style.height = (viewHeight) + "px";

    for (var i = 0; i < (gridWidth * gridHeight); i++) {
        var b = document.createElement("input");
        b.setAttribute("type", "radio");
        b.style.width = checkboxSize + "px";
        b.style.height = checkboxSize + "px";

        checkboxHolder.appendChild(b);
        checkboxes.push(b);
    }
}

function getWebcamStream() {
    video = document.getElementById("videoElement");

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

    if (navigator.getUserMedia) {
        navigator.getUserMedia({video: true}, videoSuccess, videoError);
    }

    function videoSuccess(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.addEventListener("play", function() {
            setInterval(processFrame, 1000 / 30);
        });
    }

    function videoError(e) {
        // do something
    }
}

function processFrame() {
    var pixels,
        data;

    samplingCtx.drawImage(video, 0, 0, gridWidth, gridHeight);
    pixels = samplingCtx.getImageData(0, 0, gridWidth, gridHeight);
    data = pixels.data;

    for (var i = 0; i < data.length; i+=4) {
        var r = data[i + 0],
            g = data[i + 1],
            b = data[i + 2],
            a = data[i + 3],
            sum = r + g + b,
            avg = sum / 3;

        checkboxes[i / 4].checked = (avg < settings.threshold);
    }
}