!function (factory) {
    if (typeof define === 'function' && define.amd) {
        define(['modules/editor'], function (Editor) {
            return factory(window.jQuery, Editor);
        });
    }
}(function ($, Editor) {
    'use strict';

    var layouts = {
        title: GetTextByKey('P_LAYOUTS', 'Layouts'),
        description: GetTextByKey('P_LAYOUTS', 'Layouts'),
        version: '1.0',
        isteam: false,
        changed: false,
        ui: {}
    };

    function createHeader() {
        var header = $('<div></div>');
        header.append($('<div class="page_title"></div>').text(layouts.title));
        setPageTitle(layouts.title, true);
        var search_bar = $('<div class="search_bar"></div>');
        header.append(search_bar);
        search_bar.append('<input type="password" autocomplete="new-password" style="display: none" />');
        var searchinputcontrol = $('<input type="text" style="margin-left:10px;" autocomplete="off" />');
        layouts.searchInput = searchinputcontrol;
        search_bar.append(searchinputcontrol);
        searchinputcontrol.keydown(function (e) {
            if (e.keyCode == 13 || e.keyCode == 9)
                layouts.refresh();
        });
        var btnRefresh = $('<input class="search" type="button" style="margin-left:10px;"/>').val(GetTextByKey("P_IPT_SEARCH", "Search"));
        search_bar.append(btnRefresh);
        btnRefresh.click(function () {
            layouts.refresh();
        });

        var func = $('<div class="function_title"></div>');
        var iconAdd = $('<span class="sbutton iconadd"></span>').text(GetTextByKey("P_IPT_ADD", "Add")).on('click', function () {
            layouts.onadd();
        });
        func.append(iconAdd);
        var iconEdit = $('<span class="sbutton iconedit"></span>').text(GetTextByKey("P_IPT_EDIT", "Edit")).on('click', function () {
            if (layouts.grid.selectedIndex >= 0) {
                layouts.onedit();
            }
        }).prop('disabled', true);
        layouts.ui.edit = iconEdit;
        func.append(iconEdit);
        var iconRefresh = $('<span class="sbutton iconrefresh"></span>').text(GetTextByKey("P_IPT_REFRESH", "Refresh")).on('click', function () {
            layouts.refresh();
        });
        func.append(iconRefresh);
        header.append(func)

        return header;
    }

    function InitGridData() {
        var div_grid = $('<div style="flex: 1 1 auto"></div>');

        var grid_dt = new GridView(div_grid);
        layouts.grid = grid_dt;
        grid_dt.lang = {
            all: GetTextByKey("P_GRID_ALL", "(All)"),
            ok: GetTextByKey("P_GRID_OK", "OK"),
            reset: GetTextByKey("P_GRID_RESET", "Reset")
        };
        grid_dt.canMultiSelect = false;
        grid_dt.columns = [
            {
                caption: GetTextByKey('P_LAYOUT_NAME', 'Layout Name'),
                key: 'Name',
                width: 200,
                isurl: true,
                events: {
                    onclick: function () {
                        doedit(this.Id);
                    }
                },
                styleFilter: function () {
                    return {
                        color: 'initial',
                        cursor: 'pointer'
                    };
                }
            },
            {
                caption: GetTextByKey('P_LAYOUT_NOTES', 'Notes'),
                key: 'Notes',
                width: 300
            },
            {
                isurl: true,
                resizable: false,
                orderable: false,
                sortable: false,
                width: 40,
                align: 'center',
                text: '\uf044',
                events: {
                    onclick: function () {
                        doedit(this.Id);
                    }
                },
                classFilter: function () { return 'icon-col' },
                attrs: {
                    title: GetTextByKey('P_WOS_EDIT', 'Edit')
                }
            },
            {
                isurl: true,
                resizable: false,
                orderable: false,
                sortable: false,
                width: 40,
                align: 'center',
                text: '\uf00d',
                events: {
                    onclick: function () {
                        var id = this.Id;
                        showConfirm(
                            GetTextByKey('P_LAYOUT_DELETETIPS', 'Are you sure you want to delete the layout?'),
                            GetTextByKey('P_LAYOUTS', 'Layouts'),
                            function () {
                                inspectionrequest('DeleteInspectLayout',
                                    JSON.stringify([layouts.isteam ? 1 : 0, id]),
                                    function (data) {
                                        if (data == 'OK') {
                                            layouts.refresh();
                                        } else {
                                            showAlert(data != 'Failed' ? data : GetTextByKey('P_LAYOUT_FAILEDDELETE', 'Failed to delete this layout.'), GetTextByKey('P_LAYOUTS', 'Layouts'));
                                        }
                                    },
                                    function () {
                                        showAlert(GetTextByKey('P_LAYOUT_FAILEDDELETE', 'Failed to delete this layout.'), GetTextByKey('P_LAYOUTS', 'Layouts'));
                                    }
                                );
                            }
                        );
                    }
                },
                classFilter: function () { return 'icon-col' },
                attrs: {
                    title: GetTextByKey('P_WOS_DELETE', 'Delete')
                }
            }
        ];
        grid_dt.init();
        grid_dt.rowdblclick = layouts.onedit;

        grid_dt.selectedrowchanged = function (rowindex) {
            layouts.ui.edit.prop('disabled', rowindex >= 0);
        }
        return div_grid;
    }

    Object.defineProperty(layouts, 'createContent', {
        value: function (isteam) {
            layouts.isteam = isteam && isteam[0] == '1';
            var content = $('<div style="height:100%; display:flex; flex-direction:column"></div>');
            content.append(createHeader());
            content.append(InitGridData());
            content.append('<div style="height: 2px"></div>');

            layouts.refresh();
            return content;
        }
    });

    Object.defineProperty(layouts, 'refresh', {
        value: function () {
            layouts.changed = false;
            showmaskbg(true);
            inspectionrequest('GetInspectLayouts', encodeURIComponent(
                JSON.stringify([layouts.isteam ? 1 : 0, layouts.searchInput.val()])
            ), function (data) {
                if ($.isArray(data)) {
                    layouts.grid.setData(data.map(function (i) { return { Values: i } }));
                } else {
                    showAlert(data, GetTextByKey('P_LAYOUTS', 'Layouts'));
                }
                showmaskbg(false);
            }, function () {
                showmaskbg(false);
            });
        }
    });

    function appendToolbar(ele) {
        ele.append(
            $('<div class="editor-toolbar"></div>').append(
                $('<select data-edit="fontname"></select>').append(
                    $('<option selected>- Font -</option>'),
                    $('<option>Arial</option>'),
                    $('<option>Arial Black</option>'),
                    $('<option>Courier New</option>'),
                    $('<option>Times New Roman</option>')
                ),
                $('<select data-edit="fontsize"></select>').append(
                    $('<option selected>- Size -</option>'),
                    $('<option value="1">Very small</option>'),
                    $('<option value="2">A bit small</option>'),
                    $('<option value="3">Normal</option>'),
                    $('<option value="4">Medium-large</option>'),
                    $('<option value="5">Big</option>'),
                    $('<option value="6">Very big</option>'),
                    $('<option value="7">Maximum</option>')
                ),
                $('<a data-edit="undo" title="Undo"><svg><use href="#symbol-undo"></use></svg></a>'),
                $('<a data-edit="redo" title="Redo"><svg><use href="#symbol-redo"></use></svg></a>'),
                $('<a data-edit="bold" title="Bold"><svg class="black"><use href="#symbol-bold"></use></svg></a>'),
                $('<a data-edit="italic" title="Italic"><svg class="black"><use href="#symbol-italic"></use></svg></a>'),
                $('<a data-edit="underline" title="Underline"><svg class="black"><use href="#symbol-underline"></use></svg></a>'),
                $('<a data-edit="createlink" title="Hyperlink"><svg><use href="#symbol-link"></use></svg></a>'),
                $('<select data-edit="forecolor" style="margin-left: 10px">').append(
                    $('<option selected>- Color -</option>'),
                    $('<option value="red">Red</option>'),
                    $('<option value="blue">Blue</option>'),
                    $('<option value="green">Green</option>'),
                    $('<option value="black">Black</option>')
                ),
                $('<select data-edit>').append(
                    $('<option selected>- Fields -</option>'),
                    $('<option value="[Advisor]">Advisor</option>'),
                    $('<option value="[Asset_Groups]">Asset Group(s)</option>'),
                    $('<option value="[Asset_Name]">Asset Name</option>'),
                    $('<option value="[Asset_Name_Custom]">Asset Name (Custom)</option>'),
                    $('<option value="[Asset_Type]">Asset Type</option>'),
                    $('<option value="[Creator]">Creator</option>'),
                    $('<option value="[Current_Jobsite]">Current Jobsite</option>'),
                    $('<option value="[Current_Location]">Current Location</option>'),
                    $('<option value="[Customer_Visible]">Customer Visible</option>'),
                    $('<option value="[Date_Performed]">Date Performed</option>'),
                    $('<option value="[DateTime_Performed]">Date/Time Performed</option>'),
                    $('<option value="[Engine_Hours]">Engine Hours</option>'),
                    $('<option value="[Odometer]">Odometer</option>'),
                    $('<option value="[Engine_Hours_Or_Odometer]">Engine Hours Or Odometer</option>'),
                    $('<option value="[Make]">Make</option>'),
                    $('<option value="[Model]">Model</option>'),
                    $('<option value="[VIN]">VIN/SN</option>'),
                    $('<option value="[Work_Order_Number]">Work Order Number</option>'),
                    $('<option value="[Work_Order_Type]">Work Order Type</option>'),
                    $('<option value="[Parts_Order_Number]">Parts Order Number</option>'),
                    $('<option value="[Year]">Year</option>')
                )
            )
        );
        return ele;
    }

    function initEditor(content, id) {
        var textarea = $('<textarea class="editor-content"></textarea>');
        if (!layouts.isteam) {
            var selector = $('<select class="editor-select"></select>').append(
                $('<option></option>'),
                $('<option value="[Advisor]">Advisor</option>'),
                $('<option value="[Asset_Groups]">Asset Group(s)</option>'),
                $('<option value="[Asset_Name]">Asset Name</option>'),
                $('<option value="[Asset_Name_Custom]">Asset Name (Custom)</option>'),
                $('<option value="[Asset_Type]">Asset Type</option>'),
                $('<option value="[Creator]">Creator</option>'),
                $('<option value="[Current_Jobsite]">Current Jobsite</option>'),
                $('<option value="[Current_Location]">Current Location</option>'),
                $('<option value="[Customer_Visible]">Customer Visible</option>'),
                $('<option value="[Date_Performed]">Date Performed</option>'),
                $('<option value="[DateTime_Performed]">Date/Time Performed</option>'),
                $('<option value="[Engine_Hours]">Engine Hours</option>'),
                $('<option value="[Odometer]">Odometer</option>'),
                $('<option value="[Engine_Hours_Or_Odometer]">Engine Hours Or Odometer</option>'),
                $('<option value="[Make]">Make</option>'),
                $('<option value="[Model]">Model</option>'),
                $('<option value="[VIN]">VIN/SN</option>'),
                $('<option value="[Work_Order_Number]">Work Order Number</option>'),
                $('<option value="[Work_Order_Type]">Work Order Type</option>'),
                $('<option value="[Parts_Order_Number]">Parts Order Number</option>'),
                $('<option value="[Year]">Year</option>')
            );
            if (typeof IsCustomerRecord !== 'undefined' && IsCustomerRecord) {
                selector.append(
                    $('<option value="[Company_Name]">Company Name</option>'),
                    $('<option value="[Contacts]">Contacts</option>'),
                    $('<option value="[Customer_Code]">Customer Code</option>'),
                    $('<option value="[Location]">Location</option>')
                );
            }
            content.find(id + '-vars').append(
                $('<span></span>').text(GetTextByKey('P_LAYOUT_VARIABLE', 'Variable:')),
                selector.on('change', function () {
                    var val = $(this).val();
                    var t = textarea[0];
                    if (document.selection) {
                        textarea.focus();
                        var sel = document.selection.createRange();
                        sel.text = val;
                        textarea.focus();
                    } else {
                        if (t.selectionStart || t.selectionStart == 0) {
                            var start = t.selectionStart;
                            var end = t.selectionEnd;
                            var scrollTop = t.scrollTop;
                            t.value = t.value.substr(0, start) + val + t.value.substr(end, t.value.length);
                            textarea.focus();
                            t.selectionStart = start + val.length;
                            t.selectionEnd = start + val.length;
                            t.scrollTop = scrollTop;
                        } else {
                            t.value += val;
                            textarea.focus();
                        }
                    }
                    $(this).val('');
                })
            );
        }
        content.find(id).append(textarea);
    }

    function editLayout(info) {
        $('#right_popup').load('js/modules/layouts/addlayout.html?v=5', function () {
            var modified = false;
            var deleteIcon = false;
            var deleteCenterIcon = false;
            var deleteRightIcon = false;
            initColorCtrl();
            var content = $(this).applyFleetLanguageText(true);
            content.find('.button-exit').on('click', function () {
                if (modified) {
                    showConfirm(
                        GetTextByKey('P_LAYOUT_CONFIRMSAVE', 'The inspection layout has been modified, are you sure you want to discard the modifications and exit?'),
                        GetTextByKey('P_LAYOUT_EDITINSPECTLAYOUT', 'Edit Inspection Layout'),
                        function () {
                            showRightPopup(false);
                            if (layouts.changed) {
                                layouts.refresh();
                            }
                        }
                    );
                } else {
                    showRightPopup(false);
                    if (layouts.changed) {
                        layouts.refresh();
                    }
                }
            });
            content.find('.button-icon-upload').on('click', function () {
                content.find('.icon-file input[type="file"]').remove();
                $('<input type="file" accept="image/png,image/jpeg" />')
                    .hide().appendTo(content.find('.icon-file'))
                    .on('change', function () {
                        if (!/image\/\w+/.test(this.files[0].type)) {
                            showAlert(GetTextByKey("P_LAYOUT_UPLOADICONTIPS", 'The file type for the logo is invalid. The file must be JPG or PNG.'), GetTextByKey('P_LAYOUT_SAVEINSPECTLAYOUT', 'Save Inspection Layout'));
                            $(this).remove();
                            return;
                        }
                        var file = this.files[0];
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onload = function (e) {
                            setTimeout(function () {
                                content.find('.img-icon-filename').remove();
                                $('<img class="img-icon-filename" />').attr('src', e.target.result).insertAfter(content.find('.icon-file-title'));
                            });
                        };
                    }).click();
            });
            content.find('.button-icon-delete').on('click', function () {
                deleteIcon = true;
                content.find('.img-icon-filename').remove();
                content.find('.icon-file input[type="file"]').remove();
            });

            content.find('.button-icon-centerupload').on('click', function () {
                content.find('.icon-centerfile input[type="file"]').remove();
                $('<input type="file" accept="image/png,image/jpeg" />')
                    .hide().appendTo(content.find('.icon-centerfile'))
                    .on('change', function () {
                        if (!/image\/\w+/.test(this.files[0].type)) {
                            showAlert(GetTextByKey("P_LAYOUT_UPLOADICONTIPS", 'The file type for the logo is invalid. The file must be JPG or PNG.'), GetTextByKey('P_LAYOUT_SAVEINSPECTLAYOUT', 'Save Inspection Layout'));
                            $(this).remove();
                            return;
                        }
                        var file = this.files[0];
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onload = function (e) {
                            setTimeout(function () {
                                content.find('.img-icon-centerfilename').remove();
                                $('<img class="img-icon-centerfilename" />').attr('src', e.target.result).insertAfter(content.find('.icon-centerfile-title'));
                            });
                        };
                    }).click();
            });
            content.find('.button-icon-centerdelete').on('click', function () {
                deleteCenterIcon = true;
                content.find('.img-icon-centerfilename').remove();
                content.find('.icon-centerfile input[type="file"]').remove();
            });

            content.find('.button-icon-rightupload').on('click', function () {
                content.find('.icon-rightfile input[type="file"]').remove();
                $('<input type="file" accept="image/png,image/jpeg" />')
                    .hide().appendTo(content.find('.icon-rightfile'))
                    .on('change', function () {
                        if (!/image\/\w+/.test(this.files[0].type)) {
                            showAlert(GetTextByKey("P_LAYOUT_UPLOADICONTIPS", 'The file type for the logo is invalid. The file must be JPG or PNG.'), GetTextByKey('P_LAYOUT_SAVEINSPECTLAYOUT', 'Save Inspection Layout'));
                            $(this).remove();
                            return;
                        }
                        var file = this.files[0];
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onload = function (e) {
                            setTimeout(function () {
                                content.find('.img-icon-rightfilename').remove();
                                $('<img class="img-icon-rightfilename" />').attr('src', e.target.result).insertAfter(content.find('.icon-rightfile-title'));
                            });
                        };
                    }).click();
            });
            content.find('.button-icon-rightdelete').on('click', function () {
                deleteRightIcon = true;
                content.find('.img-icon-rightfilename').remove();
                content.find('.icon-rightfile input[type="file"]').remove();
            });

            content.find('#layout-style').on('change', function () {
                var style = $('#layout-style').val();
                if (parseInt(style) === 2) {
                    $('#layout-picturesdisplay').val(1);
                    $('#layout-picturesdisplay').prop('disabled', true);
                }
                else {
                    $('#layout-picturesdisplay').prop('disabled', false);
                }
            });
            content.find('#layout-highlightcolor-input').keyup(null, function () {
                $("#layout-highlightcolor-selector").spectrum("set", $('#layout-highlightcolor-input').val());
            })


            var save = function (exit) {
                return function () {
                    var title = GetTextByKey('P_LAYOUT_SAVEINSPECTLAYOUT', 'Save Inspection Layout');
                    var name = content.find('.text-layout-name').val();
                    name = name && name.trim();
                    if (name == null || name.length === 0) {
                        showAlert(
                            GetTextByKey('P_LAYOUT_NAMEISEQUIRED', 'Layout name is required.'),
                            title, null,
                            function () { content.find('.text-layout-name').focus() }
                        );
                        return;
                    }
                    var layout = {
                        Id: info && info.Id,
                        Target: layouts.isteam ? 1 : 0,
                        Name: name,
                        Notes: content.find('.text-layout-notes').val(),
                        PageHeaderLeft: content.find('.layout-headers-left .editor-content').val(),
                        PageHeaderCenter: content.find('.layout-headers-middle .editor-content').val(),
                        PageHeaderRight: content.find('.layout-headers-right .editor-content').val(),
                        PageFooterLeft: content.find('.layout-footers-left .editor-content').val(),
                        PageFooterCenter: content.find('.layout-footers-middle .editor-content').val(),
                        PageFooterRight: content.find('.layout-footers-right .editor-content').val(),
                        Style: content.find('#layout-style').val(),
                        Spacing: content.find('#layout-spacing').val(),
                        PicturesDisplay: content.find('#layout-picturesdisplay').val(),
                        CaptionImages: content.find('#layout-captionimages').prop('checked'),
                        Divider: content.find('#layout-divider').val(),
                        HighlightColor: content.find('#layout-highlightcolor-input').val()
                    };
                    if (layout.Style === "")
                        layout.Style = -1;
                    var data = new FormData();
                    var files = content.find('.icon-file input[type="file"]').prop('files');
                    if (files && files[0]) {
                        data.append('iconFile', files && files[0]);
                    } else if (!deleteIcon) {
                        var logo = content.find('.img-icon-filename').prop('src');
                        layout.LOGO = logo.substr(logo.indexOf(';base64,') + 8);
                    }

                    var centerfiles = content.find('.icon-centerfile input[type="file"]').prop('files');
                    if (centerfiles && centerfiles[0]) {
                        data.append('iconCenterFile', centerfiles && centerfiles[0]);
                    } else if (!deleteCenterIcon) {
                        var logo = content.find('.img-icon-centerfilename').prop('src');
                        layout.CenterLOGO = logo.substr(logo.indexOf(';base64,') + 8);
                    }

                    var rightfiles = content.find('.icon-rightfile input[type="file"]').prop('files');
                    if (rightfiles && rightfiles[0]) {
                        data.append('iconRightFile', rightfiles && rightfiles[0]);
                    } else if (!deleteRightIcon) {
                        var logo = content.find('.img-icon-rightfilename').prop('src');
                        layout.RightLOGO = logo.substr(logo.indexOf(';base64,') + 8);
                    }

                    data.append('MethodName', 'SaveInspectLayout');
                    data.append('ClientData', encodeURIComponent(JSON.stringify(layout)));
                    $.ajax({
                        url: window.location.href,
                        type: 'POST',
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        data: data,
                        success: function (data) {
                            if ($.isArray(data)) {
                                if (data[1] !== 'Failed') {
                                    if (exit) {
                                        showRightPopup(false);
                                        layouts.refresh();
                                        return;
                                    }
                                    if (info == null) {
                                        info = layout;
                                    }
                                    info.Id = data[0];
                                    showAlert(data[1], title, null, function () {
                                        layouts.changed = true;
                                        modified = false;
                                    });
                                } else {
                                    showAlert(GetTextByKey('P_MA_PAGEERROR', 'An unknown error occurred.  Please refresh page.'), title);
                                }
                            } else {
                                showAlert(data, title);
                            }
                        },
                        error: function (err) {
                            showAlert(GetTextByKey('P_MA_PAGEERROR', 'An unknown error occurred.  Please refresh page.'), title);
                        }
                    });
                }
            }
            content.find('.button-save').on('click', save());
            content.find('.button-save-exit').on('click', save(true));
            showRightPopup(true);

            //new Editor(appendToolbar($(this).find('.layout-headers-left')));
            //new Editor(appendToolbar($(this).find('.layout-headers-middle')));
            //new Editor(appendToolbar($(this).find('.layout-headers-right')));
            //new Editor(appendToolbar($(this).find('.layout-footers-left')));
            //new Editor(appendToolbar($(this).find('.layout-footers-middle')));
            //new Editor(appendToolbar($(this).find('.layout-footers-right')));
            initEditor(content, '.layout-headers-left');
            initEditor(content, '.layout-headers-middle');
            initEditor(content, '.layout-headers-right');
            initEditor(content, '.layout-footers-left');
            initEditor(content, '.layout-footers-middle');
            initEditor(content, '.layout-footers-right');

            var onchange = function () { modified = true };
            if (info != null) {
                content.find('.text-layout-name').val(info.Name);
                if (info.LOGO != null) {
                    content.find('.img-icon-filename').attr('src', 'data:image/png;base64,' + info.LOGO);
                }
                if (info.CenterLOGO != null) {
                    content.find('.img-icon-centerfilename').attr('src', 'data:image/png;base64,' + info.CenterLOGO);
                }
                if (info.RightLOGO != null) {
                    content.find('.img-icon-rightfilename').attr('src', 'data:image/png;base64,' + info.RightLOGO);
                }
                content.find('.text-layout-notes').val(info.Notes);
                content.find('.layout-headers-left .editor-content').val(info.PageHeaderLeft);
                content.find('.layout-headers-middle .editor-content').val(info.PageHeaderCenter);
                content.find('.layout-headers-right .editor-content').val(info.PageHeaderRight);
                content.find('.layout-footers-left .editor-content').val(info.PageFooterLeft);
                content.find('.layout-footers-middle .editor-content').val(info.PageFooterCenter);
                content.find('.layout-footers-right .editor-content').val(info.PageFooterRight);

                content.find('#layout-style').val(info.Style).change();
                content.find('#layout-spacing').val(info.Spacing);
                content.find('#layout-picturesdisplay').val(info.PicturesDisplay);
                content.find('#layout-captionimages').prop('checked', info.CaptionImages);
                content.find('#layout-divider').val(info.Divider);
                content.find('#layout-highlightcolor-input').val(info.HighlightColor);
                content.find('#layout-highlightcolor-selector').spectrum("set", info.HighlightColor);
            }
            content.find('.text-layout-name').on('change', onchange);
            //content.find('#layout-style').on('change', onchange);
            content.find('.text-layout-notes').on('change', onchange);
            content.find('.layout-headers-left .editor-content').on('change', onchange);
            content.find('.layout-headers-middle .editor-content').on('change', onchange);
            content.find('.layout-headers-right .editor-content').on('change', onchange);
            content.find('.layout-footers-left .editor-content').on('change', onchange);
            content.find('.layout-footers-middle .editor-content').on('change', onchange);
            content.find('.layout-footers-right .editor-content').on('change', onchange);
            content.find('#layout-style').on('change', onchange);
            content.find('#layout-spacing').on('change', onchange);
            content.find('#layout-picturesdisplay').on('change', onchange);
            content.find('#layout-captionimages').on('change', onchange);
            content.find('#layout-divider').on('change', onchange);
            content.find('#layout-highlightcolor-input').on('change', onchange);

            content.find('.text-layout-name').focus();
        });
    }

    Object.defineProperty(layouts, 'onadd', {
        value: function () {
            editLayout();
        }
    });

    function doedit(id) {
        showmaskbg(true);
        var p = [layouts.isteam ? 1 : 0, id];
        inspectionrequest('GetInspectLayout', JSON.stringify(p), function (data) {
            editLayout(data);
        }, function () {
        });
    }

    Object.defineProperty(layouts, 'onedit', {
        value: function () {
            if (layouts.grid && layouts.grid.selectedIndex >= 0) {
                var id = layouts.grid.source[layouts.grid.selectedIndex].Values.Id;
                doedit(id);
            }
        }
    });

    function initColorCtrl() {
        $('#layout-highlightcolor-selector').spectrum({
            allowEmpty: true,
            color: "#FFF",
            showInput: true,
            containerClassName: "full-spectrum",
            showInitial: true,
            showPalette: true,
            showSelectionPalette: true,
            showAlpha: true,
            maxPaletteSize: 10,
            preferredFormat: "hex",
            localStorageKey: "spectrum.demo",
            chooseText: GetTextByKey("P_IPT_OK", "OK"),
            cancelText: GetTextByKey("P_IPT_CANCEL", "Cancel"),
            clearText: GetTextByKey("P_SPECTRUM_CLEARCOLORSELECTION", "Clear Color Selection"),
            noColorSelectedText: GetTextByKey("P_SPECTRUM_NOCOLORSELECTED", "No Color Selected"),
            move: function (color) {
                if (color)
                    $('#layout-highlightcolor-input').val(color.toHexString().toUpperCase()); // #ff0000
            },
            show: function () {

            },
            beforeShow: function () {

            },
            hide: function (color) {
                if (color) {
                    $('#layout-highlightcolor-input').val(color.toHexString().toUpperCase()); // #ff0000
                }
            },

            palette: [
                ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", /*"rgb(153, 153, 153)","rgb(183, 183, 183)",*/
                    "rgb(204, 204, 204)", "rgb(217, 217, 217)", /*"rgb(239, 239, 239)", "rgb(243, 243, 243)",*/ "rgb(255, 255, 255)"],
                ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
                    "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
                ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
                    "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
                    "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
                    "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
                    "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
                    "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
                    "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
                    "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
                    /*"rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)",
                    "rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)",*/
                    "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
                    "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
            ]
        });
    }

    return layouts;
});