<link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_black.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_web.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_terrace.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxlayout.js"></script>
<script src="../../codebase/dhtmlxcontainer.js"></script>
<style>
    td { cursor: default; }
    tr.sep td { font-size: 2px; height: 5px; }
</style>
 
<div id="parentId" style="position: relative; top: 20px; left: 20px; width: 600px; height: 400px;"></div>
<table style="margin-top: 40px; margin-left: 20px;" cellspacing="1" cellpadding="1">
    <tr>
        <td align="center"><b>Skin Name</b></td>
        <td align="center"><b>CSS to include</b></td>
    </tr>
    <tr class="sep"><td colspan="2"></td></tr>
    <tr id="tr_dhx_skyblue" onclick="changeSkin('dhx_skyblue');">
        <td><a href="javascript:void(0);" onclick="changeSkin('dhx_skyblue');">DHX SkyBlue</a></td>
        <td>dhtmlxlayout_dhx_skyblue.css</td>
    </tr>
    <tr id="tr_dhx_blue" onclick="changeSkin('dhx_blue');">
        <td><a href="javascript:void(0);" onclick="changeSkin('dhx_blue');">DHX Blue</a></td>
        <td>dhtmlxlayout_dhx_blue.css</td>
    </tr>
    <tr id="tr_dhx_black" onclick="changeSkin('dhx_black');">
        <td><a href="javascript:void(0);" onclick="changeSkin('dhx_black');">DHX Black</a></td>
        <td>dhtmlxlayout_dhx_black.css</td>
    </tr>
    <tr id="tr_dhx_web" onclick="changeSkin('dhx_web');">
        <td><a href="javascript:void(0);" onclick="changeSkin('dhx_web');">DHX Web</a></td>
        <td>dhtmlxlayout_dhx_web.css</td>
    </tr>
    <tr id="tr_dhx_terrace" onclick="changeSkin('dhx_terrace');">
        <td><a href="javascript:void(0);" onclick="changeSkin('dhx_terrace');">DHX Terrace</a></td>
        <td>dhtmlxlayout_dhx_terrace.css</td>
    </tr>
</table>
<script>
var dhxLayout,
dhxLayout2,
dhxGrid;
var activeSkin = "dhx_skyblue";
function doOnLoad() {
    if (dhxLayout)
        dhxLayout.unload();
    dhxLayout = new dhtmlXLayoutObject("parentId", "3L", activeSkin);
    dhxLayout.cells("a").setText("No news is good news");
    dhxLayout.cells("b").setText("East or West - home is best");
    dhxLayout.cells("c").setText("Many a little makes a mickle");
    dhxLayout.setCollapsedText("a", "No news is good news");
    dhxLayout.setCollapsedText("b", "East or West - home is best");
    dhxLayout.setCollapsedText("c", "Many a little makes a mickle");
    document.getElementById("tr_" + activeSkin).style.backgroundColor = "#CFCFCF";
}
function changeSkin(skin) {
    //dhxLayout.setSkin(skin);
    document.getElementById("tr_" + activeSkin).style.backgroundColor = "#FFFFFF";
    activeSkin = skin;
    doOnLoad();
    document.getElementById("tr_" + activeSkin).style.backgroundColor = "#CFCFCF";
}</script>