<?php
wp_enqueue_script('jquery-ui-resizable');
?>
<!DOCTYPE html>
<html>
<head>
	<?php wp_head() ?>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<style type="text/css">
	body {
		background-color: #F0F0F0 !important;
		padding: 20px !important;
		margin: 0 !important;
	}
	body:before,
	body:after {
		display: none;
	}
	#edittable_widget {
		background-color: #FFFFFF;
		width: 300px;
		min-width: 300px;
		max-width: 100%;
	}
	#edittable_widget .ui-resizable-handle {
		background-color: #f9b418;
	}
	#edittable_widget_inner {
		padding: 20px;
	}
	#edittable_widget_title {
		font-size: 1.5em;
		cursor: pointer;
	}
	</style>
</head>
<body>
	<div id="edittable_widget">
		<div id="edittable_widget_inner">
			<h1 id="edittable_widget_title" title="Edit Title"><?php the_title() ?></h1>
			<article><?php the_content() ?></article>
		</div>
	</div>
	
	<?php wp_footer() ?>
	<script type="text/javascript">
	!function($) {
		var $edittable_widget = $("#edittable_widget");
		
		var width = localStorage.getItem('edittable_widget_width');
		if( width ) {
			$edittable_widget.css('width', width);
		}
		
		$edittable_widget.resizable({
			grid: 50,
			handles: 'e',
			autoHide: true,
			stop: function(event, ui) {
				localStorage.setItem('edittable_widget_width', ui.size.width);
				$(window).trigger('resize');
			}
		});
	}(jQuery);
	</script>
</body>
</html>