$(document).ready(function(){
    // Initialize the editable-table functionality
    $('#usertable').editableTableWidget();

    $('#btnnewuser').click(function() {
        var newUser = 'User' + String(Math.floor(Math.random() * Math.floor(9999))).padStart(4, '0');

        $('#usertable tbody').append($('<tr class="new"><td>' + newUser + '</td><td>User</td><td class="immutable"><a href="?">0</a></td></tr>'));
        // Call `editableTableWidget()` again to include the newly added `<tr>`
        //   To prevent recreating multiple new editors; reference the already existing `<input>`
        $('#usertable').editableTableWidget({editor: $('#editor')});
    });

   	if (localStorage.getItem('theme') !== null) {
		$('#theme').addClass(localStorage.getItem('theme'));
	}

	$('.logo .sub').click(function(event) {
		var classes = ["tablecloth", "weave", "madras", "tartan", "seigaiha"];

		if (event.ctrlKey) {
			var selectedTheme = classes[~~(Math.random()*classes.length)];

			$('#theme').removeClass(classes.join(' ')).addClass(selectedTheme);
			localStorage.setItem('theme', selectedTheme);
		}
		if (event.altKey) {
			$('#theme').removeClass(classes.join(' '));
			localStorage.removeItem('theme');
		}
	});

});