function menuUIUpdateMenuButton() {
    var idmainmenudropbutton = document.getElementById("idmainmenudropbutton");
    if (isEmpty(idmainmenudropbutton)) return;
    var idpopupmenucompact = document.getElementById("idpopupmenucompact");
    if (isEmpty(idpopupmenucompact)) return;

    if (idpopupmenucompact.style.display == "block") {
        idmainmenudropbutton.style.backgroundColor = "#ededed";
        idmainmenudropbutton.style.color = "red";
        idmainmenudropbutton.innerHTML = g_char_x;
    }
    else {
        idmainmenudropbutton.style.backgroundColor = "#1585d7";
        idmainmenudropbutton.style.color = "white";
        idmainmenudropbutton.innerHTML = g_char_menu;
    }
}
//type: normal - compact
//normal: main items (HT, XN..) + main buttons, main items -> popup content; short: short text (he thong -> ht)
//compact: title - main buttons (include :: -> popup header + content)

//load tu index_menu.html
//icon - title - [main menus: hethong,khaibao,xuatnhap,thuchi..] - windows_list_button - alarm_button - menu_pin_button
//viewmode:0,1,2 (0:compact, 1: wide compact, 2: wide)
function menuBuildMain(containerwidth) {
    var html = "";
    var idpageheaderglobal = document.getElementById("idpageheaderglobal");

    //menu bar chinh che do compact mobile
    //drag & drop: vao :: -> shortcut, vao (windows_count) -> shortcut
    idpageheaderglobal.style.display = "inline";
    if (g_viewmode == 0) {
        idpageheaderglobal.style.width = "calc(100% - " + (4 * (parseNumberVn(g_ui_cmdwidth) + 8)) + "px)";
        idpageheaderglobal.style.maxWidth = "200px";
    }
    //button-menu (right most must firstly add)
    if (containerwidth <= g_viewmode_mobile) {
        html += "<button id=\"idmainmenudropbutton\" title=\"menu\" onclick=\"window_menushow('idpopupmenucompact');menuUIUpdateMenuButton();\"" +
            " class=\"dropbtn\" style=\"float:right;\" " +
            " ondrop=\"menu_drop(event)\" ondragover=\"menu_allowDrop(event)\">" + g_char_menu + "</button>";
    }
    //button-search
    //if (containerwidth > g_viewmode_mobile) {
    html += "<button onclick=\"window_menushow(myDropdownSearch)\" class=\"dropbtn search\" style=\"float:right;\"/></button>";
    //}
    //button-alert
    html += "<div onclick=\"CEventAlert.showEvent();\" class=\"dropbtn pageheader_alert\"><span class=\"pageheader_alert_number\" id=\"idglobalalertcount\">0</span></div>";
    //button-opening window
    html += "<button id=\"window_tablistbutton\" onclick=\"window_menushow('iddropdownwindowtablist')\"" +
        " ondrop=\"menu_drop(event,'homepage')\" ondragover=\"menu_allowDrop(event)\"" +
        " class=\"dropbtn\" style=\"float:right;\">0</button>";

    if (containerwidth <= g_viewmode_mobile) {
        return html;
    }
    //fullmode
    html += "<div style='float:right'>"
    var itemfavs = "";
    var i = 0;
    var menus = g_menubar_pin.split(",");
    while (i < menus.length) {
        var item = menus[i];
        //nhom du lieu
        if (item.substr(0, 1) == "{") {
            item = item.replace("{", "");
            item = item.replace("}", "");
            var vals = item.split(":");
            if (Array.isArray(vals)) {
                item = vals[0];
            }
            text = itxt(item);

            funtion = item;
            var idpopuppin = "idpopuppin" + i + item;
            menuBuildPopupSub("", idpopuppin, vals[1]);
            if (containerwidth > g_viewmode_desktop)
                html += "<button title=\"menu\" class=\"dropbtn\" style=\"width:auto;height:40px;\" onclick=\"window_menushow('" + idpopuppin + "')\" >" + text + "</button>";
            else
                html += "<button title=\"menu\" class=\"dropbtn\" style=\"height:40px;\" onclick=\"window_menushow('" + idpopuppin + "')\" >" + getFirstCharOfWords(text, 2).toUpperCase() + "</button>";
        } else {
            if (itemfavs.length > 0) itemfavs += "/";
            itemfavs += item;
        }
        i++;
    }

    //favorite menu last ::
    if (itemfavs.length > 0) {
        menuBuildPopupSub("", "idpopupmenucompactfav", itemfavs);
        html += "<button title=\"menu\" class=\"dropbtn favorite\" style=\"height:40px;float:left;background-image:\" onclick=\"window_menushow('idpopupmenucompactfav')\" ></button>";
    }
    html += "</div>";
    return html;
}
function menuBuildPopupSub(caption, idpopuppin, funtionlist) {
    var pmleft = "", pmright = "", html = "";
    var items = funtionlist.split("/");
    if (caption.length > 0)
        html += "<a href=\"javascript:void(0)\" class=\"pinpopup header\" onclick=\"window_menushow('idpopupmenucompact')\">" + g_char_leftarrow + " " + caption + "</a>";
    var mitem = 0;
    for (i = 0; i < items.length; i++) {
        if (items[i] != "-") mitem++;
    }
    var half = mitem / 2;

    if (half >= 3) {
        var i = 0, itemshow = 0;
        while (itemshow < half) {
            if (items[i] == "-")
                pmleft += "<hr class='menu'>";
            else {
                var text = itxt(items[i]);
                if (items[i] == "ht_dangxuat") text = "<b><font color='red'>" + text + " (" + g_userrealname + ")</font></b>";

                pmleft += "<a href=\"javascript:void(0)\" name=\"" + items[i] + "\" draggable=\"true\" ondragstart=\"menu_drag(event,1)\" onclick=\"window_newtab('" + items[i] + "')\">" + text + "</a>";
                itemshow++;
            }
            i++;
        }
        while (i < items.length) {
            if (items[i] == "-")
                pmright += "<hr  class='menu'>";
            else {
                var text = itxt(items[i]);
                if (items[i] == "ht_dangxuat") text = "<b><font color='red'>" + text + " (" + g_userrealname + ")</font></b>";
                pmright += "<a href=\"javascript:void(0)\" name=\"" + items[i] + "\" draggable=\"true\" ondragstart=\"menu_drag(event,1)\" onclick=\"window_newtab('" + items[i] + "')\">" + text + "</a>";
            }

            i++;
        }
        pmleft = "<div style=\"width:50%;float:left\">" + pmleft + "</div>";

        pmright = "<div style=\"width:50%;float:left\">" + pmright + "</div>";
        html += (pmleft + pmright);
    }
    else {
        for (var i = 0; i < items.length; i++) {
            if (items[i] == "-")
                html += "<hr  class='menu'>";
            else
                html += "<a href=\"javascript:void(0)\" name=\"" + items[i] + "\" draggable=\"true\" ondragstart=\"menu_drag(event,1)\" onclick=\"window_newtab('" + items[i] + "')\">" + itxt(items[i]) + "</a>";
        }

    }

    var htmldiv = "<div id=\"" + idpopuppin + "\" class=\"dropdown-content\"></div>";
    $(htmldiv).appendTo(document.body).html(html);
}
//gom top menu va danh sach favorite
//g_menubar_pin dang chuoi a,b,c hoac mang [{t:text,f:funtion}]
//menu group nhom trong {tenhienthi:///} - hien thi menu dau tien +->
function menuBuildPopup(idcontainer, bfullmode) {
    if (typeof (g_menubar_pin) === "undefined") {
        console.log("g_menubar_pin not defined.");
        //return "";
    }

    var i = 0;
    var pmleft = "", pmright = "";
    var bisarray = Array.isArray(g_menubar_pin);
    var menus;
    if (bisarray) {
        menus = g_menubar_pin;
    } else {
        g_menubar_pin = g_menubar_pin.replaceAll(",,", ",");
        menus = g_menubar_pin.split(",");

    }
    var half = parseInt(menus.length / 2);
    var i = 0;
    var text = "", funtion = "";
    while (i < menus.length) {
        if (bisarray) {
            text = g_menubar_pin[i].t;
            funtion = g_menubar_pin[i].f;
        } else {
            var item = menus[i];
            //nhom du lieu
            if (item.substr(0, 1) == "{") {
                item = item.replace("{", "");
                item = item.replace("}", "");
                var vals = item.split(":");
                if (Array.isArray(vals)) {
                    item = vals[0];
                }
                text = itxt(item);
                funtion = item;


                var idpopuppin = "idpopuppin" + i + item;
                if (bfullmode)
                    menuBuildPopupSub("", idpopuppin, vals[1]);
                else
                    menuBuildPopupSub(text, idpopuppin, vals[1]);
                if (i < half)
                    pmleft += "<a title=\"menu\" onclick=\"window_menushow('" + idpopuppin + "')\" class=\"pinpopup\">" + text + "</a>";
                else
                    pmright += "<a title=\"menu\" onclick=\"window_menushow('" + idpopuppin + "')\" class=\"pinpopup\">" + text + "</a>";
            } else {
                text = window_tablistgetpagetitle(item);
                if (text.length < 1) text = itxt(item);
                funtion = item;
                if (i < half)
                    pmleft += "<a class=\"favorite\" name=\"" + funtion + "\" draggable=\"true\" ondragstart=\"menu_drag(event,1)\" href=\"javascript:void(0)\" onclick=\"javascript:window_newtab('" + funtion + "')\">" + text + "</a>";
                else
                    pmright += "<a class=\"favorite\" name=\"" + funtion + "\" draggable=\"true\" ondragstart=\"menu_drag(event,1)\" href=\"javascript:void(0)\" onclick=\"javascript:window_newtab('" + funtion + "')\">" + text + "</a>";

            }
        }
        i++;
    }

    pmleft = "<div style=\"width:50%;float:left\">" + pmleft + "</div>";
    pmright = "<div style=\"width:50%;float:left\">" + pmright + "</div>";
    var pm = "<div class=\"dropdown-content-menu\">" + pmleft + pmright + "</div>";

    return pm;
}

function menu_drag(ev, remove) {
    ev.dataTransfer.setData("window_newtab", ev.target.name);
    ev.dataTransfer.setData("remove", remove);
    ev.dataTransfer.setData("text", ev.target.id);
}
function menu_allowDrop(ev) {

    ev.preventDefault();
}
function menu_drop(ev, target) {

    ev.preventDefault();

    var data = ev.dataTransfer.getData("text");
    var name = ev.dataTransfer.getData("window_newtab");
    var remove = ev.dataTransfer.getData("remove");

    if (isEmpty(name)) return;

    if (target == "homepage") {

        menu_homepage(name);
    } else {
        menu_pin(name, remove);
    }

    //ev.target.appendChild(document.getElementById(data));
}
function menu_homepage(function_name) {

    if (isEmpty(function_name)) return;
    var url = "";
    url = "?page=ht_thietlap&pagesub=homepage&function_name=" + function_name;
    var dataString = "";
    jQuery.ajax({
        url: url,
        data: dataString,
        type: "GET",
        success: function (data) {
            if (isDataOk(data)) {
                showMsg([itxt("dathietlaptrangtudongnapdautienthanh"), window_tablistgetpagetitle(function_name)])
            }
            else
                showMsg("Lỗi/Error!");
        },
        error: function () {
            showMsg("Lỗi/Error!");
        }
    });
}
function menu_pin(function_name, bisremove) {
    if (isEmpty(function_name)) return;
    var url = "";
    if (bisremove == 1)
        url = "?page=ht_thietlap&pagesub=pinmenuoff&function_name=" + function_name;
    else
        url = "?page=ht_thietlap&pagesub=pinmenu&function_name=" + function_name;

    var dataString = "";
    jQuery.ajax({
        url: url,
        data: dataString,
        type: "GET",
        success: function (data) {
            if (isDataOk(data)) {
                if (bisremove == 1) {
                    g_menubar_pin = g_menubar_pin.replace(function_name + ",", "");
                    if (g_menubar_pin.substr(0, 1) == ",")
                        g_menubar_pin = g_menubar_pin.substr(1);
                }
                else {
                    if (g_menubar_pin.length > 0) g_menubar_pin += ",";
                    g_menubar_pin += function_name;
                }

                setInnerById("idpopupmenucompact", menuBuildPopup("idpopupmenucompact"));
            }
            else
                showMsg("Lỗi/Error!");
        },
        error: function () {
            showMsg("Lỗi/Error!");
        }
    });
}      