$(document).ready(function() {
	
	// Sets the proper fixture name in the header and title
	var fixturename = "Robin iForte - Simulated";
	$('#pth').html(fixturename)
	$(document).prop('title', fixturename)
	
	$('body').prepend(generateNavBar());
	var am = 0;
	var mip = 0;
	mip = 1;
	var href = $(location).attr('pathname');
	if (href.indexOf('personality') != -1) am = 1;
	if (href.indexOf('logs') != -1) am = 2;
	if (href.indexOf('sensors') != -1) am = 3;
	if (href.indexOf('discovery') != -1) am = (3 + mip);
	$('#navbar ul li').eq(am).addClass('active');
	
	//handle settings	
	$(document).on('click','#scfg',function() {
		mhdr_status('');
		$('#m-t').html('Site settings');
		var h = '<h3>Password settings</h3>';
		h += c_txt('opswd','Old password','Please put old password (four digits)','','password');
		h += c_txt('npswd','New password','Please put new password (four digits)','','password');
		h += c_txt('npsch','New password check','New passwords check failed','','password');
		$('#m-b').html(h);
		$('.sb').unbind();
		$('#cfg-modal').modal();
		$('.sb').bind('click',function() {
			loader(1);
			var par = ['opswd','npswd','npsch'];
			do_ajax('/set_cfg',pv(par),function (json) {
				if (json) {
					if (json['status'] == 0) {
						mhdr_status('suc');
						close_modal();
						location = '/';
					}
					show_errors(json['status'],par);
					loader(0);
				}
			});
		});	
	});
	
	// handle RDM ident
	var idntb = $('#idnt img');
	$('#idnt').click(function() {
		idntb.toggleClass('a');
	});
});


function get_cookie(n,d,ti=false) {
	var r = d;
	var c = document.cookie.split(';');
	c.forEach(function(v,i) {
		v = v.split('=');
		if (v[0].trim() == n) { 
			if (ti) {
				const par = parseInt(v[1].trim());
				if (!isNaN(par)) {
					r = par;
				}
			} else r = v[1].trim();
		}
	});
	return r;
}

function mhdr_status(c) {
	
	if (c.length == 0) $('#cfg-modal .modal-header').removeClass('suc err');
	else $('#cfg-modal .modal-header').addClass(c);
}

function loader(showheader) {
	if (showheader) $('#cfg-modal .modal-header img').addClass('loader');
	else $('#cfg-modal .modal-header img').removeClass('loader');
}

function do_ajax(p_url,p_data,f,i = -1,a = true) {
	console.log("url : " + p_url);
	console.log("data : " + p_data);
	console.log("callback function : " + f);
	console.log("callback params : " + i);
	console.log("async : " + a);
}

function copy_form_values(dir) {
	
	$('#m-b input:text, #m-b input[type=range]').each(function() {
		var id = $(this).attr('id');
		if (dir == 0) $('#' + id + '_v').html($('#' + id).val());
		else $('#' + id).val($('#' + id + '_v').html());
	});
	$('#m-b select').each(function() {
		var id = $(this).attr('id');
		text = $('#' + id + '_v').html();
		if (dir == 1) {
			$(this).find('option').filter(function () { return $(this).html() == text; }).attr('selected', 'selected');
		} else {
			$('#' + id + '_v').html($(this).find('option:selected').html());
		}
	});
	$('#m-b input:radio').each(function() {
		var id = $(this).attr('name');
		text = $('#' + id + '_v').html();
		label = $(this).parent().find('label').html();
		if (dir == 1) {
			if (label == text) $(this).attr('checked','checked');
		} else {
			if ($(this).is(':checked')) $('#' + id + '_v').html(label);
		}
		
	});
	if (dir == 1) {
		$('#m-b div.form-group').each(function() {
			var len = $(this).find('div.invalid-feedback').length;
			if (len == 0) {
				$(this).append('<div class="invalid-feedback">Wrong value!</div>');
			}
		});
	}
}

function fill_values(d,ids) {
	
	for (i = 0; i < ids.length; i++) {
		$('#' + ids[i] + '_v').html(d[ids[i]]);
	}
}

function show_errors(s,ids) {
	
	if (s) mhdr_status('err');
	for (i = 0; i < ids.length; i++) {
		if (s & (1 << i)) $('#' + ids[i]).addClass('is-invalid').removeClass('is-valid');
		else $('#' + ids[i]).removeClass('is-invalid').addClass('is-valid');
	}
}

function close_modal() {
	
	setTimeout(function() {
		$('#m-b').empty();
		$('#cfg-modal').modal('hide');	
	},500);
}

function pv(p) {
	
	var s = '';
	
	for (var i in p) {
		var o = p[i];
		if (i == 0) s += o + '=';
		else s += '&' + o + '=';
		if ($('#' + o).val() != undefined) s += $('#' + o).val();
		else if ($('input[name=' + o + ']:checked').val() != undefined) s += $('input[name=' + o + ']:checked').val();
	}
	
	return s;
}

function c_txt(n,t,e,c = '',it = 'text') {
	
	var html = '<div class="form-group' + c + '">';
	html += '<label for="' + n + '" class="col-form-label">' + t + '</label>';
	html += '<input type="'+ it +'" class="form-control" id="' + n + '">';
	html += e.length > 0 ? '<div class="invalid-feedback">' + e + '</div>' : '';
	html += '</div>';
	
	return html;
}

function c_btn(t,v,c) {
	
	return '<button class="btn btn-primary btn-block' + c + '" value="' + v + '">' + t + '</button>';
}

function c_opt(n,t,o,pl,vp,lp,e) {
	
	var html = '<div class="form-group">';
	html += '<label for="' + n + '" class="col-form-label">' + t + '</label>';
	html += '<select class="form-control" id="' + n + '">';
	var l = o.length;
	var li = l;
	if (l == 1) li = o[0];
	for (i = 0; i < li; i++) {
		if (l == 1) html += '<option value="' + (i + vp) + '">'+ pl + (i + lp) + '</option>';
		else html += '<option value="' + (i + vp) + '">'+ o[i] + '</option>';
	}
	html += '</select>';
	html += e.length > 0 ? '<div class="invalid-feedback">' + e + '</div>' : '';
	html += '</div>';
	
	return html;
}

function c_rad(n,t,r,e,c) {
	
	var html = '<div class="form-group' + c + '">';
	html += '<legend class="col-form-label">' + t + '</legend>';
	for (i = 0; i < r.length; i++) {
		html += '<div class="form-check form-check-inline">';
		html += '<input class="form-check-input" type="radio" name="' + n + '" value="' + i + '" id="' + n + (i + 1) + '">';
		html += '<label class="form-check-label" for="' + n + (i + 1) + '">' + r[i] + '</label>';
		html += '</div>';
	}
	html += e.length > 0 ? '<div class="invalid-feedback">' + e + '</div>' : '';
	html += '</div>';
	
	return html;
}

function box(t,id,p,su = '',vid = '',bc = '') {
	
	var s = '';
	
	s += '<div class="col-md-6 col-xl-4 box-c' + bc + '">';
	if (id >= 0) s += '<h2>' + t + '<a class="cfg" onclick="open_modal(' + id + ');"><img src="../files/settings.svg"></a></h2>';
	else s += '<h2>' + t + '</h2>';
	s += '<div class="box">';
	for (var j in p) {
		if (p[j][0].length > 0) s += '<h3>' + p[j][0] + '</h3>';
		s += '<ul class="group">';
		for (var i in p[j][1]) {
			l = p[j][1][i].split(";");
			if (l.length == 4) s += l[0]; 
			else s += '<li>' + l[0] + '</li>';
		}
		s += '</ul>';
		s += '<ul class="group vals" id="' + vid + '">';
		for (var i in p[j][1]) {
			l = p[j][1][i].split(";");
			if (l.length == 4) {
				var t = l[3].replace(/&DG/gi,'&deg;');
				s += t;
			} else if (l.length == 3) s += l[2];
			else if (l.length == 2) s += '<li><div id="' + l[1] + '_v">-</div></li>';
			else s += '<li>-</li>';
		}
		s += '</ul>';
	}
	s += su;
	s += '</div>';
	s += '</div>';
	
	return s;
}

function generateNavBar() {
	var o = '<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">';
	
	o += '<div class="container">';
	o += '<a class="navbar-brand" href="./index.html"><img src="../files/robe_logo_white.svg"></a>';
	o += '<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">';
	o += '<span class="navbar-toggler-icon"></span>';
	o += '</button>';
	o += '<div class="collapse navbar-collapse" id="navbar">';
	o += '<ul class="navbar-nav mr-auto">';
	o += '<li class="nav-item">';
	o += '<a class="nav-link" href="./index.html">Status</a>';
	o += '</li>';
	o += '<li class="nav-item">';
	o += '<a class="nav-link" href="./personality.html">Personality</a>';
	o += '</li>';
	o += '<li class="nav-item">';
	o += '<a class="nav-link" href="./logs.html">Logs</a>';
	
	o += '</li>';
	o += '<li class="nav-item snz">';
	o += '<a class="nav-link" href="./sensors.html">RAINS logs</a>';
	o += '</li>';
	
	o += '<li class="nav-item">';
	o += '<a class="nav-link" href="./discovery.html">Discovery</a>';
	o += '</li>';
	o += '<li class="nav-item">';
	o += '<a class="nav-link" href="#" id="scfg">Settings</a>';
	o += '</li>';
	o += '<li class="nav-item">';
	o += '<a class="nav-link" href="#" id="idnt"><img class="rdmi" src="../files/identify.svg"></a>';
	o += '</li>';
	o += '</ul>';
	
	o += '</div>';
	o += '</div>';
	o += '</nav>';
			
	o += '<div id="cfg-modal" class="modal fade" tabindex="-1" role="dialog">';
	o += '<div class="modal-dialog" role="document">';
	o += '<div class="modal-content">';
	o += '<div class="modal-header">';
	o += '<img src="../files/settings.svg">';
	o += '<h5 class="modal-title" id="m-t"></h5>';
	o += '<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
	o += '<span aria-hidden="true">&times;</span>';
	o += '</button>';
	o += '</div>';
	o += '<div class="modal-body" id="m-b">';
	o += '</div>';
	o += '<div class="modal-footer" id="m-f">';
	o += '<button type="button" class="btn btn-primary sb">Save</button>';
	o += '</div>';
	o += '</div>';
	o += '</div>';
	o += '</div>';
	
	return o;	
}


var pre = '';
var dmxsnf = '';

function ptit(t) {
	//	console.log('setting title to ' + t);
	
	if (t == $('#pth').data('title')) return;
	
	//	console.log('set');
	
	if (t.length) $('#pth').data('title',t);
	$('#pth').html($('#pth').data('title') + dmxsnf);
	$('#pt_v').html(pre + $('#pth').html());
	
	//	console.log($('#pth').html());
}

function c_dt(n,t,e,c,it) {
	
	var html = '<div class="form-group' + c + '">';
	html += '<label for="' + n + '" class="col-form-label">' + t + '</label>';
	html += '</div><div class="form-group' + c + '">';
	html += '<input type="' + it + '" class="form-control" id="' + n + '" step="1">';
	html += e.length > 0 ? '<div class="invalid-feedback">' + e + '</div>' : '';
	html += '</div>';
	
	return html;
}

function c_fsens(i,t,u) {
	
	var html = '';
	html += '<div class="form-row">';
	html += '<div class="form-group col-auto"><label class="col-form-label" id="tl' + i + '" for="fts' + i + '">' + t + '</label></div>';
	html += '<div class="form-group col-auto"><select class="form-control" id="fts' + i + '">';
	html += '<option value="0">-</option><option value="1">=</option><option value="2">&lt;</option><option value="3">&gt;</option>';
	html += '<option value="4">&lt;=</option><option value="5">&gt;=</option>';
	html += '</select></div>';
	html += '<div class="form-group col-auto"><input type="text" class="form-control" size="5" id="ftv' + i + '"></div>';
	html += '<div class="form-group col-auto"><label class="col-form-label" for="ftv' + i + '">' + u + '</label></div>';
	html += '</div>';
	
	return html;
}