@Title{Blog}@
@CSS{
	#controls{
		list-style:none;
		padding:0;
		margin:0;
	}
	
	#controls li{
		display:inline;
	}
}@
@JavaScript{
var buttonsPosOffset;

function setTextAreaHeight(){
	$("textarea").height(window.innerHeight-$("h3:first-child").offset().top-buttonsPosOffset-50);
	//console.log(window.innerHeight-$("h3:first-child").offset().top-buttonsPosOffset-30);
}
$(function(){
	buttonsPosOffset=window.innerHeight-$("#buttons").offset().top;
	//console.log(buttonsPosOffset);
	setTextAreaHeight();
	
	$("#controls button").click(function(e){
		e.preventDefault();
		var tag=$(this).attr("tag");
		console.log(tag);
		console.log($("#draft"));
	});
});

$(window).resize(setTextAreaHeight);
}@
@ButtonsRight{
	<button onclick="window.location.href='/blog/manage'" title="Manage">
		<img src="/images/library.svg" alt="Library" />
	</button><br/>
	<button type="submit" form="blogForm" title="Save">
		<img src="/images/save.svg" alt="Save" />
	</button>
}@
@Body{
<h3>Title</h3>
<form action="" method="post" id="blogForm">
	<input name="title" style="width:100%" value="<?= htmlspecialchars($post->PostTitle) ?>" />
	<h3>Content</h3>
	<ul id="controls">
		<li><button tag="i">Italic</button></li>
		<li><button tag="h">Header</button></li>
	</ul>
	<textarea class="allowTabInput" name="draft" id="draft" style="width:100%; height:200px" ><?= htmlspecialchars($post->PostDraft) ?></textarea>
</form>
}@