var loop = null, fps = 0, tilttime = 0, container = {}, controller = {}, camerasrc = '';


//Settings...
fps             = 24;
tilttime    = 1500;
camerasrc = 'SOURCE URL OF FRAMES';


//Our video container...
container = document.getElementById('video');

//Our controller...
controller = document.getElementById('controller');


function loadVideoFrame() {
    //Force update...
    container.src = camerasrc + '/cgi-bin/video.jpg';
}


//Setup controls...
document.getElementById('start').addEventListener('click', function() {
    //Begin video...
    loop = function() {
        setTimeout(function() {
            loadVideoFrame();

            loop();
        }, (1000 / parseInt(fps)));
    }

    loop();


    this.disabled = 'disabled';
    document.getElementById('stop').disabled = '';

    console.log('Camera video started');
}, false);
document.getElementById('stop').addEventListener('click', function() {
    //Begin video...
    //clearInterval(loop);

    //Empty container...
    container.src = '';

    this.disabled = 'disabled';
    document.getElementById('start').disabled = '';

    console.log('Camera video stopped');
}, false);
document.getElementById('restart').addEventListener('click', function() {
    this.disabled = 'disabled';

    document.getElementById('stop').click();
    document.getElementById('start').click();

    this.disabled = '';

    console.log('Camera video restarted');
}, false);
document.getElementById('refresh').addEventListener('click', function() {
    //Force update...
    loadVideoFrame();

    console.log('Camera video refreshed');
}, false);