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

<form method="POST" id="edit-form">
<p id="buttons">
	<span id="bgsave-status"></span>
	<span class="notice" id="body-notice">&nbsp; {"You must enter body content."}</span>
	<input type="submit" value="{"Save Stylesheet"}" class="autosave-clear" />&nbsp;
	<input type="submit" value="{"Save &amp; Keep Editing"}" id="bgsave" />&nbsp;
	<a href="/admin/cancel?type=Designer&id={{ file|urlencode }}&return={{ $_SERVER['HTTP_REFERER']|urlencode }}" onclick="return $.cancel_autosave ('{"Are you sure you want to cancel and lose any changes?"}')">{"Cancel"}</a>
</p>

<p><textarea name="body" id="code-body" cols="90" rows="28">{{ body }}</textarea>
<br />{"Preview with layout"}: <select name="layout" id="layout">
{% foreach layouts %}
	<option value="{{ loop_value }}"{% if loop_value == 'default' %} selected{% end %}>{{ loop_value }}</option>
{% end %}
</select><br />
<iframe src="/designer/csspreview?layout=default" id="preview" frameborder="0" width="1022" height="300" style="border: 1px solid #ccc"></iframe></p>
</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/css/css.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.bgsave.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/css',
			theme: 'default',
			indentWithTabs: true,
			lineNumbers: true,
			onFocus: function () {
				try {
					$('form').autosave ();
				} catch (e) {}
			}
		}
	);

	$('#edit-form').verify_values ({
		handler: 'designer/editstylesheet',
		callback: function (failed) {
			// highlight the failed elements
			for (var i = 0; i < failed.length; i++) {
				$.add_notification ($('#' + failed[i] + '-notice').text ());
			}
		},
		reset: function (fields) {
			for (var i = 0; i < fields.length; i++) {
				$('#' + fields[i] + '-notice').hide ();
			}
		}
	});
	{% foreach failed %}
	$.add_notification ($('#{{ loop_value }}-notice').text ());
	{% end %}

	// increase editor and preview height if window is tall enough
	$('.CodeMirror-scroll').height ($(window).height () / 2 - 45);
	$('#preview').height ($(window).height () / 2 - 60);
	$('html,body').css ({overflow: 'hidden'});
	/*if ($(window).height () > 768) {
		var height_diff = $(window).height () - 768;
		$('.CodeMirror-scroll').height ($('.CodeMirror-scroll').height () + Math.floor (height_diff / 2));
		$('#preview').height ($('#preview').height () + Math.floor (height_diff / 2));
	}*/

	$('#edit-form').autosave ();
	$('#edit-form').bgsave ({
		url: '/designer/bgsave?file=',
		id: '{{ file }}',
		msg_saving: '{"Saving..."}',
		msg_saved: '{"Saved!"}',
		msg_failed: '{"Failed to save..."}'
	});

	filemanager_last_preview = _codemirror.getValue ();
	filemanager_interval = setInterval (function () {
		var css = _codemirror.getValue (),
			layout = $('#layout').val ();

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