// CCTV Control 
// 
// Author: 	Florian Raemisch
// Email: 	olf@subsignal.org
//
// cctv-control is a webinterface to control and view 
// mjpeg encoded videos by cctv cameras which are
// proxied by mjpegplexer. camera control is possible
// with arrow-keys, if mjpegplexer is configured 
// properly.
//
// This Software is licensed under the GPL Version 3, 29 June 2007


var cam = 0;
var camHost = "127.0.0.1:8080";
var controlHost = "127.0.0.1:8080";

//create event which is triggered when DOM is ready 
window.onDomReady = initReady;

//change from testbild to default cam when DOM is ready
window.onDomReady(changeCam);

function initReady(fn)	{
	if(document.addEventListener) {
		document.addEventListener("DOMContentLoaded", fn, false);
	}
}

//change currently displayed camera to the one in cam variable
function changeCam()	{
	
	document.getElementById('form').style.visibility = "hidden";
	
	var display = document.getElementById('screen');
	if (cam <= 7 && cam >= 0)	{
			camDisplay = cam + 1;
			display.innerHTML = '<p class="camNumber">' + camDisplay + '</p>';
			display.innerHTML += '<img id="camImage" src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />';
	}
	else	{
			display.innerHTML = '<img id="camImage" src="img/testbild.gif" />';
	}
}

//send control command to currently selected camera
function controlCam(direction)	{
	if (direction == "left" || direction == "right" || direction == "up" || direction == "down")	{
		var request = new XMLHttpRequest();
		request.open("get", "http://" + controlHost + "/cam/" + cam + "/control/" + direction, false);
		request.send();
		return false;
	}
}

//save current screenshot in local storage
function saveImage()	{
	
	var storageFiles = {}, 			//local storage object
	    xhr = new XMLHttpRequest(),
	    blob,
	    fileReader = new FileReader(),
	    snapShot = new Image(),		//dummy-object to display snapshot
	    imgCanvas = document.createElement("canvas"), 
	    imgContext = imgCanvas.getContext("2d");


	xhr.open("GET", 'img/testbild-' + camDisplay + '.png', true);
	xhr.responseType = "arraybuffer";
	
	xhr.addEventListener("load", function () {
		if (xhr.status === 200) {
			
			blob = new Blob([xhr.response], {type: "image/png"});
		
	
			fileReader.onload = function (evt) {	
	        	        var result = evt.target.result;
			
				snapShot.src = result;
	        	        
	        	        try {
	        	            localStorage.setItem("snapShot", result);
	        	        }
	        	        catch (e) {
	        	            console.log("Storage failed: " + e);
	        	        }
			};
			
			fileReader.readAsDataURL(blob);
			showImage();
		}
	}, false);

	xhr.send();
}

function showImage()	{

	//load snapshot from localstorage an display in background
	var display1 = document.getElementById("camImage"),
	    display2 = document.getElementById("formImage"),
	    stor = localStorage.getItem("snapShot");

	if (stor)       {
		display1.setAttribute("src", stor);
		display2.setAttribute("src", stor);
	}

	//make form visible
	document.getElementById("form").style.visibility = 'visible';
}



function keyDown(event)	{

	switch(event.keyCode)	{
		case 49: // 1
			cam =  0;
			changeCam();
			break;
		case 50: // 2
			cam =  1;
			changeCam();
			break;
		case 51: // 3
			cam =  2;
			changeCam();
			break;
		case 52: // 4
			cam =  3;
			changeCam();
			break;
		case 53: // 5
			cam =  4;
			changeCam();
			break;
		case 54: // 6
			cam =  5;
			changeCam();
			break;
		case 55: // 7
			cam =  6;
			changeCam();
			break;
		case 56: // 8
			cam =  7;
			changeCam();
			break;
		case 37: // arrow left
			controlCam("left");
			break;
		case 38: // arrow up
			controlCam("up");
			break;
		case 39: // arrow right
			controlCam("right");
			break;
		case 40: // arrow down
			controlCam("down");
			break;
		case 13: //enter
			saveImage();
			break;
	}	
}