<!DOCTYPE HTML>
<html>
	<head>
		<title>OxJS SplitPanel Demo</title>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script type="text/javascript" src="../../build/Ox.js"></script>
		<script>
		Ox.load('UI', {debug: true}, function() {
		    function element(options, css) {
		        return Ox.extend({
		            element: Ox.Element().html(JSON.stringify(options))
		        }, options);
		    }
			new Ox.SplitPanel_({
    				elements: [
    					{
    						element: Ox.Element()
    						    .css({backgroundColor: 'rgb(0, 0, 255)'})
    						    .html('{size: 16}'),
    						size: 16
    					},
    					{
    						element: new Ox.SplitPanel_({
    						    elements: [
    						        {
    						            collapsible: true,
    						            element: new Ox.Element()
    						                .css({backgroundColor: 'rgb(0, 255, 0)'})
    						                .html('{collapsible: true, size: 128, resizable: true, resize:[64, 128, 192]}'),
    						            size: 128,
                                        resizable: true,
                                        resize: [64, 128, 192]
    						        },
    						        {
    						            element: new Ox.SplitPanel_({
    						                elements: [
    						                    {
            						                collapsible: true,
        						                    element: Ox.Element()
                        						        .css({backgroundColor: 'rgb(128, 128, 255)'})
                        						        .html('{collapsible: true, size: "10%"}'),
                        						    size: 24
                        						},
                        						{
                        						    element: five = new Ox.SplitPanel_({
                        						        elements: [
                        						            {
                        						                element: Ox.Element()
                        						                    .css({backgroundColor: 'rgb(255, 64, 255)'})
                        						                    .bindEvent('anyclick', function() {
                        						                        five.resizeElement(0, '10%');
                        						                    }),
                        						            },
                        						            {
                        						                element: Ox.Element()
                        						                    .css({backgroundColor: 'rgb(255, 96, 255)'})
                        						            },
                        						            {
                        						                element: Ox.Element()
                        						                    .css({backgroundColor: 'rgb(255, 128, 255)'})
                        						                    .bindEvent('anyclick', function() {
                        						                        five.replaceElement(2, Ox.Element())
                        						                    })
                        						            },
                        						            {
                        						                element: new Ox.TreeList({
                        						                    data: Ox.COUNTRIES
                        						                })
                        						            },
                        						            {
                        						                element: Ox.Element()
                    						                        .css({
                    						                            //position: 'absolute',
                    						                            //display: 'block',
                        						                        //top: 15,
                        						                        //bottom: 0,
                        						                        //height: '200px',
                        						                        overflowY: 'scroll'
                        						                    })
                        						                    .append(
                        						                        Ox.Element()
                    						                            .css({
                    						                                height: '1000px',
                    						                                backgroundColor: 'rgb(255, 192, 255)'
                    						                            })
                        						                    )
                        						            }
                        						        ],
                        						        orientation: 'horizontal'
                        						    })
                        						},
    						                    {
            						                collapsible: true,
        						                    element: Ox.Element()
                        						        .css({backgroundColor: 'rgb(255, 128, 128)'}),
                        						    size: 24
                        						}
    						                ],
    						                orientation: 'vertical'
    						            })
    						        },
    						        {
    						            collapsible: true,
    						            element: new Ox.Element()
    						                .css({backgroundColor: 'rgb(255, 255, 0)'})
    						                .html('{collapsible: true, size: "10%", resizable: true, resize: ["5%", "10%", "15%"]}'),
    						            size: 256
    						        }
    						    ],
    						    orientation: 'horizontal'
    						})
    					},
    					{
    						element: Ox.Element()
    						    .css({backgroundColor: 'rgb(255, 0, 0)'}),
                            size: 16
    					}
    				],
    				orientation: 'vertical'
    			})
    			.css({
    			    position: 'absolute',
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 0
    			})
			    .appendTo($('body'));
		});
		</script>
	</head>
	<body></body>
</html>