<p class="autosave-notice autosave-add">{"Auto-saved data found."} <a href="#" class="autosave-restore">{"Click to restore."}</a></p>

<form method="POST" id="add-form">

<p id="buttons">
	<span class="notice" id="body-notice">&nbsp; {"You must enter body content."}</span>
	<span class="notice" id="invalid-php-functions-notice">&nbsp; {"Invalid PHP functions detected. Please remove to save changes."}</span>
	<input type="submit" value="{"Create Layout"}" class="autosave-clear" />&nbsp;
	<a href="javascript:history.go(-1)" onclick="return $.cancel_autosave ('{"Are you sure you want to cancel and lose any changes?"}')">{"Cancel"}</a>
</p>

<p id="name"><strong>{"New Layout Name"}</strong>: <input type="text" name="name" id="name-field" size="30" value="{{ name }}" placeholder="theme/name" /></p>
<span class="notice" id="name-notice1">{"Please enter a name for your layout."}</span>
<span class="notice" id="name-notice2">{"Your name must be alphanumeric and not a duplicate of an existing layout."}</span>

<div id="layout">
<div id="tags">{"Insert tag"}:&nbsp;
	<a href="#" onclick="_codemirror.replaceRange ('{' + '{ var }}', _codemirror.getCursor (true)); return false">{<span></span>{ var }}</a> &nbsp;
	<a href="#" onclick="_codemirror.replaceRange ('{' + '% foreach %}\n', _codemirror.getCursor (true)); _codemirror.replaceRange ('\n{' + '% end %}', _codemirror.getCursor (false)); return false">{<span></span>% foreach %}</a> &nbsp;
	<a href="#" onclick="_codemirror.replaceRange ('{' + '% if %}', _codemirror.getCursor (true)); _codemirror.replaceRange ('{' + '% end %}', _codemirror.getCursor (false)); return false">{<span></span>% if %}</a> &nbsp;
	<a href="#" onclick="_codemirror.replaceRange ('{' + '! app/handler !}', _codemirror.getCursor (true)); return false">{<span></span>! handler !}</a> &nbsp;
	<a href="#" onclick="_codemirror.replaceRange ('{&quot; text &quot;}', _codemirror.getCursor (true)); return false">{<span></span>" text "}</a></div>
<textarea name="body" id="code-body" cols="90" rows="28">{{ body }}</textarea>

<div class="preview">{"Preview"}:</div>
<iframe src="/designer/preview" id="preview" frameborder="0" height="300" style="border: 1px solid #ccc"></iframe>
</div>

</form>

<link rel="stylesheet" type="text/css" href="/apps/designer/js/codemirror/lib/codemirror.css" />
<!-- link rel="stylesheet" type="text/css" href="/apps/designer/js/codemirror/theme/default.css" / -->
<script type="text/javascript" src="/apps/designer/js/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="/apps/designer/js/codemirror/mode/xml/xml.js"></script>
<script type="text/javascript" src="/apps/designer/js/codemirror/mode/css/css.js"></script>
<script type="text/javascript" src="/apps/designer/js/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="/apps/designer/js/codemirror/mode/htmlmixed/htmlmixed.js"></script>

<script type="text/javascript" src="/js/json2.js"></script>
<script type="text/javascript" src="/js/jstorage.js"></script>
<script type="text/javascript" src="/js/jquery.autosave.js"></script>
<script type="text/javascript" src="/js/jquery.verify_values.js"></script>
<script type="text/javascript">
var _codemirror, filemanager_interval, filemanager_last_preview = '';

$(function () {
	_codemirror = CodeMirror.fromTextArea(
		document.getElementById ('code-body'),
		{
			mode: 'text/html',
			theme: 'default',
			indentWithTabs: true,
			lineNumbers: true,
			onFocus: function () {
				try {
					$('form').autosave ();
				} catch (e) {}
			}
		}
	);

	$('#add-form').verify_values ({
		handler: 'designer/addlayout',
		callback: function (failed) {
			// highlight the failed elements
			for (var i = 0; i < failed.length; i++) {
				if (failed[i] === 'name') {
					if ($('#' + failed[i] + '-field').val ().length === 0) {
						$.add_notification ($('#' + failed[i] + '-notice1').text ());
					} else {
						$.add_notification ($('#' + failed[i] + '-notice2').text ());
					}
				} else {
					$.add_notification ($('#' + failed[i] + '-notice').text ());
				}
			}
		},
		reset: function (fields) {
			for (var i = 0; i < fields.length; i++) {
				$('#' + fields[i] + '-notice').hide ();
			}
		}
	});
	{% foreach failed %}
	if ('{{ loop_value }}' === 'name') {
		if ($('#{{ loop_value }}-field').val ().length === 0) {
			$.add_notification ($('#{{ loop_value }}-notice1').text ());
		} else {
			$.add_notification ($('#{{ loop_value }}-notice2').text ());
		}
	} else {
		$.add_notification ($('#{{ loop_value }}-notice').text ());
	}
	{% end %}

	// increase editor and preview height if window is tall enough
	$('.CodeMirror').height ($(window).height () / 2 - 60);
	$('#preview').height ($(window).height () / 2 - 80);
	$('html,body').css ({overflow: 'hidden'});

	$('#add-form').autosave ();

	filemanager_interval = setInterval (function () {
		var layout = _codemirror.getValue ();
		if (layout != filemanager_last_preview) {
			filemanager_last_preview = layout;
			$.post ('/designer/preview', {layout: layout}, function (res) {
				document.getElementById ('preview').contentDocument.body.innerHTML = res;
			});
		}
	}, 2000);
});
</script>
