<script language="javascript">
    initOneTime();
    function initOneTime() {
        //check xem da khoi tao chua
        var page_initflag = document.getElementById("page_initflag");
        if (page_initflag.value.length > 0)
            return;
        page_initflag.value = "1";

        showList("left");
        showList("right");
        showList("app");
        showGoodsCategoryInSelect("id_list_goods_category", null, 1);
        showNewsCategoryInSelect("id_list_news_category", null, 1);
    }
    function showArea() {
        showList("left");
        showList("right");
    }
    function menuPopupItem(id, pageno) {
        var menu = "";
        menu += "<a href='javascript:void(0)' onclick='javascript:itemEdit(" + id + "," + pageno + ")' class='menu_popup_item w50'>Sửa" + "</a>";
        menu += "<a href='javascript:void(0)' onclick='javascript:itemRemove(" + id + "," + pageno + ")' class='menu_popup_item w50'>Xóa" + "</a>";
        menu += "<a href='javascript:void(0)' onclick='javascript:itemView(" + id + "," + pageno + ")' class='menu_popup_item'>Xem" + "</a>";
        showModal(menu, itxt("mausac"));
    }
    function remove(side) {
        showWaitModal();
        var area = getValById("idarea");
        var id = (side == "left") ? getValById("id_list_left") : getValById("id_list_right");
        if (id <= 0) return;
        var url = "?page=web_giaodiencacboxphaitrai&action=remove&side=" + side + "&area=" + area + "&id=" + id;

        var dataString = "";
        jQuery.ajax({
            url: url,
            data: dataString,
            type: "GET",
            success: function (data) {
                if (!isDataOk(data)) {
                    showMsg([itxt("loi"), getDataFail(data)]);
                    return;
                }
                data = getDataOk(data);
                showList(side);
                hideModal();
            },
            error: function () {
                showMsg(itxt("loi"));
            }
        });
    }
    //side:left,right
    function add(side) {
        showWaitModal();
        var area = getValById("idarea");
        var goodscategoryid = getValById("id_list_goods_category");
        var newscategoryid = getValById("id_list_news_category");
        var boxid = getValById("id_list_app");
        var source = "";

        if (goodscategoryid > 0) source = "goods&id=" + goodscategoryid;
        if (newscategoryid > 0) source = "news&id=" + newscategoryid;
        if (boxid > 0) source = "&id=" + boxid;
        var url = "?page=web_giaodiencacboxphaitrai&action=add&side=" + side + "&area=" + area + "&source=" + source;

        var dataString = "";
        jQuery.ajax({
            url: url,
            data: dataString,
            type: "GET",
            success: function (data) {
                if (!isDataOk(data)) {
                    showMsg([itxt("loi"), getDataFail(data)]);
                    return;
                }
                data = getDataOk(data);
                showList(side);
                hideModal();
            },
            error: function () {
                showMsg(itxt("loi"));
            }
        });
    }
    function showList(side) {
        var url = "?page=web_giaodiencacboxphaitrai&action=list&side=" + side + "&area=" + getValById("idarea");
        var dataString = "";
        jQuery.ajax({
            url: url,
            data: dataString,
            type: "GET",
            success: function (data) {
                if (!isDataOk(data)) {
                    showMsg([itxt("loi"), getDataFail(data)]);
                    return;
                }
                data = getDataOk(data);
                var ops = "";
                if (data.length > 0) {
                    var items = data.split(g_split_row);
                    for (var i = 0; i < items.length; i++) {
                        var vals = items[i].split(g_split_val);
                        ops += "<option value='" + vals[0] + "'>" + vals[1] + "</option>"
                    }
                }
                if (side == "left") {
                    setInnerById("id_list_left", ops);
                }
                if (side == "right") {
                    setInnerById("id_list_right", ops);
                }
                if (side == "app") setInnerById("id_list_app", ops);

            },
            error: function () {
                showMsg(itxt("loi"));
            }
        });
    }
</script>
<div class="pane_main100">
    <div style="margin: 0px auto; width: 800px;margin-top: 16px;">
        <table style="border-collapse: collapse; width: 100%;" border="1">
            <tbody>
                <tr>
                    <td style="width: 100%" colspan="3">
                        <select id="idarea" style="width: 100%;" onchange="showArea()">
                            <option value="">Trang chủ</opption>
                            <option value="goods">Trang sản phẩm</opption>
                            <option value="news">Trang tin tức</opption>
                        </select>
                    </td>
                </tr>
                <tr class="goods_head">
                    <td style="width: 30%;">Các nhóm cột trái</td>
                    <td style="width: 40%;">Các nhóm hỗ trợ</td>
                    <td style="width: 30%;">Các nhóm cột phải</td>
                </tr>
                <tr>
                    <td style="vertical-align:top">
                        <select id="id_list_left" size="15" style="width: 100%;height: 100%;">

                        </select>
                    </td>
                    <td>
                        <select id="id_list_app" size="10" style="width: 100%;"
                            onfocus="selectItemByValue('id_list_goods_category',-1);selectItemByValue('id_list_news_category',-1);">

                        </select>
                        <div style="width: 100%;margin:8px 0px;">
                            nhóm hàng
                            <select id="id_list_goods_category" style="width: 100%;"
                                onfocus="selectItemByValue('id_list_app',-1);selectItemByValue('id_list_news_category',-1);">

                            </select>
                        </div>
                        <div style="width: 100%;margin:8px 0px;">
                            nhóm tin
                            <select id="id_list_news_category" style="width: 100%;"
                                onfocus="selectItemByValue('id_list_app',-1);selectItemByValue('id_list_goods_category',-1);">

                            </select>
                        </div>
                    </td>
                    <td style="vertical-align:top">
                        <select id="id_list_right" size="15" style="width: 100%;height: 100%;">

                        </select>
                    </td>
                </tr>
                <tr>
                    <td><button class="buttonbig remove" style="width: 100%;" onclick="remove('left')">Xóa nhóm
                            trái</button>
                    </td>
                    <td><button class="buttonbig add" style="width: 48%;float: left;" onclick="add('left')">Thêm nhóm
                            trái</button><button class="buttonbig add" style="width: 48%;float: right;"
                            onclick="add('right')">Thêm nhóm
                            phải</button>
                    </td>
                    <td><button class="buttonbig remove" style="width: 100%;" onclick="remove('right')">Xóa nhóm
                            phải</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<input type="hidden" id="page_initflag" value="">