<script language="javascript">
    var m_imageslideheight = "_IMAGESLIDEHEIGHT_";
    var m_items = [];
    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(0);
    }
    function updateItem(id, type, val) {
        var url = "?page=web_giaodienhinhchaytrangchu&action=update&type=" + type + "&value=" + val + "&id=" + id;
        var dataString = "";
        jQuery.ajax({
            url: url,
            data: dataString,
            type: "GET",
            success: function (data) {
                if (!isDataOk(data)) {
                    showMsg([itxt("loi"), getDataFail(data)]);
                    return;
                }
                showMsg(itxt("dacapnhat"), null, 500);
            },
            error: function () {
                showMsg(itxt("loi"));
            }
        });
    }
    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 showItems(items) {
        var html = "";
        for (var i = 0; i < items.length; i++) {
            var vals = items[i].split(g_split_val);//id,filename,comment,url
            html += "<div class='pane_block100' style='width:100%;'>";
            html += "<img src='files/" + vals[1] + "' height='" + m_imageslideheight + "px' >";
            html += "<input onfocus='this.select(-1)' type='text' style='width:100%;margin:4px 0px' onchange='updateItem(" + vals[0] + ",\"url\",this.value)'" + " value='" + vals[3] + "'>";
            html += "<textarea onfocus='this.select(-1)' style='width:100%;margin:4px 0px' rows='5' onchange='updateItem(" + vals[0] + ",\"comment\",this.value)'>" + vals[2] + "</textarea>";
            html += "<button class='buttonbig remove' onclick='remove(" + vals[0] + ")' style='width:50%;float:left' value=''>Xóa</button><button class='buttonbig edit' onclick='edit(" + vals[0] + ")' style='width:50%;float:right' value=''>Đổi ảnh</button>"
            html += "</div>";
        }
        setInnerById("idcontentlist", html);
    }
    function showList(pageno) {
        showWaitModal();
        var url = "?page=web_giaodienhinhchaytrangchu&action=list";
        var dataString = "";
        jQuery.ajax({
            url: url,
            data: dataString,
            type: "GET",
            success: function (data) {
                if (!isDataOk(data)) {
                    showMsg([itxt("loi"), getDataFail(data)]);
                    return;
                }
                hideModal();
                (data) = getDataOk(data);
                if (data.length < 1) {
                    setInnerById("idcontentlist", "");
                    return;
                }
                var items = data.split(g_split_row);
                showItems(items);

            },
            error: function () {
                hideModal();
            }
        });
    }
    function remove(id) {
        showWaitModal();
        var url = "?page=web_giaodienhinhchaytrangchu&action=remove&id=" + id;
        var dataString = "";
        jQuery.ajax({
            url: url,
            data: dataString,
            type: "GET",
            success: function (data) {
                if (!isDataOk(data)) {
                    showMsg([itxt("loi"), getDataFail(data)]);
                    return;
                }
                showList(0);
            },
            error: function () {
                hideModal();
            }
        });
    }
    function add() {
        var form = document.getElementById("idformuploadimage");
        form.action.value = "add";
        var fileInput = document.getElementById('file');
        if (fileInput) {
            fileInput.onchange = function (e) {
                uploadImage(document.getElementById("idformuploadimage"));
            };
            fileInput.click();
        }
    }
    function edit(id) {
        var form = document.getElementById("idformuploadimage");
        form.id.value = id;
        form.action.value = "update";
        var fileInput = document.getElementById('file');
        if (fileInput) {
            fileInput.onchange = function (e) {
                uploadImage(form);
            };
            fileInput.click();
        }
    }
    function uploadImage(f) {
        var form = $(f);
        var url = form.attr('action');
        jQuery.ajax({
            url: url,
            data: new FormData($('#idformuploadimage')[0]),
            type: "POST",
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                if (!isDataOk(data)) {
                    showMsg([itxt("loi"), getDataFail(data)]);
                    return;
                }
                showMsg(itxt("dathietlapanhnen"), itxt("giaodien"), 750);
                sleep(750);
                window_refresh();
            },
            error: function () {
                hideModal();
                showMsg(itxt("thatbai"), "");
            }
        });
        return false;
    }
</script>
<table style="width: 100%;font-weight: bold;background-color: beige;">
    <tr>
        <td width="" align="right">Chiều cao khung ảnh (px)</td>
        <td width="100px">
            <input type="text" style="width: 100%;float: left;text-align: right;" onfocus="this.select(-1)"
                class="input_base" value="_IMAGESLIDEHEIGHT_" placeholder=""
                onchange="updateItem(0,'imageslideheight',this.value)">

        </td>
    </tr>
</table>
</div>
<div id="idcontentlist"></div>
<form method="POST" action="?page=web_giaodienhinhchaytrangchu" enctype="multipart/form-data" style="float: right;"
    id="idformuploadimage" onsubmit="return uploadImage(this)">
    <input type="hidden" name="id">
    <input type="hidden" name="action">
    <input id="file" type="file" name="file" style="visibility: hidden;" />
</form>
<button class="btnfloatbottom" onclick="return add()">+</button>
<input type="hidden" id="page_initflag" value="">