(function($) {
	var plugins = [
		{
			"id": "CHOOSE",
			"name": "Please choose your conversion ...",
			"convert": function(input) {
				return "";
			}
		},
		{
			"id": "base64encode",
			"name": "Base64 encode",
			"convert": function(input) {
				return btoa(input);
			}
		},
		{
			"id": "base64decode",
			"name": "Base64 decode",
			"convert": function(input) {
				try {
					return atob(input);
				} catch (exception) {
					return "Invalid base64 input string.";
				}
			}
		},
		{
			"id": "encodeuri",
			"name": "Encode URI",
			"convert": function(input) {
				return encodeURI(input).replace(/%5B/g, '[').replace(/%5D/g, ']');
			}
		},
		{
			"id": "decodeuri",
			"name": "Decode URI",
			"convert": function(input) {
				return decodeURI(input)
			}
		},
		{
			"id": "encodeuricomponent",
			"name": "Encode URI component",
			"convert": function(input) {
				return encodeURIComponent(input).replace(/[!'()*]/g, function(c) {
					return '%' + c.charCodeAt(0).toString(16);
				});
			}
		},
		{
			"id": "decodeuricomponent",
			"name": "Decode URI component",
			"convert": function(input) {
				return decodeURIComponent(input)
			}
		}
	];
	var optiontemplate = "<option name='{identifier}'>{name}</option>";
	var template = "<div id='wrapper-{index}'><textarea id='input-{index}' class='input'>{content}</textarea>"
		+ "<select id='type-{index}' class='conversion' onchange='den.convert(this);'>"
		+ "{options}"
		+ "</select></div>";
	var options = "";
	var i, plugin, option;
	for (i = 0; i < plugins.length; i++) {
		plugin = plugins[i];
		option = optiontemplate.replace(/\{identifier\}/g, plugin.id).replace(/\{name\}/g, plugin.name);
		options += option;
	}
	template = template.replace(/\{options\}/g, options);

	$(document).ready(function() {
		var $new = $(template.replace(/\{index\}/g, "0").replace(/\{content\}/g, "Please enter your input here."));
		$("body").append($new);
	});

	function getPluginById(id) {
		for (i = 0; i < plugins.length; i++) {
			if (plugins[i].id === id) {
				return plugins[i];
			}
		}
		return null;
	}

	function convert(select) {
		var $select = $(select);
		var selectid = $select.attr("id");
		var inputIndex = +selectid.split("-")[1];
		var outputIndex = inputIndex + 1;
		var $input = $("#input-" + inputIndex);
		var $output = $("#input-" + outputIndex);
		var appendNewOutput = false;
		var input = $input.val();
		var conversion = $select.find(":selected").attr("name");
		var output;
		var plugin;
		if ($output.length == 0) {
			appendNewOutput = true;
		}
		plugin = getPluginById(conversion);
		if (plugin !== null) {
			output = plugin.convert(input);
		} else {
			output = "internal error. Sorry.";
		}
		if (appendNewOutput) {
			$output = $(template.replace(/\{index\}/g, "" + outputIndex).replace(/\{content\}/g, output));
			$("body").append($output);
		} else {
		$output.val(output);
		}

		clean(outputIndex);
	}

	function clean(index) {
		var found = true;
		var $wrapper;
		$("#type-" + index + " option[name=CHOOSE]").prop("selected", true);
		index++;
		do {
			$wrapper = $("#wrapper-" + index);
			if ($wrapper.length > 0) {
				$wrapper.remove();
				index++;
			} else {
				found = false;
			}
		} while (found);
	}

	var den = {};
	den.convert = convert;
	window.den = window.den || den;
	
})(jQuery);