<link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxwindows_dhx_black.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxwindows_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxwindows_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxwindows_dhx_web.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxwindows_dhx_terrace.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxwindows.js"></script>
 
<script src="../../codebase/dhtmlxcontainer.js"></script>
 
<div>
Select Skin:
<select id="skinChooser" onchange="changeSkin(this);">
    <optgroup label="DHX">
        <option value="dhx_skyblue">DHX SkyBlue</option>
        <option value="dhx_web">DHX Web</option>
        <option value="dhx_terrace">DHX Terrace</option>
    </optgroup>
</select>
<br><br>
<p1>required CSS file: </p1>
<div id="p1">dhtmlxwindows_dhx_blue.css</div>
</div>
<br>
<table border="0" cellspacing="1" cellpadding="1" style="border: #909090 1px solid;">
<th align="left">Skin Name</th>
<th align="left">Corresponding CSS File</th>
<tr><td colspan="2" style="height:1px;font-size:1px;border-top: #CECECE 1px solid;">&nbsp;</td></tr>
<tr>
    <td align="left" valign="top">DHX SkyBlue</td>
    <td align="left" valign="top">dhtmlxwindows_dhx_skyblue.css</td>
</tr>
<tr>
    <td align="left" valign="top">DHX Web</td>
    <td align="left" valign="top">dhtmlxwindows_dhx_web.css</td>
</tr>
<tr>
    <td align="left" valign="top">DHX Terrace</td>
    <td align="left" valign="top">dhtmlxwindows_dhx_terrace.css</td>
</tr>
</table>
<div id="winVP" style="position: relative; height: 500px; border: #cecece 1px solid; margin: 10px;"></div>
<script>
var dhxWins;
function doOnLoad(skin) {
    if (dhxWins != null)
        dhxWins.unload();
    dhxWins = new dhtmlXWindows();
    dhxWins.setSkin(skin || "dhx_skyblue");
    dhxWins.enableAutoViewport(false);
    dhxWins.attachViewportTo("winVP");
    dhxWins.setImagePath("../../codebase/imgs/");
    for (var q = 0; q < 3; q++) {
        var w1 = dhxWins.createWindow("w" + q, 10 + q * 320, 25, 300, 250);
    }
    if (!skin)
        document.getElementById("skinChooser").selectedIndex = 0;
}
function changeSkin(obj) {
    doOnLoad(obj.options[obj.selectedIndex].value);
    document.getElementById("p1").innerHTML = "dhtmlxwindows_" + obj.options[obj.selectedIndex].value + ".css";
}</script>