rlbisbe/index.html

## index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="/Scripts/jquery-1.6.4.js"></script>
    <script src="/Scripts/jquery.signalR-2.0.3.js"></script>
    <script src="/Scripts/jquery.layout.js"></script>

    <script src="/signalr/hubs"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
    <script>
        $(function () {
            $('body').layout({ applyDefaultStyles: true });
            var editor = ace.edit("editor");
            var islistening = true;
            editor.setTheme("ace/theme/monokai");
            editor.getSession().setMode("ace/mode/javascript");

            var document = $.connection.documentHub;
            document.client.update = function (message) {
                islistening = false;
                editor.setValue(message);
                islistening = true;
            };

            $.connection.hub.start().done(function () {
                editor.getSession().on('change', function (e) {
                    if (islistening == false) {
                        return;
                    }
                    document.server.update(editor.getValue());
                });
            });
        });
    </script>
    <style type="text/css" media="screen">
        #editor {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>


    <div class="ui-layout-center">

        <div id="editor">
            function foo(items) {
            var x = "All this is syntax highlighted";
            return x;
            }
        </div>
    </div>
    <div class="ui-layout-north">North</div>
    <div class="ui-layout-south">South</div>
    <div class="ui-layout-east">East</div>
    <div class="ui-layout-west">West</div>
</body>
</html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title></title>
	<script src="/Scripts/jquery-1.6.4.js"></script>
	<script src="/Scripts/jquery.signalR-2.0.3.js"></script>
	<script src="/Scripts/jquery.layout.js"></script>

	<script src="/signalr/hubs"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
	<script>
	$(function () {
	$('body').layout({ applyDefaultStyles: true });
	var editor = ace.edit("editor");
	var islistening = true;
	editor.setTheme("ace/theme/monokai");
	editor.getSession().setMode("ace/mode/javascript");

	var document = $.connection.documentHub;
	document.client.update = function (message) {
	islistening = false;
	editor.setValue(message);
	islistening = true;
	};

	$.connection.hub.start().done(function () {
	editor.getSession().on('change', function (e) {
	if (islistening == false) {
	return;
	}
	document.server.update(editor.getValue());
	});
	});
	});
	</script>
	<style type="text/css" media="screen">
	#editor {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	}
	</style>
	</head>
	<body>


	<div class="ui-layout-center">

	<div id="editor">
	function foo(items) {
	var x = "All this is syntax highlighted";
	return x;
	}
	</div>
	</div>
	<div class="ui-layout-north">North</div>
	<div class="ui-layout-south">South</div>
	<div class="ui-layout-east">East</div>
	<div class="ui-layout-west">West</div>
	</body>
	</html>