xmask =
{
    // Variables
    //#region
    ctrlPressed: false,
    xlsButtonVisible: false,
    //#endregion
    // Init functions + make Designable
    //#region
    // Init us: all spans with the attribute XMaskDesignable
    init: function () {
        $('span[XMaskGridDesignable]').not('[XMaskProcessed]').each(xmask.makeGridDesignable);
        $('span[XMaskDesignable]').not('[XMaskProcessed]').each(xmask.makeDesignable);
        $('input[XCSVDownloadButton]').not('[XButtonProcessed]').each(xmask.showCSVMenu);
        $(document).keydown(function (e) { xmask.ctrlPressed = e.ctrlKey; });
        $(document).keyup(function (e) { xmask.ctrlPressed = e.ctrlKey; });
        // In case of usage in updatepanel, init after a postback
        if (typeof (Sys) != 'undefined' && Sys != null && Sys.WebForms != null && Sys.WebForms.PageRequestManager != null) {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.remove_endRequest(xmask.init);
                prm.add_endRequest(xmask.init);
            }
        }
    },
    // Set the coordinates of a control which is positioned absolute with screen coordinates, taking optional offset parents into account
    setAbsolute: function (Control, Left, Top) {
        var jq = $(Control);
        var op = jq.offsetParent();
        if (op == null || op.length == 0 || op.get(0).nodeName == 'HTML') {
            jq.get(0).style.left = Left + "px";
            jq.get(0).style.top = Top + "px";
        }
        else {
            jq.get(0).style.left = (Left - op.offset().left) + "px";
            jq.get(0).style.top = (Top - op.offset().top) + "px";
        }
    },
    // Create an invisible image button (except we have a zero height). Show the image button when the control is entered with Strg
    makeDesignable: function () {
        var Image = $(this).children('input').get(0);
        if ($('tbody tr:gt(0)', $(this).children('table')).length > 0 || $(this).children('div').length > 0) { // if we have any regions with more than one row (which also is true for whiteframes in old rendering) or divs (whiteframes in new rendering)
            var IsVisible = false;
            Image.style.position = "absolute";
            $(this).prepend(Image);
            $(this).mousemove(function () { if (xmask.ctrlPressed && !IsVisible) { xmask.setAbsolute(Image, $(this).offset().left + $(this).outerWidth() - 16, $(this).offset().top); $(Image).fadeIn(1000); IsVisible = true; } });
            $(this).mouseleave(function () { $(Image).hide(); IsVisible = false; });
        }
        else {
            $(Image).show();
        }
        $(this).attr('XMaskProcessed', 'true');
    },
    // Show submenu to download CSV, XLS or XLSX
    showCSVMenu: function () {
        $(this).click(function (e) {
            var buttonOffset = $(this).offset();
            var button = $(this);
            $(this).parent().find('[XExportMenu]').each(function () {
                if (xmask.xlsButtonVisible)
                    $(this).hide();
                else {
                    $(this).show();
                    xmask.setAbsolute($(this), buttonOffset.left + button.width(), buttonOffset.top);
                }
                xmask.xlsButtonVisible = !xmask.xlsButtonVisible;
                e.preventDefault();
            });
        });
        $(this).attr('XButtonProcessed', 'true');
    },
    // Create an invisible image button (except we have a zero height). Show the image button when the control is entered with Strg
    makeGridDesignable: function () {
        var Image = $(this).children('input').get(0);
        var Table = $(this).children('table');
        if (Table.get(0).rows[0].cells.length > 0) {
            var IsVisible = false;
            Image.style.position = "absolute";
            $(this).prepend(Image);
            $(this).mousemove(function () {
                if (xmask.ctrlPressed && !IsVisible) {
                    xmask.setAbsolute(Image, $(Table).offset().left + $(Table).outerWidth() - 16, $(Table).offset().top); $(Image).fadeIn(1000); IsVisible = true;
                }
            });
            $(this).mouseleave(function () { $(Image).hide(); IsVisible = false; });
        }
        else {
            $(Image).show();
        }
        $(this).attr('XMaskProcessed', 'true');
    },
    //#endregion
    // Functions which work for the whiteframe NOT in DESIGN MODE
    //#region
    // Function that is executed when the link expand/collapse is clicked
    clickWfExpand: function (Link) {
        var WhiteFrameDiv = $(Link).parent().parent();
        var EmptyDiv = WhiteFrameDiv.children('div:last').prev();
        var TableDiv = WhiteFrameDiv.children('div:last');
        var CheckBox = $(Link).parent().children('input');
        var Image = $(Link).children('img');
        if (WhiteFrameDiv.children('div:last:visible').length == 0) {
            EmptyDiv.hide();
            TableDiv.slideDown(400, function () {
                if (TableDiv.closest('span[XMaskDesigning]').length > 0 && typeof (xmaskd) != "undefined" && xmaskd != null) {
                    xmaskd.reinitAllColumnSizing(TableDiv.closest('span[XMaskDesigning]'));
                }
            });
            Image.get(0).src = "Images/wf_collapse.gif";
            CheckBox.get(0).checked = true;
            CheckBox.get(1).checked = false;
        }
        else {
            TableDiv.slideUp(400, function () { EmptyDiv.show(); });
            Image.get(0).src = "Images/wf_expand.gif";
            CheckBox.get(0).checked = false;
            CheckBox.get(1).checked = true;
        }
    },
    //#endregion
    // Functions which work for the grid NOT in DESIGN MODE
    //#region
    // Function that is executed when the checkbox select page is clicked
    clickSelectPage: function (CheckBox) {
        // The Select is either the first or second colunm (depending on the expanded colunm)
        $(CheckBox).parent().parent().siblings().children('td:nth-child(1), td:nth-child(2)').children('input[id$=_Select]:visible').each(function () {
            $(this).get(0).checked = CheckBox.checked;
        });
    },
    // Function that is executed when the expand button is clicked and we have the control content already 
    clickExpandItem: function (ImageButton) {
        var ExpandNotInGrid = $(ImageButton).parent().parent().parent().parent().attr('XExpandNotInGrid') == 'True';
        var ExpandNoLeft = $(ImageButton).parent().parent().parent().parent().attr('XExpandNoLeft') == 'True';
        var ExpandClearSelect = $(ImageButton).parent().parent().parent().parent().attr('XExpandClearSelect') == 'True';
        var ExpandedRow = $(ImageButton).parent().parent().next('tr');
        var NextRow = $(ImageButton).parent().parent().next('tr').next('tr');
        var CurrentRow = $(ImageButton).parent().parent();
        if (ImageButton.src.indexOf('minus.gif') >= 0) {
            ImageButton.src = ImageButton.src.replace('minus.gif', 'plus.gif');
            $('input[type=checkbox][id$=_ExpandS]', $(ImageButton).parent()).get(0).checked = false;
            CurrentRow.children('td').css('border-bottom', 'gray 0px none');
            if (NextRow.length > 0 && NextRow.get(0).id.indexOf('_TRGT_') == -1 && NextRow.get(0).id.indexOf('_TRPF') == -1 && NextRow.get(0).id.indexOf('_TRF') == -1 && NextRow.get(0).id.indexOf('_LBR') == -1) // Top group rows and pages have their own top border anyway
                NextRow.children('td').css('border-top', 'gray 0px none');
            ExpandedRow.hide();
        }
        else {
            ImageButton.src = ImageButton.src.replace('plus.gif', 'minus.gif');
            $('input[type=checkbox][id$=_ExpandS]', $(ImageButton).parent()).get(0).checked = true;
            $('input[type=checkbox][id$=_ExpandW]', $(ImageButton).parent()).get(0).checked = true;
            if (ExpandClearSelect) {
                $(ImageButton).parent().parent().children('td:nth-child(1), td:nth-child(2)').children('input[id$=_Select]').hide();
                if ($(ImageButton).parent().parent().children('td:nth-child(1), td:nth-child(2)').children('input[id$=_Select]').length > 0)
                    $(ImageButton).parent().parent().children('td:nth-child(1), td:nth-child(2)').children('input[id$=_Select]').get(0).checked = false;
            }
            ExpandedRow.show();
            if (!ExpandNotInGrid) {
                if (NextRow.length > 0 && NextRow.get(0).id.indexOf('_TRGT_') == -1 && NextRow.get(0).id.indexOf('_TRPF') == -1 && NextRow.get(0).id.indexOf('_TRF') == -1 && NextRow.get(0).id.indexOf('_LBR') == -1) // Top group rows and pages have their own top border anyway
                    NextRow.children('td').css('border-top', 'gray 1px solid');
                CurrentRow.children('td').not(CurrentRow.children('td').first()).css('border-bottom', 'gray 1px solid');
            }
            else {
                if (NextRow.length > 0 && NextRow.get(0).id.indexOf('_TRGT_') == -1 && NextRow.get(0).id.indexOf('_TRPF') == -1 && NextRow.get(0).id.indexOf('_TRF') == -1 && NextRow.get(0).id.indexOf('_LBR') == -1) // Top group rows and pages have their own top border anyway
                    NextRow.children('td').not(NextRow.children('td').last()).css('border-top', 'gray 1px solid');
                if (!ExpandNoLeft)
                    CurrentRow.children('td').not(CurrentRow.children('td').first()).not(CurrentRow.children('td').last()).css('border-bottom', 'gray 1px solid');
                else
                    CurrentRow.children('td').not(CurrentRow.children('td').last()).css('border-bottom', 'gray 1px solid');
            }
        }
        window.ELPortalIgnore = true;          // If we are in the portal, we dont want that the portal catches the button and continues
    },
    // Collapse all grid items
    clickCollapseAll: function (ImageButton) {
        $('tbody:first > tr > td:nth-child(1) input[type=image]', $(ImageButton).closest('table')).each(function () {
            if (this.src.indexOf('minus.gif') >= 0)
                xmask.clickExpandItem(this);
        });
        return false;
    },
    // Expand all grid items
    clickExpandAll: function (ImageButton) {
        var bRet = false;
        $('tbody:first > tr > td:nth-child(1) input[type=image]', $(ImageButton).closest('table')).each(function () {
            if (this.src.indexOf('plus.gif') >= 0)
                if (this.onclick == null) { bRet = true; return false; }
                else xmask.clickExpandItem(this);
            return true;
        });
        return bRet;
    }
    //#endregion
}
//
// Init the when the dom is loaded
//
$(document).ready(xmask.init)