var options = JSON.parse(localStorage.getItem('options'));

if (options == null) options = {};

var defaultOptions = {};

function setOption(key, value) {
	options[key] = value;
	if (isLoggedIn) {
		authConnection.send(JSON.stringify({type:'3', options: JSON.stringify(options)}));
	} else {
		localStorage.setItem('options', JSON.stringify(options));
	}
}

function getOption(key) {
	return key in options ? options[key] : defaultOptions[key];
}

function createOption(properties) {
	defaultOptions[properties.id] = properties.default;

	var categoryID = "option_category_" + properties.category.toLowerCase().replace(/ /g,"_");
	if (!$("#" + categoryID).length) {
		$("#optionsMenu").append("<h1>" + properties.category + "</h1><div id='" + categoryID + "'></div>");
	}

	var container = $("#" + categoryID);

	if (properties.type == 'range') {
		container.append("<p><label for='" + properties.id + "'>" + properties.name + "</label><input id='" + properties.id + "' type='range' min='" + properties.min + "' max='" + properties.max + "' step='" + properties.step + "'></p>");

		$("#" + properties.id).val(getOption(properties.id));

		$("#" + properties.id).on("input", function() {
			setOption(properties.id, $(this).val());

			if (properties.callback != null) properties.callback($(this).val());
		});
	} else if (properties.type == 'checkbox') {
		container.append("<p><label for='" + properties.id + "'>" + properties.name + "</label><input id='" + properties.id + "' type='checkbox'></p>");

		$("#" + properties.id).prop("checked", getOption(properties.id));

		$("#" + properties.id).change(function() {
			setOption(properties.id, $(this).is(":checked"));

			if (properties.callback != null) properties.callback($(this).is(":checked"));
		});
	}
}