var qr_reader = {
	gCtx	   		: null,
	gCanvas	 	: null,
	c		   	: 0,
	stype	   	: 0,
	gUM		 	: false,
	webkit	  	: false,
	moz		 	: false,
	video_area  	: null,
	div_msg	 	: null,
	callback		: null,
	calling_server	: false,
		
	init : function(e){
		console.log('qr_reader.init()');

		if(qr_reader.is_canvas_supported() && window.File && window.FileReader) {
			qr_reader.init_canvas(e);
			var callback 		= (typeof(e.callback) != 'undefined' && e.callback != null) ? e.callback : qr_reader.read;
			qrcode.callback 	= callback;
			qr_reader.set_webcam();

		} else {
			
			var html ='<p id="mp1">QR code scanner for HTML5 capable browsers</p><br>'+
			'<br><p id="mp2">sorry your browser is not supported</p><br><br>'+
			'<p id="mp1">try <a href="http://www.mozilla.com/firefox"><img src="firefox.png"/></a> or <a href="http://chrome.google.com"><img src="chrome_logo.gif"/></a> or <a href="http://www.opera.com"><img src="Opera-logo.png"/></a></p>';

			/*$("#mainbody").style.display="inline";*/
			$("#mainbody").show();
			$("#mainbody").html(html);

		}

		qr_reader.div_msg	= (typeof(e.div_msg) != 'undefined') 	? e.div_msg 	: 'div_msg_qr_reader';
		qr_reader.callback	= (typeof(e.callback) != 'undefined') 	? e.callback 	: null;
	},
	init_canvas : function(e){
		qr_reader.gCanvas = $("#qr-canvas");
		qr_reader.gCanvas.width(e.w);
		qr_reader.gCanvas.height(e.h);
		qr_reader.width 	= e.w;
		qr_reader.height 	= e.h;
		
		var canvas = qr_reader.gCanvas[0];

		canvas.style.width  = e.w + "px";
		canvas.style.height = e.h + "px";
		
		qr_reader.gCtx = canvas.getContext("2d");
		/*qr_reader.gCtx.clearRect(0, 0, (e.w * 2), (e.h * 2));*/
	   /* qr_reader.gCtx.clearRect(100, 100, (e.w * 2), (e.h * 2));*/
	},
	paint_to_canvas: function(){
		/*const width = qr_reader.video_area.videoWidth;
		const height = qr_reader.video_area.videoHeight;
		qr_reader.gCanvas.width = width;
		qr_reader.gCanvas.height = height;*/

		return setInterval(() => {
			/*qr_reader.gCtx.drawImage(qr_reader.video_area, 0, 0, width, height);*/
			qr_reader.gCtx.drawImage(qr_reader.video_area,0,0,qr_reader.width,qr_reader.height);
		}, 16);
	},
	set_webcam : function(e){
		console.log('qr_reader.set_webcam()');
		$("#result").html("- scanning -");
		$("#outdiv").html("<video id='video_area' width='400' height='300' autoplay muted playsinline></video>");

		if(qr_reader.stype==1){
			setTimeout(qr_reader.capture_to_canvas, 500);
			return;
		}

		var n			 	 = navigator;
		qr_reader.video_area = document.getElementById('video_area');

		if(n.getUserMedia) {

			n.getUserMedia({video: {facingMode: 'environment'}, audio: false}, qr_reader.success, qr_reader.error);

		} else if(n.mediaDevices.getUserMedia){

			n.mediaDevices.getUserMedia({video: {facingMode: 'user'}, audio: false}).then(localMediaStream => {

				if ('srcObject' in qr_reader.video_area) {
					qr_reader.video_area.srcObject = localMediaStream;
				} else {
					qr_reader.video_area.src = URL.createObjectURL(localMediaStream);
				}
				qr_reader.video_area.play();

				qr_reader.video_area.addEventListener('canplay', qr_reader.paint_to_canvas);

				qr_reader.gUM = true;
				setTimeout(qr_reader.capture_to_canvas, 250);
			}).catch(e => {
				console.log('set_webcam Error =>', e);
			});

		} else if(n.webkitGetUserMedia){
			qr_reader.webkit = true;
			n.webkitGetUserMedia({video: {facingMode: 'environment'}, audio: false}, qr_reader.success, qr_reader.error);
			
		} else if(n.mozGetUserMedia) {
			qr_reader.moz = true;
			n.mozGetUserMedia({video: {facingMode: 'environment'}, audio: false}, qr_reader.success, qr_reader.error);
			
		}
	
		/* $('#video_area').css('transform', 'rotateY(180deg)'); */
		/* $('#video_area').css('-webkit-transform', 'rotateY(180deg)'); */ /* Safari and Chrome */
		/* $('#video_area').css('-moz-transform', 'rotateY(180deg)'); */ /* Firefox */

		$("#qrimg").fadeTo( "slow" , 0.2);
		$("#webcamimg").fadeTo( "slow" , 1.0);

		qr_reader.stype = 1;
		setTimeout(qr_reader.capture_to_canvas, 500);
	},
	success : function(stream){
		if(qr_reader.webkit) {
			qr_reader.video_area.src = window.webkitURL.createObjectURL(stream);
		} else if(qr_reader.moz) {
			qr_reader.video_area.mozSrcObject = stream;
			qr_reader.video_area.play();
		
		} else {
			/*qr_reader.video_area.src = window.URL.createObjectURL(stream);*/
			/*var binaryData = [];
			binaryData.push(stream);*/
			/*qr_reader.video_area.src = window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}));*/

			/*qr_reader.video_area.src = stream;*/
			/*qr_reader.video_area.src = stream;*/

			/*const mediaSource = new MediaStream();*/
			
			try {
				qr_reader.video_area.srcObject = stream;
				qr_reader.video_area.play();
			} catch (error) {
				qr_reader.video_area.src = URL.createObjectURL(stream);
				qr_reader.video_area.play();
			}


		}
		qr_reader.gUM = true;
		setTimeout(qr_reader.capture_to_canvas, 250);
	},
	error : function(e){
		qr_reader.gUM =   false;
		return;
	},
	capture_to_canvas : function(){
		if(qr_reader.stype != 1){
			return;
		}
		
		if(qr_reader.gUM){
			try{
					
				/*qr_reader.gCtx.scale(2,2);*/
				qr_reader.gCtx.drawImage(qr_reader.video_area,0,0,qr_reader.width,qr_reader.height);
				try{
					qrcode.decode();
				}
				catch(e){	
					setTimeout(qr_reader.capture_to_canvas, 250);
				};
			}
			catch(e){	   
					setTimeout(qr_reader.capture_to_canvas, 250);
			};
		}
	},
	html_entities : function(str){
		return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
	},
	read : function(a){
		var html		= "<br/>";
		var result	  = $("#result");
		var elem		= result[0];
		
		var attr		= JSON.parse(JSON.stringify(elem.dataset));
		var dataString  = { attr, send : true , credential : qr_reader.html_entities(a) };

		if(qr_reader.calling_server == false){
		   qr_reader.update_status({calling_server:true});
			$.ajax({
				type	   		: "POST",
				url				: attr.url,
				data	   		: dataString,
				dataType   		: "json",
				cache	  		: false,
				success			: function(data){
					qr_reader.update_status({calling_server:false});
					
					var div_msg = (typeof(data.div_msg) != 'undefined') ? data.div_msg : qr_reader.div_msg;

					if (data.status == 'ok') {
						
						var new_msg = data.msg;
						
						if(typeof(data.user_image) != 'undefined'){
							new_msg += '<br/><br/>' + data.user_image;
						}
						
						set_msg(div_msg,new_msg,'ok');
						
					}else{
						set_msg(div_msg,data.msg,'error');
						
					}
					setTimeout(qr_reader.capture_to_canvas, 3000);
					
				} ,error: function(xhr, status, error) {
					qr_reader.update_status({calling_server:false});
			   		set_msg(qr_reader.div_msg,error,'error');
					setTimeout(qr_reader.capture_to_canvas, 5000);
				},
			});
		}
	},
	is_canvas_supported : function(e){
		var elem = document.createElement('canvas');

		console.log('qr_reader.is_canvas_supported()');

		return !!(elem.getContext && elem.getContext('2d'));
	},
	update_status : function(e){
		console.log(e);
		qr_reader.calling_server = e.calling_server;
		
		var loading = $('.qr_reader_loading').html();
		
		console.log(loading);
		
		if(e.calling_server == true){
			$('#marks_middle_cell').html(loading);	
		}else{
			$('#marks_middle_cell').html('');
		}
		
		console.log('status updated');
	},
	alert : {
		show : function(e){
			$("#dialog-alert").html("<div style='font-size:2em;line-height:25px'>" + e.msg + "</div>");
			$("#dialog-alert").dialog({
				dialogClass: 'no-close-button',
				resizable: false,
				modal: true,
				title: '',
				height: 250,
				width: 400,
				buttons: [
					{
						text: "Cerrar",
						icons: {
							primary: "ui-icon-close"
						},
						click: function() {
							$( this ).dialog( "close" );
							$('#div_dark').hide();
						},
						'class': 'dialog_button'
					}
				]
			});
			
			$('#div_dark').show();
			
			if(typeof(e.auto_hide_timeout) != 'undefined'){
				
				console.log('e.auto_hide_timeout: ' + e.auto_hide_timeout);
				
				setTimeout(function(){
					$("#dialog-alert").delay().dialog("close");
					$('#div_dark').delay(e.auto_hide_timeout).hide();	
				},e.auto_hide_timeout);
					
			}	
		},
		hide : function(e){
			$('#div_dark').hide();
		},
		z : ''
	},
	z : ''
};