console.clear();

'use strict';

function validateText(value) {
	return value !== '' ? true : false;
}

function saveValue(value) {
	console.log('save to server: ' + value);
}

$('body').on('click', '[editable]', function(event) {
	event.preventDefault();

	var $element = $(this);

	var events = {
		aftersave: $element.attr('editable-aftersave') ? $element.attr('editable-aftersave') : null,
		beforesave: $element.attr('editable-beforesave') ? $element.attr('editable-beforesave') : null
	};

	var type = $element.attr('editable');

	function endEdit() {
		$element
			.insertAfter(this)
			.text( $(this).val() );

		if (events.aftersave)
			window[events.aftersave]($(this).val());

		$(this).remove();
	}

	$('<input>')
		.insertAfter($element)
		.attr('type', type)
		.val( $element.text() )
		.focus()
		.select()
		.on('keyup', function(event) {
			if (event.which === 13) {
				if (events.beforesave) {
					var result = window[events.beforesave]($(this).val());

					if (result) {
						endEdit.call(this);
					}
				} else {
					endEdit.call(this);
				}				
			} else if (event.which === 27) {
				$(this).trigger('blur');
			}
		})

	$('<button>')
	.insertAfter($('<input>'))
	.css

		.on('blur', function(event) {
			$element.insertAfter(this);
			$(this).remove();
		});

	$element.remove();
});