(function($) {
	var template = "<div id='wrapper-{index}'><textarea id='input-{index}' class='input'>{content}</textarea>"
		+ "<select id='type-{index}' class='conversion' onchange='den.convert(this);'>"
		+ "<option name='CHOOSE'>Please choose your method ...</option>"
		+ "<option name='base64encode'>Base64 encode</option>"
		+ "<option name='base64decode'>Base64 decode</option>"
		+ "</select></div>";
	$(document).ready(function() {
		var $new = $(template.replace(/\{index\}/g, "0").replace(/\{content\}/g, "Please enter your input here."));
		$("body").append($new);
	});
	
	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;
		if ($output.length == 0) {
			appendNewOutput = true;
		}
		switch (conversion) {
			case "CHOOSE":
				output = "";
				break;
			case "base64encode":
				output = btoa(input);
				break;
			case "base64decode":
				output = atob(input);
				break;
			default:
				alert("Unknown: " + conversion);
				output = "ERROR!";
				break;
		}
		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);