$("#searchform").submit((event)=> {
	// declare vars outside of scopes
	let param = $("#searchval").val();
	let searchby = $("#searchby").val();
	let charid;
	let name;
	let username;
	let forum;
	// store JSON data here
	let managechar;
	if(searchby == 1) {
		charid = param;
	} else if(searchby == 2) {
		name = param;
	} else if(searchby == 3) {
		username = param;
	} else {
		forum = param;
	}

	if(charid != "" && charid != null) {
		function rtChar() {
			return Promise.resolve($.get("data.php?charid=" + encodeURIComponent(charid), (data)=> {
				// console.log(data);
			}));
		}
	}
	if(name != "" && name != null) {
		function rtChar() {
			return Promise.resolve($.get("data.php?name=" + encodeURIComponent(name), (data)=> {
				// console.log(data);
			}));
		}
	}
	if(username != "" && username != null) {
		function rtChar() {
			return Promise.resolve($.get("data.php?username=" + encodeURIComponent(username), (data)=> {
				// console.log(data);
		}));
		}
				}
				if(forum != "" && forum != null) {
					function rtChar() {
						return Promise.resolve($.get("data.php?forum=" + encodeURIComponent(forum), (data)=> {
							// console.log(data);
						}));
					}
				}
	let table = rtChar();
	table.then((value)=>{
		let data = value;
		$("#resultstbl").DataTable({
			destroy: true,
			paging: false,
			info: false,
			data: data,
			columns: [
				{'data': 'username'},
				{'data': 'charid'},
				{'data': 'name'},
				{'data': 'forumaccount'},
				{'data': 'firstseen'},
				{'data': 'lastseen'},
				{
					'data': null,
					render: (data)=> {
						let hours = Math.round(data.playtime / 60) + " Hours";
						return hours;
					}
				},
				{
					'data': null,
					render: (data)=> {
						// button being set in the table and assigning unique ID's to the button
						let managebtn = '<button class="btn btn-lg btn-outline-warning" id="'+data.name+'/'+data.charid+'" >Manage 
                		Character</button>';
						// Hint popup triggered by mouse over button event
						new jBox('Tooltip', {
							attach: '.btn-outline-warning',
							trigger: 'mouseenter',
							onCreated: function () {
								this.setContent('Double click to manage character!');
							},
							closeOnClick: true
						});
						return managebtn;	
					}
				}
			]
		});
	});
	function test (setID) {
		$(".btn-outline-warning").click((e)=> {
			setID = e.target.id;
			return setID;
		});
	}
	console.log(test());
	// jQuery plugin that triggers at click of $(".btn-outline-warning")
	new jBox('Modal', {
		attach: '.btn-outline-warning',
		trigger: 'click',
		color: 'black',
		animation: 'flip',
		closeButton: 'title',
		onCreated: function () {
			/*The intent is to capture the unique ID of the button which, when it is a single button in the table, it works flawlessly.	 
         	 However, multiple buttons in the table only returns the first button's ID. I have tried the following as well with no 
          	results:
				$.each($parseHTML($('.btn-outline-warning').attr('id')), (i,item)=> {
					console.log(item);
				});
   			*/
			/*let btnID = $(".btn-outline-warning").attr('id');
			let lightsaber = btnID.split('/');
			let noBueno = lightsaber[0];
			let muchoProblemo = lightsaber[1];

			this.setTitle('Manage Character: ' + muchoProblemo + ' ' + noBueno);
			let actionbtns = 
			'<button class="btn btn-lg btn-warning" id="skinresetbtn">Skin Reset</button> '+
			'<button class="btn btn-lg btn-warning" id="changenamebtn">Change Name</button> '+
			'<button class="btn btn-lg btn-warning" id="changedobbtn">Change DOB</button>';
			this.setContent(actionbtns);*/
		}
	}
});