/*
 * (c) Copyright Ascensio System SIA 2010-2023
 *
 * This program is a free software product. You can redistribute it and/or
 * modify it under the terms of the GNU Affero General Public License (AGPL)
 * version 3 as published by the Free Software Foundation. In accordance with
 * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
 * that Ascensio System SIA expressly excludes the warranty of non-infringement
 * of any third-party rights.
 *
 * This program is distributed WITHOUT ANY WARRANTY; without even the implied
 * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
 * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
 *
 * You can contact Ascensio System SIA at 20A-6 Ernesta Birznieka-Upish
 * street, Riga, Latvia, EU, LV-1050.
 *
 * The  interactive user interfaces in modified source and object code versions
 * of the Program must display Appropriate Legal Notices, as required under
 * Section 5 of the GNU AGPL version 3.
 *
 * Pursuant to Section 7(b) of the License you must retain the original Product
 * logo when distributing the program. Pursuant to Section 7(e) we decline to
 * grant you any rights under trademark law for use of our trademarks.
 *
 * All the Product's GUI elements, including illustrations and icon sets, as
 * well as technical writing content are licensed under the terms of the
 * Creative Commons Attribution-ShareAlike 4.0 International. See the License
 * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 *
 */
/**
 *  InsTab.js
 *
 *  Created on 12.03.2024
 *
 */

define([
    'common/main/lib/util/utils',
    'common/main/lib/component/BaseView',
    'common/main/lib/component/Layout',
    'common/main/lib/component/DimensionPicker'
], function () {
    'use strict';

    PDFE.Views.InsTab = Common.UI.BaseView.extend(_.extend((function(){
        var template =
            '<section class="panel" data-tab="ins">' +
                '<div class="group">' +
                    '<span class="btn-slot text x-huge slot-inspage"></span>' +
                '</div>' +
                '<div class="group" style="display:none;"></div>' +
                '<div class="separator long"></div>' +
                '<div class="group">' +
                    '<span class="btn-slot text x-huge" id="slot-btn-inserttable"></span>' +
                '</div>' +
                '<div class="separator long"></div>' +
                '<div class="group">' +
                    '<span class="btn-slot text x-huge slot-instext"></span>' +
                    '<span class="btn-slot text x-huge" id="slot-btn-instextart"></span>' +
                    '<span class="btn-slot text x-huge slot-insertimg"></span>' +
                    '<span class="btn-slot text x-huge" id="slot-btn-inssmartart"></span>' +
                    '<span class="btn-slot text x-huge" id="slot-btn-insertchart"></span>' +
                '</div>' +
                '<div class="separator long invisible"></div>' +
                '<div class="group small" id="slot-combo-insertshape"></div>' +
                '<div class="separator long"></div>' +
                '<div class="group">' +
                    '<span class="btn-slot text x-huge" id="slot-btn-insertlink"></span>' +
                '</div>' +
                '<div class="separator long"></div>' +
                // '<div class="group">' +
                //     '<span class="btn-slot text x-huge" id="slot-btn-editheader"></span>' +
                //     '<span class="btn-slot text x-huge" id="slot-btn-datetime"></span>' +
                //     '<span class="btn-slot text x-huge" id="slot-btn-slidenum"></span>' +
                // '</div>' +
                // '<div class="separator long"></div>' +
                '<div class="group">' +
                    '<span class="btn-slot text x-huge" id="slot-btn-insertequation"></span>' +
                    '<span class="btn-slot text x-huge" id="slot-btn-inssymbol"></span>' +
                '</div>' +
            '</section>';

        return {
            options: {},

            setEvents: function () {
                var me = this;

                // me.btnEditHeader.on('click', _.bind(function () {
                //     me.fireEvent('insert:header', ['header']);
                // }, me));
                // me.btnInsDateTime.on('click', _.bind(function () {
                //     me.fireEvent('insert:header', ['datetime']);
                // }, me));
                // me.btnInsSlideNum.on('click', _.bind(function () {
                //     me.fireEvent('insert:header', ['slidenum']);
                // }, me));
                me.btnInsertHyperlink.on('click', _.bind(function () {
                    me.fireEvent('insert:hyperlink');
                }, me));
                 me.mnuTablePicker.on('select', _.bind(function (picker, columns, rows, e) {
                    me.fireEvent('insert:table', ['picker', columns, rows]);
                }, me));
                me.btnInsertTable.menu.on('item:click', function (menu, item, e) {
                    me.fireEvent('insert:table', [item.value]);
                });
                me.btnInsertEquation.on('click', _.bind(function () {
                    me.fireEvent('insert:equation');
                }, me));
                me.btnInsertSymbol.menu.items[2].on('click', _.bind(function () {
                    me.fireEvent('insert:symbol');
                }, this));
                me.mnuInsertSymbolsPicker.on('item:click',_.bind(function (picker, item, record, e) {
                    me.fireEvent('insert:symbol', [record]);
                }, this));
            },

            initialize: function (options) {
                Common.UI.BaseView.prototype.initialize.call(this);
                this.toolbar = options.toolbar;
                this.appConfig = options.mode;

                this.lockedControls = [];

                var me = this;
                var _set = Common.enumLock;

                me.btnInsertTable = new Common.UI.Button({
                    id: 'tlbtn-inserttable',
                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'toolbar__icon btn-inserttable',
                    caption: me.capInsertTable,
                    lock: [_set.pageDeleted, _set.lostConnect, _set.disableOnStart],
                    menu: new Common.UI.Menu({
                        cls: 'shifted-left',
                        items: [
                            {template: _.template('<div id="id-toolbar-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>')},
                            {caption: me.mniCustomTable, value: 'custom'},
                            // {caption: me.mniInsertSSE, value: 'sse'}
                        ]
                    }),
                    action: 'insert-table',
                    dataHint: '1',
                    dataHintDirection: 'bottom',
                    dataHintOffset: 'small'
                });
                me.lockedControls.push(me.btnInsertTable);

                me.btnInsertChart = new Common.UI.Button({
                    id: 'tlbtn-insertchart',
                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'toolbar__icon btn-insertchart',
                    caption: me.capInsertChart,
                    lock: [_set.pageDeleted, _set.lostConnect, _set.disableOnStart],
                    menu: true,
                    dataHint: '1',
                    dataHintDirection: 'bottom',
                    dataHintOffset: 'small'
                });
                me.lockedControls.push(me.btnInsertChart);

                this.btnInsertSmartArt = new Common.UI.Button({
                    id: 'tlbtn-insertsmartart',
                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'toolbar__icon btn-smart-art',
                    lock: [_set.pageDeleted, _set.lostConnect, _set.disableOnStart],
                    caption: me.capBtnInsSmartArt,
                    menu: true,
                    action: 'insert-smartart',
                    dataHint: '1',
                    dataHintDirection: 'bottom',
                    dataHintOffset: 'small'
                });
                me.lockedControls.push(this.btnInsertSmartArt);

                me.btnInsertEquation = new Common.UI.Button({
                    id: 'tlbtn-insertequation',
                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'toolbar__icon btn-insertequation',
                    caption: me.capInsertEquation,
                    lock: [_set.pageDeleted, _set.paragraphLock, _set.lostConnect, _set.disableOnStart],
                    split: true,
                    menu: new Common.UI.Menu(),
                    action: 'insert-equation',
                    dataHint: '1',
                    dataHintDirection: 'bottom',
                    dataHintOffset: 'small'
                });
                me.lockedControls.push(this.btnInsertEquation);

                me.btnInsertSymbol = new Common.UI.Button({
                    id: 'tlbtn-insertsymbol',
                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'toolbar__icon btn-symbol',
                    caption: me.capBtnInsSymbol,
                    lock: [_set.paragraphLock, _set.lostConnect, _set.noParagraphSelected],
                    menu: new Common.UI.Menu({
                        style: 'min-width: 100px;',
                        items: [
                            {template: _.template('<div id="id-toolbar-menu-symbols"></div>')},
                            {caption: '--'},
                            new Common.UI.MenuItem({
                                caption: this.textMoreSymbols
                            })
                        ]
                    }),
                    action: 'insert-symbol',
                    dataHint: '1',
                    dataHintDirection: 'bottom',
                    dataHintOffset: 'small'
                });
                me.lockedControls.push(me.btnInsertSymbol);

                me.btnInsertHyperlink = new Common.UI.Button({
                    id: 'tlbtn-insertlink',
                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'toolbar__icon btn-big-inserthyperlink',
                    caption: me.capInsertHyperlink,
                    lock: [_set.hyperlinkLock, _set.paragraphLock, _set.lostConnect, _set.noParagraphSelected],
                    dataHint: '1',
                    dataHintDirection: 'bottom',
                    dataHintOffset: 'small'
                });
                me.lockedControls.push(me.btnInsertHyperlink);

                me.btnInsertTextArt = new Common.UI.Button({
                    id: 'tlbtn-inserttextart',
                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'toolbar__icon btn-textart',
                    caption: me.capInsertTextArt,
                    lock: [_set.pageDeleted, _set.lostConnect, _set.disableOnStart],
                    menu: new Common.UI.Menu({
                        cls: 'menu-shapes',
                        items: [
                            {template: _.template('<div id="view-insert-art" class="margin-left-5" style="width: 239px;"></div>')}
                        ]
                    }),
                    action: 'insert-textart',
                    dataHint: '1',
                    dataHintDirection: 'bottom',
                    dataHintOffset: 'small'
                });
                me.lockedControls.push(me.btnInsertTextArt);
/*
                me.btnEditHeader = new Common.UI.Button({
                    id: 'id-toolbar-btn-editheader',
                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'toolbar__icon btn-editheader',
                    caption: me.capBtnInsHeaderFooter,
                    lock: [_set.lostConnect, _set.disableOnStart],
                    dataHint: '1',
                    dataHintDirection: 'bottom',
                    dataHintOffset: 'small'
                });
                me.lockedControls.push(me.btnEditHeader);

                me.btnInsDateTime = new Common.UI.Button({
                    id: 'id-toolbar-btn-datetime',
                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'toolbar__icon btn-datetime',
                    caption: me.capBtnDateTime,
                    lock: [_set.pageDeleted, _set.lostConnect, _set.paragraphLock, _set.disableOnStart],
                    dataHint: '1',
                    dataHintDirection: 'bottom',
                    dataHintOffset: 'small'
                });
                me.lockedControls.push(me.btnInsDateTime);

                me.btnInsSlideNum = new Common.UI.Button({
                    id: 'id-toolbar-btn-slidenum',
                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'toolbar__icon btn-pagenum',
                    caption: me.capBtnSlideNum,
                    lock: [_set.pageDeleted, _set.lostConnect, _set.paragraphLock, _set.disableOnStart],
                    dataHint: '1',
                    dataHintDirection: 'bottom',
                    dataHintOffset: 'small'
                });
                me.lockedControls.push(me.btnInsSlideNum);
*/
                me.cmbInsertShape = new Common.UI.ComboDataViewShape({
                    cls: 'combo-styles shapes',
                    itemWidth: 20,
                    itemHeight: 20,
                    menuMaxHeight: 652,
                    menuWidth: 330,
                    style: 'width: 145px;',
                    enableKeyEvents: true,
                    lock: [_set.pageDeleted, _set.lostConnect, _set.disableOnStart],
                    dataHint: '1',
                    dataHintDirection: 'bottom',
                    dataHintOffset: '-16, 0'
                });
                me.lockedControls.push(me.cmbInsertShape);
                Common.UI.LayoutManager.addControls(me.lockedControls);
                Common.Utils.lockControls(_set.disableOnStart, true, {array: this.lockedControls});
            },

            render: function (el) {
                if ( el ) el.html( this.getPanel() );

                return this;
            },

            getPanel: function () {
                this.$el = $(_.template(template)( {} ));
                var $host = this.$el;
                var _injectComponent = function (id, cmp) {
                    Common.Utils.injectComponent($host.find(id), cmp);
                };
                _injectComponent('#slot-btn-inssmartart', this.btnInsertSmartArt);
                _injectComponent('#slot-btn-insertequation', this.btnInsertEquation);
                _injectComponent('#slot-btn-inssymbol', this.btnInsertSymbol);
                _injectComponent('#slot-btn-insertlink', this.btnInsertHyperlink);
                _injectComponent('#slot-btn-inserttable', this.btnInsertTable);
                _injectComponent('#slot-btn-insertchart', this.btnInsertChart);
                _injectComponent('#slot-btn-instextart', this.btnInsertTextArt);
                // _injectComponent('#slot-btn-editheader', this.btnEditHeader);
                // _injectComponent('#slot-btn-datetime', this.btnInsDateTime);
                // _injectComponent('#slot-btn-slidenum', this.btnInsSlideNum);
                _injectComponent('#slot-combo-insertshape', this.cmbInsertShape);

                if (this.toolbar && this.toolbar.$el) {
                    this.btnsInsertImage = Common.Utils.injectButtons($host.find('.slot-insertimg').add(this.toolbar.$el.find('.slot-insertimg')), 'tlbtn-insertimage-', 'toolbar__icon btn-insertimage', this.capInsertImage,
                        [Common.enumLock.pageDeleted, Common.enumLock.lostConnect, Common.enumLock.disableOnStart], false, true, undefined, '1', 'bottom', 'small', undefined, 'insert-image');
                    this.btnsInsertText = Common.Utils.injectButtons($host.find('.slot-instext').add(this.toolbar.$el.find('.slot-instext')), 'tlbtn-inserttext-', 'toolbar__icon btn-big-text', this.capInsertText,
                        [Common.enumLock.pageDeleted, Common.enumLock.lostConnect, Common.enumLock.disableOnStart], true, true, true, '1', 'bottom', 'small', undefined, 'insert-text');
                    this.btnsInsertShape = Common.Utils.injectButtons($host.find('.slot-insertshape').add(this.toolbar.$el.find('.slot-insertshape')), 'tlbtn-insertshape-', 'toolbar__icon btn-insertshape', this.capInsertShape,
                        [Common.enumLock.pageDeleted, Common.enumLock.lostConnect, Common.enumLock.disableOnStart], false, true, true, '1', 'bottom', 'small', undefined, 'insert-shape');
                    this.btnsAddPage = Common.Utils.injectButtons($host.find('.slot-inspage').add(this.toolbar.$el.find('.slot-inspage')), 'tlbtn-insertpage-', 'toolbar__icon btn-blankpage', this.capInsPage,
                        [Common.enumLock.lostConnect, Common.enumLock.disableOnStart], true, true, false, '1', 'bottom', 'small', undefined, 'insert-page');
                }

                var created = this.btnsInsertImage.concat(this.btnsInsertText, this.btnsInsertShape, this.btnsAddPage);
                Common.Utils.lockControls(Common.enumLock.disableOnStart, true, {array: created});
                Array.prototype.push.apply(this.lockedControls, created);
                Common.UI.LayoutManager.addControls(created);

                return this.$el;
            },

            onAppReady: function (config) {
                var me = this;
                me.btnsInsertImage.forEach(function (btn) {
                    btn.updateHint(me.tipInsertImage);
                    btn.setMenu(
                        new Common.UI.Menu({
                            items: [
                                {caption: me.mniImageFromFile, value: 'file'},
                                {caption: me.mniImageFromUrl, value: 'url'},
                                {caption: me.mniImageFromStorage, value: 'storage'}
                            ]
                        }).on('item:click', function (menu, item, e) {
                            me.fireEvent('insert:image', [item.value]);
                        })
                    );
                    btn.menu.items[2].setVisible(config.canRequestInsertImage || config.fileChoiceUrl && config.fileChoiceUrl.indexOf("{documentType}")>-1);
                });

                me.btnsInsertText.forEach(function (button) {
                    button.updateHint([me.tipInsertHorizontalText, me.tipInsertText]);
                    button.options.textboxType = 'textRect';
                    button.setMenu(new Common.UI.Menu({
                        items: [
                            {
                                caption: me.tipInsertHorizontalText,
                                checkable: true,
                                checkmark: false,
                                iconCls     : 'menu__icon btn-text',
                                toggleGroup: 'textbox',
                                value: 'textRect',
                                iconClsForMainBtn: 'btn-big-text'
                            },
                            {
                                caption: me.tipInsertVerticalText,
                                checkable: true,
                                checkmark: false,
                                iconCls     : 'menu__icon btn-text-vertical',
                                toggleGroup: 'textbox',
                                value: 'textRectVertical',
                                iconClsForMainBtn: 'btn-big-text-vertical'
                            },
                        ]
                    }));
                    button.on('click', function (btn, e) {
                        me.fireEvent('insert:text-btn', [btn, e]);
                    });
                    button.menu.on('item:click', function(btn, e) {
                        button.toggle(true);
                        me.fireEvent('insert:text-menu', [button, e]);
                    });
                });

                me.btnsInsertShape.forEach(function (btn) {
                    btn.updateHint(me.tipInsertShape);
                    btn.setMenu(
                        new Common.UI.Menu({
                            cls: 'menu-shapes menu-insert-shape'
                        }).on('hide:after', function (e) {
                            me.fireEvent('insert:shape', ['menu:hide']);
                        })
                    );
                });

                me.btnsAddPage.forEach(function (btn) {
                    btn.updateHint([me.tipInsertPageAfter, me.tipInsertPage]);
                    btn.setMenu(
                        new Common.UI.Menu({
                            items: [
                                {caption: me.txtNewPageBefore, value: true},
                                {caption: me.txtNewPageAfter, value: false}
                            ]
                        }).on('item:click', function (menu, item, e) {
                            me.fireEvent('insert:page', [item.value]);
                        })
                    );
                    btn.on('click', function (btn, e) {
                        me.fireEvent('insert:page');
                    });
                    if (btn.cmpEl.closest('[data-tab=ins]').length>0)
                        btn.setCaption(me.capBlankPage);
                });

                this.btnInsertTable.updateHint(this.tipInsertTable);
                this.btnInsertSmartArt.updateHint(this.tipInsertSmartArt);
                this.btnInsertChart.updateHint(this.tipInsertChart);
                this.btnInsertEquation.updateHint(this.tipInsertEquation);
                this.btnInsertSymbol.updateHint(this.tipInsertSymbol);
                this.btnInsertTextArt.updateHint(this.tipInsertTextArt);
                PDFE.getController('Common.Controllers.Shortcuts').updateShortcutHints({
                    InsertHyperlink: {
                        btn: this.btnInsertHyperlink,
                        label: this.tipInsertHyperlink
                    }
                });
                // this.btnEditHeader.updateHint(this.tipEditHeaderFooter);
                // this.btnInsDateTime.updateHint(this.tipDateTime);
                // this.btnInsSlideNum.updateHint(this.tipPageNum);
                this.btnInsertChart.setMenu( new Common.UI.Menu({
                    style: 'width: 364px;padding-top: 12px;',
                    items: [
                        {template: _.template('<div id="id-toolbar-menu-insertchart" class="menu-insertchart"></div>')}
                    ]
                }));

                var onShowBefore = function(menu) {
                    var picker = new Common.UI.DataView({
                        el: $('#id-toolbar-menu-insertchart'),
                        parentMenu: menu,
                        outerMenu: {menu: menu, index:0},
                        showLast: false,
                        restoreHeight: 535,
                        groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
                        store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
                        itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon uni-scale\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
                    });
                    picker.on('item:click', function (picker, item, record, e) {
                        if (record)
                            me.fireEvent('insert:chart', [record.get('type')]);
                    });
                    menu.off('show:before', onShowBefore);
                    menu.setInnerMenu([{menu: picker, index: 0}]);
                };
                this.btnInsertChart.menu.on('show:before', onShowBefore);
                this.btnInsertChart.menu.on('show:before', function() {
                    Common.UI.TooltipManager.closeTip('pdfCharts');
                });

                this.btnInsertSmartArt.setMenu(new Common.UI.Menu({
                    cls: 'shifted-right',
                    items: []
                }));

                var onShowBeforeSmartArt = function (menu) { // + <% if(typeof imageUrl === "undefined" || imageUrl===null || imageUrl==="") { %> style="visibility: hidden;" <% } %>/>',
                    var smartArtData = Common.define.smartArt.getSmartArtData();
                    smartArtData.forEach(function (item, index) {
                        var length = item.items.length,
                            width = 399;
                        if (length < 5) {
                            width = length * (70 + 8) + 9; // 4px margin + 4px margin
                        }
                        me.btnInsertSmartArt.menu.addItem({
                            caption: item.caption,
                            value: item.sectionId,
                            itemId: item.id,
                            itemsLength: length,
                            iconCls: item.icon ? 'menu__icon ' + item.icon : undefined,
                            menu: new Common.UI.Menu({
                                items: [
                                    {template: _.template('<div id="' + item.id + '" class="menu-add-smart-art margin-left-5" style="width: ' + width + 'px; height: 500px;"></div>')}
                                ],
                                menuAlign: 'tl-tr',
                            })}, true);
                    });
                    var sa_items = me.btnInsertSmartArt.menu.getItems(true);
                    sa_items.forEach(function (item, index) {
                        var items = [];
                        for (var i=0; i<item.options.itemsLength; i++) {
                            items.push({
                                isLoading: true
                            });
                        }
                        item.menuPicker = new Common.UI.DataView({
                            el: $('#' + item.options.itemId),
                            parentMenu: sa_items[index].menu,
                            itemTemplate: _.template([
                                '<% if (isLoading) { %>',
                                '<div class="loading-item" style="width: 70px; height: 70px;">',
                                '<i class="loading-spinner"></i>',
                                '</div>',
                                '<% } else { %>',
                                '<div>',
                                '<img src="<%= imageUrl %>" width="' + 70 + '" height="' + 70 + '" />',
                                '</div>',
                                '<% } %>'
                            ].join('')),
                            store: new Common.UI.DataViewStore(items),
                            delayRenderTips: true,
                            scrollAlwaysVisible: true,
                            showLast: false
                        });
                        item.menuPicker.on('item:click', function(picker, item, record, e) {
                            if (record && record.get('value') !== null) {
                                me.fireEvent('insert:smartart', [record.get('value')]);
                            }
                            Common.NotificationCenter.trigger('edit:complete', me);
                        });
                        item.menuPicker.loaded = false;
                        item.$el.on('mouseenter', function () {
                            if (!item.menuPicker.loaded) {
                                me.fireEvent('smartart:mouseenter', [item.value]);
                            }
                        });
                        item.$el.on('mouseleave', function () {
                            me.fireEvent('smartart:mouseleave', [item.value]);
                        });
                    });
                    menu.off('show:before', onShowBeforeSmartArt);
                };
                this.btnInsertSmartArt.menu.on('show:before', onShowBeforeSmartArt);
                this.btnInsertSmartArt.menu.on('show:before', function() {
                    Common.UI.TooltipManager.closeTip('pdfCharts');
                });

                var onShowBeforeTextArt = function (menu) {
                    var collection = PDFE.getCollection('Common.Collections.TextArt');
                    if (collection.length<1)
                        PDFE.getController('Main').fillTextArt(null, true);
                    var picker = new Common.UI.DataView({
                        el: $('#view-insert-art', menu.$el),
                        store: collection,
                        parentMenu: menu,
                        outerMenu: {menu: menu, index:0},
                        showLast: false,
                        itemTemplate: _.template('<div class="item-art"><img src="<%= imageUrl %>" id="<%= id %>" style="width:50px;height:50px;"></div>')
                    });
                    picker.on('item:click', function (picker, item, record, e) {
                        if (record)
                            me.fireEvent('insert:textart', [record.get('data')]);
                        if (e.type !== 'click') menu.hide();
                    });
                    menu.off('show:before', onShowBeforeTextArt);
                    menu.setInnerMenu([{menu: picker, index: 0}]);
                };
                this.btnInsertTextArt.menu.on('show:before', onShowBeforeTextArt);

                // set dataviews
                this.specSymbols = [
                    {symbol: 8226,     description: this.textBullet},
                    {symbol: 8364,     description: this.textEuro},
                    {symbol: 65284,    description: this.textDollar},
                    {symbol: 165,      description: this.textYen},
                    {symbol: 169,      description: this.textCopyright},
                    {symbol: 174,      description: this.textRegistered},
                    {symbol: 189,      description: this.textOneHalf},
                    {symbol: 188,      description: this.textOneQuarter},
                    {symbol: 8800,     description: this.textNotEqualTo},
                    {symbol: 177,      description: this.textPlusMinus},
                    {symbol: 247,      description: this.textDivision},
                    {symbol: 8730,     description: this.textSquareRoot},
                    {symbol: 8804,     description: this.textLessEqual},
                    {symbol: 8805,     description: this.textGreaterEqual},
                    {symbol: 8482,     description: this.textTradeMark},
                    {symbol: 8734,     description: this.textInfinity},
                    {symbol: 126,      description: this.textTilde},
                    {symbol: 176,      description: this.textDegree},
                    {symbol: 167,      description: this.textSection},
                    {symbol: 945,      description: this.textAlpha},
                    {symbol: 946,      description: this.textBetta},
                    {symbol: 960,      description: this.textLetterPi},
                    {symbol: 916,      description: this.textDelta},
                    {symbol: 9786,     description: this.textSmile},
                    {symbol: 9829,     description: this.textBlackHeart}
                ];
                this.mnuInsertSymbolsPicker = new Common.UI.DataView({
                    el: $('#id-toolbar-menu-symbols'),
                    cls: 'no-borders-item',
                    parentMenu: this.btnInsertSymbol.menu,
                    outerMenu: {menu: this.btnInsertSymbol.menu, index:0},
                    restoreHeight: 290,
                    delayRenderTips: true,
                    scrollAlwaysVisible: true,
                    store: new Common.UI.DataViewStore(this.loadRecentSymbolsFromStorage()),
                    itemTemplate: _.template('<div class="item-symbol" dir="ltr" <% if (typeof font !== "undefined" && font !=="") { %> style ="font-family: <%= font %>"<% } %>>&#<%= symbol %></div>')
                });
                this.btnInsertSymbol.menu.setInnerMenu([{menu: this.mnuInsertSymbolsPicker, index: 0}]);
                this.btnInsertSymbol.menu.on('show:before',  _.bind(function() {
                    this.mnuInsertSymbolsPicker.deselectAll();
                }, this));

                this.mnuTablePicker = new Common.UI.DimensionPicker({
                    el: $('#id-toolbar-menu-tablepicker'),
                    minRows: 8,
                    minColumns: 10,
                    maxRows: 8,
                    maxColumns: 10
                });

            },

            show: function () {
                Common.UI.BaseView.prototype.show.call(this);
                this.fireEvent('show', this);
            },

            getButtons: function(type) {
                if (type===undefined)
                    return this.lockedControls;
                return [];
            },

            SetDisabled: function (state) {
                this.lockedControls && this.lockedControls.forEach(function(button) {
                    if ( button ) {
                        button.setDisabled(state);
                    }
                }, this);
            },

            loadRecentSymbolsFromStorage: function(){
                var recents = Common.localStorage.getItem('pdfe-fastRecentSymbols');
                var arr = (!!recents) ? JSON.parse(recents) :
                    [
                        { symbol: 8226,     font: 'Arial'},
                        { symbol: 8364,     font: 'Arial'},
                        { symbol: 65284,    font: 'Arial'},
                        { symbol: 165,      font: 'Arial'},
                        { symbol: 169,      font: 'Arial'},
                        { symbol: 174,      font: 'Arial'},
                        { symbol: 189,      font: 'Arial'},
                        { symbol: 188,      font: 'Arial'},
                        { symbol: 8800,     font: 'Arial'},
                        { symbol: 177,      font: 'Arial'},
                        { symbol: 247,      font: 'Arial'},
                        { symbol: 8730,     font: 'Arial'},
                        { symbol: 8804,     font: 'Arial'},
                        { symbol: 8805,     font: 'Arial'},
                        { symbol: 8482,     font: 'Arial'},
                        { symbol: 8734,     font: 'Arial'},
                        { symbol: 126,      font: 'Arial'},
                        { symbol: 176,      font: 'Arial'},
                        { symbol: 167,      font: 'Arial'},
                        { symbol: 945,      font: 'Arial'},
                        { symbol: 946,      font: 'Arial'},
                        { symbol: 960,      font: 'Arial'},
                        { symbol: 916,      font: 'Arial'},
                        { symbol: 9786,     font: 'Arial'},
                        { symbol: 9829,     font: 'Arial'}
                    ];
                arr.forEach(function (item){
                    item.tip = this.getSymbolDescription(item.symbol);
                }.bind(this));
                return arr;
            },

            saveSymbol: function(symbol, font) {
                var maxLength =25,
                    picker = this.mnuInsertSymbolsPicker;
                var item = picker.store.find(function(item){
                    return item.get('symbol') == symbol && item.get('font') == font
                });

                item && picker.store.remove(item);
                picker.store.add({symbol: symbol, font: font, tip: this.getSymbolDescription(symbol)},{at:0});
                picker.store.length > maxLength && picker.store.remove(picker.store.last());

                var arr = picker.store.map(function (item){
                    return {symbol: item.get('symbol'), font: item.get('font')};
                });
                var sJSON = JSON.stringify(arr);
                Common.localStorage.setItem( 'pdfe-fastRecentSymbols', sJSON);
            },

            getSymbolDescription: function(symbol){
                var  specSymbol = this.specSymbols.find(function (item){return item.symbol == symbol});
                return !!specSymbol ? specSymbol.description : this.capBtnInsSymbol + ': ' + symbol;
            },

            onComboOpen: function (needfocus, combo, e, params) {
                if (params && params.fromKeyDown) return;
                _.delay(function() {
                    var input = $('input', combo.cmpEl).select();
                    if (needfocus) input.focus();
                    else if (!combo.isMenuOpen()) input.one('mouseup', function (e) { e.preventDefault(); });
                }, 10);
            },

            updateComboAutoshapeMenu: function (collection) {
                var me = this,
                    recents = Common.localStorage.getItem('pdfe-recent-shapes');
                recents = recents ? JSON.parse(recents) : null;
                me.cmbInsertShape.setMenuPicker(collection, recents, me.textRecentlyUsed);
            },

            updateAutoshapeMenu: function (menuShape, collection) {
                var me = this,
                    index = $(menuShape.el).prop('id').slice(-1);

                var menuitem = new Common.UI.MenuItem({
                    template: _.template('<div id="id-toolbar-menu-insertshape-<%= options.index %>" class="menu-insertshape"></div>'),
                    index: index
                });
                menuShape.addItem(menuitem, true);

                var recents = Common.localStorage.getItem('pdfe-recent-shapes');
                recents = recents ? JSON.parse(recents) : null;

                var shapePicker = new Common.UI.DataViewShape({
                    el: $('#id-toolbar-menu-insertshape-'+index),
                    itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon uni-scale\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
                    groups: collection,
                    parentMenu: menuShape,
                    outerMenu: {menu: menuShape, index:0},
                    restoreHeight: 652,
                    textRecentlyUsed: me.textRecentlyUsed,
                    recentShapes: recents
                });
                shapePicker.on('item:click', function(picker, item, record, e) {
                    if (e.type !== 'click') Common.UI.Menu.Manager.hideAll();
                    if (record) {
                        me.fireEvent('insert:shape', [record.get('data').shapeType]);
                        me.cmbInsertShape.updateComboView(record);
                    }
                });
                menuShape.setInnerMenu([{menu: shapePicker, index: 0}]);
            }
        }
    }()), PDFE.Views.InsTab || {}));
});