<script type="text/javascript" src="../../codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../codebase/dhtmlxtoolbar.js"></script>
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxtoolbar_dhx_skyblue.css"></link>
 
<div style="height: 150px;"><div id="toolbarObj"></div></div>
<div id="logBar" style="border: #E0E0E0 1px solid; margin-top: 20px; width: 500px; height: 200px; overflow: auto; font-family: Tahoma; font-size: 11px;"></div>
<script>
var toolbar;
var i = 1;
function doOnLoad() {
    toolbar = new dhtmlXToolbarObject("toolbarObj");
    toolbar.setIconsPath("../common/imgs/");
    toolbar.attachEvent("onXLS", function(id) {
        writeLog("<b>onXLS event</b> XML loading has started");
    });
    toolbar.attachEvent("onXLE", function(id) {
        writeLog("<b>onXLE event</b> XML was loaded");
    });
    toolbar.loadXML("../common/dhxtoolbar.xml?etc=" + new Date().getTime());
    toolbar.attachEvent("onClick", function(id) {
        writeLog("<b>onClick event</b> button(" + id + ") was clicked");
    });
    toolbar.attachEvent("onStateChange", function(id, state) {
        writeLog("<b>onStateChange event</b> button(" + id + ") was " + (state ? "pressed": "released"));
    });
    toolbar.attachEvent("onValueChange", function(id, value) {
        writeLog("<b>onValueChange event</b> item(" + id + ")'s value was changed to " + value);
    });
    toolbar.attachEvent("onEnter", function(id, value) {
        writeLog("<b>onEnter event</b> input(" + id + ")'s value was changed to " + value);
    });
}
function writeLog(data) {
    document.getElementById("logBar").innerHTML = String(i++) + ". " + data + "<br>" + document.getElementById("logBar").innerHTML;
    document.getElementById("logBar").innerHTML += "";
}</script>