<link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_skyblue.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxlayout.js"></script>
<!-- more patterns -->
<script src="../../codebase/patterns/dhtmlxlayout_pattern4e.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern4w.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern4a.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern4j.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern4l.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern4f.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern4g.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern4c.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern5u.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern5e.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern5w.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern6c.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern6e.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern6w.js"></script>
<script src="../../codebase/patterns/dhtmlxlayout_pattern7h.js"></script>
<script src="../../codebase/dhtmlxcontainer.js"></script>
 
<div id="parentId" style="position: relative; top: 20px; left: 20px; width: 600px; height: 400px; aborder: #B5CDE4 1px solid;"></div>
<div id="srcDiv0" style="position: relative; top: 30px; left: 20px; height: 100px;"></div>
<div style="position: relative; height: 70px; top: 30px;"><font color='#009000'>*</font> New patterns, see documentation for details.<br>(additional js files should be included)</div>
<div id="srcDiv1" style="position: relative; top: 30px; left: 20px; height: 120px;"></div>
<script>
var dhxLayout,
layout,
views,
j = 0;
var tds = {};
function addTable(from, to) {
    var table = document.createElement("TABLE");
    document.getElementById("srcDiv" + (j++)).appendChild(table);
    var tbody = document.createElement("TBODY");
    table.appendChild(tbody);
    var tr1 = document.createElement("TR");
    tbody.appendChild(tr1);
    var tr2 = document.createElement("TR");
    tbody.appendChild(tr2);
    for (var q = from; q < to; q++) {
        var td1 = document.createElement("TD");
        var td2 = document.createElement("TD");
        td1.innerHTML = views[q] + (q >= 16 ? " <font color='#009000'>*</font>": "");
        td2.innerHTML = "<img src='../common/imgs/" + String(views[q]).toLowerCase() + ".bmp' style='height: 49px; width: 49px; cursor: pointer;' onclick='loadView(\"" + views[q] + "\");'>";
        tr1.appendChild(td1);
        tr2.appendChild(td2);
        tds[views[q]] = td1;
    }
}
function loadView(view) {
    if (dhxLayout != null)
        dhxLayout.unload();
    dhxLayout = new dhtmlXLayoutObject("parentId", view);
    if (views == null) {
        views = dhxLayout.listViews();
        addTable(0, 16);
        addTable(16, views.length);
    }
    if (tds[layout])
        tds[layout].style.background = "none";
    layout = view;
    if (tds[layout])
        tds[layout].style.backgroundColor = "#BEE7FA";
}</script>