(function($) {
	var plugins = [
		{
			"id": "CHOOSE",
			"name": "Please choose your conversion ...",
			"convert": function(input) {
				return {
					"status": "OK",
					"content": ""
				};
			}
		},
		{
			"id": "base64encode",
			"name": "Base64 encode",
			"convert": function(input) {
				return {
					"status": "OK",
					"content": btoa(input)
				};
			}
		},
		{
			"id": "base64decode",
			"name": "Base64 decode",
			"convert": function(input) {
				try {
					return {
						"status": "OK",
						"content": atob(input)
					};
				} catch (exception) {
					return {
						"status": "ERROR",
						"content": "Invalid base64 input string."
					};
				}
			}
		},
		{
			"id": "encodeuri",
			"name": "Encode URI",
			"convert": function(input) {
				return {
					"status": "OK",
					"content": encodeURI(input).replace(/%5B/g, '[').replace(/%5D/g, ']')
				};
			}
		},
		{
			"id": "decodeuri",
			"name": "Decode URI",
			"convert": function(input) {
				try {
					return {
						"status": "OK",
						"content": decodeURI(input)
					};
				} catch (exception) {
					return {
						"status": "ERROR",
						"content": "Invalid URI input string."
					};
				}
			}
		},
		{
			"id": "encodeuricomponent",
			"name": "Encode URI component",
			"convert": function(input) {
				return {
					"status": "OK",
					"content": encodeURIComponent(input).replace(/[!'()*]/g, function(c) {
							return '%' + c.charCodeAt(0).toString(16);
						})
				};
			}
		},
		{
			"id": "decodeuricomponent",
			"name": "Decode URI component",
			"convert": function(input) {
				try {
					return {
						"status": "OK",
						"content": decodeURIComponent(input)
					};
				} catch (exception) {
					return {
						"status": "ERROR",
						"content": "Invalid URI component input string."
					};
				}
			}
		}
	];

	var optiontemplate = "<option name='{identifier}'>{name}</option>";
	var template = "<div id='wrapper-{index}' class='wrapper'><textarea id='input-{index}' class='input' onchange='den.update(this);' placeholder='Please enter your 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, ""));
		$("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 result;
		var status;
		var output;
		var plugin;
		if ($output.length == 0) {
			appendNewOutput = true;
		}
		plugin = getPluginById(conversion);
		if (plugin !== null) {
			result = plugin.convert(input);
			output = result.content;
			status = result.status
		} else {
			output = "Internal error. Sorry.";
			status = "ERROR";
		}
		if (appendNewOutput) {
			if (output !== "") {
				$output = $(template.replace(/\{index\}/g, "" + outputIndex).replace(/\{content\}/g, output));
				if (status === "ERROR") {
					$output.find("textarea").addClass("error");
				}
				$("body").append($output);
			}
		} else {
			$output.val(output);
			if (status === "ERROR") {
				$output.addClass("error");
			} else {
				$output.removeClass("error");
			}
			update($output);
		}
	}

	function update(textarea) {
		var $textarea = $(textarea);
		var areaid = $textarea.attr("id");
		var inputindex = +areaid.split("-")[1];
		var $select = $("#type-" + inputindex);
		var conversion = $select.find(":selected").attr("name");
		var plugin = getPluginById(conversion);
		if (plugin !== null) {
			convert($select);
		}
	}

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