<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>
<script src="../../codebase/dhtmlxcontainer.js"></script>
 
<div id="parentId" style="position: relative; top: 20px; left: 20px; width: 600px; height: 400px;"></div>
<div style="margin: 40px 0px 0px 20px;">
    <table>
        <tr>
            <td width="120"><b>collapse effect</b></td>
            <td width="90"><span id="ef_collapse" style="color:#DD0000;">disabled</span></td>
            <td>
                <input type="button" value="Enable" onclick="enable('collapse');">
                <input type="button" value="Disable" onclick="disable('collapse');">
                <input type="button" value="is Enabled?" onclick="getState('collapse');">
            </td>
        </tr>
        <tr>
            <td><b>resize effect</b></td>
            <td><span id="ef_resize" style="color:#DD0000;">disabled</span></td>
            <td>
                <input type="button" value="Enable" onclick="enable('resize');">
                <input type="button" value="Disable" onclick="disable('resize');">
                <input type="button" value="is Enabled?" onclick="getState('resize');">
            </td>
        </tr>
        <tr>
            <td><b>highlight effect</b></td>
            <td><span id="ef_highlight" style="color:#009900;">enabled</span></td>
            <td>
                <input type="button" value="Enable" onclick="enable('highlight');">
                <input type="button" value="Disable" onclick="disable('highlight');">
                <input type="button" value="is Enabled?" onclick="getState('highlight');">
            </td>
        </tr>
    </table>
</div>
<script>
var dhxLayout;
function doOnLoad() {
    dhxLayout = new dhtmlXLayoutObject("parentId", "5I");
}
function enable(effect) {
    dhxLayout.setEffect(effect, true);
    document.getElementById("ef_" + effect).innerHTML = "enabled";
    document.getElementById("ef_" + effect).style.color = "#009900";
}
function disable(effect) {
    dhxLayout.setEffect(effect, false);
    document.getElementById("ef_" + effect).innerHTML = "disabled";
    document.getElementById("ef_" + effect).style.color = "#DD0000";
}
function getState(effect) {
    alert(dhxLayout.getEffect(effect));
}</script>