<!DOCTYPE HTML>
<html>
	<head>
		<title>ox.js SplitPanel Demo</title>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	    <link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
        <script type="text/javascript" src="../../build/js/jquery-1.4.2.js"></script>
        <script type="text/javascript" src="../../build/js/ox.js"></script>
        <script type="text/javascript" src="../../build/js/ox.ui.js"></script>
		<script>
		$(function() {
			new Ox.SplitPanel({
				elements: [
					{
						collapsible: true,
						element: new Ox.Element().options({id: 'top'}).css({background: 'yellow'}).html('top').bindEvent('resize', function() { Ox.print('resize top') }),
						resizable: true,
						resize: [64, 128, 192],
						size: 128
					},
					{
						element: new Ox.SplitPanel({
							elements: [
								{
									collapsible: true,
									element: new Ox.Element().options({id: 'left'}).css({background: 'red'}).html('left'),
									resizable: true,
									resize: [128, 256, 384],
									size: 256
								},
								{
									element: new Ox.Element().options({id: 'center'}).css({background: 'green', overflowY: 'auto'}).html(Ox.repeat('center<br/>', 100)),
									size: 'auto'
								},
								{
									collapsible: true,
									element: new Ox.SplitPanel({
										elements: [
											{
												collapsible: true,
												element: new Ox.Element().options({id: 'righttop'}).css({background: 'cyan'}),
												resizable: true,
												resize: [32, 64, 96],
												size: 64
											},
											{
												element: new Ox.Element().options({id: 'rightmiddle'}).css({background: 'blue'}),
												size: 'auto'
											},
											{
												collapsible: true,
												element: new Ox.Element().options({id: 'rightbottom'}).css({background: 'magenta'}),
												resizable: true,
												resize: [32, 64, 96],
												size: 64
											},
										],
										id: 'right',
										orientation: 'vertical'
									}),
									resizable: true,
									resize: [128, 256, 384],
									size: 256
								},
							],
							id: 'middle',
							orientation: 'horizontal'
						}),
						size: 'auto'
					},
					{
						collapsible: true,
						element: new Ox.Element().options({id: 'bottom'}).css({background: 'orange'}).html('bottom'),
						resizable: true,
						resize: [64, 128, 192],
						size: 128
					},
				],
				orientation: 'vertical'
			}).appendTo($('body'));
		});
		</script>
	</head>
	<body></body>
</html>