document.addEventListener('DOMContentLoaded', function () {
	cheangpage();	
    // References to all the element we will need.
    var video = document.querySelector('#camera-stream'),
        image = document.querySelector('#snap'),
        start_camera = document.querySelector('#start-camera'),
        controls = document.querySelector('.controls'),
        take_photo_btn = document.querySelector('#take-photo'),
        delete_photo_btn = document.querySelector('#delete-photo'),
        error_message = document.querySelector('#error-message');


    // The getUserMedia interface is used for handling camera input.
    // Some browsers need a prefix so here we're covering all the options
    navigator.getMedia = ( navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia);


    if(!navigator.getMedia){
        displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
    }
    else{

        // Request the camera.
        navigator.getMedia(
            {
                video: true
            },
            // Success Callback
            function(stream){

                // Create an object URL for the video stream and
                // set it as src of our HTLM video element.
                //video.src = window.URL.createObjectURL(stream);
                video.srcObject = stream

                // Play the video element to start the stream.
                video.play();
                video.onplay = function() {
                    showVideo();
                };
         
            },
            // Error Callback
            function(err){
                displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);
            }
        );

    }



    // Mobile browsers cannot play video without user input,
    // so here we're using a button to start it manually.
    start_camera.addEventListener("click", function(e){

        e.preventDefault();

        // Start video playback manually.
        video.play();
        showVideo();

    });


    take_photo_btn.addEventListener("click", function(e){

        e.preventDefault();

        var snap = takeSnapshot();

        // Show image. 
        image.setAttribute('src', snap);
        image.classList.add("visible");

        // Enable delete and save buttons
        delete_photo_btn.classList.remove("disabled");

        // Pause video playback of stream.
        video.pause();
        search(snap);

    });


    delete_photo_btn.addEventListener("click", function(e){

        e.preventDefault();

        // Hide image.
        image.setAttribute('src', "");
        image.classList.remove("visible");

        // Disable delete and save buttons
        delete_photo_btn.classList.add("disabled");

        // Resume playback of stream.
        video.play();

    });


  
    function showVideo(){
        // Display the video stream and the controls.

        hideUI();
        video.classList.add("visible");
        controls.classList.add("visible");
    }


    function takeSnapshot(){
        // Here we're using a trick that involves a hidden canvas element.  

        var hidden_canvas = document.querySelector('canvas'),
            context = hidden_canvas.getContext('2d');

        var width = video.videoWidth,
            height = video.videoHeight;

        if (width && height) {

            // Setup a canvas with the same dimensions as the video.
            hidden_canvas.width = width;
            hidden_canvas.height = height;

            // Make a copy of the current frame in the video on the canvas.
            context.drawImage(video, 0, 0, width, height);

            // Turn the canvas image into a dataURL that can be used as a src for our photo.
            return hidden_canvas.toDataURL('image/png');
        }
    }


    function displayErrorMessage(error_msg, error){
        error = error || "";
        if(error){
            console.error(error);
        }

        error_message.innerText = error_msg;

        hideUI();
        error_message.classList.add("visible");
    }

   
    function hideUI(){
        // Helper function for clearing the app UI.

        controls.classList.remove("visible");
        start_camera.classList.remove("visible");
        video.classList.remove("visible");
        snap.classList.remove("visible");
        error_message.classList.remove("visible");
    }

});
function cheangpage(){
  var add_page = document.getElementById('add_page');
  var search_page = document.getElementById('search_page');
  var add_icon = document.getElementsByClassName('add_icon')[0];
  
  if (add_icon.innerHTML == "add")
  {
	add_icon.innerHTML = "search";
	add_page.style.display = "";
	search_page.style.display = "none";
	var xhr = new XMLHttpRequest();
    xhr.open('POST', '/add', true);
    var formData = new FormData();
    xhr.onload = function(e) {    };
    xhr.send(formData);
  }else{
	add_icon.innerHTML = "add";
	add_page.style.display = "none";
	search_page.style.display = "";
	
  }
};
function setinit(typ, pid){
	if (pid != "0"){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/' + typ + '/' + pid, true);
    xhr.onload = function(e) {
    document.getElementById("plast" + pid).innerHTML = "آخرین حضور: " + xhr.response;
    };
    xhr.send();
}};
function cer_per (name, nave, last, pid) {
	var per = document.createElement("DIV");
	var pname = document.createElement("P");
	var pnave = document.createElement("P");
	var plast = document.createElement("P");
	var lex = document.createElement("DIV");
	var ini = document.createElement("A");
	var out = document.createElement("A");
	
	pname.innerHTML = "نام: " + name;
	pnave.innerHTML = "کد ملی: " + nave;
	plast.innerHTML = "آخرین حضور: " + last;
	plast.id = "plast" + pid;
	
	lex.className = "flex";
	lex.dir = "ltr";
	
	var aa = '<a class="btn effect01" onclick="setinit(\'out\', ' + pid + ')"><span>ثبت خروج</span></a>';
	aa = aa + '<a class="btn effect01" onclick="setinit(\'ini\', ' + pid + ')"><span>ثبت ورود</span></a>';
	
	lex.innerHTML = aa;
	per.appendChild(pname);
	per.appendChild(pnave);
	per.appendChild(plast);
	
	lex.appendChild(out);
	lex.appendChild(ini);
	
	per.appendChild(lex);
	Persons.appendChild(per);
};
function search (data) {
	Persons.innerHTML = "<h4>مشخصات فرد</h4>";
        // define data and connections
    var blob = new Blob([data]);
    var url = URL.createObjectURL(blob);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/search', true);
    
        // define new form
    var formData = new FormData();
    formData.append('image', data);
        
        // action after uploading happens
    xhr.onload = function(e) {
    	var text = xhr.response;
    	if (text == "0" || text == ""){return;}
    	var users = JSON.parse(text);
    	var img = users.pop();
    	snap.src = img;
    	for (index in users){
    	    var user = users[index];
			if (user == "0") {cer_per("یافت نشد.", "", "00:00", "0");}
			else {cer_per(user[1], user[2], user[3], user[0]);}
		}
    };
    
        // do the uploading
    xhr.send(formData);
    
};
function savenew(){
	var fname = document.getElementById("fname");
	var fnav = document.getElementById("fnav");
	var add_result = document.getElementById("add_result");
	
	var xhr = new XMLHttpRequest();
	var formData = new FormData();
    formData.append('name', fname.value);
    formData.append('nav', fnav.value);
    
    
    xhr.onload = function(e) {
		var text = xhr.response;
		if (text == "1") {add_result.innerHTML = "با موفقیت ثبت شد.";add_result.style.color = "green";}
		else if (text == "0") {add_result.innerHTML = "مشکلی پیش آمد دوبار امتحان کنید.";add_result.style.color = "red";}
		else {add_result.innerHTML = text;add_result.style.color = "red";}
    };
    xhr.open('POST', '/savenew', true);
    xhr.send(formData);
};