<?php
if (isset($_GET['layout'])) {
	$url = 'http://cms/?layout=' . $_GET['layout'];
} else {
	$url = 'http://cms/' . (isset($_GET['url']) ? $_GET['url'] : '');
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Testing</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script type="text/javascript" language="javascript" src="/js/jquery/jquery-1.9.1.min.js"></script>
</head>

<body style="margin:0;padding:0">
<div id="toolbar" style="position:static; border-bottom: 2px solid #d00000">
	<input type="button" value="Edit HTML" onclick="wind('raw.html')" />
</div>
<iframe id="iframe" src="<?= $url ?>" width="100%" height="100%" style="border:none;margin:0;padding:0"></iframe>
</body>

<script type="text/javascript">

	EditorClass = function (selector) {

		this.base = 'http://cms/plugins/editor/';
		this.class = 'contenteditable';
		this.static = 'http://static.cms/assets/';
		this.iframe = $(selector);
		this.contents = $(selector).contents();

		this.find = function (selector) {
			return this.contents.find(selector);
		};

		this.handle = function (script, selector) {
			var tags = '';
			var prefix = '.' + this.class + ' ';
			$(selector.split(',')).each(function (i, tag) {
				tags += prefix + tag + ',';
			});
			this.find(tags.replace(/,$/, '')).dblclick(function () {
				subjects.push($(this));
				wind(script + '.php?index=' + (subjects.length - 1).toString());
			});
		};

		/* Kill all links */
		this.find('a').click(function () {
			return false;
		});

		/* Ouline active elements on hover */
		this.find('.' + this.class + ' *').hover(
			function () {
				$('iframe').contents().find('*').css('outline', 'none');
				$(this).css('outline', '3px dotted #999');
			},
			function () {
				$(this).css('outline', false)
			}
		);

		this.handle('image', 'img');
		this.handle('header', 'h1, h2, h3, h4, h5, h6');
		this.handle('paragraph', 'p');
	};

	var Editor;
	var subjects = [];

	$('iframe').load(function () {
		Editor = new EditorClass('iframe');
	});

	function wind(url) {
		window.open(Editor.base + url, '', 'width=800,height=640,resizable=no,location=no,status=no');
	}
</script>

</html>
