<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxmenu_dhx_skyblue.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxmenu.js"></script>
<script src="../../codebase/ext/dhtmlxmenu_ext.js"></script>
 
<div style="height: 250px;"><div id="menuObj"></div></div>
<div>
    <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td valign="top">
                <table border="0" cellspacing="0" cellpadding="0">
                    <th colspan="3" style="padding-bottom: 10px;">Add New Item</th>
                    <tr>
                        <td>Item Type</td>
                        <td width="10">&nbsp;</td>
                        <td><select id="add_type"><option value="0">Child</option><option value="1">Sibling</option></select></td>
                    </tr>
                    <tr>
                        <td>Parent</td>
                        <td>&nbsp;</td>
                        <td><div id="item_parent" style="font-weight: bold;">(Click menu to select)</div></td>
                    </tr>
                    <tr>
                        <td>Item Text</td>
                        <td>&nbsp;</td>
                        <td><input id="item_text" type="text" value=""></td>
                    </tr>
                    <tr>
                        <td>Item Has Icon</td>
                        <td>&nbsp;</td>
                        <td>
                            <span><input id="icon_exists" type="checkbox" checked></span>
                            <span><img id="icon_src" width="18" height="18" border="0" src="../common/imgs/copy.gif"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>Icon Source</td>
                        <td>&nbsp;</td>
                        <td>
                            <span><img onclick="changeIcon(this, 'copy');" width="18" height="18" border="0" src="../common/imgs/copy.gif"></span>
                            <span><img onclick="changeIcon(this, 'cut');" width="18" height="18" border="0" src="../common/imgs/cut.gif"></span>
                            <span><img onclick="changeIcon(this, 'new');" width="18" height="18" border="0" src="../common/imgs/new.gif"></span>
                            <span><img onclick="changeIcon(this, 'paste');" width="18" height="18" border="0" src="../common/imgs/paste.gif"></span>
                            <span><img onclick="changeIcon(this, 'print');" width="18" height="18" border="0" src="../common/imgs/print.gif"></span>
                            <span><img onclick="changeIcon(this, 'redo');" width="18" height="18" border="0" src="../common/imgs/redo.gif"></span>
                            <span><img onclick="changeIcon(this, 'undo');" width="18" height="18" border="0" src="../common/imgs/undo.gif"></span>
                            <span><img onclick="changeIcon(this, 'save');" width="18" height="18" border="0" src="../common/imgs/save.gif"></span>
                            <span><img onclick="changeIcon(this, 'select_all');" width="18" height="18" border="0" src="../common/imgs/select_all.gif"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td><input type="button" value="Add Item" style="margin-top: 10px;" onclick="addItem();"></td>
                    </tr>
                </table>
            </td>
            <td width="30">&nbsp;</td>
            <td valign="top">
                <table border="0" cellspacing="0" cellpadding="0">
                    <th colspan="3" style="padding-bottom: 10px;">Remove Item</th>
                    <tr>
                        <td>Item</td>
                        <td>&nbsp;</td>
                        <td><div id="item_id" style="font-weight: bold;">(Click menu to select)</div></td>
                    </tr>
                    <tr>
                        <td colspan="3" align="center"><input type="button" value="Remove Item" style="margin-top: 10px;" onclick="removeItem();"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
 
<br>
<script>
var menu;
function initMenu() {
    menu = new dhtmlXMenuObject("menuObj");
    menu.setIconsPath("../common/imgs/");
    menu.attachEvent("onClick", changeParent);
    menu.loadXML("../common/dhxmenu.xml?e=" + new Date().getTime());
}
var itemImg = "copy";
function changeIcon(obj, icon) {
    document.getElementById("icon_src").src = obj.src;
    itemImg = icon;
}
var parentId = null;
function changeParent(id) {
    parentId = id;
    var text = menu.getItemText(id);
    document.getElementById("item_parent").innerHTML = id + " (" + text + ")";
    document.getElementById("item_id").innerHTML = id + " (" + text + ")";
}
var itemId = 0;
function addItem() {
    if (parentId == null) {
        alert("Please select parentId");
        return;
    }
    var itemText = document.getElementById("item_text").value;
    if (itemText.length == 0) {
        itemText = "New Item";
    }
    var img = "";
    var imgDis = "";
    if (document.getElementById("icon_exists").checked) {
        img = itemImg + ".gif";
        imgDis = itemImg + "_dis.gif";
    }
    var opts = document.getElementById("add_type");
    if (opts.options[opts.selectedIndex].value == "0") {
        menu.addNewChild(parentId, 0, "item_" + itemId, itemText, false, img, imgDis);
    } else {
        menu.addNewSibling(parentId, "item_" + itemId, itemText, false, img, imgDis);
    }
    itemId++;
    parentId = null;
    document.getElementById("item_parent").innerHTML = "(Click menu to select)";
    document.getElementById("item_id").innerHTML = "(Click menu to select)";
}
function removeItem() {
    if (parentId == null) {
        alert("Please select itemId");
        return;
    }
    menu.removeItem(parentId);
    parentId = null;
    document.getElementById("item_parent").innerHTML = "(Click menu to select)";
    document.getElementById("item_id").innerHTML = "(Click menu to select)";
}</script>