<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">
<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>
    </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>
</table>
<div id="winVP" style="position: relative; height: 500px; border: #cecece 1px solid; margin: 10px;"></div>
<script>
var dhxWins,
wins;
function doOnLoad() {
    dhxWins = new dhtmlXWindows();
    dhxWins.setSkin("dhx_skyblue");
    dhxWins.enableAutoViewport(false);
    dhxWins.attachViewportTo("winVP");
    dhxWins.setImagePath("../../codebase/imgs/");
    wins = new Array();
    for (var q = 0; q < 3; q++) {
        // wins[q] = dhxWins.createWindow("w"+q, 10+q*40, 10+q*25, 300, 250);
        wins[q] = dhxWins.createWindow("w" + q, 10 + q * 320, 25, 300, 250);
        wins[q].setText("dhtmlxWindow in new skin");
        wins[q].denyPark();
        wins[q].setIcon("");
        //wins[q].button("help").show();
        //wins[q].button("stick").show();
        wins[q].button("close").disable();
        wins[q].attachEvent("onClose", function() {});
    }
    document.getElementById("skinChooser").selectedIndex = 0;
}
function changeSkin(obj) {
    dhxWins.setSkin(obj.options[obj.selectedIndex].value);
    for (var q = 0; q < wins.length; q++) {
        wins[q].setText(obj.options[obj.selectedIndex].text);
    }
    document.getElementById("p1").innerHTML = "dhtmlxwindows_" + obj.options[obj.selectedIndex].value + ".css";
}</script>