var $content;
var $builder;
var iframe;
let screen = 'desktop';
var inlineEditors = [];
let preventEdit = false;
var edited_item = false;
var ui_mode = jQuery('body').hasClass('mfn-dev-ui') ? 'dev' : 'default';
const devices = ['desktop', 'laptop', 'tablet', 'mobile'];

var MfnVbApp = (function($) {

let $editpanel = $(document);
let prebuiltType = 'end';
let sample_img = mfn.themepath+'/muffin-options/svg/placeholders/image.svg';
let sample_icon = 'icon-lamp';
let mfnbuilder = localStorage.getItem('mfn-builder') ? JSON.parse(localStorage.getItem('mfn-builder')) : {};
let scroll_top = 0;
let formaction = $('.btn-save-form-primary').attr('data-action');
let savebutton = $('.btn-save-form-primary span').text();
let previewTab;
let pageid = mfn.pageid;
let samplecontentid = mfn.sample_content_id;
let wpnonce = mfn.wpnonce;
var builder_type = mfn.builder_type;
let $edited_div = false;
let inlineIndex = 0;
let $navigator = $('.mfn-navigator');
let winH = $(window).height();
let winW = $(window).width();
let item_name = false;
var elements_ver = 'default';
let $undo = $('.btn-undo.mfn-history-btn');
let $redo = $('.btn-redo.mfn-history-btn');

//localStorage.setItem('mfnhistory', []);

//console.log(mfn.pagedata);
 
// new elements objects
var elements = {
    wrap: function(size) {
        var uid = getUid();

        var size_class = size;

        if( size != 'divider' ) size_class = sizes.filter( s => s.key === size )[0];

        var new_wrap = {};
        new_wrap = JSON.parse( JSON.stringify(mfn.elements.wrap) );

        new_wrap['title'] = 'Wrap';

        if( builder_type == 'header' ) {
            // header presets
            new_wrap.attr['css_advanced_flex_grow'] = {val: {desktop: '1', laptop: '1', tablet: '1', mobile: '1'}, selector: '.mcb-section .mcb-wrap-mfnuidelement', style: 'flex-grow'};
            new_wrap.attr['css_advanced_align_items'] = {val: {desktop: 'center', laptop: 'center', tablet: 'center', mobile: 'center'}, selector: '.mcb-section .mcb-wrap-mfnuidelement .mcb-wrap-inner', style: 'align-items'};
        }

        new_wrap.uid = uid;
        new_wrap.size = size;
        new_wrap.tablet_size = size;
        new_wrap.laptop_size = size;
        new_wrap.mobile_size = '1/1';
        new_wrap.tablet_resized = "0";

        mfn.pagedata.push(new_wrap);

        var answer = {};
        if( size == 'divider' ) {
            answer.html = '<div data-uid="'+uid+'" class="blink wrap mcb-wrap vb-item vb-item-wrap mcb-wrap-'+uid+' divider clearfix"><div class="mcb-wrap-inner mcb-wrap-inner-'+uid+'"><div class="wrap-header mfn-header mfn-header-grey"><div class="mfn-option-dropdown parent-selector"><a title="Select parent" href="#" class="mfn-option-btn mfn-option-grey parent-section-select"><span class="mfn-icon mfn-icon-selector-parent"></span></a><div class="dropdown-wrapper"><a class="mfn-dropdown-item parent-section-select" href="#"><span class="mfn-icon mfn-icon-selector-child"></span> Section</a><a class="mfn-dropdown-item parent-wrap-select" href="#"><span class="mfn-icon mfn-icon-selector-child"></span> Wrap</a></div><a class="mfn-option-btn mfn-option-grey mfn-element-drag mfn-wrap-drag" title="Drag & Drop" data-tooltip="Drag" href="#"><span class="mfn-icon mfn-icon-drag"></span></a><a class="mfn-option-btn mfn-option-grey mfn-module-clone mfn-wrap-clone" title="Clone" data-tooltip="Clone" href="#"><span class="mfn-icon mfn-icon-clone"></span></a> <a class="mfn-option-btn mfn-option-grey mfn-element-delete" data-tooltip="Delete" title="Delete" href="#"><span class="mfn-icon mfn-icon-delete"></span></a> </div></div></div>';
        }else{
            answer.html = '<div data-uid="'+uid+'" data-desktop-size="'+size+'" data-laptop-size="'+size+'" data-tablet-size="'+size+'" data-mobile-size="1/1" data-desktop-col="'+size_class.desktop+'" data-tablet-col="'+size_class.tablet+'" data-laptop-col="'+size_class.laptop+'" data-mobile-col="'+size_class.mobile+'" class="blink wrap mcb-wrap mcb-wrap-new '+ ( builder_type == 'header' ? "mcb-header-wrap" : "" ) +' vb-item vb-item-wrap mcb-wrap-'+uid+' '+size_class.desktop+' '+size_class.tablet+' '+size_class.laptop+' mobile-one clearfix mfn-module"><div class="mfn-drag-helper mfn-dh-before placeholder-wrap"></div><div class="mfn-drag-helper mfn-dh-after placeholder-wrap"></div><div class="mcb-wrap-inner mcb-wrap-inner-'+uid+' empty mfn-module-wrapper mfn-wrapper-for-wraps"><a href="#" class="btn-item-add mfn-item-add mfn-icon-add-light mfn-wrap-add-item" data-tooltip="Add element">Add element</a><div class="wrap-header mfn-header mfn-header-grey"><div class="mfn-option-dropdown parent-selector"><a title="Select parent" href="#" class="mfn-option-btn mfn-option-grey parent-section-select"><span class="mfn-icon mfn-icon-selector-parent"></span></a><div class="dropdown-wrapper"><a class="mfn-dropdown-item parent-section-select" href="#"><span class="mfn-icon mfn-icon-selector-child"></span> Section</a><a class="mfn-dropdown-item parent-wrap-select" href="#"><span class="mfn-icon mfn-icon-selector-child"></span> Wrap</a></div></div><a class="mfn-option-btn mfn-option-blue mfn-element-menu mfn-element-edit" href="#" data-tooltip="Edit wrap" data-position="right"><span class="mfn-icon mfn-icon-wrap"></span></a><a class="mfn-option-btn mfn-option-grey mfn-size-change mfn-size-decrease" title="Decrease" data-tooltip="Decrease" href="#"><span class="mfn-icon mfn-icon-dec"></span></a> <a class="mfn-option-btn mfn-option-grey mfn-size-change mfn-size-increase" title="Increase" data-tooltip="Increase" href="#"><span class="mfn-icon mfn-icon-inc"></span></a> <a class="mfn-option-btn mfn-option-text mfn-option-grey mfn-wrap-sort-handler mfn-size-label" title="Size" data-tooltip="Size"><span class="text mfn-element-size-label">'+size+'</span></a> <div class="mfn-option-dropdown"><a class="mfn-option-btn mfn-option-grey mfn-item-add mfn-option-text" title="Add" data-tooltip="Add" href="#"><span class="mfn-icon mfn-icon-add"></span><span class="text">Add</span></a><div class="dropdown-wrapper"><a class="mfn-dropdown-item mfn-add-element mfn-item-add" href="#"><span class="label">Element</span></a><a class="mfn-dropdown-item mfn-wrap-add" href="#"><span class="label">Wrap</span></a></div></div><a class="mfn-option-btn mfn-option-grey mfn-element-drag mfn-wrap-drag" title="Drag & Drop" data-tooltip="Drag" href="#"><span class="mfn-icon mfn-icon-drag"></span></a><a class="mfn-option-btn mfn-option-grey mfn-select-parent" title="Select parent" data-tooltip="Select Parent" href="#"><span class="mfn-icon mfn-icon-select-parent"></span></a><a class="mfn-option-btn mfn-option-grey mfn-element-edit" title="Edit" data-tooltip="Edit" href="#"><span class="mfn-icon mfn-icon-edit"></span></a><a class="mfn-option-btn mfn-option-grey mfn-module-clone mfn-wrap-clone" title="Clone" data-tooltip="Clone" href="#"><span class="mfn-icon mfn-icon-clone"></span></a> <a class="mfn-option-btn mfn-option-grey mfn-element-delete" data-tooltip="Delete" title="Delete" href="#"><span class="mfn-icon mfn-icon-delete"></span></a> </div><div class="mfn-wrap-new"><a href="#" class="mfn-item-add mfn-btn btn-icon-left btn-small mfn-btn-blank2"><span class="btn-wrapper"><span class="mfn-icon mfn-icon-add"></span>Add element</span></a> <a href="#" class="mfn-wrap-add mfn-btn btn-icon-left btn-small mfn-btn-blank2"><span class="btn-wrapper"><span class="mfn-icon mfn-icon-add"></span>Add wrap</span></a></div><div class="mcb-wrap-background-overlay"></div></div></div>';
        }

        answer.uid = uid;

        return answer;
    },
    section: function() {
        var uid = getUid();
        //var new_section = {...mfn.elements.section};

        var section_class = 'mfn-default-section';

        var new_section = {};
        new_section = JSON.parse( JSON.stringify(mfn.elements.section) );
        new_section.uid = uid;

        new_section.ver = elements_ver;
        section_class = 'mfn-'+elements_ver+'-section';

        if( builder_type == 'header' ) {
            // header presets
            new_section.attr['css_advanced_align_items'] = {val: {desktop: 'center'}, selector: '.mcb-section-mfnuidelement .section_wrapper', style: 'align-items'};
        }

        if( builder_type == 'megamenu' ){
            // megamenu presets
            new_section.attr['css_advanced_background_color'] = {val: '#ffffff', selector: '.mcb-section-mfnuidelement', style: 'background-color'};
            new_section.attr['css_advanced_align_items'] = {val: 'flex-start', selector: '.mcb-section-mfnuidelement .section_wrapper', style: 'align-items'};
        }

        mfn.pagedata.push(new_section);

        let global_sections_html = '';

        if( !$content.find('body').hasClass('mfn-template-section') ) {
            global_sections_html = '<a class="mfn-btn add-global-sections-button mfn-btn-green btn-icon-left" href="#"><span class="btn-wrapper"><span class="mfn-icon mfn-icon-add-light"></span>Global sections</span></a>';
        }

        var answer = {};
        answer.html = '<div data-uid="'+uid+'" class="section mcb-section mcb-section-new '+section_class+' vb-item mcb-section-'+uid+' '+ ( builder_type == 'header' ? "mcb-header-section" : "" ) +' blink empty" data-title="Section"> <a href="#" data-tooltip="Add new section" class="btn-section-add mfn-icon-add-light mfn-section-add siblings prev" data-position="before">Add section</a> <div class="section-header mfn-section-sort-handler mfn-header header-large"> <a class="mfn-option-btn mfn-option-blue mfn-element-menu mfn-element-edit" href="#" data-tooltip="Edit section" data-position="right"><span class="mfn-icon mfn-icon-section"></span></a> <div class="options-group"> <a class="mfn-option-btn mfn-option-text mfn-option-green btn-large mfn-wrap-add" title="Add wrap" href="#"><span class="mfn-icon mfn-icon-add"></span><span class="text">Wrap</span></a> <a class="mfn-option-btn mfn-option-text mfn-option-green btn-large mfn-wrap-add mfn-divider-add" title="Add divider" href="#"><span class="mfn-icon mfn-icon-add"></span><span class="text">Divider</span></a> </div><div class="options-group"> <a class="mfn-option-btn mfn-option-green btn-large mfn-element-drag mfn-section-drag" title="Drag" data-tooltip="Drag" href="#"><span class="mfn-icon mfn-icon-drag"></span></a> <a class="mfn-option-btn mfn-option-green btn-large mfn-element-edit" title="Edit" data-tooltip="Edit" href="#"><span class="mfn-icon mfn-icon-edit"></span></a> <a class="mfn-option-btn mfn-option-green btn-large mfn-module-clone mfn-section-clone" title="Clone" data-tooltip="Clone" href="#"><span class="mfn-icon mfn-icon-clone"></span></a> <a class="mfn-option-btn mfn-option-green btn-large mfn-element-delete" data-tooltip="Delete" title="Delete" href="#"><span class="mfn-icon mfn-icon-delete"></span></a> <div class="mfn-option-dropdown"> <a class="mfn-option-btn mfn-option-green btn-large" title="More" href="#"><span class="mfn-icon mfn-icon-more"></span></a> <div class="dropdown-wrapper"> <h6>Actions</h6> <a class="mfn-dropdown-item mfn-section-hide" href="#" data-show="Show section" data-hide="Hide section"><span class="mfn-icon mfn-icon-hide"></span><span class="mfn-icon mfn-icon-show"></span><span class="label">Hide section</span></a> <a class="mfn-dropdown-item mfn-section-move-up" href="#"><span class="mfn-icon mfn-icon-move-up"></span> Move up</a><a class="mfn-dropdown-item mfn-section-move-down" href="#"><span class="mfn-icon mfn-icon-move-down"></span> Move down</a><a class="mfn-dropdown-item mfn-section-convert-to-global" href="#"><span class="mfn-icon mfn-icon-convert-section-to-global"></span> Convert to Global</a> <div class="mfn-dropdown-divider"></div><h6>Import / Export</h6> <a class="mfn-dropdown-item mfn-section-export" href="#"><span class="mfn-icon mfn-icon-export"></span> Export section</a> <a class="mfn-dropdown-item mfn-section-import mfn-section-import-replace" href="#"><span class="mfn-icon mfn-icon-import-after"></span> Import & replace</a> <a class="mfn-dropdown-item mfn-section-import mfn-section-import-before" href="#"><span class="mfn-icon mfn-icon-import-after"></span> Import before</a> <a class="mfn-dropdown-item mfn-section-import mfn-section-import-after" href="#"><span class="mfn-icon mfn-icon-import-before"></span> Import after</a> </div></div></div></div><div class="mcb-background-overlay"></div><div class="mfn-shape-divider mfn-shape-divider-top" data-bring-front="0" data-flip="0" data-invert="0" data-name="top"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path></path></svg></div><div class="mfn-shape-divider mfn-shape-divider-bottom" data-bring-front="0" data-flip="0" data-invert="0" data-name="bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path></path></svg></div><div class="section_wrapper mcb-section-inner mcb-section-inner-'+uid+' mfn-wrapper-for-wraps"> <div class="mfn-section-new"> <h5>Select a wrap layout</h5> <div class="wrap-layouts"> <div class="wrap-layout wrap-11" data-type="wrap-11" data-tooltip="1/1"></div><div class="wrap-layout wrap-12" data-type="wrap-12" data-tooltip="1/2 | 1/2"><span></span></div><div class="wrap-layout wrap-13" data-type="wrap-13" data-tooltip="1/3 | 1/3 | 1/3"><span></span><span></span></div><div class="wrap-layout wrap-14" data-type="wrap-14" data-tooltip="1/4 | 1/4 | 1/4 | 1/4"><span></span><span></span><span></span></div><div class="wrap-layout wrap-13-23" data-type="wrap-1323" data-tooltip="1/3 | 2/3"><span></span></div><div class="wrap-layout wrap-23-13" data-type="wrap-2313" data-tooltip="2/3 | 1/3"><span></span></div><div class="wrap-layout wrap-14-12-14" data-type="wrap-141214" data-tooltip="1/4 | 1/2 | 1/4"><span></span><span></span></div></div><p>or choose from</p><a class="mfn-btn prebuilt-button mfn-btn-green btn-icon-left" href="#"><span class="btn-wrapper"><span class="mfn-icon mfn-icon-add-light"></span>'+( builder_type == 'header' ? 'Pre-built headers' : 'Pre-built sections' )+'</span></a> '+ global_sections_html +' </div></div><a href="#" class="btn-section-add mfn-icon-add-light mfn-section-add siblings next" data-position="after">Add section</a><div class="mfn-drag-helper mfn-dh-after placeholder-section"></div></div>';
        answer.uid = uid;

        return answer;
    },
    item: function(name, alias) {
        var script = false;
        var uid = getUid();
        // var new_item = {...mfn.elements[name]};

        var new_item = {};
        new_item = JSON.parse( JSON.stringify(renderMfnFields.items[name]) );
        var html = `<div data-uid="${uid}" data-desktop-size="1/1" data-tablet-size="1/1" data-mobile-size="1/1" class="blink column mcb-column mfn-new-item vb-item vb-item-widget mcb-item-${uid} column_${name} one tablet-one mobile-one mfn-module"><div class="mfn-drag-helper mfn-dh-before placeholder-column"></div><div class="mfn-drag-helper mfn-dh-after placeholder-column"></div><div class="mcb-column-inner mcb-column-inner-${uid} mcb-item-${name}-inner mfn-module-wrapper"><div class="item-header mfn-header mfn-header-blue"><div class="mfn-option-dropdown parent-selector"><a title="Select parent" href="#" class="mfn-option-btn mfn-option-blue parent-wrap-select"><span class="mfn-icon mfn-icon-selector-parent"></span></a><div class="dropdown-wrapper"><a class="mfn-dropdown-item parent-section-select" href="#"><span class="mfn-icon mfn-icon-selector-child"></span> Section</a><a class="mfn-dropdown-item parent-wrap-select" href="#"><span class="mfn-icon mfn-icon-selector-child"></span> Wrap</a><a class="mfn-dropdown-item parent-inner-wrap-select" href="#"><span class="mfn-icon mfn-icon-selector-child"></span> Inner wrap</a></div></div><a data-tooltip="Edit element" class="mfn-option-btn mfn-option-blue mfn-element-menu mfn-element-edit" href="#"><span class="mfn-icon mfn-icon-item"></span></a><a class="mfn-option-btn mfn-option-blue mfn-size-change mfn-size-decrease" title="Decrease" data-tooltip="Decrease" href="#"><span class="mfn-icon mfn-icon-dec"></span></a> <a class="mfn-option-btn mfn-option-blue mfn-size-change mfn-size-increase" title="Increase" data-tooltip="Increase" href="#"><span class="mfn-icon mfn-icon-inc"></span></a> <a class="mfn-option-btn mfn-size-label mfn-option-text mfn-option-blue" title="Size" data-tooltip="Size"><span class="text mfn-element-size-label">1/1</span></a> <a class="mfn-option-btn mfn-option-blue mfn-element-drag mfn-column-drag" title="Drag &amp; Drop" data-tooltip="Drag" href="#"><span class="mfn-icon mfn-icon-drag"></span></a> <a class="mfn-option-btn mfn-option-blue mfn-element-edit" title="Edit" data-tooltip="Edit" href="#"><span class="mfn-icon mfn-icon-edit"></span></a> <a class="mfn-option-btn mfn-option-blue mfn-module-clone mfn-element-clone" title="Clone" data-tooltip="Clone" href="#"><span class="mfn-icon mfn-icon-clone"></span></a> <a class="mfn-option-btn mfn-option-blue mfn-element-delete" data-tooltip="Delete" title="Delete" href="#"><span class="mfn-icon mfn-icon-delete"></span></a> </div>${_.has(new_item, 'html') ? new_item['html'] : ''}</div></div>`;

        /*if( new_item.script ){
            script = new_item.script;
        }*/

        if( !_.has(new_item, 'attr') || Array.isArray(new_item['attr']) ) new_item['attr'] = {};

        if(_.has(new_item, 'html')) {
            delete new_item.html;
        }else{
            be_layout.drag_new.force_rerender = true;
        }
        
        if( _.has(new_item, 'script') ) delete new_item.script;

        if( name != alias && typeof aliases[alias] !== 'undefined' ) {
            aliases[alias].map(function(el) {
                html = html.replace(new_item['attr'][el.key], el.val); // update html
                new_item['attr'][el.key] = el.val; // update object
            });
        }

        new_item.uid = uid;
        new_item.size = '1/1';
        new_item.tablet_size = '1/1';
        new_item.laptop_size = '1/1';
        new_item.mobile_size = '1/1';
        new_item.tablet_resized = "0";
        
        if( name == 'icon_2' ) {
            new_item.attr['width_switcher'] = 'inline';
            html = html.replace('vb-item', 'vb-item mfn-item-inline');
        }

        if( name == 'shop_products' ) {
            new_item.attr['layout_version'] = 'new';
            new_item.attr['css_product_image_list_2_width'] = {val: {desktop: '35%', mobile: '100%'}, selector: '.mcb-section .mcb-wrap .mcb-item-mfnuidelement ul.mfn-list_2-layout li.mfn-product-li-item .mfn-li-product-row-image', style: 'width'};
            new_item.attr['css_product_image_list_width'] = {val: {desktop: '25%', mobile: '100%'}, selector: '.mcb-section .mcb-wrap .mcb-item-mfnuidelement ul.mfn-list-layout li.mfn-product-li-item .mfn-li-product-row-image', style: 'width'};
        }

        if( builder_type.includes('archive-') && name == 'filters' ) {
            new_item.attr['post_type'] = builder_type.replace('archive-', '');
        }

        if( builder_type == 'header' ) {

            if( name != 'header_logo' && name != 'header_search' && name != 'image' ) {
                new_item.attr['width_switcher'] = 'inline';
                html = html.replace('vb-item', 'vb-item mfn-item-inline');
            }

            if( name == 'header_logo' || name == 'image' ) {
                new_item.attr['width_switcher'] = 'custom';
                new_item.attr['css_advanced_flex'] = {val: '250px', selector: '.mcb-section .mcb-wrap .mcb-item-mfnuidelement', style: 'width'};
                be_layout.drag_new.force_rerender = true;
            }

            if( name == 'header_search' ) {
                new_item.attr['width_switcher'] = 'custom';
                new_item.attr['css_advanced_flex'] = {val: '300px', selector: '.mcb-section .mcb-wrap .mcb-item-mfnuidelement', style: 'width'};
            }

            if( name == 'header_icon' ) {
                new_item.attr['css_icon_count_top'] = {val: '-9px', selector: '.mcb-section .mcb-wrap .mcb-item-mfnuidelement .mfn-icon-box .icon-wrapper .header-cart-count,.mcb-section .mcb-wrap .mcb-item-mfnuidelement .mfn-icon-box .icon-wrapper .header-wishlist-count', style: 'top'};
                new_item.attr['css_icon_count_right'] = {val: '-11px', selector: '.mcb-section .mcb-wrap .mcb-item-mfnuidelement .mfn-icon-box .icon-wrapper .header-cart-count,.mcb-section .mcb-wrap .mcb-item-mfnuidelement .mfn-icon-box .icon-wrapper .header-wishlist-count', style: 'right'};
            }

        }
 
        mfn.pagedata.push(new_item);

        return html;
    }
};


function getUid() {
    return Math.random().toString(36).substring(5);
}

// show shortcode add icon
$('.modal-add-shortcode .browse-icon .mfn-button-upload').on('click', function(e) {
    e.preventDefault();
    $('.mfn-modal.modal-select-icon .mfn-items-list li').removeClass('active');
    $('.mfn-modal.modal-select-icon').addClass('show');
});

function backToWidgets(){
    $('.mfn-visualbuilder .sidebar-panel .sidebar-panel-header .header-items .title-group .sidebar-panel-desc .sidebar-panel-title').text('Add element');
    $('.mfn-visualbuilder .sidebar-panel .sidebar-panel-header .header-items .title-group .sidebar-panel-icon').attr('class', 'sidebar-panel-icon mfn-icon-add-big');

    if($('.mfn-ui').hasClass('mfn-sidebar-hidden-footer')) $('.mfn-ui').removeClass('mfn-sidebar-hidden-footer');

    $(".panel").hide();
    $(".header").hide();
    $(".panel-items").show();
    $(".header-items").show();
    $('.panel-edit-item .mfn-form');
    $('.mfn-ui').removeClass('mfn-editing-section mfn-editing-wrap mfn-editing-element mfn-editing-spacer');
    if( edited_item && typeof edited_item.jsclass !== 'undefined' ) $('.mfn-ui').removeClass('mfn-editing-'+edited_item.jsclass);

    if( $builder.find('.mfn-current-editing').length ) $builder.find('.mfn-current-editing').removeClass('mfn-current-editing');
    if( $('.mfn-ui').hasClass('mfn-class-editor') ) $('.mfn-ui').removeClass('mfn-class-editor');
    if( $content.find('body').hasClass('mfn-class-editor-preview') ) $content.find('body').removeClass('mfn-class-editor-preview');
    if( $('.mfn-ui').hasClass('mfn-class-editor-full') ) $('.mfn-ui').addClass('mfn-class-editor-full');

    $('.panel-items .mfn-search').focus();

    if( ui_mode == 'dev' ){
        $('.topbar-nav #main-menu li').removeClass('active');
        $('.topbar-nav #main-menu li.menu-items').addClass('active');
    }

    // resetSaveButton();
}

function showPrebuilts() {
    $(".panel").hide();
    $(".header").hide();
    $(".panel-prebuilt-sections").show();
    $(".header-prebuilt-sections").show();

    if( ui_mode == 'dev' ){
        $('li.menu-sections').siblings('li').removeClass('active');
        $('li.menu-sections').addClass('active');
    }

    if( $('.panel-prebuilt-sections ul.prebuilt-sections-list li').length ) return;

    var html = '';

    _.map( mfn.prebuilts, (item, i) => html += `
        <li class="category-all category-${item.category}" data-id="${i}">
        <div class="photo"><img loading="lazy" src="${mfn.themepath}/functions/builder/pre-built/images/${i}.png" alt="" /></div>
        <div class="desc"><h6>${item.title}</h6><a class="mfn-option-btn mfn-option-text btn-icon-left mfn-option-green mfn-btn-insert mfn-insert-prebuilt" title="Insert" data-tooltip="Insert to your project" href="#"><span class="mfn-icon mfn-icon-add"></span><span class="text">Insert</span></a></div>
        </li>` ).join('');

    $('.panel-prebuilt-sections ul.prebuilt-sections-list').html(html);

    if( $('body').hasClass('mfn-template-builder-blog') || $('body').hasClass('mfn-template-builder-portfolio') ){
      $('.header-prebuilt-sections').find('.mfn-dropdown-item[data-filter="category-tem"]').trigger('click');
    }
}

function showYoast() {
    $(".panel").hide();
    $(".header").hide();
    $(".panel-yoast-seo").show();
    $(".header-yoast-seo").show();

    if( ui_mode == 'dev' ) {
        $('.mfn-visualbuilder .mfn-topbar .topbar-nav nav ul li').removeClass('active');
        $('.mfn-visualbuilder .mfn-topbar .topbar-nav nav ul li.menu-yoast').addClass('active');
    }
}

function showGlobals( $section_uid ) {
    $(".panel").hide();
    $(".header").hide();
    $(".panel-global-sections").show();
    $(".header-global-sections").show();

    $('.prebuilt-sections-list.global-sections').empty();

    _.map(mfn['global_sections'], function(el, i) {
        if( i > 0 ){
            $('.prebuilt-sections-list.global-sections').append(`<li style="display: block;" class="${ i == $section_uid ? 'active' : ''}" data-id="${i}"><div class="desc"><h6>${el}</h6><a class="mfn-option-btn mfn-option-text btn-icon-left mfn-option-green mfn-btn-insert mfn-insert-global-section" title="Insert" data-tooltip="Insert to your project" href="#"><span class="mfn-icon mfn-icon-add"></span><span class="text">${ i == $section_uid ? 'Selected' : 'Select'}</span></a></div></li>`);
        }
    });

    if( !$('.prebuilt-sections-list.global-sections li').length ){
        $('.prebuilt-sections-list.global-sections').append('<div class="mfn-form-row mfn-form-row "><div class="mfn-alert "><div class="alert-icon mfn-icon-information"></div><div class="alert-content"><p>No global sections have been created yet. If you would like to set global section, please <a target="_blank" href="'+mfn.adminurl+'edit.php?post_type=template&tab=section">create it first.</a></p></div></div></div>');
    }
}

var enableBeforeUnload = function() {
    if( !$('.mfn-form-options').is(':visible') && !$('.panel-view-themeoptions').is(':visible') ) {
        window.onbeforeunload = function(e) {
            return 'The changes you made will be lost if you navigate away from this page';
        };                                                                                                                                                                  
    }
};

$('.mfn-visualbuilder .sidebar-panel-content ul.items-list li a').on('click', function(e) {
    e.preventDefault();
});

$('.mfn-topbar .topbar-addons .mfn-option-dropdown.page-options > a').on('click', function(e) {
    e.preventDefault();
});

document.addEventListener('keydown', function(event) {
    catchShortcuts(event);
});

function catchShortcuts(e) {
    if((e.ctrlKey || e.metaKey) && e.key == "s") {
        // ctr || cmd + s
        e.preventDefault();

        if( $('.mfn-ui').hasClass('mfn-class-editor') ){
            $('.mfn-class-editor .mfn-class-editor-update').trigger('click');
        }else if(!$('.btn-save-form-primary.btn-save-changes').hasClass('disabled')){
            $('.btn-save-form-primary.btn-save-changes').trigger('click');
        }
        return false;
    }else if((e.ctrlKey || e.metaKey) && e.key == "y") {
        // ctr || cmd + y
        if( !$('.mfn-field-value').is(':focus')  ){
            e.preventDefault();
            if(!$redo.hasClass('loading') && !$redo.hasClass('inactive')){
                $redo.trigger('click');
            }
            return false;
        }else if( $('.panel-edit-item .mfn-field-value:focus').length ){
            setTimeout(function() {
                fieldUpdate($('.panel-edit-item .mfn-field-value:focus'));
            }, 5);
        }
    }else if((e.ctrlKey || e.metaKey) && e.key == "i") {
        // ctr || cmd + i
        e.preventDefault();
        $('.mfn-visualbuilder a.btn-navigator-switcher').trigger('click');
        return false;
    }else if(e.ctrlKey && e.shiftKey && e.key == "Z") {
        // ctr || cmd + shift + z
        if( !$('.mfn-field-value').is(':focus')  ){
            e.preventDefault();
            if(!$redo.hasClass('loading') && !$redo.hasClass('inactive')){
                $redo.trigger('click');
            }
            return false;
        }else if( $('.panel-edit-item .mfn-field-value:focus').length ){
            setTimeout(function() {
                fieldUpdate($('.panel-edit-item .mfn-field-value:focus'));
            }, 5);
        }
    }else if(e.metaKey && e.shiftKey && e.key == "z") {
        // ctr || cmd + shift + z
        if( !$('.mfn-field-value').is(':focus') ){
            e.preventDefault();
            if(!$redo.hasClass('loading') && !$redo.hasClass('inactive')){
                $redo.trigger('click');
            }
            return false;
        }else if( $('.panel-edit-item .mfn-field-value:focus').length ){
            setTimeout(function() {
                fieldUpdate($('.panel-edit-item .mfn-field-value:focus'));
            }, 5);
        }
    }else if(e.ctrlKey && e.shiftKey && e.key === "P") {
        // ctr || cmd + shift + p
        e.preventDefault();
        $('.mfn-visualbuilder a.mfn-preview-generate').trigger('click');
        return false;
    }else if(e.metaKey && e.shiftKey && e.key == "p") {
        // ctr || cmd + shift + p
        e.preventDefault();
        $('.mfn-visualbuilder a.mfn-preview-generate').trigger('click');
        return false;
    }else if(e.ctrlKey && e.shiftKey && e.key === "M") {
        // ctr || cmd + shift + m
        e.preventDefault();
        $('.mfn-visualbuilder .sidebar-panel .sidebar-panel-footer .btn-change-resolution .dropdown-wrapper a[data-preview="desktop"]').trigger('click');
        return false;
    }else if(e.metaKey && e.shiftKey && e.key == "m") {
        // ctr || cmd + shift + m
        e.preventDefault();
        $('.mfn-visualbuilder .sidebar-panel .sidebar-panel-footer .btn-change-resolution .dropdown-wrapper a[data-preview="desktop"]').trigger('click');
        return false;
    }else if(e.metaKey && e.shiftKey && e.key == "h") {
        // ctr || cmd + shift + h
        e.preventDefault();
        $('.mfn-visualbuilder ul li.menu-revisions a').trigger('click');
        return false;
    }else if(e.ctrlKey && e.shiftKey && e.key === "H") {
        // ctr || cmd + shift + h
        e.preventDefault();
        $('.mfn-visualbuilder ul li.menu-revisions a').trigger('click');
        return false;
    }else if(e.ctrlKey && e.shiftKey && e.key === "V") {
        // ctr || cmd + shift + v
        e.preventDefault();
        window.open( $('a.menu-viewpage').attr('href') );
        return false;
    }else if(e.metaKey && e.shiftKey && e.key == "v") {
        // ctr || cmd + shift + v
        e.preventDefault();
        window.open( $('a.menu-viewpage').attr('href') );
        return false;
    }else if((e.ctrlKey || e.metaKey) && e.key == "z") {
        // ctr || cmd + z
        if( !$('.CodeMirror-code').is(':focus') && !$content.find('.mfn-current-editing .mfn-inline-editor').is(":focus") && !$('.panel-edit-item .mfn-field-value').is(':focus') ){
            e.preventDefault();
            if(!$undo.hasClass('loading') && !$undo.hasClass('inactive')){
                $undo.trigger('click');
            }
            return false;
        }else if( $('.panel-edit-item .mfn-field-value:focus').length ){
            setTimeout(function() {
                fieldUpdate($('.panel-edit-item .mfn-field-value:focus'));
            }, 5);
        }
    }else if((e.ctrlKey || e.metaKey) && e.key == "c"){
        // ctr || cmd + c
        if( iframe.window.getSelection().toString() == '' && !$content.find('.mfn-current-editing .mfn-inline-editor').is(":focus") && !$content.find('input').is(':focus') && !$content.find('textarea').is(':focus') && !$('input').is(':focus') && !$('textarea').is(':focus') && !$('textarea').is(':focus') && !$('.CodeMirror-code').is(':focus') ){
            e.preventDefault();
            if( $content.find('.mfn-current-editing').length ){
                contextMenu.item = $content.find('.mfn-current-editing').attr('data-uid');
                copypaste.copy(contextMenu.item);
            }
        }
        return false;
    }else if((e.ctrlKey || e.metaKey) && e.key == "v"){
        // ctr || cmd + v
        if( !$('.components-modal__frame.yoast').length && !$content.find('.mfn-current-editing .mfn-inline-editor').is(":focus") && !$content.find('input').is(':focus') && !$content.find('textarea').is(':focus') && !$('input').is(':focus') && !$('textarea').is(':focus') && !$('.CodeMirror-code').is(':focus') ){
            e.preventDefault();
            if( $content.find('.mfn-current-editing').length ){
                contextMenu.item = $content.find('.mfn-current-editing').attr('data-uid');
                //let $el = $content.find('.vb-item[data-uid="'+contextMenu.item+'"]');
                copypaste.parent = $content.find('.vb-item[data-uid="'+contextMenu.item+'"]');
                copypaste.paste();
            }
        }
        return false;
    }else if( e.key == "Delete"  ){
        if( !$content.find('.mfn-current-editing .mfn-inline-editor').is(":focus") && !$('input').is(':focus') && !$('textarea').is(':focus') && !$('.CodeMirror-code').is(':focus') ){
            e.preventDefault();

            // Global Wraps -> Prevent removing wrap on template editor
            if( $('body').hasClass('mfn-template-wrap') && $content.find('.mfn-current-editing').hasClass('mcb-section')) {
                return;
            }

            $content.find('.mfn-current-editing').find('.mfn-header').first().find('.mfn-element-delete').trigger('click');
        }
        return false;
    }else if( (e.ctrlKey || e.metaKey) && e.key == "d" ){
        // Global Sections/Wraps -> Prevent duplicating wrap/section on page
        if( ($('body').hasClass('mfn-template-builder-wrap') && $content.find('.mfn-current-editing').hasClass('mcb-wrap')) || ($('body').hasClass('mfn-template-builder-section') && $content.find('.mfn-current-editing').hasClass('mcb-section')) ){
            return false;
        }
        if( $content.find('.mfn-current-editing').hasClass('mfn-global-wrap') || $content.find('.mfn-current-editing').hasClass('mfn-global-section') ) {
            return false;
        }

        // duplicate
        if( $content.find('.mfn-current-editing').length && !$('.mfn-field-value').is(':focus') ){
            e.preventDefault();
            $content.find('.mfn-current-editing').find('.mfn-header').first().find('.mfn-module-clone').trigger('click');
        }
        return false;
    }else if( (e.ctrlKey || e.metaKey) && e.key == "p" ){
        // show/hide left panel
        e.preventDefault();
        $('#mfn-sidebar-switcher').trigger('click');
        return false;
    }else if( e.key == "Enter" ){
        // enter
        if( $('.mfn-modal.show .btn-modal-confirm').length ){
            e.preventDefault();
            $('.mfn-modal.show .btn-modal-confirm').trigger('click');
        }
        if( $('.mfn-modal.modal-display-conditions.show .btn-modal-save').length ){
            e.preventDefault();
            $('.mfn-modal.modal-display-conditions.show .btn-modal-save').trigger('click');
        }
        return false;
    }else if( e.key == "Escape" ){
        // Escape
        if( $('.mfn-modal.show .modalbox-header .btn-modal-close').length ){
            e.preventDefault();
            $('.mfn-modal.show .modalbox-header .btn-modal-close').trigger('click');
        }
        return false;
    }else if( (e.ctrlKey || e.metaKey) && (e.key == "/" || e.key == "?" ) ) {
        // ctr || cmd + /
        e.preventDefault();
        if(!$('.modal-shortcuts').hasClass('show')){
            $('.modal-shortcuts').addClass('show');
        }
        return false;
    }
}




$('.mfn-visualbuilder .sidebar-panel-content ul.items-list li a').contextmenu(function(e) {
    if( builder_type == 'header' ) return;
    e.preventDefault();

    var type = $(this).closest('li').attr('data-alias');

    if( $('.mfn-visualbuilder .sidebar-panel-content ul.fav-items-list li[data-alias="'+type+'"]').length ) {
        $('.mfn-items-list-contextmenu ul li a[data-action="love-it"] span.label').text('Remove');
    }else{
        $('.mfn-items-list-contextmenu ul li a[data-action="love-it"] span.label').text('Add to favourites');
    }

    item_name = $(e.target).closest('li').attr('data-alias');

    var $li = $('.mfn-visualbuilder .sidebar-panel-content ul.items-list li.mfn-item-'+item_name);
    $('.mfn-items-list-contextmenu').show().css({'left':e.clientX, 'top': e.clientY});

    $(document).bind('click', hideLeftItemsContext);
    $content.find('body').bind('click', hideLeftItemsContext);

});

function hideLeftItemsContext(e) {
    var context = $('.mfn-items-list-contextmenu');

    if (!context.is(e.target) && context.has(e.target).length === 0){
       $('.mfn-items-list-contextmenu').hide();
    }

    $(document).unbind('click', hideLeftItemsContext);
    $content.find('body').unbind('click', hideLeftItemsContext);
}

$('.mfn-widgets-group h5.mfn-widgets-group-title').on('click', function(e) {
    e.preventDefault();
    let wrapper = $(this).closest('.mfn-widgets-group');
    wrapper.toggleClass('mfn-widgets-group-closed');
    if( wrapper.hasClass('mfn-widgets-group-closed') ){
        wrapper.find('.mfn-widgets-group-content').slideUp(300);
    }else{
        wrapper.find('.mfn-widgets-group-content').slideDown(300);
    }
});

$('.mfn-items-list-contextmenu ul li a').on('click', function(e) {
    e.preventDefault();

    if (mfn.view == 'demo') {
        $('.mfn-items-list-contextmenu').hide();
        return;
    }

    var action = $(this).attr('data-action');

    $('.mfn-items-list-contextmenu').hide();

    if( action == 'love-it' ){
        $.ajax( mfnajaxurl, {
          type : "POST",
          data : {
            'mfn-builder-nonce': wpnonce,
            action: 'mfn_builder_favorites',
            item: item_name
          }

        }).done(function(response){

            if( response == 'set'){
                $('.mfn-widgets-group ul.fav-items-list').append( $('.mfn-visualbuilder .sidebar-panel-content ul.items-list:not(.fav-items-list) li[data-alias="'+item_name+'"]').clone(true) );
            }else{
                $('.mfn-widgets-group ul.fav-items-list li[data-alias="'+item_name+'"]').remove();
            }

            if( !$('.mfn-widgets-group ul.fav-items-list li').length ){
                $('.mfn-widgets-group').removeClass('mfn-not-empty-widgets-group').addClass('mfn-empty-widgets-group');
            }else{
                $('.mfn-widgets-group').addClass('mfn-not-empty-widgets-group').removeClass('mfn-empty-widgets-group');
            }

        });
    }
});

function init() {

    iframeReady(); // sections toolbar buttons

    document.addEventListener("visibilitychange", handleVisibilityChange);

    page_options_tab.init();
    uploader.browse();
    uploader.delete();
    uploader.deleteAllGallery();
    uploader.sortable();
    mfn_live_css.init();

    var mac = /(Mac)/i.test(navigator.platform);

    if (mac) {
        $content.find('body').addClass('mfn-mac');
        $('body').addClass('mfn-mac');
    }

    if(window.location.hash && window.location.hash == '#page-options-tab') {
        $(window.location.hash).trigger('click');
    }

    $('.mfn-visualbuilder .sidebar-panel-content ul.items-list li').on('mousedown', function(e) {
        if (e.which != 3) calculateIframeHeight();
    }).on('mouseup', resetIframeHeight);

    $('.mfn-visualbuilder .sidebar-panel-content ul.items-list').on('mouseenter', function() {
        be_layout.drag_new.init();
    });

    if($content.find('.masonry').length){
        $content.find('.masonry').each(function() {
            $(this).addClass('mfn-initialized');
        });
    }

    if($content.find('.isotope').length){
        $content.find('.isotope').each(function() {
            $(this).addClass('mfn-initialized');
        });
    }
    /* theme options if template header || footer is active */
    if( $content.find('#mfn-header-template').length ) $('body').addClass('mfn-to-disabled-with-header-tmpl');
    if( $content.find('#mfn-footer-template').length ) $('body').addClass('mfn-to-disabled-with-footer-tmpl');


    if(!mfnbuilder.clipboard){
        $content.find('.section-header .mfn-section-import').addClass('mfn-disabled');
    }

    if( builder_type == 'standard' && ( $content.find('.mfn-shop-archive-tmpl-builder').length || $content.find('.mfn-archive-product-tmpl-builder').length ) ){
        if( $content.find('.mfn-shop-archive-tmpl-builder').length ){
            $content.find('.mfn-shop-archive-tmpl-builder').addClass('block-pointer-inside').append('<a href="'+mfn.adminurl+'post.php?post='+$content.find('.mfn-shop-archive-tmpl-builder').attr("data-id")+'&action='+(mfn.be_slug == 'be' || mfn.be_slug == 'mfn' ? 'mfn' : mfn.be_slug)+'-live-builder" target="_blank" data-tooltip="Edit Shop Template" class="btn-edit-template" data-position="before">Edit shop template</a>');
        }else{
            $content.find('.mfn-archive-product-tmpl-builder').addClass('block-pointer-inside').append('<a href="'+mfn.adminurl+'post.php?post='+$content.find('.mfn-archive-product-tmpl-builder').attr("data-id")+'&action='+(mfn.be_slug == 'be' || mfn.be_slug == 'mfn' ? 'mfn' : mfn.be_slug)+'-live-builder" target="_blank" data-tooltip="Edit Shop Template" class="btn-edit-template" data-position="before">Edit shop template</a>');
        }
    }

    if( builder_type == 'standard' && ( $content.find('.mfn-portfolio-tmpl-builder').length || $content.find('.mfn-archive-portfolio-tmpl-builder').length ) ){
        if( $content.find('.mfn-portfolio-tmpl-builder').length ) {
            $content.find('.mfn-portfolio-tmpl-builder').addClass('block-pointer-inside').append('<a href="'+mfn.adminurl+'post.php?post='+$content.find('.mfn-portfolio-tmpl-builder').attr("data-id")+'&action='+(mfn.be_slug == 'be' || mfn.be_slug == 'mfn' ? 'mfn' : mfn.be_slug)+'-live-builder" target="_blank" data-tooltip="Edit Portfolio Template" class="btn-edit-template" data-position="before">Edit Portfolio Template</a>');
        }else{
            $content.find('.mfn-archive-portfolio-tmpl-builder').addClass('block-pointer-inside').append('<a href="'+mfn.adminurl+'post.php?post='+$content.find('.mfn-archive-portfolio-tmpl-builder').attr("data-id")+'&action='+(mfn.be_slug == 'be' || mfn.be_slug == 'mfn' ? 'mfn' : mfn.be_slug)+'-live-builder" target="_blank" data-tooltip="Edit Portfolio Template" class="btn-edit-template" data-position="before">Edit Portfolio Template</a>');
        }
    }


    if( builder_type == 'standard' && $content.find('.mfn-archive-post-tmpl-builder').length ){
        $content.find('.mfn-archive-post-tmpl-builder').addClass('block-pointer-inside').append('<a href="'+mfn.adminurl+'post.php?post='+$content.find('.mfn-archive-post-tmpl-builder').attr("data-id")+'&action='+(mfn.be_slug == 'be' || mfn.be_slug == 'mfn' ? 'mfn' : mfn.be_slug)+'-live-builder" target="_blank" data-tooltip="Edit Post Template" class="btn-edit-template" data-position="before">Edit Post Template</a>');
    }

    if( $content.find('.mfn-main-slider.mfn-rev-slider').length ){
        $content.find('.mfn-main-slider.mfn-rev-slider').append('<a href="'+mfn.adminurl+'admin.php?page=revslider&view=slide&alias='+mfn.rev_slider_id+'" target="_blank" data-tooltip="Edit with Slider Revolution" class="btn-edit-slider" data-position="before">Edit Slider</a>');
    }

    if( $content.find('.mfn-global-section').length ) {
        const globalSections = $content.find('.mfn-global-section');
        globalSections.each( (index, item) => {
            $(item).append('<a href="'+mfn.adminurl+'post.php?post='+$(item).attr('data-mfn-global')+'&action='+(mfn.be_slug == 'be' || mfn.be_slug == 'mfn' ? 'mfn' : mfn.be_slug)+'-live-builder" target="_blank" data-tooltip="Edit Global Section" class="btn-edit-section" data-position="before">Edit Global Section</a>');
        })
    }

    if( $content.find('.mfn-global-wrap').length ){
        const globalWraps = $content.find('.mfn-global-wrap');
        globalWraps.each( (index, item) => {
            $(item).append('<a href="'+mfn.adminurl+'post.php?post='+$(item).attr('data-mfn-global')+'&action='+(mfn.be_slug == 'be' || mfn.be_slug == 'mfn' ? 'mfn' : mfn.be_slug)+'-live-builder" target="_blank" data-tooltip="Edit Global Wrap" class="btn-edit-wrap" data-position="before">Edit Global Wrap</a>');
        })
    }

    if( $content.find('#Footer').length ){
        $content.find('#Footer').append('<a href="'+mfn.adminurl+'widgets.php" target="_blank" data-tooltip="Edit Footer" class="btn-edit-footer" data-position="before">Edit Footer</a>');
    }

    if( $content.find('#Header_creative').length ){
        $content.find('#Header_creative').append('<a href="'+mfn.adminurl+'admin.php?page='+mfn.be_slug.replace('mfn', 'be')+'-options#header" target="_blank" data-tooltip="Edit Header" class="btn-edit-header" data-position="before">Edit Header</a>');
    } else if( $content.find('#Top_bar').length ){
        $content.find('#Top_bar').append('<a href="'+mfn.adminurl+'admin.php?page='+mfn.be_slug.replace('mfn', 'be')+'-options#header" target="_blank" data-tooltip="Edit Header" class="btn-edit-header" data-position="before">Edit Header</a>');
    }

    if( $content.find('.mfn-header-tmpl-builder:not(.mfn-builder-active)').length ){
      if (mfn.view == 'demo'){
        $content.find('.mfn-header-tmpl-builder:not(.mfn-builder-active)').append('<a href="https://muffingroup.com/betheme/header-builder/" target="_blank" data-tooltip="Customize every part of your site with Betheme’s new Header Builder. Learn more about it here." class="btn-edit-header" data-position="before">Edit Header</a>');
      } else {
        $content.find('.mfn-header-tmpl-builder:not(.mfn-builder-active)').append('<a href="'+mfn.adminurl+'post.php?post='+$content.find('.mfn-header-tmpl').attr("data-id")+'&action='+(mfn.be_slug == 'be' || mfn.be_slug == 'mfn' ? 'mfn' : mfn.be_slug)+'-live-builder" target="_blank" data-tooltip="Edit Header" class="btn-edit-header" data-position="before">Edit Header</a>');
      }
    }

    if( $content.find('.mfn-footer-tmpl-builder:not(.mfn-builder-active)').length ){
      if (mfn.view == 'demo'){
        $content.find('.mfn-footer-tmpl-builder:not(.mfn-builder-active)').append('<a href="https://muffingroup.com/betheme/header-builder/" target="_blank" data-tooltip="Customize every part of your site with Betheme’s new Footer Builder. Learn more about it here." class="btn-edit-footer" data-position="before">Edit Footer</a>');
      } else {
        $content.find('.mfn-footer-tmpl-builder:not(.mfn-builder-active)').append('<a href="'+mfn.adminurl+'post.php?post='+$content.find('.mfn-footer-tmpl').attr("data-id")+'&action='+(mfn.be_slug == 'be' || mfn.be_slug == 'mfn' ? 'mfn' : mfn.be_slug)+'-live-builder" target="_blank" data-tooltip="Edit Footer" class="btn-edit-footer" data-position="before">Edit Footer</a>');
      }
    }

    $('.mfn-preloader .loading-text').fadeOut(function() {
        $('.mfn-preloader .loading-text').html('Generating page local CSS <div class="dots"></div>');
    }).fadeIn();

    be_layout.init();

    Transforms.attachInitialMargins();

    modernmenu.start();
    settings.start();

    dynamicData.init();

    if( ui_mode == 'dev' ) anotherPagesModal.init();

    historyStorage.init();
    be_navigator.init();
    mfn_conditional_logic.init();

   // be_layout.drag_new.init();
    be_layout.sortable.init();

    $('.mfn-preloader').fadeOut(500, function() {
        $('body').removeClass('mfn-preloader-active');
    });

    $(document).trigger('be:init');

}

function loopAllStyleFields(uid = false) {
    var copied = [];

    if( uid && mfn.pagedata.filter( (item) => item.uid == uid ).length ) {
        copied = JSON.parse( JSON.stringify(mfn.pagedata.filter( (item) => item.uid == uid )));
        if($content.find('.mfn-local-style-'+uid+'').length) $content.find('.mfn-local-style-'+uid+'').remove();
    } else {
        copied = JSON.parse( JSON.stringify(mfn.pagedata));
    }

    //console.log('loop all style fields');

    if( !uid ) {
        $.each(mfn.page_options, function(i, v) {
            if( i.includes('css_') && v?.selector && v?.style ) {

                if( typeof v == 'object' && _.has(v, 'selector') && _.has(v, 'val') ) {
                    if( typeof v['val'] == 'object' ) {
                        if( _.has(v['val'], 'desktop') || _.has(v['val'], 'laptop') || _.has(v['val'], 'tablet') || _.has(v['val'], 'mobile') ){
                            devices.map( (dvc) => _.has(v['val'], dvc) ? prepareCss(v['selector'], v['style'], v['val'][dvc], pageid, dvc) : null );
                        }else{
                            prepareCss(v['selector'], v['style'], v['val'], pageid, 'desktop');
                        }
                    }else{
                        prepareCss(v['selector'], v['style'], v['val'], pageid, 'desktop');
                    }
                } else if(i.includes('style:')) {
                    var sel_ex = i.split(':');
                    prepareCss(sel_ex[1], sel_ex[2], v, pageid, 'desktop');
                }
            }
        });

        if( mfn.classes.length ){
            copied = copied.concat(JSON.parse( JSON.stringify(mfn.classes)));
        }
    }

    if( uid && !copied.length ) {
        copied = mfn.classes.filter( (item) => item.uid == uid );
    }

    $.each(copied, function(i, v) {

        if( v === null ) { 
            delete(mfn.pagedata[i]); delete(copied[i]);
        }else{
        
            $.each(v.attr, function(a, attr) {

                if( a.includes('css_') && _.has(attr, 'val') ) {

                    if( _.has(attr, 'css_path') || _.has(attr, 'css_style') ) {
                        delete(mfn.pagedata[i]['attr'][a]); 
                        delete(copied[i]['attr'][a]);
                    }else if( (_.has(attr, 'selector') && attr.selector == null) || (_.has(attr, 'style') && attr.style == null) ) {
                        delete(mfn.pagedata[i]['attr'][a]); 
                        delete(copied[i]['attr'][a]);
                    }else{

                        if( typeof attr['val'] == 'object' ){

                            _.map(attr['val'], (y, x) => {

                                if( x == 'desktop' || x == 'laptop' || x == 'tablet' || x == 'mobile' ){

                                    if( attr['style'] == 'transform' ) {
                                        attr['val'][x]['string'] = `matrix(${attr['val'][x]['scaleX']}, ${attr['val'][x]['skewY']}, ${attr['val'][x]['skewX']}, ${attr['val'][x]['scaleY']}, ${attr['val'][x]['translateX']}, ${attr['val'][x]['translateY']}) rotate(${attr['val'][x]['rotate']}deg)`;
                                    }
                                                
                                    if( typeof y == 'object' ) {
                                        _.map(y, (c, z) => {
                                            let sn = z;

                                            if( (attr['style'] == 'transform') && z != 'string' ) return;
                                    
                                            if( attr['style'] != 'typography' ) sn = attr['style']+'-'+z;
                                            if( attr['style'] == 'transform' ) sn = attr['style'];

                                            prepareCss(attr['selector'], sn, c, v.uid, x);
                                        });
                                    }else{
                                        prepareCss(attr['selector'], attr['style'], y, v.uid, x);

                                        if( _.has( additional_css, a) ){
                                            if( y && _.has( additional_css[a]['rewrites'], y) ) {
                                                prepareCss( additional_css[a]['selector'].replace('mfnuidelement', v.uid), additional_css[a]['style'], additional_css[a]['rewrites'][y], v.uid, x);
                                            }else{
                                                prepareCss(additional_css[a]['selector'].replace('mfnuidelement', v.uid), additional_css[a]['style'], '', v.uid, x);
                                            }
                                        }

                                    }
                                    
                                }else{

                                    if( (attr['style'] == 'gradient' || attr['style'] == 'filter' || attr['style'] == 'backdrop-filter') && x != 'string' ) return;

                                    let sn = x;

                                    if( attr['style'] == 'gradient' || attr['style'] == 'filter' || attr['style'] == 'backdrop-filter' ) {
                                        sn = attr['style'];
                                    }

                                    if( typeof y == 'object' && y.length ){
                                        _.map(y, (c,z) => {
                                            sn = z;
                                            prepareCss(attr['selector'], sn, c, v.uid, 'desktop');
                                        });
                                    }else{
                                        prepareCss(attr['selector'], sn, y, v.uid, 'desktop');
                                    }
                                
                                }

                            });
                        }else{
                            prepareCss(attr['selector'], attr['style'], attr['val'], v.uid, 'desktop');
                        }
                    }
                    
                }

                if( v.jsclass == 'hotspot' && a == 'hotspots' ) {
                    $.each(attr, function(h, ht) {

                        $.each(ht['val'], function(s, st) {

                            if( _.has(st, 'val') && typeof st['val'] == 'object' ){
                                _.map(st['val'], (k, r) => {
                                    prepareCss(st['selector'], st['style'], k, v.uid, r);
                                });
                            }else{
                                prepareCss(st['selector'], st['style'], attr['val'], v.uid, 'desktop');
                            }
                            
                        });

                    });
                }


            });

        }
        
    });

    copied = [];
}

$('#mfn-sidebar-switcher').on('click', function() {
    var $sidebar = $('.mfn-visualbuilder .sidebar-wrapper');
    var sidebarW = $sidebar.outerWidth();

    if( $('.mfn-visualbuilder').hasClass('sidebar_hidden') ){
        $('.mfn-visualbuilder').removeClass('sidebar_hidden');
        $content.find('body').removeClass('sidebar_hidden');
        $sidebar.css({ 'left': '0'});
        $('.mfn-visualbuilder .preview-wrapper').css({'margin-left': sidebarW+'px'});
    }else{
        $('.mfn-visualbuilder').addClass('sidebar_hidden');
        $sidebar.css({ 'left': '-'+sidebarW+'px'});
        $('.mfn-visualbuilder .preview-wrapper').css({'margin-left': '0'});
        $content.find('body').addClass('sidebar_hidden');
    }
});

/* Sidebar Resizer */

var resizer = document.getElementById('mfn-sidebar-resizer');
var sidebar = document.getElementById('mfn-vb-sidebar');
var preview = document.getElementById('mfn-preview-wrapper-holder');
var startY, startX, startWidth, endWidth = ui_mode == 'dev' ? 360 : 420;
var resizer_base = ui_mode == 'dev' ? 360 : 420;

resizer.addEventListener('mousedown', initDrag, false);

function initDrag(e) {
    startX = e.clientX;
    sidebar.classList.add("resizing-active");
    startWidth = ui_mode == 'dev' ? 360 : 420;
    document.documentElement.addEventListener('mousemove', doDrag, false);
    document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
    endWidth = (startWidth + e.clientX - startX);
    if(endWidth < 1200 && endWidth >= resizer_base) {
        if( $('style.mfn-ui-sidebar-width-style').length ) $('style.mfn-ui-sidebar-width-style').remove();

        $('body').append(`<style class="mfn-ui-sidebar-width-style">.mfn-${ui_mode == 'dev' ? 'dev' : 'default'}-ui .mfn-ui{--mfn-ui-sidebar-width: ${endWidth}px;}</style>`);

        if( endWidth > 800 ){
            $('.mfn-visualbuilder .sidebar-wrapper').addClass('mfn-items-4-columns').removeClass('mfn-items-3-columns');
        }else if( endWidth > 550 ){
            $('.mfn-visualbuilder .sidebar-wrapper').addClass('mfn-items-3-columns').removeClass('mfn-items-4-columns');
        }else{
            $('.mfn-visualbuilder .sidebar-wrapper').removeClass('mfn-items-3-columns mfn-items-4-columns');
        }
    }
}

function stopDrag(e) {
    sidebar.classList.remove("resizing-active");
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}

let historyStorage = {
    allow: true,
    obj: [],
    i: 0,
    /*object: function() {
        return localStorage.getItem('mfnhistory') ? JSON.parse(localStorage.getItem(`mfnhistory`)) : [];
    },*/

    init: function() {
        setTimeout(historyStorage.add(), 500);
        historyStorage.click();
    },

    add: function() {

        // addHistory historyStorage.add()
        if( !historyStorage.allow ) return;


        //let history = historyStorage.object();

        if( historyStorage.i > 0) {
            //history = history.filter( (y,x) => x >= historyStorage.i );
            historyStorage.obj = historyStorage.obj.filter( (y,x) => x >= historyStorage.i );
        }

        historyStorage.i = 0;

        $('.mfn-history-btn.btn-undo').addClass('loading');

        let new_hist = {
            'obj': JSON.parse( JSON.stringify(mfn.pagedata) ),
            'pageid': pageid,
            'uid': edited_item ? edited_item.uid : false
        };

        if( !$('body').hasClass('mfn-history-ajax-mode') ) {
            new_hist['html'] = $builder.html();
        }else{
            new_hist['form'] = prepareForm.get();
        }

        //console.log(new_hist);

        historyStorage.obj.unshift( new_hist );

        //console.log( 'add history ');

        $('.mfn-history-btn.btn-undo').removeClass('loading');
        historyStorage.index();

        //console.log( historyStorage.obj );

    },

    click: function() {
         $('.mfn-history-btn').on('click', function(e) {
            e.preventDefault();
            $el = $(this);

            //let history = historyStorage.object();

            if( !$el.hasClass('inactive') && !$el.hasClass('loading') ){

                let historyAction = 'undo';

                if( $el.hasClass('btn-redo') && historyStorage.i > 0 ){
                    historyAction = 'redo';
                    historyStorage.i--;
                }else if( $el.hasClass('btn-undo') && historyStorage.i <= historyStorage.obj.length ){
                    historyStorage.i++;
                }else{
                    $el.addClass('inactive');
                    return;
                }

                $el.addClass('loading');
                $content.find('body').addClass('mfn-loading');

                historyStorage.restore();

            }

        });
    },

    index: function() {

        if(historyStorage.i < historyStorage.obj.length-1){
            $undo.removeClass('inactive');
        }else{
            $undo.addClass('inactive');
        }

        if(historyStorage.i < 1){
            $redo.addClass('inactive');
        }else{
            $redo.removeClass('inactive');
        }
        history = false;
    },

    restore: function() {
        //let history = historyStorage.object();

        var h_event = historyStorage.obj[historyStorage.i];

        //console.log(h_event);

        if( typeof h_event === 'undefined' ) {
            historyStorage.index();
            $('.mfn-history-btn').removeClass('loading');
            $content.find('body').removeClass('mfn-loading');
            return;
        }

        if( h_event.pageid != pageid ) return;

        edited_item = false;

        mfn.pagedata = h_event.obj;

        if( typeof h_event.html !== 'undefined' ){
            $builder.html( h_event.html );
            historyStorage.after_restore(h_event);
        }else{

            $.ajax({
                url: mfnajaxurl,
                data: {
                    action: 'mfnsimplerenderhtml',
                    'mfn-builder-nonce': wpnonce,
                    sections: h_event.form,
                    id: pageid
                },
                type: 'POST',
                success: function(response){
                    //console.log(response);
                    $builder.html( response );
                    historyStorage.after_restore(h_event);
                }
            });

        }

    },

    after_restore: function(h_event) {

        if( $builder.find('.mfn-initialized').length ){
            $builder.find('.mfn-initialized').removeClass('mfn-initialized mfn-watchChanges mfn-blur-action mfn-focused').removeAttr('data-medium-editor-element medium-editor-index');
            inlineEditors = [];
        }

        backToWidgets();

        $('.mfn-history-btn').removeClass('loading');
        $content.find('body').removeClass('mfn-loading');

        $content.find("style.mfn-local-style").remove();

        blink( true );
        runAjaxElements();
        inlineEditor();
        loopAllStyleFields();

        historyStorage.index();

        be_layout.emptys.page();
        be_layout.emptys.sections();
        be_layout.emptys.wraps();

        if( $('body').hasClass('mfn-navigator-active') ){
            if( $('.mfn-navigator li a.active-element').length ){
                be_navigator.show($('.mfn-navigator li a.active-element').attr('data-uid'));
            }else{
                be_navigator.show(h_event.uid);
            }
        }

        if( h_event.uid ){
            setTimeout(function() {
                $builder.find('.vb-item[data-uid="'+h_event.uid+'"]').find('.mfn-header').first().find('.mfn-element-edit').trigger('click');
            }, 50);
        }

    }
}

function calculateIframeHeight(){
    var offset_top = $('iframe#mfn-vb-ifr').offset().top;

    if( !$('.mfn-topbar').length && $('body').hasClass('mfn-preview-mode')) offset_top -= $('.mfn-preview-toolbar').outerHeight();
    if( $('.mfn-topbar').length ) offset_top -= $('.mfn-topbar').outerHeight();

    $content.find('body').addClass('hover');
    scroll_top = $content.find("html, body").scrollTop();
    if( builder_type != 'header' ) $('.frameOverlay').height( $content.find("body").height() );
    $content.find("html").css({ 'overflow': 'hidden' });
    $(window).scrollTop( scroll_top );

    var mt = scroll_top + offset_top;

    $('iframe#mfn-vb-ifr').css({ 'margin-top': mt });
    $(window).on('scroll', function() {
        $content.find('html, body').scrollTop( $(this).scrollTop() );
    });
}

function resetIframeHeight() {
    $(window).off('scroll');
    if( builder_type == 'header' ){
        $content.find("html").css({ 'overflow': 'hidden' });
    }else{
        $content.find("html").css({ 'overflow': 'auto' });
    }
    $content.find('html, body').scrollTop( scroll_top );
    $('.frameOverlay').removeAttr('style');
    $('iframe#mfn-vb-ifr').removeAttr('style');
    $content.find('body').removeClass('hover');
}



function handleVisibilityChange() {
    if ( !document.hidden ) {
        copypaste.ls_obj = localStorage.getItem("mfn_copy") ? JSON.parse(localStorage.getItem("mfn_copy")) : false;
    }
}

function iframeReady(){
    sliderInput.unitChange();
    sliderInput.customValue();
    presets.init();

    $content.on('click', '.mfn-rev-slider a:not(.btn-edit-slider), .mcb-column-inner *:not(.mfn-header) a:not(.btn-edit-slider), .mcb-column-inner > a, .mfn-footer-stickymenu a', function(e) {
        e.preventDefault();
    });

    document.getElementById('mfn-vb-ifr').contentWindow.addEventListener('keydown', function(event) {
        catchShortcuts(event);
    });

    if( builder_type == 'header' ){
        $builder = $content.find('.mfn-header-tmpl-builder');
        headerTmpl.init();
        $content.find("html").css({ 'overflow': 'hidden' });
    }else if( builder_type == 'megamenu' ){
        $builder = $content.find('.mfn-megamenu-tmpl-builder');
    }else if( builder_type == 'sidemenu' ){
        $builder = $content.find('.mfn-sidemenu-tmpl-builder');
    }else if( builder_type == 'popup' ){
        $builder = $content.find('.mfn-popup-tmpl-builder .mfn-popup-tmpl-content-wrapper');
    }else if( builder_type == 'footer' ){
        $builder = $content.find('.mfn-footer-tmpl-builder');
    }else if( builder_type == 'shop-archive' ){
        $builder = $content.find('.mfn-shop-archive-tmpl-builder');
    }else if( builder_type == 'single-post' ){
        $builder = $content.find('.mfn-single-post-tmpl-builder');
    }else if( builder_type == 'blog' ){
        $builder = $content.find('.mfn-blog-tmpl-builder');
    }else if( builder_type == 'portfolio' ){
        $builder = $content.find('.mfn-portfolio-tmpl-builder');
    }else if( builder_type == 'single-portfolio' ){
        $builder = $content.find('.mfn-single-portfolio-tmpl-builder');
    }else if( builder_type == 'single-product' ){
        $builder = $content.find('.mfn-single-product-tmpl-builder');
    }else if( builder_type == 'cart' ){
        $builder = $content.find('.mfn-cart-tmpl-builder');
        cart_tmpl.init();
    }else if( builder_type == 'checkout' ){
        $builder = $content.find('.mfn-checkout-tmpl-builder');
    }else if( builder_type == 'thanks' ){
        $builder = $content.find('.mfn-thanks-tmpl-builder');
    }else if( builder_type == 'default' ){
        $builder = $content.find('.mfn-default-tmpl-builder');
    }else if( builder_type == 'section' ){
        $builder = $content.find('.mfn-section-tmpl-builder');
    }else if( builder_type == 'wrap' ){
        $builder = $content.find('.mfn-wrap-tmpl-builder');
    }else if($content.find('.mfn-builder-content[data-id="'+mfn.pageid+'"]').length) {
        $builder = $content.find('.mfn-builder-content[data-id="'+mfn.pageid+'"]');
    }else{
        $builder = $content.find('#Content .entry-content > .mfn-builder-content');
    }

    mfn_multifield_field.init();

    $builder.addClass('mfn-builder-active');

    if( builder_type == 'megamenu' ){
        var page_options = mfn.page_options;
        if( typeof page_options['megamenu_width'] !== "undefined" && page_options['megamenu_width'] == 'custom-width' ) {
            $content.find('.mfn-megamenu-wrapper').css('width', page_options['megamenu_custom_width']);
        }else if( typeof page_options['megamenu_width'] !== "undefined" && page_options['megamenu_width'] == 'full-width' ){
            $content.find('.mfn-megamenu-wrapper').addClass('mfn-megamenu-full-width').removeAttr('style');
        }

        page_options = false;
    }

    // add element button in wrap
    $builder.on('click', '.mfn-item-add', function(e) {
        e.preventDefault();
        backToWidgets();
    });

    if( $content && $content.find('.mcb-item-product_images-inner .woocommerce-product-gallery').length ){
        $content.find('.mcb-item-product_images-inner .woocommerce-product-gallery').addClass('mfn-initialized');
    }

    editContentButton();

    // sections context menu
    $builder.on('click', '.section .mfn-option-dropdown .dropdown-wrapper a.mfn-dropdown-item', function(e) {
        e.preventDefault();

        let $it = $(this).closest('.mcb-section');
        let sec_uid = $it.data('uid');
        let sections_count = $content.find('.mcb-section').length-1;

        if($(this).hasClass('mfn-section-hide')){
            // hide
            if($it.hasClass('hide')){
                $(this).find('.label').text($(this).attr('data-hide'));
                //$('.mfn-vb-'+sec_uid+' .mfn-type-section.hide input').val('');
                if( typeof mfn.pagedata.filter( (item) => item.uid == sec_uid )[0]['attr']['hide'] !== 'undefined' ){
                    delete( mfn.pagedata.filter( (item) => item.uid == sec_uid )[0]['attr']['hide'] );
                }

                $('.mfn-navigator .navigator-tree li.nav-'+sec_uid+' .nav-item-tools .mfn-icon-hide').remove();
            }else{
                $(this).find('.label').text($(this).attr('data-show'));
                //$('.mfn-vb-'+sec_uid+' .mfn-type-section.hide input').val('1');
                mfn.pagedata.filter( (item) => item.uid == sec_uid )[0]['attr']['hide'] = '1';

                if( $('body').hasClass('mfn-navigator-active') ){
                    $('.mfn-navigator .navigator-tree li.nav-'+sec_uid+' .nav-item-tools .navigator-arrow').before('<span class="mfn-icon mfn-icon-hide"></span>');
                }
            }
            $it.toggleClass('hide');
        }else if($(this).hasClass('mfn-section-move-down')){
            // move down
            if($it.next('.mcb-section').length){
                $it.insertAfter($it.next());

                historyStorage.add();
            }
        }else if($(this).hasClass('mfn-section-move-up')){
            // move up
            if($it.prev('.mcb-section').length){
                $it.insertBefore($it.prev());

                historyStorage.add();
            }
        }else if( $(this).hasClass('mfn-section-export') ){
            // export
            elementToClipboard(sec_uid);
        }else if( !$(this).hasClass('mfn-disabled') && $(this).hasClass('mfn-section-import-before') ){
            // import before
            importFromClipboard(sec_uid, 'before');
        }else if( !$(this).hasClass('mfn-disabled') && $(this).hasClass('mfn-section-import-after') ){
            // import after
            importFromClipboard(sec_uid, 'after');
        }else if( !$(this).hasClass('mfn-disabled') && $(this).hasClass('mfn-section-import-replace') ){
            // import & replace - for global sections
            importFromClipboard(sec_uid, 'replace');
        }else if( !$(this).hasClass('mfn-disabled') && $(this).hasClass('mfn-section-convert-to-global') ){
            GlobalSections.convertToGlobal( sec_uid );
        }

    });

    // add new section "+" addnewsection addsection
    $builder.on('click', '.mfn-section-add', function(e) {
        e.preventDefault();

        if(!$content.find('.mfn-section-add').hasClass('loading')){

            $content.find('.mfn-section-add').addClass('loading');

            var new_element = elements.section();
            //var navigator_html = be_navigator.item('Section', new_element.uid);

            let uid = $(this).parent().data('uid');
            let count = $content.find('.mcb-section').length;
            let placement = 'next';
            if($(this).hasClass('prev')){placement = 'prev';}

            removeStartBuilding();

            if (typeof(uid) !== 'undefined') {
                if(placement == 'prev'){
                    $builder.find('.mcb-section[data-uid='+uid+']').before( new_element.html );

                    //$navigator.find('.navigator-tree .nav-'+uid).before(navigator_html);
                }else{
                    $builder.find('.mcb-section[data-uid='+uid+']').after( new_element.html );

                    //$navigator.find('.navigator-tree .nav-'+uid).after(navigator_html);
                }
            }else{
                $builder.prepend( new_element.html );
                //$navigator.find('.navigator-tree').prepend(navigator_html);
            }

            $content.find('.mfn-section-add').removeClass('loading');

            loopAllStyleFields(new_element.uid);

            if($('body').hasClass('mfn-navigator-active')) be_navigator.show(new_element.uid);

            $builder.find('.mcb-section-'+new_element.uid+ '.mfn-element-edit').trigger('click');

            blink();

        }
    });

    $builder.on('click', '.wrap-layout', function(e) {
        e.preventDefault();
        if(!$content.find('.wrap-layouts').hasClass('loading')){

            //var navigator_tree = '';

            $content.find('.wrap-layouts').addClass('loading');

            let id = $(this).closest('.vb-item').attr('data-uid');
            let type = $(this).data('type');

            if($builder.find('.mcb-section-'+id+' .mfn-section-new').length){ $builder.find('.mcb-section-'+id+' .mfn-section-new').remove(); }

            if( type == 'wrap-141214' ){
                be_layout.new.wrap(id, false, '1/4');
                be_layout.new.wrap(id, false, '1/2');
                be_layout.new.wrap(id, false, '1/4');
            }else if( type == 'wrap-2313' ){
                be_layout.new.wrap(id, false, '2/3');
                be_layout.new.wrap(id, false, '1/3');
            }else if( type == 'wrap-1323' ){
                be_layout.new.wrap(id, false, '1/3');
                be_layout.new.wrap(id, false, '2/3');
            }else if( type == 'wrap-14' ){
                be_layout.new.wrap(id, false, '1/4');
                be_layout.new.wrap(id, false, '1/4');
                be_layout.new.wrap(id, false, '1/4');
                be_layout.new.wrap(id, false, '1/4');
            }else if( type == 'wrap-13' ){
                be_layout.new.wrap(id, false, '1/3');
                be_layout.new.wrap(id, false, '1/3');
                be_layout.new.wrap(id, false, '1/3');
            }else if( type == 'wrap-12' ){
                be_layout.new.wrap(id, false, '1/2');
                be_layout.new.wrap(id, false, '1/2');
            }else{
                be_layout.new.wrap(id, false, '1/1');
            }

        }

    })

    $builder.on('click', '.prebuilt-button', function(e) {
        e.preventDefault();
        showPrebuilts();
        prebuiltType = $(this).closest('.mcb-section').data('uid');
    });

    $(document).on('click', '.mfn-yoast-tab', function(e) {
        e.preventDefault();
        if( $content.find('.vb-item.mfn-current-editing').length ) $content.find('.vb-item.mfn-current-editing').removeClass('mfn-current-editing');
        if( $('.mfn-ui').hasClass('mfn-class-editor') ) $('.mfn-ui').removeClass('mfn-class-editor');
        if( $content.find('body').hasClass('mfn-class-editor-preview') ) $content.find('body').removeClass('mfn-class-editor-preview');
        if( $('.mfn-ui').hasClass('mfn-class-editor-full') ) $('.mfn-ui').addClass('mfn-class-editor-full');
        showYoast();
    });

    $builder.on('click', '.add-global-sections-button', function(e) {
        e.preventDefault();
        showGlobals();
    });








    let contextMenu = {
        obj_el: false,
        active_dropdown: false,
        item: false,
        dropdown: `<div style="position: absolute; z-index: 9992;" class="mfn-contextmenu mfn-builder-area-contextmenu"><h6 class="mfn-context-header">Section</h6><div class="mfn-contextmenu-tools"><a href="#" data-action="bring_before" class="mfn-option-btn" data-tooltip="Bring before" data-position="right"><span class="mfn-icon mfn-icon-undo"></span></a><a href="#" data-action="decrease" class="mfn-option-btn mfn-context-resize-minus" data-tooltip="Decrease" data-position="top"><span class="mfn-icon mfn-icon-dec"></span></a><a data-tooltip="Increase" data-position="top" href="#" class="mfn-option-btn mfn-context-resize-plus" data-action="increase"><span class="mfn-icon mfn-icon-inc"></span></a><a href="#" data-tooltip="Clone" data-position="top" class="mfn-option-btn mfn-context-clone" data-action="clone"><span class="mfn-icon mfn-icon-clone"></span></a><a href="#" data-action="bring_after" class="mfn-option-btn" data-tooltip="Bring after" data-position="left"><span class="mfn-icon mfn-icon-redo"></span></a></div><ul><li class="mfn-contextmenu-edit"><a href="#" data-action="edit"><span class="mfn-icon mfn-icon-edit"></span><span class="label">Edit</span></a></li><li class="mfn-contextmenu-copy"><a href="#" class="mfn-context-copy" data-action="copy"><span class="mfn-icon mfn-icon-copy"></span><span class="label">Copy</span></a></li><li class="mfn-contextmenu-paste"><a href="#" class="mfn-context-paste" data-action="paste"><span class="mfn-icon mfn-icon-paste"></span><span class="label">Paste</span></a></li><li class="mfn-contextmenu-copystyle"><a href="#" class="mfn-context-copy" data-action="copy"><span class="mfn-icon mfn-icon-copy-style"></span><span class="label">Copy style</span></a></li><li class="mfn-contextmenu-pastestyle"><a href="#" class="mfn-context-paste-style" data-action="paste-style"><span class="mfn-icon mfn-icon-paste-style"></span><span class="label">Paste style</span></a></li><li class="mfn-contextmenu-resetstyle"><a href="#" class="mfn-context-reset-style" data-action="reset-style"><span class="mfn-icon mfn-icon-reset-style"></span><span class="label">Reset style</span></a></li>${ $('body').hasClass('mfn-presets-enabled') ? '<li class="mfn-contextmenu-save-preset preset-action-button"><a href="#" data-action="save-preset"><span class="mfn-icon mfn-icon-preset"></span><span class="label">Save as preset</span></a></li>' : '' }<li class="mfn-contextmenu-save-class classes-action-button"><a href="#" class="mfn-save-new-class" data-action="save-class"><span class="mfn-icon mfn-icon-be-class"></span><span class="label">Save as global style</span></a></li><li class="mfn-contextmenu-convert-global-section global-section-action-button"><a href="#" data-action="convert-global-section"><span class="mfn-icon mfn-icon-convert-section-to-global"></span><span class="label">Convert to Global</span></a></li><li class="mfn-contextmenu-convert-global-wrap global-section-action-button"><a href="#" data-action="convert-global-wrap"><span class="mfn-icon mfn-icon-convert-section-to-global"></span><span class="label">Convert to Global</span></a></li><li class="mfn-contextmenu-navigator"><a href="#" data-action="navigator"><span class="mfn-icon mfn-icon-navigator"></span><span class="label">Navigator</span></a></li><li class="mfn-contextmenu-delete"><a href="#" data-action="delete"><span class="mfn-icon mfn-icon-delete-red"></span><span class="label">Delete</span></a></li></ul></div>`,
        
        init: function() {
            contextMenu.init_iframe();
            contextMenu.init_navigator();
        },

        init_navigator: function() {

            $('.mfn-navigator').contextmenu(function(e) {

                if( $('#mfn-visualbuilder.mfn-ui').hasClass('sidebar_hidden') || $(e.target).closest('.toggle-disabled').length ) return;

                if( !$(e.target).closest('ul.navigator-tree').length ) {
                    return;
                }else{
                    e.preventDefault();
                }

                if( $(e.target).closest('li') ) {

                    contextMenu.before();

                    contextMenu.item = $(e.target).closest('li').children('a').attr('data-uid');
                    contextMenu.obj_el = mfn.pagedata.filter( (item) => item.uid == contextMenu.item )[0];

                    $('.mfn-ui').append(contextMenu.dropdown);
                    contextMenu.active_dropdown = $('.mfn-builder-area-contextmenu');

                    let offset_top = e.pageY;

                    if( $('.mfn-topbar').length ) offset_top -= $('.mfn-topbar').outerHeight();

                    if( $(window).height() < (offset_top + contextMenu.active_dropdown.outerHeight()) ) {
                        contextMenu.active_dropdown.show().css({bottom: 0, top: 'initial'});
                    }else{
                        contextMenu.active_dropdown.show().css({top: offset_top});
                    }
                    
                    var diff = $(window).width() - e.pageX;

                    if(  diff < 200 ) {
                        contextMenu.active_dropdown.css({'right': diff, 'left': 'initial'});
                    }else{
                        contextMenu.active_dropdown.css({'left': e.pageX, 'right': 'initial'});
                    }

                    contextMenu.active_dropdown.find('.mfn-contextmenu-navigator').remove();

                    if( $(e.target).closest('li').hasClass('navigator-wrap-global') ) {
                        contextMenu.active_dropdown.find('.mfn-contextmenu-tools .mfn-context-resize-minus').addClass('disabled');
                        contextMenu.active_dropdown.find('.mfn-contextmenu-tools .mfn-context-resize-plus').addClass('disabled');
                        contextMenu.active_dropdown.find('.mfn-contextmenu-tools .mfn-context-clone').addClass('disabled');
                    }

                    if( $(e.target).closest('li').hasClass('navigator-wrap-global') || $(e.target).closest('li').hasClass('navigator-section-global') ) {
                        contextMenu.active_dropdown.find('.mfn-contextmenu-copystyle').remove();
                        contextMenu.active_dropdown.find('.mfn-contextmenu-pastestyle').remove();
                        contextMenu.active_dropdown.find('.mfn-contextmenu-resetstyle').remove();
                        contextMenu.active_dropdown.find('.mfn-contextmenu-save-class').remove();
                        contextMenu.active_dropdown.find('.mfn-contextmenu-convert-global-section').remove();
                        contextMenu.active_dropdown.find('.mfn-contextmenu-convert-global-wrap').remove();
                    }

                    contextMenu.after(e);

                    /** PBL BE SECTIONS WRAPS */
                    const isGlobalSection = $('body').hasClass('mfn-template-section');
                    const isGlobalWrap = $('body').hasClass('mfn-template-wrap');
                    const isSectionEdited = contextMenu.active_dropdown.find('.mfn-context-header').attr('data-element') === 'Section';
                    const isWrapEdited = contextMenu.active_dropdown.find('.mfn-context-header').attr('data-element') === 'Wrap';

                    if( isGlobalSection && isSectionEdited ) {
                        contextMenu.active_dropdown.attr('hide-ui', 'section');
                    } else if( isGlobalWrap && isWrapEdited ) {
                        contextMenu.active_dropdown.attr('hide-ui', 'wrap');
                    } else {
                        contextMenu.active_dropdown.removeAttr('hide-ui');
                    }
                }

                $(document).bind('click', contextMenu.hideContext);

            });

        },

        init_iframe: function() {
            $builder.contextmenu(function(e) {
                if( $('#mfn-visualbuilder.mfn-ui').hasClass('sidebar_hidden') || $(e.target).closest('.mfn-global-section').length || $(e.target).closest('.mfn-global-wrap').length ) return;
                e.preventDefault();

                if(e.target.closest('.vb-item')) {

                    contextMenu.before();

                    $content.find('body').append(contextMenu.dropdown);
                    contextMenu.active_dropdown = $content.find('.mfn-builder-area-contextmenu');

                    contextMenu.active_dropdown.removeClass('mfn-context-menu-section mfn-context-menu-wrap mfn-context-menu-item mfn-context-menu-global');

                    contextMenu.active_dropdown.find('.mfn-contextmenu-tools').remove();

                    var diff = iframe.window.jQuery('body').width() - e.pageX;

                    if(  diff < 200 ) {
                        contextMenu.active_dropdown.css({'right': 0, 'left': 'initial'});
                    }else{
                        contextMenu.active_dropdown.css({'left': e.pageX, 'right': 'initial'});
                    }

                    contextMenu.active_dropdown.show().css({top: e.pageY});

                    contextMenu.item = $(e.target).closest('.vb-item').attr('data-uid');

                    contextMenu.obj_el = mfn.pagedata.filter( (item) => item.uid == contextMenu.item )[0];

                    contextMenu.after(e);

                    /** PBL BE SECTIONS WRAPS */
                    const isGlobalSection = $content.find('body').hasClass('mfn-template-section');
                    const isGlobalWrap = $content.find('body').hasClass('mfn-template-wrap');
                    const isSectionEdited = contextMenu.active_dropdown.find('.mfn-context-header').attr('data-element') === 'Section';
                    const isWrapEdited = contextMenu.active_dropdown.find('.mfn-context-header').attr('data-element') === 'Wrap';

                    if( isGlobalSection && isSectionEdited ) {
                        contextMenu.active_dropdown.attr('hide-ui', 'section');
                    } else if( isGlobalWrap && isWrapEdited ) {
                        contextMenu.active_dropdown.attr('hide-ui', 'wrap');
                    } else {
                        contextMenu.active_dropdown.removeAttr('hide-ui');
                    }

                }
                $content.find('body').bind('click', contextMenu.hideContext);
            });
        },

        before: function() {
            if( contextMenu.active_dropdown ) contextMenu.active_dropdown.remove();
        },

        after: function(e) {

            contextMenu.active_dropdown.removeClass('mfn-context-menu-section mfn-context-menu-wrap mfn-context-menu-item mfn-context-menu-global');

            if( contextMenu.obj_el.jsclass == 'section' ){
                contextMenu.active_dropdown.attr('data-edited', 'Section');
                contextMenu.active_dropdown.find('.mfn-context-header').html('Section');
            }else if( contextMenu.obj_el.jsclass == 'wrap' ){
                contextMenu.active_dropdown.attr('data-edited', 'Wrap');
                contextMenu.active_dropdown.find('.mfn-context-header').html('Wrap');
            }else{  
                contextMenu.active_dropdown.attr('data-edited', contextMenu.obj_el.title);
                contextMenu.active_dropdown.find('.mfn-context-header').html( contextMenu.obj_el.title );
            }

            if( !copypaste.ls_obj ) {
                contextMenu.active_dropdown.find('.mfn-context-paste').addClass('mfn-context-inactive');
                contextMenu.active_dropdown.find('.mfn-context-paste-style').addClass('mfn-context-inactive');
            }else{
                contextMenu.active_dropdown.find('.mfn-context-paste').removeClass('mfn-context-inactive');
                contextMenu.active_dropdown.find('.mfn-context-paste-style').removeClass('mfn-context-inactive');
            }

            if( !copypaste.ls_obj || !contextMenu.obj_el || contextMenu.obj_el.jsclass != copypaste.ls_obj['obj'][0]['jsclass'] ){
                contextMenu.active_dropdown.find('.mfn-context-paste-style').addClass('mfn-context-inactive');
            }

            if( contextMenu.obj_el.jsclass == 'section' ){
                contextMenu.active_dropdown.find('.mfn-contextmenu-convert-global-section').show();
            }else{
                contextMenu.active_dropdown.find('.mfn-contextmenu-convert-global-section').hide();
            }

            if( contextMenu.obj_el.jsclass == 'wrap' ){
                contextMenu.active_dropdown.find('.mfn-contextmenu-convert-global-wrap').show();
            }else{
                contextMenu.active_dropdown.find('.mfn-contextmenu-convert-global-wrap').hide();
            }

            contextMenu.click();

        },

        click: function() {

            contextMenu.active_dropdown.find('a').on('click', function(e) {
                e.preventDefault();

                let action = $(this).data('action');

                sidebar_form.is_class = false;

                if(action == 'delete'){
                    $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').find('.mfn-header').first().find('.mfn-element-delete').trigger('click');
                }else if(action == 'edit'){
                    $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').find('.mfn-header').first().find('.mfn-element-edit').trigger('click');
                }else if(action == 'decrease'){
                    $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').find('.mfn-header').first().find('.mfn-size-decrease').trigger('click');
                }else if(action == 'clone'){
                    $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').find('.mfn-header').first().find('.mfn-module-clone').trigger('click');
                }else if(action == 'increase'){
                    $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').find('.mfn-header').first().find('.mfn-size-increase').trigger('click');
                }else if(action == 'copy'){
                    copypaste.copy(contextMenu.item);
                }else if(action == 'clone'){
                    $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').find('.mfn-header').first().find('.mfn-module-clone').trigger('click');
                }else if(action == 'paste'){
                    //let $el = $content.find('.vb-item[data-uid="'+contextMenu.item+'"]');
                    copypaste.parent = $content.find('.vb-item[data-uid="'+contextMenu.item+'"]');
                    copypaste.paste();
                }else if(action == 'paste-style'){

                    if( !copypaste.ls_obj ) return;

                    var copied_el   = copypaste.ls_obj['obj'][0];
                    var this_el     = mfn.pagedata.filter( (item) => item.uid == contextMenu.item )[0];

                    if( copied_el.jsclass != this_el.jsclass ){
                        return; // different items
                    }

                    for (key in this_el.attr) {
                        if( key.startsWith('style:') || key.startsWith('css_') ) {
                            this_el.attr[key] = '';
                        }
                    }

                    for (key in copied_el.attr) {
                        if( key.startsWith('css_') || key.startsWith('style:') || key.includes('_switcher') ) {
                            this_el.attr[key] = JSON.parse( JSON.stringify(copied_el.attr[key]));
                        }
                    }

                    sidebar_form.open( $builder.find('.vb-item[data-uid="'+contextMenu.item+'"]'), false );
                    loopAllStyleFields(contextMenu.item);
                    historyStorage.add();
                }else if(action == 'save-preset') {
                    presets.modal( contextMenu.item );
                }else if(action == 'save-class') {
                    mfn_classes.uid = contextMenu.item;
                    $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').find('.mfn-header').first().find('.mfn-element-edit').trigger('click');
                    setTimeout(mfn_classes.modal(), 10);
                }else if(action == 'bring_before') {

                    if( !$content.find('.vb-item[data-uid="'+contextMenu.item+'"]').length ) return;
                    if( !$content.find('.vb-item[data-uid="'+contextMenu.item+'"]').prev('.vb-item').length ) return;

                    let cloned = $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').clone();

                    $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').addClass('mfn_to_remove');
                    $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').prev('.vb-item').before(cloned);
                    $content.find('.vb-item.mfn_to_remove[data-uid="'+contextMenu.item+'"]').remove();

                    be_navigator.show(contextMenu.item);

                }else if(action == 'bring_after'){
                    
                    if( !$content.find('.vb-item[data-uid="'+contextMenu.item+'"]').length ) return;
                    if( !$content.find('.vb-item[data-uid="'+contextMenu.item+'"]').next('.vb-item').length ) return;
                    
                    let cloned = $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').clone();
                    
                    $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').addClass('mfn_to_remove');
                    $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').next('.vb-item').after(cloned);
                    $content.find('.vb-item.mfn_to_remove[data-uid="'+contextMenu.item+'"]').remove();

                    be_navigator.show(contextMenu.item);
                    
                }else if(action == 'convert-global-section') {
                    GlobalSections.convertToGlobal( contextMenu.item );
                }else if(action == 'convert-global-wrap') {
                    GlobalWraps.selectedUid = contextMenu.item;
                    contextMenu.item = $builder.find('.vb-item[data-uid="'+contextMenu.item+'"]').closest('.mcb-section').attr('data-uid')
                    GlobalWraps.convertToGlobal( contextMenu.item );
                }else if(action == 'reset-style') {
                    var this_el = mfn.pagedata.filter( (item) => item.uid == contextMenu.item )[0];

                    var listStyles = {};

                    listStyles = this_el.attr;

                    for(key in listStyles) {
                        if( key.startsWith('css_') || key.startsWith('style:') || key.includes('height_switcher') || key.includes('width_switcher') ) {
                            delete listStyles[key];
                        }
                    }

                    $content.find('style.mfn-local-style').remove();
                    sidebar_form.open( $edited_div, false );
                    loopAllStyleFields();

                     $content.find('.vb-item[data-uid="'+contextMenu.item+'"]').find('.mfn-header').first().find('.mfn-element-edit').trigger('click');

                    historyStorage.add();
                }else if(action == 'navigator'){
                    be_navigator.show(contextMenu.item);
                }
                
                if( !$(this).closest('.mfn-contextmenu-tools').length ) contextMenu.active_dropdown.remove();
            });

        },


        hideContext: function(e) {

            if( !contextMenu.active_dropdown.is(e.target) && contextMenu.active_dropdown.has(e.target).length === 0 ) {
                contextMenu.active_dropdown.remove();

                $content.find('body').unbind('click', contextMenu.hideContext);
                $('body').unbind('click', contextMenu.hideContext);

            }
        },

    };

    contextMenu.init();



    $builder.on('click', '.mfn-element-drag', function(e) { e.preventDefault(); });

    $builder.on('click', '.mfn-header .mfn-option-dropdown a', function(e) { e.preventDefault(); });

    // inline editor preven default
    $builder.on('click', '.mfn-inline-editor a', function(e) {
        e.preventDefault();
    });

    
    

    // context menu actions



    // size label +- show
    $builder.on('click', '.mfn-header .mfn-option-btn.mfn-size-label', function(e) {
        if( $content.find('body').hasClass('mfn-modern-nav') ){
            $(this).closest('.mfn-header').toggleClass('mfn-size-change-show');
        }
    });

    // edit on box click
    $builder.on('mouseup', function(e) {
        //e.preventDefault();

        if( preventEdit ) return;

        if(
            $(e.target).closest('.mfn-global-section').length ||
            $(e.target).closest('.mfn-global-wrap').length ||
            $(e.target).closest('.column_placeholder').length ||
            !$(e.target).closest('.vb-item').length ||
            $(e.target).closest('.mfn-wrap-add-item').length ||
            /*$(e.target).closest('.mfn-section-start').length ||*/
            $(e.target).closest('.mcb-section.empty').length ||
            $(e.target).closest('.divider').length ||
            /*$(e.target).closest('.mcb-wrap-inner.empty').length ||*/
            iframe.getSelection().toString() ||
            ( $(e.target).closest('.mfn-header').length && !$(e.target).hasClass('section-header') )
        ) {
            return;
        }

        if( $content.find('body').hasClass('mfn-modern-nav') && !$(e.target).closest('.mfn-header.mfn-element-menu-opened').length ){
            $content.find('.mfn-header.mfn-element-menu-opened').removeClass('mfn-element-menu-opened mfn-size-change-show');
        }

        if( $(e.target).hasClass('mcb-column') ) {
            $edited_div = $(e.target).closest('.mcb-wrap');
        }else{
            $edited_div = $(e.target).closest('.vb-item');
        }

        if( $(e.target).closest('ul.mfn-tabber-nav').length ) {
            $edited_div = $builder.find( $(e.target).attr('data-tab') );
        }

        if( !$edited_div.hasClass('mfn-current-editing') || sidebar_form.is_class ) {
            sidebar_form.is_class = false;
            sidebar_form.open($edited_div, false);
        }

        // Sidebar adjustments for Globals
        GlobalSections.sectionTriggered = $edited_div;
        GlobalSections.setSidebarClass();
    });

    // edit on icon click
    $builder.on('click', '.mfn-header .mfn-element-edit', function(e) {
        e.preventDefault();
        if( preventEdit ) return;
        if( $(this).closest('.vb-item').hasClass('mfn-current-editing') ) return;
        $edited_div = $(this).closest('.vb-item');

        if( $edited_div.hasClass('mfn-global-section') ) {
            GlobalSections.sectionTriggered = $edited_div;
            $('#header-global-sections').attr('section-id', $edited_div.attr('data-uid'));

            return showGlobals( $edited_div.attr('data-mfn-global') );
        }

        sidebar_form.is_class = false;
        sidebar_form.open($edited_div, false);
    });

    // dropdown for global sections on new section
    $builder.on('click', '.add-global-sections-button', function(e) {
        const sectionUid = $(this).closest('.mcb-section').attr('data-uid'); // mcb-wrap-uid
        $('#header-global-sections').attr('section-id', sectionUid);
    })

    // dropdown for global sections on new section
    $('.panel-global-sections').on('click', '.mfn-insert-global-section', function(e) {
        e.preventDefault();
        const selected = $(e.target).closest('li').attr('data-id');
        const sectionUid = $('#header-global-sections').attr('section-id');

        $('#header-global-sections').attr(sectionUid);

        $edited_div = $content.find(`.section[data-uid=${sectionUid}]`);

        GlobalSections.fillSectionInfoWithoutCut(sectionUid, selected);
        GlobalSections.getGlobalSection();
    })

    // resize
    $builder.on('click', '.mfn-header .mfn-size-change', function(e) {
        e.preventDefault();

        let item_type = 'mcb-item-';

        let uid = $(this).closest('.vb-item').attr('data-uid');
        let chenged_item = mfn.pagedata.filter( (item) => item.uid == uid )[0];
        let type = edited_item.type;

        if( chenged_item.jsclass == 'wrap' ) item_type = 'mcb-wrap-';

        let currClass = sizes.filter(size => size.key === chenged_item.size)[0];

        if( !chenged_item.mobile_size ) chenged_item.mobile_size = '1/1';
        if( !chenged_item.tablet_size ) chenged_item.tablet_size = chenged_item.size;

        if(screen == 'tablet'){
            currClass = sizes.filter(size => size.key === chenged_item.tablet_size)[0];
        }else if(screen == 'laptop'){
            currClass = sizes.filter(size => size.key === chenged_item.laptop_size)[0];
        }else if(screen == 'mobile'){
            currClass = sizes.filter(size => size.key === chenged_item.mobile_size)[0];
        }

        let newIndex = currClass.index;

        if( $(this).hasClass('mfn-size-decrease') ) {
            newIndex = newIndex - 1 < 1 ? 1 : newIndex - 1;
        }else{
            newIndex = newIndex + 1 > 12 ? 12 : newIndex + 1;
        }

        let newClass = sizes.filter(size => size.index === newIndex)[0];

        if( !items_size[type] || ( items_size[type].length && items_size[type].includes(newClass.key) ) ) {

            if($content.find('.vb-item[data-uid='+uid+'] > div > .mfn-header .mfn-element-size-label').length) {
                $content.find('.vb-item[data-uid='+uid+'] > div > .mfn-header .mfn-element-size-label').text(newClass.key);
            }

            $content.find('.'+item_type+uid).attr('data-'+screen+'-size', newClass.key);

            if(screen == 'desktop') {

                $content.find('.'+item_type+uid).removeClass(currClass.desktop).addClass(newClass.desktop).attr('data-'+screen+'-col', newClass.desktop);
                chenged_item.size = newClass.key;

                if( typeof chenged_item.tablet_resized === 'undefined' || chenged_item.tablet_resized == '0' ) {
                    chenged_item.tablet_size = newClass.key;
                    $content.find('.'+item_type+uid).removeClass(currClass.tablet).addClass(newClass.tablet).attr('data-tablet-size', newClass.key);
                }

                if( typeof chenged_item.laptop_resized === 'undefined' || chenged_item.laptop_resized == '0' ) {
                    chenged_item.laptop_size = newClass.key;
                    $content.find('.'+item_type+uid).removeClass(currClass.laptop).addClass(newClass.laptop).attr('data-laptop-size', newClass.key);
                }

            }else if(screen == 'laptop') {

                if(typeof chenged_item.tablet_resized === 'undefined' || chenged_item.tablet_resized == '0' ) {
                    chenged_item.tablet_size = newClass.key;
                    $content.find('.'+item_type+uid).removeClass(currClass.tablet).addClass(newClass.tablet).attr('data-tablet-size', newClass.key);
                }

                $content.find('.'+item_type+uid).removeClass(currClass.laptop).addClass(newClass.laptop).attr('data-'+screen+'-col', newClass.laptop);
                chenged_item.laptop_resized = '1';
                chenged_item.laptop_size = newClass.key;

            }else if(screen == 'tablet') {
                $content.find('.'+item_type+uid).removeClass(currClass.tablet).addClass(newClass.tablet).attr('data-'+screen+'-col', newClass.tablet);
                chenged_item.tablet_resized = '1';
                chenged_item.tablet_size = newClass.key;
            }else{
                $content.find('.'+item_type+uid).removeClass(currClass.mobile).addClass(newClass.mobile).attr('data-'+screen+'-col', newClass.mobile);
                chenged_item.mobile_size = newClass.key;
            }

            if($navigator.find('.navigator-tree li.nav-'+uid+' .navigator-size-label').length) {
                $navigator.find('.navigator-tree li.nav-'+uid+' > a .navigator-size-label').text(newClass.key);
            }

        }

        resetBeforeAfter(uid);

        if($content.find('.'+item_type+uid+' .slick-initialized').length) {
            $content.find('.vb-item[data-uid='+uid+'] .slick-initialized').each(function() {
                $(this).slick('setPosition');
            });
        }

        if($content.find('.'+item_type+uid+' .isotope.mfn-initialized').length) {
            $content.find('.'+item_type+uid+' .isotope.mfn-initialized').each(function() {
                var $iso_wrapper = $(this);
                $iso_wrapper.closest('.mcb-column-inner').css('min-height', $iso_wrapper.closest('.mcb-column-inner').outerHeight());
                $iso_wrapper.removeClass('mfn-initialized');
                runAjaxElements();
            });
        }

        if( $content.find('.'+item_type+uid+' .woocommerce-product-gallery').length ) iframe.window.jQuery('body').trigger('resize');

        reLayoutIsotope( item_type+uid );

        historyStorage.add();
    });

    // delete
    $builder.on('click', '.mfn-header .mfn-element-delete', function(e) {
        e.preventDefault();

        let $dom_el = $(this).closest('.vb-item');
        let uid = $dom_el.attr('data-uid');
        let force_re_render = false;

        $('.mfn-ui').addClass('mfn-modal-open').append('<div class="mfn-modal modal-confirm show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-delete"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Delete element</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"> <img class="icon" alt="" src="'+mfn.themepath+'/muffin-options/svg/warning.svg"> <h3>Delete element?</h3> <p>Please confirm. There is no undo.</p><a class="mfn-btn mfn-btn-red btn-wide btn-modal-confirm" href="#"><span class="btn-wrapper">Delete</span></a> </div></div></div>');

        $('.btn-modal-close').on('click', function(e) {
            e.preventDefault();
            $('.mfn-ui').removeClass('mfn-modal-open');
            $('.modal-confirm.show').remove();
        });

        $('.btn-modal-confirm').on('click', function(e) {
            e.preventDefault();

            //mfn.pagedata = mfn.pagedata.filter( (item) => item.uid != uid );

            if( $navigator.find('.navigator-tree li.nav-'+uid).length ) {
                $navigator.find('.navigator-tree li.nav-'+uid).remove();
            }

            if( $dom_el.closest('.mfn-looped-items').length ) {
                force_re_render = $dom_el.closest('.mcb-section').attr('data-uid');
            }

            if( $dom_el.hasClass('mcb-wrap') && !$dom_el.hasClass('mfn-nested-wrap') && $dom_el.closest('.mfn-section-tabber').length ) {
                force_re_render = $dom_el.closest('.mcb-section').attr('data-uid');
            }

            if( $dom_el.next('.mfn-read-more-line').length ) $dom_el.next('.mfn-read-more-line').remove();
            
            $builder.find('[data-uid="'+uid+'"]').remove();
            
            $('.mfn-ui').removeClass('mfn-modal-open');
            $('.modal-confirm.show').remove();

            iframe.window.jQuery('body').trigger('resize');

            if( force_re_render ) re_render( force_re_render );

            be_layout.emptys.page();
            be_layout.emptys.wraps()
            be_layout.emptys.sections();
            backToWidgets();

            historyStorage.add();
        });

    });

    mfn.pagedata = loadExistedElementsFromObject(mfn.page_object || []);

    // clone section

    $builder.on('click', '.mfn-module-clone', function(e) {
        e.preventDefault();
        let $el = $(this).closest('.vb-item');
        if( builder_type == 'header' && $el.hasClass('mcb-wrap') && $(this).closest('.mfn-new-wraps-disabled').length ) return;
        copypaste.copy( $el.attr('data-uid'), $el );
    });

    // add wrap

    $builder.on('click', '.mfn-wrap-add', function(e) {
        e.preventDefault();
        let thisid = $(this).closest('.vb-item').attr('data-uid');
        let is_divider = 0;
        if($(this).hasClass('mfn-divider-add')){ is_divider = 1; }
        be_layout.new.wrap(thisid, is_divider, '1/1');
    });


    $content.on('click', '.vb-item .mfn-header .parent-section-select', function(e) {
        e.preventDefault();
        let this_uid = $(this).closest('.vb-item').attr('data-uid');
        let this_el = $content.find('.vb-item[data-uid="'+this_uid+'"]').closest('.section');
        this_el.find('.mfn-header').first().find('.mfn-element-edit').trigger('click');

    });

    $content.on('click', '.vb-item .mfn-header .parent-wrap-select', function(e) {
        e.preventDefault();
        let this_uid = $(this).closest('.vb-item').attr('data-uid');
        let this_el = $content.find('.vb-item[data-uid="'+this_uid+'"]').closest('.wrap:not(.mfn-nested-wrap)');
        this_el.find('.mfn-header').first().find('.mfn-element-edit').trigger('click');

    });

    $content.on('click', '.vb-item .mfn-header .parent-inner-wrap-select', function(e) {
        e.preventDefault();
        let this_uid = $(this).closest('.vb-item').attr('data-uid');
        let this_el = $content.find('.vb-item[data-uid="'+this_uid+'"]').closest('.wrap.mfn-nested-wrap');
        this_el.find('.mfn-header').first().find('.mfn-element-edit').trigger('click');

    });

    inlineEditor();

    if( $content.find('.section_video .mfn-vb-video-lazy').length ) {
        $content.find('.section_video .mfn-vb-video-lazy').each(function() {
            $(this).replaceWith( $(this).html().replace('<!--', '').replace('-->', '') );
        });
    }

    loopAllStyleFields();

    mfn['content_html'] = function() { return jQuery("iframe#mfn-vb-ifr").contents()/*.find(".mfn-builder-active .mcb-column-inner")*/; }

    setTimeout(mfnBannerBox, 500);

    setSizeLabels();
}







function loadExistedElementsFromObject(mfnPageItems) {

  if (!Array.isArray(mfnPageItems) || !mfnPageItems.length) {
    return [];
  }

  const flat = [];
  let detectOldBuilder = false;

  for (const rawSection of mfnPageItems) {
    if (!rawSection || typeof rawSection !== 'object' || Array.isArray(rawSection)) {
      continue;
    }

    const section = structuredClone(rawSection);

    normalizeSection(section);
    flattenSection(section, flat);
  }

  return flat;

  function normalizeSection(section) {

    if (!section.uid) {
      section.uid = getUid();
      detectOldBuilder = true;

      const url = new URL(window.location.href);
        url.searchParams.set('old_bebuilder', '1');
        window.location.href = url.toString();

        console.log('old bebuilder detected in section');

        return;
    }

    if (!section.wraps && Array.isArray(section.items) && section.items.length) {
      section.wraps = [{
        size: '1/1',
        uid: getUid(),
        items: section.items,
        jsclass: 'wrap',
        title: 'Wrap',
        icon: 'wrap',
      }];

      delete section.items;
      detectOldBuilder = true;
    }

    if (!section.jsclass) {
      section.jsclass = 'section';
      section.title = 'Section';
      section.icon = 'section';
    }
  }

  function normalizeWrap(wrap) {
    if (!wrap.uid) {
      wrap.uid = getUid();
      detectOldBuilder = true;

      const url = new URL(window.location.href);
        url.searchParams.set('old_bebuilder', '1');
        window.location.href = url.toString();

        console.log('old bebuilder detected in wrap');

        return;
    }

    if (wrap.attr && typeof wrap.attr === 'object' && !Array.isArray(wrap.attr)) {
      for (const key of Object.keys(wrap.attr)) {
        if (key.includes('>')) {
          wrap.attr[key.replace(/>/g, '/')] = wrap.attr[key];
          delete wrap.attr[key];
          detectOldBuilder = true;
        }
      }
    }

    if (!wrap.jsclass) {
      wrap.jsclass = 'wrap';
      wrap.title = 'Wrap';
      wrap.icon = 'wrap';
    }
  }

  function normalizeItem(item) {
    if (!item.uid) {
      item.uid = getUid();
      detectOldBuilder = true;
    }

    if (item.item_is_wrap) {
      item.jsclass = 'wrap';
      item.title = 'Wrap';
      item.icon = 'wrap';
      return;
    }

    if (item.fields && typeof item.fields === 'object') {
      item.attr = item.fields;
      delete item.fields;
      detectOldBuilder = true;
    }

    if (item.type) {
      item.jsclass = item.type;
      item.title = item.title || item.type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
      item.icon = item.type.replace(/_/g, '-');
    }
  }

  function flattenSection(section, flat) {

    if (Array.isArray(section.wraps)) {
      for (const wrap of section.wraps) {
        if (!wrap || typeof wrap !== 'object' || Array.isArray(wrap)) {
          continue;
        }
        flattenWrap(wrap, flat);
      }
    }

    const sectionCopy = { ...section };
    delete sectionCopy.wraps;
    flat.push(sectionCopy);

  }

  function flattenWrap(wrap, flat) {
    normalizeWrap(wrap);

    if (Array.isArray(wrap.items)) {
      for (const item of wrap.items) {
        if (!item || typeof item !== 'object' || Array.isArray(item)) {
          continue;
        }

        flattenItem(item, flat);
      }
    }

    const wrapCopy = { ...wrap };
    delete wrapCopy.items;
    flat.push(wrapCopy);
  }

  function flattenItem(item, flat) {
    normalizeItem(item);

    if (item.item_is_wrap) {
      if (Array.isArray(item.items)) {
        for (const child of item.items) {
          if (!child || typeof child !== 'object' || Array.isArray(child)) {
            continue;
          }

          flattenItem(child, flat);
        }
      }

      const wrapCopy = { ...item };
      delete wrapCopy.items;
      flat.push(wrapCopy);
      return;
    }

    flat.push(item);
  }
}









$editpanel.on('click', '.btn-save-option', function(e) {
    e.preventDefault();
    if (mfn.view == 'demo') return;

    $(this).parent().toggleClass('s-opt-show');
    $editpanel.bind('click', closeSaveOpt);
    $content.bind('click', closeSaveOpt);
});


function editContentButton() {
    if( $builder.find( '.mfn-builder-content:not(.mfn-builder-active)' ).length && mfn.view != 'demo' ) {
        $builder.find( '.mfn-builder-content:not(.mfn-builder-active)' ).each(function(i, el) {
            let this_item = $(el).closest('.mcb-column.vb-item');
            if( this_item.length && !this_item.find('.btn-edit-content').length ) this_item.append('<a href="'+mfn.adminurl+'post.php?post='+$(el).attr("data-id")+'&action='+(mfn.be_slug == 'be' || mfn.be_slug == 'mfn' ? 'mfn' : mfn.be_slug)+'-live-builder" target="_blank" data-tooltip="Edit Content" class="btn-edit-content" data-position="right">Edit content</a>')
        });
    }
}

$editpanel.on('click', '.btn-save-changes', function(e){
    e.preventDefault();

    if( mfn.view == 'demo' ) return;
    if($(this).hasClass('loading disabled')) return;
    var $list = $(".panel.panel-revisions-update ul.revisions-list");
    var formaction = $(this).attr('data-action');
    var isSectionWrapEditor = $('body').hasClass('mfn-template-section') || $('body').hasClass('mfn-template-wrap');

    if( $('.modal-display-conditions').length && !$('.modal-display-conditions').hasClass('show') && ( builder_type == 'popup' || builder_type == 'header' || builder_type == 'footer' || builder_type == 'blog' || builder_type == 'portfolio' || builder_type == 'shop-archive' || builder_type.includes('single-') || builder_type.includes('archive-') ) ) {
        // if template conditions
        $('.modal-display-conditions .btn-save-changes').attr('data-action', formaction);
        $('.modal-display-conditions').addClass('show');
        return;
    }else if( builder_type == 'cart' || builder_type == 'checkout' || builder_type == 'thanks' || builder_type == 'search' ){

        if(!$('.modal-cart-confirmation').hasClass('show')){
            $('.modal-cart-confirmation').addClass('show');

            $.ajax({
                url: mfnajaxurl,
                data: {
                    action: 'verifycartcheckout_tmpl',
                    'mfn-builder-nonce': wpnonce,
                    id: pageid,
                    type: builder_type
                },
                type: 'POST',
                success: function(response){
                    $('.modal-cart-confirmation-desc').html(response);
                }
            });

            return;
        }

    }

    $(this).addClass('loading disabled');

    prepareForm.save = true;
    var formData = prepareForm.get();
    let pf_obj = JSON.stringify(prepareForm.object);

    if( !mfn.current_user_roles.includes("administrator") ) {
        formData = formData.replaceAll('onclick', 'restricted');
        pf_obj = pf_obj.replaceAll('onclick', 'restricted');
    }

    var datas = {
        'mfn-builder-nonce': wpnonce,
        'action': 'updatevbview',
        'pageid': pageid,
        'savetype': formaction,
        'sections': formData,
        'obj': pf_obj,
    };

    if( prepareForm.template_confirm ) {
        datas['tmpl_confirmation'] = 1;
        prepareForm.template_confirm = false;
    }
    // attach template conditions
    if( $('.modal-display-conditions').length && $('.modal-display-conditions').hasClass('show') ){
        let conditions = $(document.forms['tmpl-conditions-form']).serializeArray();
        for (var i=0; i<conditions.length; i++)
            datas[ conditions[i].name ] = conditions[i].value;
    }

    $(document).trigger('be:update');

    $.ajax({
        url: mfnajaxurl,
        data: datas,
        type: 'POST',
        error: function (request, status, error) {
            console.error(request);
            $('.btn-save-changes').removeClass('loading disabled');
            $('#mfn-preview-wrapper').append('<div style="display: none;" class="mfn-snackbar mfn-snackbar-error"><span class="mfn-icon mfn-icon-information"></span><div class="snackbar-message">Error '+request.status+': Please check your code, server configuration or contact your hosting provider.</div></div>');
            $('.mfn-snackbar').fadeIn();
            closeSnackbar();
        },
        success: function(response){
            if(response){ displayRevisions(response, $list); }
            window.onbeforeunload = null;

            $('.btn-save-changes').removeClass('loading disabled');
            datas = {};

            if(formaction == 'publish'){
                //$('.btn-save-form-primary').attr('data-action', 'update');
                $('.btn-save-form-primary span').text($('.btn-save-form-primary span').attr('data-publishlabel'));

                savebutton = 'Update';
                formaction = 'update';

                $('.btn-save-form-secondary').attr('data-action', 'draft');
                $('.btn-save-form-secondary').text($('.btn-save-form-secondary').attr('data-publishlabel'));
            }else if(formaction == 'draft'){
                //$('.btn-save-form-primary').attr('data-action', 'update');
                $('.btn-save-form-primary span').text($('.btn-save-form-primary span').attr('data-draftlabel'));

                savebutton = 'Publish';
                formaction = 'publish';

                $('.btn-save-form-secondary').attr('data-action', 'publish');
                $('.btn-save-form-secondary').text($('.btn-save-form-secondary').attr('data-draftlabel'));
            }

            if( $('.modal-display-conditions').length ){
                $('.modal-display-conditions .btn-modal-save').removeClass('loading disabled');
                $('.modal-display-conditions').removeClass('show');
            }

            if( settings.forceReload ){
                settings.continue();
            }

            if( $('.modal-cart-confirmation.show').length ){
                $('.modal-cart-confirmation').removeClass('show');
            }
            
            $('#mfn-preview-wrapper').append('<div style="display: none;" class="mfn-snackbar"><span class="mfn-icon mfn-icon-information"></span><div class="snackbar-message">Page updated.</div><div class="snackbar-action"><a href="'+$('.menu-viewpage').attr('href')+'" target="_blank">View page</a></div></div>');
            $('.mfn-snackbar').fadeIn();
            closeSnackbar();
        }
    });
});


$(document).on('click', '.btn-modal-confirm-with-overwrite', function(e) {
    e.preventDefault();
    prepareForm.template_confirm = true;
    var button = $(this);
    if( button.hasClass('confirmed') ) {
        button.removeClass('confirmed');
        setTimeout(function() { button.find('.btn-wrapper').html(button.attr('data-set')); }, 500);
    }else{
        button.addClass('confirmed');
        setTimeout(function() { button.find('.btn-wrapper').html(button.attr('data-back')); }, 500);
    }
    setTimeout(function() { $('.modal-cart-confirmation-desc').html('&nbsp;'); }, 1000);
    $('.modal-cart-confirmation .btn-save-changes').trigger('click');
});




var prepareForm = {
    formData: [],
    si: 0, // section index
    wi: 0, // wrap index
    ii: 0, // item index
    nwi: 0, // nested item index
    object: [],
    is_global_wrap: false,
    save: false,
    template_confirm: false,

    post_id: samplecontentid || pageid,

    get: function(uid = false) {
        prepareForm.formData = [];
        prepareForm.object = [];
        //prepareForm.object.push( mfn.pagedata.filter( (item) => item.uid === 'pageoptions' )[0] ); // pageoptions is required
        var wrapper = $builder.find('.mcb-section.vb-item');

        if( uid ) wrapper = $builder.find('.vb-item[data-uid="'+uid+'"]');

        if( !wrapper.length || !mfn.pagedata.length ) return JSON.stringify(prepareForm.formData);

        wrapper.each(function(s) {
            prepareForm.si = s;
            var style_obj = {};
            var vb_uid = $(this).attr('data-uid');
            var this_vb = JSON.parse( JSON.stringify(mfn.pagedata.filter( (item) => item.uid === vb_uid )[0]) );

            if( prepareForm.is_global_wrap && _.has(this_vb, 'attr') ) {
                $.each(this_vb.attr, function(i, v) {
                    if( i.includes('style:') || i.includes('css_') ) delete(this_vb['attr'][i]);
                });
            }

            if( this_vb && typeof this_vb.uid !== 'undefined' ) {

                if( !prepareForm.save ) {
                    this_vb.attr['vb_postid'] = prepareForm.post_id;
                    this_vb.attr['vb'] = 1;
                    this_vb.attr['rwd'] = screen;
                }

                prepareForm.formData[prepareForm.si] = this_vb;

                style_obj['jsclass'] = this_vb.jsclass;
                style_obj['uid'] = this_vb.uid;

                if( _.has(this_vb, 'attr') ) {
                    style_obj['attr'] = this_vb.attr;
                    $.each(this_vb.attr, function(i, v) {
                        if( i.includes('style:') || i.includes('query_') || i.includes('css_') ) style_obj['attr'][i] = v;
                    });
                }

                if( !$(this).hasClass('mfn-global-section') && $(this).find('.wrap.vb-item').length ) {
                    this_vb.wraps = [];
                    prepareForm.wraps( this_vb.uid );
                }

                prepareForm.is_global_wrap = false;
                prepareForm.object.push(style_obj);

            }

        });

        prepareForm.save = false;

        // console.log(prepareForm.formData);

        return JSON.stringify(prepareForm.formData);
    },

    wraps: function( wrapper_uid, nested = false ) {

        var wraps = $builder.find( '.mcb-section-'+wrapper_uid+' .section_wrapper .wrap.vb-item:not(.mfn-nested-wrap)' );

        wraps.each(function(w) {
            prepareForm.wi = w;
            var style_obj = {};
            var wrap_uid = $(this).attr('data-uid');

            var this_wrap = mfn.pagedata.filter( (item) => item.uid === wrap_uid )[0];

            if( this_wrap ) {

                if( !GlobalWraps.selectedUid.length || (GlobalWraps.selectedUid.length && (GlobalWraps.selectedUid == this_wrap.uid || $builder.find('.vb-item[data-uid="'+this_wrap.uid+'"] .vb-item[data-uid="'+GlobalWraps.selectedUid+'"]').length)) ) { // convert to global - selects wrap to convert in section with multiple wraps

                    if( $builder.find('.vb-item[data-uid="'+this_wrap.uid+'"] .vb-item[data-uid="'+GlobalWraps.selectedUid+'"]').length ) {

                        this_wrap = mfn.pagedata.filter( (item) => item.uid === GlobalWraps.selectedUid )[0];
                        this_wrap.items = [];
                        prepareForm.formData[prepareForm.si]['wraps'][prepareForm.wi] = this_wrap;

                        style_obj['jsclass'] = this_wrap.jsclass;
                        style_obj['uid'] = this_wrap.uid;

                        if( _.has(this_wrap, 'attr') ) {
                            //style_obj['attr'] = {};
                            style_obj['attr'] = this_wrap.attr;
                            /*$.each(this_wrap.attr, function(i, v) {
                                if( i.includes('style:') || i.includes('query_') || i.includes('css_') ) style_obj['attr'][i] = v;
                            });*/
                        }

                        prepareForm.items( this_wrap.uid );

                        prepareForm.object.push(style_obj);

                    }else{

                        if( !prepareForm.is_global_wrap && _.has(this_wrap, 'item_is_wrap') ) delete(this_wrap['item_is_wrap']);

                        if( !_.has(this_wrap, 'jsclass') ) this_wrap['jsclass'] = 'wrap';

                        if( _.has(this_wrap, 'attr') ) {
                            if( prepareForm.save ) {
                                if( _.has(this_wrap.attr, 'vb_postid') ) delete this_wrap.attr['vb_postid'];
                                if( _.has(this_wrap.attr, 'rwd') ) delete this_wrap.attr['rwd'];
                                if( _.has(this_wrap.attr, 'vb') ) delete this_wrap.attr['vb'];
                            }else{
                                this_wrap.attr['vb_postid'] = prepareForm.post_id;
                                this_wrap.attr['vb'] = 1;
                                this_wrap.attr['rwd'] = screen;
                            }
                        }
                        
                        style_obj['jsclass'] = this_wrap.jsclass;
                        style_obj['uid'] = this_wrap.uid;

                        if( _.has(this_wrap, 'attr') ) {
                            style_obj['attr'] = this_wrap.attr;
                            /*$.each(this_wrap.attr, function(i, v) {
                                if( i.includes('style:') || i.includes('query_') || i.includes('css_') ) style_obj['attr'][i] = v;
                            });*/
                        }

                        if( !prepareForm.formData[prepareForm.si]['wraps'].filter( (item) => item.uid == wrap_uid ).length ) {
                            this_wrap.items = [];
                            prepareForm.formData[prepareForm.si]['wraps'][prepareForm.wi] = this_wrap;

                            if( !$(this).hasClass('mfn-global-wrap') ) prepareForm.items( this_wrap.uid );

                            prepareForm.object.push(style_obj);
                        }

                    }

                }

            }

        });

    },

    nested_items: function( wrapper_uid ) {

        $builder.find( '.mcb-wrap-'+wrapper_uid+' .vb-item' ).each(function(w) {

            prepareForm.nwi = w;
            var item_uid = $(this).attr('data-uid');
            var this_item = mfn.pagedata.filter( (item) => item.uid === item_uid )[0];

            if( this_item && !prepareForm.formData[prepareForm.si]['wraps'][prepareForm.wi]['items'][prepareForm.ii]['items'].filter( (item) => item.uid === item_uid ).length ) {
                //this_item.items = [];
                if( this_item.jsclass == 'wrap' ) this_item.item_is_wrap = 1;

                if( this_item && typeof this_item.attr !== 'undefined' ) {

                    if( prepareForm.save ){
                        if( _.has(this_item.attr, 'vb_postid') ) delete this_item.attr['vb_postid'];
                        if( _.has(this_item.attr, 'rwd') ) delete this_item.attr['rwd'];
                        if( _.has(this_item.attr, 'vb') ) delete this_item.attr['vb'];
                    }else{
                        this_item.attr['vb_postid'] = prepareForm.post_id;
                        this_item.attr['vb'] = 1;
                        this_item.attr['rwd'] = screen;
                    }

                }

                prepareForm.formData[prepareForm.si]['wraps'][prepareForm.wi]['items'][prepareForm.ii]['items'][prepareForm.nwi] = this_item;
                prepareForm.object.push(this_item);
            }

        });

    },

    items: function(wrapper_uid) {
        var used_fonts = [];

        let wraps = $builder.find('.mcb-wrap-'+wrapper_uid+' .mcb-wrap-inner-'+wrapper_uid+' > .vb-item');

        if( !wraps.length ) {
            wraps = $builder.find('.mcb-wrap-'+wrapper_uid+' .mcb-wrap-inner-'+wrapper_uid+ ' > div > .vb-item');
        }

        if( !wraps.length ) {
            wraps = $builder.find('.mcb-wrap-'+wrapper_uid+' .mcb-wrap-inner-'+wrapper_uid+ ' > div > div > .vb-item');
        }

        // console.log({ 'html': $builder.find('.mcb-wrap-'+wrapper_uid+' .mcb-wrap-inner-'+wrapper_uid).html(), 'vbitems': wraps });

        wraps.each(function(i) {

            //console.log({'items': $(this).attr('data-uid')});

            prepareForm.ii = i;
            var style_obj = {};
            var item_uid = $(this).attr('data-uid');
            var this_item = mfn.pagedata.filter( (item) => item.uid === item_uid )[0];

            if( !prepareForm.formData[prepareForm.si]['wraps'][prepareForm.wi]['items'].filter( (item) => item.uid === item_uid ).length ) {

                if( this_item ) {

                    if( typeof this_item.attr !== 'undefined' ) {

                        if( prepareForm.save ) {
                            if( _.has(this_item.attr, 'vb_postid') ) delete this_item.attr['vb_postid'];
                            if( _.has(this_item.attr, 'rwd') ) delete this_item.attr['rwd'];
                            if( _.has(this_item.attr, 'vb') ) delete this_item.attr['vb'];
                        }else{
                            this_item.attr['vb_postid'] = prepareForm.post_id;
                            this_item.attr['vb'] = 1;
                            this_item.attr['rwd'] = screen;
                        }

                    }


                    if( this_item.jsclass != 'wrap' ) {
                        // item
                        if( this_item && typeof this_item.attr !== 'undefined' && typeof this_item.attr.content !== 'undefined' ) this_item['used_fonts'] = prepareForm.fonts( this_item.attr.content );

                        if( this_item.jsclass == 'video' && _.has( this_item, 'attr' ) && ( _.has(this_item['attr'], 'css_video_width') || _.has(this_item['attr'], 'css_video_height') ) ){
                            if( _.has(this_item['attr'], 'css_video_width') && _.has(this_item['attr']['css_video_width'], 'val') ){
                                if( _.has(this_item['attr']['css_video_width']['val'], 'desktop') && !isNaN(this_item['attr']['css_video_width']['val']['desktop']) ) this_item['attr']['css_video_width']['val']['desktop'] += 'px';
                                if( _.has(this_item['attr']['css_video_width']['val'], 'laptop') && !isNaN(this_item['attr']['css_video_width']['val']['laptop']) ) this_item['attr']['css_video_width']['val']['laptop'] += 'px';
                                if( _.has(this_item['attr']['css_video_width']['val'], 'tablet') && !isNaN(this_item['attr']['css_video_width']['val']['tablet']) ) this_item['attr']['css_video_width']['val']['tablet'] += 'px';
                                if( _.has(this_item['attr']['css_video_width']['val'], 'mobile') && !isNaN(this_item['attr']['css_video_width']['val']['mobile']) ) this_item['attr']['css_video_width']['val']['mobile'] += 'px';
                            }

                            if( _.has(this_item['attr'], 'css_video_height') && _.has(this_item['attr']['css_video_height'], 'val') ){
                                if( _.has(this_item['attr']['css_video_height']['val'], 'desktop') && !isNaN(this_item['attr']['css_video_height']['val']['desktop']) ) this_item['attr']['css_video_height']['val']['desktop'] += 'px';
                                if( _.has(this_item['attr']['css_video_height']['val'], 'laptop') && !isNaN(this_item['attr']['css_video_height']['val']['laptop']) ) this_item['attr']['css_video_height']['val']['laptop'] += 'px';
                                if( _.has(this_item['attr']['css_video_height']['val'], 'tablet') && !isNaN(this_item['attr']['css_video_height']['val']['tablet']) ) this_item['attr']['css_video_height']['val']['tablet'] += 'px';
                                if( _.has(this_item['attr']['css_video_height']['val'], 'mobile') && !isNaN(this_item['attr']['css_video_height']['val']['mobile']) ) this_item['attr']['css_video_height']['val']['mobile'] += 'px';
                            }
                        }

                        prepareForm.formData[prepareForm.si]['wraps'][prepareForm.wi]['items'][prepareForm.ii] = this_item;

                    }else if( this_item.jsclass == 'wrap' ) {
                        // nested wrap
                        this_item['item_is_wrap'] = 1;
                        this_item['items'] = [];
                        prepareForm.formData[prepareForm.si]['wraps'][prepareForm.wi]['items'][prepareForm.ii] = this_item;
                        prepareForm.nested_items(this_item.uid);
                    }

                    style_obj['jsclass'] = this_item.jsclass;
                    style_obj['uid'] = this_item.uid;
                    if( _.has(this_item, 'attr') ) {
                        style_obj['attr'] = this_item.attr;
                    }

                    prepareForm.object.push(style_obj);

                }

            }

        });
    },

    fonts: function( content ) {
        var inline_editor = $.parseHTML( content );
        var used_fonts = [];

        $.each( inline_editor, function( i, el ) {
          if( $(el).find('span[data-font-family]').length ) {
            $(el).find('span[data-font-family]').each(function() {
                used_fonts.push( $(this).attr('data-font-family') );
            });
          }
        });

        return used_fonts.join(',');
    }

}

function closeSnackbar() {
    setTimeout(function() {
        $('.mfn-snackbar').fadeOut(function() {
            $('.mfn-snackbar').remove();
        });
    }, 5000);
}

function closeSaveOpt(e) {
    var container = $('.mfn-visualbuilder .sidebar-panel .sidebar-panel-footer .btn-save-action');

    if (!container.is(e.target) && container.has(e.target).length === 0) {
        container.removeClass('s-opt-show');
        $(document).unbind('click', closeSaveOpt);
        $content.unbind('click', closeSaveOpt);
    }

}

// update wraps count

function checkWrapsCount(uid = false) {

    if( builder_type != 'header' ) return;

    var $items = $content.find('.vb-item.mcb-section');
    if( uid ) $items = $content.find('.vb-item.mcb-section.mcb-section-'+uid);

    if( $items.length ){
        $items.each(function() {
            var wrapscount = $(this).find('.mcb-wrap').length;
            if( wrapscount >= 3 ){
                $(this).addClass('mfn-new-wraps-disabled');
            }else{
                $(this).removeClass('mfn-new-wraps-disabled');
            }
        });
    }
}

// check empty wraps

var be_layout = {
    init: function() {
        // be_layout.emptys.wraps();
        // be_layout.emptys.page();
        // be_layout.emptys.sections();

        // checkEmptyWraps();
        // checkEmptyPage();
        // checkEmptySections();
        be_layout.emptys.all();
        be_layout.tools.init();
    },
    tools: {
        init: function() {
            be_layout.tools.select_parent();
        },
        select_parent: function() {
            $content.on('click', '.mfn-select-parent', function(e) {
                e.preventDefault();

                if( $(this).closest('.vb-item.mcb-wrap').hasClass('mfn-nested-wrap') ) {
                    $(this).closest('.vb-item.mcb-wrap').closest('.mcb-wrap-inner').children('.mfn-header').find('.mfn-element-edit').trigger('click');
                }else{
                    $(this).closest('.vb-item.section').find('.mfn-header').first().find('.mfn-element-edit').trigger('click');
                }
                
            });
        }
    },
    new: {
        wrap: function(id, is_divider, size) {
            // be_layout.new.wrap()
            // addNewWrap()

            //console.log(id);

            if( is_divider ) size = 'divider';

            var new_element = elements.wrap(size);

            if( $builder.find('.mcb-section-'+id).length ) {

                if( !$builder.find('.mcb-section-'+id+' .section_wrapper').length ) $builder.find('.mcb-section-'+id).append('<div class="section_wrapper mcb-section-inner"></div>');

                if( $builder.find('.mcb-section-'+id+' .mfn-drag-helper.placeholder-section').length ) $builder.find('.mcb-section-'+id+' .mfn-drag-helper.placeholder-section').remove();

                if( $builder.find('.mcb-section-'+id+' .section_wrapper > .mfn-queryloop-item-wrapper').length ){
                    $builder.find('.mcb-section-'+id+' .section_wrapper > .mfn-queryloop-item-wrapper:first-child').append( new_element.html );
                    re_render(id);
                }else if( $builder.find('.mcb-section-'+id+' .section_wrapper .vb-item.mcb-wrap').length ){
                    $builder.find('.mcb-section-'+id+' .section_wrapper > .vb-item.mcb-wrap').last().after( new_element.html );
                }else{
                    $builder.find('.mcb-section-'+id+' .section_wrapper').html( new_element.html );
                }

            }else if( $builder.find('.mcb-wrap-'+id).length ) {

                if( $builder.find('.mcb-wrap-'+id+' .mcb-wrap-inner-'+id+' .mfn-queryloop-item-wrapper').length ) {
                    $builder.find('.mcb-wrap-'+id+' .mcb-wrap-inner-'+id+' .mfn-queryloop-item-wrapper').first().append( new_element.html );
                }else{
                    $builder.find('.mcb-wrap-'+id+' .mcb-wrap-inner-'+id).append(new_element.html);
                }

                mfn.pagedata.filter( (w) => w.uid == new_element.uid )[0]['item_is_wrap'] = 1;

            }

            checkWrapsCount(id);
            backToWidgets();
            be_layout.emptys.sections();
            be_layout.emptys.wraps();
            blink();

            if( $builder.find('.mcb-section-'+id).hasClass('mfn-section-tabber') ){
                sidebar_form.force_open = new_element.uid;
                re_render(id);
            }

            if($('body').hasClass('mfn-navigator-active')) be_navigator.show( $(new_element.html).attr('data-uid') );
            loopAllStyleFields(new_element.uid);
        },
        item: function() {
            // be_layout.new.item()
            // addNewWidget()
            var new_element = false;
            var new_script = false;

            if( $('body').hasClass('mfn-new-item-added') ) return;

            if( ($builder.find('.vb-item[data-uid="'+be_layout.drag_new.container+'"]').hasClass('mfn-looped-items') || $builder.find('.vb-item[data-uid="'+be_layout.drag_new.container+'"]').closest('.vb-item.mfn-looped-items').length ) && _.indexOf(disabled_items_in_ql, be_layout.drag_new.dropped_item) >= 0 ) {
                $('#mfn-preview-wrapper').append('<div style="display: none;" class="mfn-snackbar"><span class="mfn-icon mfn-icon-information"></span><div class="snackbar-message">You cannot add this item to query loop.</div></div>');
                $('.mfn-snackbar').fadeIn();
                closeSnackbar();
                resetIframeHeight();
                return;
            }

            $('body').addClass('mfn-new-item-added');

            var get_new_element = elements.item(be_layout.drag_new.dropped_item, be_layout.drag_new.dropped_item_alias);

            new_element = get_new_element;

            get_new_element = false;

            if( !new_element ) return;

            var new_uid = $(new_element).attr('data-uid');

            if( $builder.find('.mcb-item-'+be_layout.drag_new.container).length ) {

                if(be_layout.drag_new.pos == 'before'){
                    $builder.find('.vb-item.mcb-item-'+be_layout.drag_new.container).before(new_element);
                }else{
                    $builder.find('.vb-item.mcb-item-'+be_layout.drag_new.container).after(new_element);
                }
            
            }else if( $builder.find('.mcb-section-'+be_layout.drag_new.container).length ){

                be_layout.new.wrap(be_layout.drag_new.container, false, '1/1');
                $builder.find('.mcb-section-'+be_layout.drag_new.container+' .mcb-wrap-inner').append(new_element);

            }else{

                if(be_layout.drag_new.pos == 'before'){
                    $builder.find('.vb-item.mcb-wrap-'+be_layout.drag_new.container+' > .mcb-wrap-inner').prepend(new_element);
                }else{
                    $builder.find('.vb-item.mcb-wrap-'+be_layout.drag_new.container+' > .mcb-wrap-inner').append(new_element);
                }

            }

            if( be_layout.drag_new.dropped_item != 'placeholder' ) $builder.find('.vb-item[data-uid="'+new_uid+'"]').find('.mfn-header .mfn-element-edit').trigger('click');

            setTimeout(function() {

                if( $builder.find('.vb-item.mcb-wrap-'+be_layout.drag_new.container).closest('.mfn-looped-items').length ){
                    re_render( $builder.find('.vb-item.mcb-wrap-'+be_layout.drag_new.container).closest('.mcb-section').attr('data-uid') );
                }else if( $builder.find('.vb-item.mcb-wrap-'+be_layout.drag_new.container+'.mfn-looped-items').length ){
                    re_render( $builder.find('.vb-item.mcb-wrap-'+be_layout.drag_new.container+'.mfn-looped-items').closest('.mcb-section').attr('data-uid') );
                }else if( $builder.find('.vb-item.mcb-item-'+be_layout.drag_new.container).closest('.mfn-looped-items').length ){
                    re_render( $builder.find('.vb-item.mcb-item-'+be_layout.drag_new.container).closest('.mcb-section').attr('data-uid') );
                }else if( be_layout.drag_new.dropped_item !== be_layout.drag_new.dropped_item_alias ){
                    re_render(new_uid);
                    blink(true);
                }else if( be_layout.drag_new.force_rerender ) {
                    re_render(new_uid);
                    blink(true);
                }else if( isBlocks() ){
                    re_render(new_uid);
                    blink(true);
                }

                be_layout.drag_new.force_rerender = false;

                $('body').removeClass('mfn-new-item-added');

                resetIframeHeight();

                editContentButton(); // add button edit content to nested builder

            }, 10);

            if( be_layout.drag_new.dropped_item == be_layout.drag_new.dropped_item_alias ) {
                blink();
            }

            $('#mfn-widgets-list .panel-search .mfn-search').val('').trigger('change');

            inlineEditor();
            be_layout.emptys.wraps();

            runAjaxElements();

            loopAllStyleFields(new_uid);

            if($('body').hasClass('mfn-navigator-active')) be_navigator.show( new_uid );

        },
    },
    emptys: {
        all: function() {
            be_layout.emptys.page();
            be_layout.emptys.sections();
            be_layout.emptys.wraps();
        },
        page: function() {
            if( !$builder.find('.vb-item.mcb-section.mfn-'+elements_ver+'-section').not('.hide-'+screen).length ) {
                if(!$builder.find('.mfn-section-start').length) {
                    $content.find('body').addClass('mfn-ui-empty-page');
                    $builder.prepend('<div class="mfn-section-start"><a href="#" class="mfn-section-add"><svg class="welcome-pic" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.84 51.84"><defs><style>.cls-1{fill:none;stroke-width:1.5px;}.cls-1,.cls-3{stroke:#304050;stroke-miterlimit:10;}.cls-2,.cls-3{fill:#304050;}.cls-2{fill-rule:evenodd;}.cls-3{stroke-width:0.7px;}</style></defs><polyline class="cls-1" points="24.92 12.92 24.92 29.38 28.92 29.38"/><line class="cls-1" x1="24.92" y1="29.38" x2="24.92" y2="45.84"/><polyline class="cls-1" points="45.35 16.92 45.35 12.92 4.49 12.92 4.49 45.84 45.35 45.84 45.35 39.11"/><polyline class="cls-1" points="47.32 33.38 49.35 33.38 49.35 16.92 28.92 16.92 28.92 33.38 35.83 33.38"/><polyline class="cls-1" points="4.49 12.92 4.49 6 45.35 6 45.35 12.92"/><path class="cls-2" d="M39.41,9.41a1.24,1.24,0,1,0-1.24,1.22A1.23,1.23,0,0,0,39.41,9.41Z"/><path class="cls-2" d="M43,9.41a1.24,1.24,0,1,0-1.24,1.22A1.24,1.24,0,0,0,43,9.41Z"/><path class="cls-2" d="M35.83,9.41a1.24,1.24,0,1,0-1.24,1.22A1.24,1.24,0,0,0,35.83,9.41Z"/><path class="cls-2" d="M9.18,9.41a1.25,1.25,0,1,0-1.25,1.22A1.24,1.24,0,0,0,9.18,9.41Z"/><path class="cls-3" d="M46,29.7h0a1.3,1.3,0,0,0-.86.33,1.33,1.33,0,0,0-1.24-.91,1.32,1.32,0,0,0-.91.4,1.33,1.33,0,0,0-1.18-.75h0A1.16,1.16,0,0,0,41,29V25.83a1.33,1.33,0,1,0-2.65,0v6.32L38,31.72a1.77,1.77,0,0,0-2.6-.2l-.31.26a.27.27,0,0,0-.07.34l3,5.82a3.11,3.11,0,0,0,2.74,1.72h3.41a3.25,3.25,0,0,0,3.14-3.34V34.38c0-1.33,0-1.82,0-3.29A1.35,1.35,0,0,0,46,29.7Zm.77,4.68v1.94a2.71,2.71,0,0,1-2.59,2.79h-3.4a2.56,2.56,0,0,1-2.25-1.43l-2.93-5.62.15-.12h0a1.25,1.25,0,0,1,.92-.33,1.29,1.29,0,0,1,.89.47l.84,1a.29.29,0,0,0,.31.09.28.28,0,0,0,.18-.26v-7.1a.78.78,0,1,1,1.55,0V32A.28.28,0,1,0,41,32V30.12a.78.78,0,0,1,.76-.8h0a.81.81,0,0,1,.78.84v1.67a.28.28,0,1,0,.55,0V30.52a.76.76,0,1,1,1.52,0v1.23a.28.28,0,1,0,.56,0v-.67a.81.81,0,0,1,.78-.83h0a.81.81,0,0,1,.77.84Z"/></svg></a><h2>Welcome to BeBuilder</h2> <a class="mfn-btn mfn-btn-green btn-icon-left btn-large mfn-section-add" href="#"><span class="btn-wrapper"><span class="mfn-icon mfn-icon-add-light"></span>Start creating</span></a> <p><a class="view-tutorial" href="#">View tutorial</a></p></div>');
                    $content.find('.view-tutorial').on('click', function(e) {
                        e.preventDefault();
                        introduction.reopen();
                    });
                }
            }else{
                removeStartBuilding();
            }
        },
        sections: function() {
            $builder.find('.vb-item.mcb-section').each(function(i) {
                if(!$(this).find('.mcb-wrap').length) {
                    $(this).addClass('empty');

                    let global_sections_html = '<a class="mfn-btn add-global-sections-button mfn-btn-green btn-icon-left" href="#"><span class="btn-wrapper"><span class="mfn-icon mfn-icon-add-light"></span>Global sections</span></a>';

                    $(this).find('.section_wrapper').html('<div class="mfn-section-new"><h5>Select a wrap layout</h5> <div class="wrap-layouts"> <div class="wrap-layout wrap-11" data-type="wrap-11" data-tooltip="1/1"></div><div class="wrap-layout wrap-12" data-type="wrap-12" data-tooltip="1/2 | 1/2"><span></span></div><div class="wrap-layout wrap-13" data-type="wrap-13" data-tooltip="1/3 | 1/3 | 1/3"><span></span><span></span></div><div class="wrap-layout wrap-14" data-type="wrap-14" data-tooltip="1/4 | 1/4 | 1/4 | 1/4"><span></span><span></span><span></span></div><div class="wrap-layout wrap-13-23" data-type="wrap-1323" data-tooltip="1/3 | 2/3"><span></span></div><div class="wrap-layout wrap-23-13" data-type="wrap-2313" data-tooltip="2/3 | 1/3"><span></span></div><div class="wrap-layout wrap-14-12-14" data-type="wrap-141214" data-tooltip="1/4 | 1/2 | 1/4"><span></span><span></span></div></div><p>or choose from</p><a class="mfn-btn prebuilt-button mfn-btn-green btn-icon-left" href="#"><span class="btn-wrapper"><span class="mfn-icon mfn-icon-add-light"></span>Pre-built sections</span></a> '+ global_sections_html +' </div>');
                    $(this).append('<div class="mfn-drag-helper mfn-dh-after placeholder-section"></div>');
                }else if( $(this).find('.mfn-section-new').length || $(this).find('.mcb-wrap').length ) {
                    $(this).find('.mfn-section-new').remove();
                    $(this).removeClass('empty');
                    $(this).find('.mfn-drag-helper.placeholder-section').remove();
                }
            });
        },
        wraps: function() {

            $builder.find('.mfn-nested-wrap').removeClass('mfn-nested-wrap');

            $builder.find('.vb-item.mcb-wrap:not(.divider) > .mcb-wrap-inner').each(function(i) {

                if( !$(this).find('.mfn-module').length ){
                    if( !$(this).find('.mfn-wrap-new').length ){
                        $(this).append('<div class="mfn-wrap-new"><a href="#" class="mfn-item-add mfn-btn btn-icon-left btn-small mfn-btn-blank2"><span class="btn-wrapper"><span class="mfn-icon mfn-icon-add"></span>Add element</span></a> <a href="#" class="mfn-wrap-add mfn-btn btn-icon-left btn-small mfn-btn-blank2"><span class="btn-wrapper"><span class="mfn-icon mfn-icon-add"></span>Add wrap</span></a></div>');
                    }
                    if( !$(this).hasClass('empty') ) $(this).addClass('empty');
                    if( !$(this).siblings('.placeholder-wrap').length ) $(this).before('<div class="mfn-drag-helper mfn-dh-before placeholder-wrap"></div><div class="mfn-drag-helper mfn-dh-after placeholder-wrap"></div>')
                }else if( $(this).find('.mfn-module').length ){
                    if( $(this).children('.mcb-column').length && !$(this).children('.mcb-wrap').length ) $(this).siblings('.placeholder-wrap').remove();
                    $(this).removeClass('empty');
                    $(this).parent('.mcb-wrap').removeClass('mcb-wrap-new');
                    $(this).children('.mfn-wrap-new').remove();
                    if( $(this).find('.mcb-wrap:not(.mfn-nested-wrap)').length ) $(this).find('.mcb-wrap:not(.mfn-nested-wrap)').addClass('mfn-nested-wrap');
                }
            });
        },
    },

    drag_new: {

        dropped_item: false,
        dropped_item_alias: false,
        container: false,
        pos: 'after',
        force_rerender: false,

        init: function() {
            // be_layout.drag_new.init()
            if($content) {

                var iframe_offset = 0;

                if($('body').hasClass('mfn-preview-mode') && screen !== 'desktop'){
                    iframe_offset = $('#mfn-vb-ifr').offset().top;
                }else if($('body').hasClass('mfn-preview-mode')){
                    iframe_offset = 120;
                }

                if( ui_mode == 'dev' ) iframe_offset = 80;

                if( screen != 'desktop' ){
                    iframe_offset += $('iframe#mfn-vb-ifr').offset().top;
                }

                $.ui.ddmanager.frameOffsets={},$.ui.ddmanager.prepareOffsets=function(e,t){var o,n,f,i,a=$.ui.ddmanager.droppables[e.options.scope]||[],s=t?t.type:null,r=(e.currentItem||e.element).find(":data(ui-droppable)").addBack();e:for(o=0;o<a.length;o++)if(!(a[o].options.disabled||e&&!a[o].accept.call(a[o].element[0],e.currentItem||e.element))){for(n=0;n<r.length;n++)if(r[n]===a[o].element[0]){a[o].proportions().height=0;continue e}a[o].visible="none"!==a[o].element.css("display"),a[o].visible&&("mousedown"===s&&a[o]._activate.call(a[o],t),a[o].offset=a[o].element.offset(),proportions={width:a[o].element[0].offsetWidth,height:a[o].element[0].offsetHeight},"function"==typeof a[o].proportions?a[o].proportions(proportions):a[o].proportions=proportions,(f=iframe.window.document)!==document&&((i=$.ui.ddmanager.frameOffsets[f])||(i=$.ui.ddmanager.frameOffsets[f]=$((f.defaultView||f.parentWindow).frameElement).offset()),a[o].offset.left+=i.left,a[o].offset.top-=i.top-scroll_top-iframe_offset))}};


                be_layout.drag_new.draggable()
                be_layout.drag_new.droppable()
            }
        },

        draggable: function() {

            $('.mfn-visualbuilder .sidebar-panel-content ul.items-list li').draggable({
                helper: function(e) {
                    return $('<div>').attr('data-alias', $(e.target).closest('li').data('alias')).attr('data-type', $(e.target).closest('li').data('type')).addClass('mfn-vb-dragger mfn-vb-drag-item').text( $(e.target).closest('li').data('title') );
                },
                cursorAt: {
                    top: 20,
                    left: 20
                },
                iframeFix: true,
                connectWith: ".mcb-wrap-inner",
                refreshPositions: false,
                cursor: 'move',
                start: function(event, ui) {
                    be_layout.sortable.is_new = 1;
                    $builder.find('.vb-item').addClass('ui-droppable-active-show ui-droppable-new-item');

                    be_layout.drag_new.dropped_item = ui.helper.attr('data-type');
                    be_layout.drag_new.dropped_item_alias = ui.helper.attr('data-alias');

                },
                stop: function(event, elem) {

                    $builder.find('.mfn-current-dragover').removeClass('mfn-current-dragover');

                    if(be_layout.sortable.is_new == 1) {

                        if($content.find('.mfn-vb-drag-item').length){ $content.find('.mfn-vb-drag-item').remove(); }
                        $builder.find('.vb-item').removeClass('ui-droppable-active-show ui-droppable-new-item');

                        if($content.find('.mfn-vb-sort-placeholder-widget').length) { $content.find('.mfn-vb-sort-placeholder-widget').remove(); }
                        $content.find('body').removeClass('hover');

                        be_layout.new.item();

                    }

                    be_layout.sortable.is_new = 0;

                },
                drag: function(event, elem) {
                    if(be_layout.sortable.is_new == 1) {
                        elem.position.top -= $(window).scrollTop() - scroll_top;
                    }
                }
            });

        },

        droppable: function() {

            $builder.find('.mfn-drag-helper').droppable({
                greedy: true,
                iframeFix: true,
                tolerance: 'touch',
                accept: "*",
                drop: function(event, ui) {
                    if( be_layout.sortable.is_new ){

                        $content.find('.mfn-vb-dragover').removeClass('mfn-vb-dragover');
                        $content.find('.vb-item').removeClass('ui-droppable-active-show ui-droppable-new-item');

                        be_layout.new.item();

                        if($content.find('.mfn-vb-drag-item').length){ $content.find('.mfn-vb-drag-item').remove(); }
                        if($content.find('.mfn-vb-sort-placeholder-widget').length) { $content.find('.mfn-vb-sort-placeholder-widget').remove(); }

                        be_layout.sortable.is_new = 0;

                        $content.find('body').removeClass('hover');

                        // console.log('drop');

                    }

                    $builder.find('.mfn-current-dragover').removeClass('mfn-current-dragover');

                },

                over: function(event, ui) {
                    $builder.find('.mfn-current-dragover').removeClass('mfn-current-dragover');
                    if( be_layout.sortable.is_new ){

                        if( $(this).closest('.mfn-global-section').length || $(this).closest('.mfn-global-wrap').length ) return; // global parent

                        $content.find('.mfn-vb-dragover').removeClass('mfn-vb-dragover');
                        $content.find('.mfn-vb-sort-placeholder-widget').remove();

                        $(this).closest('.vb-item.mcb-wrap').addClass("mfn-vb-dragover");

                        be_layout.drag_new.container = $(this).closest('.vb-item').attr('data-uid');

                        $(this).closest('.vb-item.mcb-wrap').addClass('mfn-current-dragover');

                        // console.log('over / '+be_layout.drag_new.container);

                        if($(this).hasClass('mfn-dh-before')){
                            be_layout.drag_new.pos = 'before';
                            if( $(this).closest('.mfn-module').hasClass('mcb-wrap') ){
                                $(this).siblings('.mfn-module-wrapper').prepend('<div class="mfn-vb-sort-placeholder-widget one column "></div>');
                            }else{
                                $(this).closest('.mfn-module').before('<div class="mfn-vb-sort-placeholder-widget one column"></div>');
                            }
                        }else{
                            be_layout.drag_new.pos = 'after';
                            if( $(this).closest('.vb-item').hasClass('mcb-wrap') ){
                                $(this).siblings('.mfn-module-wrapper').append('<div class="mfn-vb-sort-placeholder-widget one column"></div>');
                            }else if( $(this).closest('.vb-item').hasClass('mcb-section') ){
                                $(this).siblings('.section_wrapper').append('<div class="mfn-vb-sort-placeholder-widget one column"></div>');
                            }else{
                                $(this).closest('.mfn-module').after('<div class="mfn-vb-sort-placeholder-widget one column"></div>');
                            }
                        }

                    }

                },
            });

        }

    },

    sortable: {

        is_new: 0,

        modules_wrapper: ".mfn-wrapper-for-wraps",
        modules_items: ".mfn-module",
        modules_placeholder: 'mfn-vb-sort-placeholder-wrap',
        current: 'section',
        min_height: 0,
        css_uid: '',

        init: function() {

            // be_layout.sortable.init();
            // runSorting();

            if($content){

                $content.on('mouseenter', '.mfn-element-drag', function() {

                    if( $(this).closest('.vb-item').hasClass('mcb-section') ){
                        be_layout.sortable.current = 'section';
                        be_layout.sortable.sections();
                    }else{

                        be_layout.sortable.min_height = $(this).closest('.vb-item').closest('.mfn-wrapper-for-wraps').outerHeight();
                        be_layout.sortable.css_uid = $(this).closest('.vb-item').closest('.mfn-wrapper-for-wraps').closest('.vb-item').attr('data-uid');

                        let size = $(this).closest('.vb-item').attr('data-desktop-size');
                        let sizeClass = sizes.filter(s => s.key === size)[0];
                        let p_width = typeof sizeClass !== 'undefined' ? sizeClass.desktop : 'one';

                        if( $(this).closest('.vb-item').hasClass('mcb-column') ) {
                            be_layout.sortable.modules_wrapper = '.vb-item.mcb-wrap > .mcb-wrap-inner';
                            be_layout.sortable.current = 'item';
                            be_layout.sortable.modules_items = '.mfn-module';
                            be_layout.sortable.modules_placeholder = 'mfn-vb-sort-placeholder-widget column '+p_width;
                        }else if( $(this).closest('.mcb-wrap.vb-item').find('.mcb-wrap').length || ($(this).closest('.vb-item').hasClass('mcb-wrap') && builder_type == 'header') ) {
                            be_layout.sortable.current = 'wrap';
                            be_layout.sortable.modules_wrapper = '.mfn-builder-active .section_wrapper';
                            be_layout.sortable.modules_items = '.mfn-module.mcb-wrap:not(.mfn-nested-wrap)';
                            be_layout.sortable.modules_placeholder = 'mfn-vb-sort-placeholder-wrap column '+p_width;
                        }else if( $(this).closest('.vb-item').hasClass('mcb-wrap') && !$(this).closest('.vb-item.mcb-wrap').find('.mcb-wrap').length ) {
                            be_layout.sortable.current = 'wrap';
                            $builder.find('.mcb-wrap').each(function() { $(this).addClass('mfn-droppable-helper'); });
                            $builder.find('.mcb-column').each(function() { if( !$(this).closest('.mfn-nested-wrap').length ) $(this).addClass('mfn-droppable-helper'); });
                            be_layout.sortable.modules_wrapper = '.mfn-builder-active .section_wrapper, .vb-item.mcb-wrap:not(.mfn-nested-wrap) > .mcb-wrap-inner';
                            be_layout.sortable.modules_items = '.mfn-droppable-helper';
                            be_layout.sortable.modules_placeholder = 'mfn-vb-sort-placeholder-wrap column '+p_width;
                        }

                        setTimeout(function() { be_layout.sortable.modules(); }, 1);

                    }

                }).on('mouseout', '.mfn-element-drag', function() {
                    if( $builder.find('.mfn-droppable-helper').length ) $builder.find('.mfn-droppable-helper').removeClass('mfn-droppable-helper');
                });

            }
        },

        sections: function() {
            $builder.sortable({
                connectWith: ".mfn-builder-content",
                placeholder: 'mfn-vb-sort-placeholder-section',
                handle: ".mfn-section-drag",
                forcePlaceholderSize: true,
                iframeFix: true,
                iframeScroll: true,
                scrollSensitivity: 30,
                scroll: true,
                items: '.mcb-section.vb-item',
                containment: "parent",
                appendTo: $content.find('body'),
                helper: function(e, ui) {
                    return $('<div>').addClass('mfn-vb-dragger mfn-vb-drag-section').text( 'Section sort' );
                },
                cursorAt: {
                    top: 20,
                    left: 20
                },
                update: function(e, ui) {

                    if( $('body').hasClass('mfn-navigator-active') ){
                        if( $('.mfn-navigator li a.active-element').length ){
                            be_navigator.show($('.mfn-navigator li a.active-element').attr('data-uid'));
                        }else{
                            be_navigator.show(ui.item.attr('data-uid'));
                        }
                    }

                    setTimeout(function() {
                        historyStorage.add();
                    },10);

                },
                start: function(event, elem) {
                    scroll_top = $content.find("html, body").scrollTop();
                    $content.find('.mcb-section').addClass('ui-droppable-active-show')
                },
                stop: function(event, elem) {
                    $content.find('.mcb-section').removeClass('ui-droppable-active-show')
                }
            });

        },


        modules: function() {
            $builder.find('.mfn-wrapper-for-wraps').sortable({
                connectWith: be_layout.sortable.modules_wrapper,
                placeholder: be_layout.sortable.modules_placeholder,
                handle: ".mfn-header .mfn-element-drag",
                forcePlaceholderSize: false,
                scroll: true,
                iframeFix: true,
                iframeScroll: true,
                items: be_layout.sortable.modules_items,
                appendTo: $content.find('body'),
                helper: function(e, ui) {
                    var text = 'Item sort';
                    var classes = ' mfn-vb-drag-item';

                    if( ui.hasClass('mcb-wrap') ){
                        text = 'Wrap sort';
                        classes = ' mfn-vb-drag-wrap';
                    }

                    return $('<div>').addClass('mfn-vb-dragger '+classes).text( text );
                },
                cursorAt: {
                    top: 20,
                    left: 20
                },
                update: function(e, ui) {

                    if( ui.sender ) return;

                    if( $content.find('.mfn-force-rerender').length ) {
                        setTimeout(function() {
                            re_render( $content.find('.mfn-force-rerender').attr('data-uid') );
                        }, 300);
                    }

                    $builder.find('.mfn-make-offsets-for-wraps').removeClass('mfn-make-offsets-for-wraps');

                    if( $builder.find('.mfn-droppable-helper').length ) $builder.find('.mfn-droppable-helper').removeClass('mfn-droppable-helper');

                    if($content.find('style.mfn-tmp-sortable-css').length) $content.find('style.mfn-tmp-sortable-css').remove();

                    $builder.find('.mfn-current-dragover').removeClass('mfn-current-dragover');

                    be_layout.emptys.wraps();
                    be_layout.emptys.sections();

                    // be_layout.drag_new.init();

                    $edited_div = ui.item;

                    if( ( ui.item.hasClass('mfn-nested-wrap') || (edited_item && edited_item.uid == ui.item.attr('data-uid')) ) && ui.item.hasClass('mcb-wrap') ) {
                        setTimeout(function() {
                            ui.item.find('.mfn-header').first().find('.mfn-element-edit').trigger('click');

                            setTimeout(function() {
                                if(ui.item.hasClass('mfn-nested-wrap')){
                                    // reset sticky & loop
                                    $('.mfn-form .mfn-form-row.wrap.sticky ul li:first-child a').trigger('click');
                                    $('.mfn-form .mfn-form-row.mfn-loop-switcher.wrap.type ul li:first-child a').trigger('click');
                                }
                            }, 20);

                        }, 20);
                    }

                    setTimeout(function() {

                        if( ui.item.closest('.mfn-looped-items').length || ui.item.find('.mfn-looped-items').length ) {
                            re_render( ui.item.closest('.mcb-section.vb-item').attr('data-uid') );
                        }else{
                            historyStorage.add();
                        }

                        if( ui.item.closest('.vb-item.mfn-section-tabber').length ) {
                            re_render( ui.item.closest('.vb-item.mfn-section-tabber').attr('data-uid') );
                        }

                    }, 50);

                    if( $('body').hasClass('mfn-navigator-active') ) {
                        setTimeout(function() {
                            if( $('.mfn-navigator li a.active-element').length ){
                                be_navigator.show($('.mfn-navigator li a.active-element').attr('data-uid'));
                            }else{
                                be_navigator.show(ui.item.attr('data-uid'));
                            }
                        }, 300);
                    }

                },
                over: function(e, ui) {

                    $builder.find('.mfn-current-dragover').removeClass('mfn-current-dragover');
                    if( be_layout.sortable.current == 'wrap' && !ui.placeholder.closest('.vb-item.mcb-section').hasClass('mfn-make-offsets-for-wraps') ) ui.placeholder.closest('.vb-item.mcb-section').addClass('mfn-make-offsets-for-wraps');
                    ui.placeholder.closest('.vb-item.mcb-wrap').addClass('mfn-current-dragover');

                },
                out: function(e, ui) {
                    $builder.find('.mfn-make-offsets-for-wraps').removeClass('mfn-make-offsets-for-wraps');
                    $builder.find('.mfn-current-dragover').removeClass('mfn-current-dragover');
                },
                start: function(event, elem) {
                    $content.find('.mfn-module').addClass('ui-droppable-active-show')
                    $content.find('body').append(`<style class="mfn-tmp-sortable-css">.vb-item[data-uid="${be_layout.sortable.css_uid}"] > .mfn-wrapper-for-wraps{min-height: ${be_layout.sortable.min_height}px}</style>`);

                    if( $(elem.item).closest('.mfn-looped-items').length ) $(elem.item).closest('.mcb-section.vb-item').addClass('mfn-force-rerender');

                },

                stop: function(event, elem) {
                    $builder.find('.mfn-make-offsets-for-wraps').removeClass('mfn-make-offsets-for-wraps');

                    $builder.find('.mfn-current-dragover').removeClass('mfn-current-dragover');
                    $content.find('.mfn-module').removeClass('ui-droppable-active-show')
                    if( $builder.find('.mfn-droppable-helper').length ) $builder.find('.mfn-droppable-helper').removeClass('mfn-droppable-helper');
                    if($content.find('style.mfn-tmp-sortable-css').length) $content.find('style.mfn-tmp-sortable-css').remove();
                }
            });



        },

    }
}



let bebuilder_data_updater = {
  button: false,
  wrapper: false,
  init: function() {
    $(document).on('click', '.mfn-be-css-db-update-action-button', function(e) {
      e.preventDefault();
      bebuilder_data_updater.button = $(this);
      if( bebuilder_data_updater.button.hasClass('loading') ) return;

      if( bebuilder_data_updater.button.closest('.mfn-bebuilder-iframe-error').length ){
        bebuilder_data_updater.wrapper = bebuilder_data_updater.button.closest('.mfn-bebuilder-iframe-error');
        bebuilder_data_updater.wrapper.html('The database update has started. Please wait...');
      }

      bebuilder_data_updater.process();

    });
  },

  process: function() {

    $.ajax({
      url: ajaxurl,
      data: {
        'action': 'mfn_new_css_rewrite',
        'mfn-builder-nonce': wpnonce,
      },
      // dataType: 'JSON',
      type: 'POST',
      statusCode: {
        524: function() {
          console.log('A timeout occurred. Trying again.');
          bebuilder_data_updater.process();
        },
        500: function() {
          console.log('Resuming');
          bebuilder_data_updater.process();
        },
        502: function() {
          console.log('Resuming');
          bebuilder_data_updater.process();
        },
        503: function() {
          console.log('Resuming');
          bebuilder_data_updater.process();
        }
      }
    }).done(function(response) {

      if( bebuilder_data_updater.wrapper ){
        bebuilder_data_updater.wrapper.html('BeBuilder: Database updated successfully! Reloading...');
        setTimeout( window.location.reload(), 2000);
      }

    });

  },
}


bebuilder_data_updater.init();




























var mfn_multifield_field = {

    id: false,

    init: function() {

        $(document).on('click', '.multifield_add_new', function(e) {
            e.preventDefault();
            mfn_multifield_field.id = $(this).closest('.mfn-form-row').attr('data-id');
            mfn_multifield_field.add(e);
        });

        $(document).on('click', '.mfn-multifield-point .mfn-tab-toggle', function(e) {
            e.preventDefault();
            var hash = $(this).closest('.mfn-multifield-point').attr('id');
            if( $(this).closest('.mfn-multifield-point').hasClass('open') ){
                $(this).closest('.mfn-multifield-point').removeClass('open');
                if( $content.find('.hotspot-point-'+hash+' .hotspot-content').length ) $content.find('.hotspot-point-'+hash).removeClass('is-active-force');
                if( $('style.mfn-fields-switcher-multifields-'+hash).length ) $('style.mfn-fields-switcher-multifields-'+hash).remove();
            }else{
                $(this).closest('.mfn-multifield-point').addClass('open');
                if( $content.find('.hotspot-point-'+hash+' .hotspot-content').length ) $content.find('.hotspot-point-'+hash).addClass('is-active-force');
                $('body').append('<style class="mfn-builder-fields-css mfn-fields-switcher mfn-fields-switcher-multifields mfn-fields-switcher-multifields-'+hash+'">.mfn-multifield-form-'+hash+' .mfn-multifield-form-wrapper-'+hash+'{ display: block; } .mfn-multifield-form-'+hash+' .mfn-multifield-point-tab-header .mfn-tab-toggle{ transform: rotate(180deg); }</style>');
            }
            
        });

        $(document).on('click', '.mfn-multifield-point .mfn-tab-delete', function(e) {
            e.preventDefault();
            mfn_multifield_field.id = $(this).closest('.mfn-form-row').attr('data-id');
            var hash = $(this).closest('.mfn-multifield-point').attr('id');
            mfn_multifield_field.delete(hash);
            $(this).closest('.mfn-multifield-point').remove();
        });

        if( iframe && _.has(iframe.window, 'jQuery') ) {
            iframe.window.jQuery('body').on('click', '.mfn-image-hotspot .hotspot-point', function(e) {
                e.preventDefault();
                var id = $(this).attr('data-id')
                if( $('.mfn-form-row.hotspots .mfn-multifield-point').hasClass('open') ) {
                    $('.mfn-form-row.hotspots .mfn-multifield-point.open').each(function() {
                        $(this).find('.mfn-tab-toggle').trigger('click');
                    });
                }
                $('#'+id+'.mfn-multifield-point .mfn-tab-toggle').trigger('click');
            });
        }

        $(document).on('mouseenter', '.filters_fields .mfn-multifield-point', function(e) {
            mfn_multifield_field.id = $(this).closest('.mfn-form-row').attr('data-id');
            mfn_multifield_field.sortable();
        });

    },

    refresh: function(id, field) {
        // mfn_multifield_field.refresh
        // refreshHotspot

        if( !field.val().length ) {
            sidebar_form.render()
            re_render($content.find( '.mcb-item-'+edited_item.uid ).closest('.mcb-section').attr('data-uid'));
        }else{

            if( field.closest('.mfn-placeholder-inherited-rwd').length ) field.closest('.mfn-placeholder-inherited-rwd').removeClass('mfn-placeholder-inherited-rwd');
            if( field.closest('.mfn-placeholder-inherited-std').length ) field.closest('.mfn-placeholder-inherited-std').removeClass('mfn-placeholder-inherited-std');
            if( field.closest('.mfn-placeholder-inherited-class').length ) field.closest('.mfn-placeholder-inherited-class').removeClass('mfn-placeholder-inherited-class');

        }

        var point_hash = field.closest('.mfn-multifield-point').attr('id');
        var obj_key = field.attr('data-pointobj');
        if( screen != 'desktop' ) {
            obj_key += '_'+screen;
        }
        var point = iframe.window['mfn_hotspot_'+id]['p_c'].filter((point) => point.id == 'hs_point_'+point_hash)[0];
        var val = field.val().length ? field.val().replace('%', '').replace('px', '') : '';

        iframe.window['mfn_hotspot_'+id]['p_c'].filter((point) => point.id == 'hs_point_'+point_hash)[0][obj_key] = parseFloat(val);
        iframe.window['mfn_hotspot_'+id].init();

    },

    add: function(e) {

        let i = $('.mfn-multifield-point').length;
        let hash = getUid();

        if( $('.mfn-multifield-point.open').length ) $('.mfn-multifield-point.open').removeClass('open');
        
        if( $(e.target).closest('.mfn-form-row').hasClass('hotspot') ) {
            $('.hotspot_add_new').before(mfn_field_hotspot_render({hash: hash}, i));   
        }else{
            $('.multifield_add_new').before(mfn_field_filters_render({hash: hash}, i));   
        }
        
        $('#'+hash+'.mfn-multifield-point .mfn-tab-toggle').trigger('click');

        if( typeof edited_item['attr'] === 'undefined' ) edited_item['attr'] = {};
        if( typeof edited_item['attr'][mfn_multifield_field.id] === 'undefined' ) edited_item['attr'][mfn_multifield_field.id] = [];

        var fields = {hash: hash};

        edited_item['attr'][mfn_multifield_field.id].push(fields);

        mfn_multifield_field.render();
        
        setTimeout(function() {
            mfnoptsinputs.start();
            if( $('.mfn-form .mfn-element-fields-wrapper .mfn-form-row .sliderbar:not(.mfn-initialized)').length ) {
                $('.mfn-form .mfn-element-fields-wrapper .mfn-form-row .sliderbar:not(.mfn-initialized)').each(function() {
                    sliderInput.init($(this));
                });
            }
        }, 1);

    },

    render: function() {
        if( $builder.find('.mfn-current-editing').closest('.mfn-looped-items').length ) {
            re_render( $builder.find('.mfn-current-editing').closest('.mcb-section').attr('data-uid') );
        }else{
            re_render(edited_item['uid']);
        }
    },

    delete: function(hash) {

        if( edited_item['attr'][mfn_multifield_field.id].filter( item => item.hash == hash).length ) {
            edited_item['attr'][mfn_multifield_field.id] = edited_item['attr'][mfn_multifield_field.id].filter( item => item.hash != hash);
        }

        mfn_multifield_field.render();

    },

    sortable: function() {
        $('.filters_fields .mfn_input_wrapper').sortable({
            axis: 'y',
            cursor: 'ns-resize',
            handle: '.mfn-sort-handle',
            opacity: 0.9,
            update: function(e, ui) {

                let updated_order = [];

                $('.filters_fields .mfn_input_wrapper .mfn-multifield-point').each(function(i, el) {
                    let id = $(el).attr('id');
                    updated_order.push(edited_item['attr'][mfn_multifield_field.id].filter( (f) => f.hash == id )[0]);
                    //$(el).find('h6').text('Filter '+(i+1));
                });

                if( updated_order.length == edited_item['attr'][mfn_multifield_field.id].length ) {
                    edited_item['attr'][mfn_multifield_field.id] = updated_order;

                    re_render();
                }else{
                    console.log('Something went wrong.');
                }

            }
        });
    }

}











var mfn_autocomplete = {
    singular: true,
    input: false,
    data: false,
    to_add: false,
    activeIndex: -1,
    init: function() {

        $(document).on('focus paste keyup', '.mfn-autocomplete .mfn-autocomplete-input', function(e) {
            mfn_autocomplete.input = $(this);
            if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Enter") {
                mfn_autocomplete.show_list();
            }
        });

        document.addEventListener("keydown", (e) => {
            if( !mfn_autocomplete.input || !$('.mfn-autocomplete-ul li').length ) return
            if (e.key === "ArrowDown") {
                e.preventDefault();
                if( $('.mfn-autocomplete-ul li.active').length ) {
                    let next = $('.mfn-autocomplete-ul li.active').next('li:not(.disabled)').length ? $('.mfn-autocomplete-ul li.active').next('li:not(.disabled)') : $('.mfn-autocomplete-ul li').first();
                    $('.mfn-autocomplete-ul li.active').removeClass('active');
                    next.addClass('active');
                }else{
                    $('.mfn-autocomplete-ul li').first().addClass('active')
                }
            } else if (e.key === "ArrowUp") {
                e.preventDefault();
                if( $('.mfn-autocomplete-ul li.active').length ) {
                    let next = $('.mfn-autocomplete-ul li.active').prev('li:not(.disabled)').length ? $('.mfn-autocomplete-ul li.active').prev('li:not(.disabled)') : $('.mfn-autocomplete-ul li').last();
                    $('.mfn-autocomplete-ul li.active').removeClass('active');
                    next.addClass('active');
                }else{
                    $('.mfn-autocomplete-ul li').last().addClass('active')
                }
            } else if (e.key === "Enter") {
                if( $('.mfn-autocomplete-ul li.active').length ) $('.mfn-autocomplete-ul li.active').trigger('click');
            }
        });

        $(document).on('click', '.mfn-autocomplete .mfn-sidebar-classes-show-list', function(e) {
            e.preventDefault();
            mfn_autocomplete.input = $(this).closest('.mfn-autocomplete').find('input.mfn-autocomplete-input');
            mfn_autocomplete.show_list();
        });

        $(document).on('click', '.mfn-autocomplete .mfn-autocomplete-ul li:not(.disabled)', function() {
            $(this).addClass('disabled');
            mfn_autocomplete.to_add = $(this);
            mfn_autocomplete.add();
        });

    },
    add: function() {
        mfn_autocomplete.input.before(`<span data-name="${mfn_autocomplete.to_add.attr('data-id')}" class="sidebar-panel-class mfn-autocomplete-item">${mfn_autocomplete.to_add.text()}<span class="sidebar-panel-class-edit mfn-autocomplete-item-edit">&#9998;</span> <span class="sidebar-panel-class-delete mfn-autocomplete-item-delete">&#10005;</span></span>`);
        
        if( !_.has(edited_item, 'be_classes') ) edited_item['be_classes'] = [];
        if( _.indexOf(edited_item.be_classes, mfn_autocomplete.to_add.attr('data-id')) >= 0 ) return;

        let force_render = false;
        let force_refresh_local_styles = false;

        let added_obj = mfn.classes.filter( cl => cl.uid == mfn_autocomplete.to_add.attr('data-id') )[0];

        let original = edited_item.jsclass == 'section' || edited_item.jsclass == 'wrap' ? JSON.parse( JSON.stringify(mfn.elements[edited_item.jsclass]) ) : JSON.parse( JSON.stringify(renderMfnFields.items[edited_item.jsclass]) );

        if( added_obj ) {
            _.map( added_obj.attr, function(opt, o) {

                if( /*o.includes('css_') && */_.has(original, 'attr') && _.has(edited_item, 'attr') && _.has(original['attr'], o) && _.has(edited_item['attr'], o) && ( edited_item['attr'][o]['val'] == original['attr'][o]['val'] || ( _.has(original['attr'][o]['val'], 'desktop') && original['attr'][o]['val']['desktop'] == edited_item['attr'][o]['val']['desktop'] ) ) ) {
                    // removes stds from edited_item on class add
                    force_refresh_local_styles = true;
                    delete(edited_item['attr'][o]); 
                }
                
                if( !force_render && edited_item.jsclass != 'wrap' && !o.includes('css_') && (_.indexOf(mfn_classes.exceptions, o) >= 0 || _.indexOf(mfn_classes.exceptions, added_obj.jsclass+'_'+o) >= 0 ) && opt != 'default' ) {
                    force_render = true;
                }
            });
        }

        edited_item.be_classes.push( mfn_autocomplete.to_add.attr('data-id') );
        //$builder.find(`.mcb-${edited_item.jsclass}-${edited_item.uid}`).addClass( mfn_autocomplete.to_add.attr('data-id') );
        $builder.find('.'+$('.mfn-element-fields-wrapper').attr('data-element')).addClass( mfn_autocomplete.to_add.attr('data-id') );

        $('.mfn-ui').addClass('mfn-class-editor-full');

        setTimeout(function() {
            sidebar_form.render();
            mfn_autocomplete.exit();
            loopAllStyleFields(edited_item.uid);
            if( force_render ) re_render();

        }, 10);

    },
    show_list: function() {
        
        if( mfn_autocomplete.singular && _.has(edited_item, 'be_classes') && edited_item.be_classes.length && mfn.classes.filter( (cl) => cl.uid == edited_item.be_classes[0]).length ) return;

        mfn_autocomplete.exit();
        let list = mfn_autocomplete.input.attr('data-list');
        mfn_autocomplete.data = JSON.parse( JSON.stringify( mfn.classes.filter( (n) => n.uid.includes(edited_item.jsclass) ) ) );
        if( mfn_autocomplete.input.val().length ){
            mfn_autocomplete.data = mfn_autocomplete.data.filter( (n) => n.title.toLowerCase().includes(mfn_autocomplete.input.val().toLowerCase()) );
        }
        if( mfn_autocomplete.data.length ){
            mfn_autocomplete.input.closest('.mfn-autocomplete')
                .append(`<ul class="mfn-autocomplete-ul">
                    ${ _.map(mfn_autocomplete.data, function(l) {
                        return `<li ${ _.has(edited_item, 'be_classes') && edited_item.be_classes.length > 0 && _.indexOf(edited_item.be_classes, l.uid) >= 0 ? 'class="disabled"' : '' } data-id="${ l.uid }">${ l.title }</li>`;
                    }).join('') } </ul>`);
        }else{
            mfn_autocomplete.input.closest('.mfn-autocomplete')
                .append(`<ul class="mfn-autocomplete-ul"><li class="disabled mfn-autocomplete-empty">Empty list</li></ul>`);
        }

        $(document).bind('click', mfn_autocomplete.blur);
    },
    blur: function(e) {
        var div = $('.mfn-autocomplete-list');
        if( !div.is(e.target) && div.has(e.target).length === 0 ) mfn_autocomplete.exit();
    },
    exit: function() {
        $('.mfn-autocomplete .mfn-autocomplete-ul').remove();
        $(document).unbind('click', mfn_autocomplete.blur);
    }
}

mfn_autocomplete.init();


var mfn_classes = {
    uid: false,
    popup_title: "Save styles of a given element as a global style",
    styles: '',
    // has_changed: false,
    original: [],
    edited_item_uid: false,
    confirmed: [],
    refresh: false,
    refresh_all_items_with_class: false,
    backup: false,
    has_classes: false,
    exceptions: ['width_switcher', 'height_switcher', 'visibility', 'banner_box_css_desc_justify', 'banner_box_css_desc_align', 'banner_box_style', 'banner_box_overlay', 'banner_box_hover_effect', 'banner_box_image_height', 'banner_box_hidden_elements_mobile', 'button_icon', 'button_icon_position', 'button_size', 'button_full_width', 'button_style', 'divider_2_type', 'divider_2_align', 'divider_2_addon', 'divider_2_label', 'divider_2_image', 'divider_2_icon', 'icon_2_hover', 'icon_box_2_icon_position', 'icon_box_2_icon_align', 'icon_box_2_hover', 'image_mask_shape_type', 'image_mask_shape_size', 'image_mask_shape_position', 'image_image_height', 'image_image_height_style', 'image_greyscale', 'image_gallery_style', 'image_gallery_layout', 'image_gallery_columns', 'image_gallery_greyscale', 'image_gallery_image_height', 'list_2_type', 'list_2_starting', 'list_2_align', 'list_2_valign', 'list_2_divider', 'list_2_icon', 'list_2_image', 'list_2_background_switcher', 'toggle_type', 'toggle_starting', 'toggle_divider', 'toggle_open_first', 'toggle_open_all', 'toggle_open_more', 'toggle_icon', 'toggle_active_icon', 'toggle_icon_animation'],
    init: function() {

        $(document).on('click', '.mfn-modal .btn-save-new-class', function(e) {
            e.preventDefault();
            if( $(this).hasClass('loading') ) return;

            $(this).addClass('loading disabled');
            mfn_classes.create();
        });

        $(document).on('click', '.sidebar-panel-classes-list  .sidebar-panel-class-delete', function(e) {
            let classname = $(this).closest('.sidebar-panel-class').attr('data-name');
            mfn_classes.remove(classname);
        });

        $(document).on('click', '.sidebar-panel-classes-list  .sidebar-panel-class-edit', function(e) {
            let classname = $(this).closest('.sidebar-panel-class').attr('data-name');
            mfn_classes.edited_item_uid = edited_item.uid;
            mfn_classes.edit(classname);
        });

        $(document).on('click', '.mfn-class-editor-update', function(e) {
            e.preventDefault();
            if( $(this).hasClass('loading') ) return;

            $(this).addClass('loading');

            mfn_classes.refresh_all_items_with_class = true;

            mfn_classes.ajax( edited_item );

            if( $builder.find('.vb-item[data-uid="'+mfn_classes.edited_item_uid+'"]').length ) {
                loopAllStyleFields(edited_item.uid);
                let to_click = $builder.find('.vb-item[data-uid="'+mfn_classes.edited_item_uid+'"]').find('.mfn-header').first().find('.mfn-element-edit');
                $builder.find('.mfn-current-editing').removeClass('mfn-current-editing');
                to_click.trigger('click');
            }else{
                backToWidgets();
            }

            mfn_classes.edited_item_uid = false;
        });

        $(document).on('click', '.panel-export-import-classes .mfn-export-classes-button', function(e) {
            e.preventDefault();
            let button = $(this);
            $('#export-classes-data-textarea').select();
            document.execCommand("copy");
            button.find('span').text('Exported').addClass('mfn-icon-check-blue');
            setTimeout(function() { button.find('span').html('Export'); }, 5000);
        });

        $(document).on('click', '.panel-export-import-classes .mfn-import-classes-button', function(e) {
            e.preventDefault();
            let button = $(this);

            if($('#import-classes-data-textarea').hasClass('error')) $('#import-classes-data-textarea').removeClass('error');

            if( !$('#import-classes-data-textarea').val().length ) {
                $('#import-classes-data-textarea').addClass('error');
                return;
            }

            mfn_classes.import.data = JSON.parse($('#import-classes-data-textarea').val());
            mfn_classes.import.init();
        });

        $(document).on('keyup', '.modal-classes-listing .mfn-search', function() {
            let val = $(this).val().toLowerCase();
        
            if( !val.length ) {
                $('.mfn-global-styles-listing li').removeAttr('style');
                return;
            }
            $('.mfn-global-styles-listing li').hide();
            $('.mfn-global-styles-listing li[data-name*="'+val+'"]').show();
            if( $('.mfn-global-styles-listing li li[data-name*="'+val+'"]').parent('ul').parent('li').length ) $('.mfn-global-styles-listing li[data-name*="'+val+'"]').parent('ul').parent('li').show();
            if( $('.mfn-global-styles-listing li[data-name*="'+val+'"]').find('li').length ) $('.mfn-global-styles-listing li[data-name*="'+val+'"]').find('li').show();

        });

        $(document).on('click', '.mfn-class-styles-list li', function(e) {
            e.preventDefault();
            let id = $(this).find('.mfn-class-styles-check').attr('data-id');
            if( $(this).hasClass('active') ){
                $(this).removeClass('active');
                let index = _.indexOf(mfn_classes.confirmed, id);
                if( index >= 0 ) mfn_classes.confirmed.splice(index, 1);
            }else{
                $(this).addClass('active');
                mfn_classes.confirmed.push(id);
            }
        });

        $(document).on('click', '.sidebar-panel-class-create', function(e) {
            e.preventDefault();
            mfn_classes.modal();
        });

        $(document).on('click', '.sidebar-panel-class-list', function(e) {
            e.preventDefault();
            mfn_classes.list_modal.show();
        });

        $(document).on('click', '.mfn-class-editor-dismiss', function(e) {
            e.preventDefault();
            edited_item.attr = mfn_classes.backup['attr'];
            setTimeout(function() {
                loopAllStyleFields(edited_item.uid);

                if( $builder.find('.mfn-current-editing').length ){
                    let to_click = $builder.find('.mfn-current-editing').find('.mfn-header').first().find('.mfn-element-edit');
                    $builder.find('.mfn-current-editing').removeClass('mfn-current-editing');
                    sidebar_form.is_class = false;
                    to_click.trigger('click');
                    // re_render();
                }else{
                    backToWidgets();
                }

                mfn_classes.edited_item_uid = false;
            }, 10);
        });
    },
    import: {
        data: [],
        duplicates: [],
        init: function() {
            mfn_classes.import.duplicates = [];
            let looped = JSON.parse( JSON.stringify(mfn_classes.import.data) );

            _.map(looped, (el, i) => {
                if( mfn.classes && mfn.classes.filter( cl => cl.uid == el.uid ).length ) {
                    el['uid'] = `be_${el.jsclass}_${getUid()}`;
                    el['title'] = el.title+'_clone';
                    mfn_classes.import.duplicates.push(el);
                    //mfn_classes.import.data = mfn_classes.import.data.filter(item => item.uid != el.uid);
                }
            }).join('');

            if( mfn_classes.import.duplicates.length ){
                mfn_classes.import.modal();
            }else{
                mfn_classes.import.import_data();
            }
            
        },
        modal: function() {

            $('.mfn-ui').append(`<div class="mfn-modal modal-confirm mfn-modal-600 show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-global-styles-list"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Global styles import</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"> <img class="icon" alt="" src="${mfn.themepath}/muffin-options/svg/warning.svg"> <h3>${mfn_classes.import.duplicates.length} duplicated styles detected</h3> <p>What do you want to do with them?</p><a class="mfn-btn btn-wide btn-modal-close" href="#"><span class="btn-wrapper">Cancel</span></a> <a class="mfn-btn btn-wide mfn-btn-red mfn-import-classes-overwrite" href="#"><span class="btn-wrapper">Overwrite</span></a> <a class="mfn-btn btn-wide mfn-btn-green mfn-import-classes-keep-both" href="#"><span class="btn-wrapper">Keep both</span></a> </div></div></div>`);

            $('.mfn-import-classes-overwrite').on('click', function(e) {
                e.preventDefault();
                if( $(this).hasClass('loading') ) return;
                $(this).addClass('loading');
                mfn_classes.import.import_data();
            });

            $('.mfn-import-classes-keep-both').on('click', function(e) {
                e.preventDefault();
                if( $(this).hasClass('loading') ) return;
                $(this).addClass('loading');
                mfn_classes.import.data = mfn_classes.import.duplicates;
                mfn_classes.import.import_data();
            });

        },
        import_data: function() {
            if( !mfn_classes.import.data.length ) {

                $('.modal-confirm.show').remove();
                $('#mfn-preview-wrapper').append('<div style="display: none;" class="mfn-snackbar"><span class="mfn-icon mfn-icon-information"></span><div class="snackbar-message">Global styles imported.</div></div>');
                $('.mfn-snackbar').fadeIn();
                closeSnackbar();

                return;
            
            }else{
                
                $.ajax({
                    url: mfnajaxurl,
                    data: {
                        action: 'mfnupdateclasses',
                        'mfn-builder-nonce': wpnonce,
                        val: JSON.stringify(mfn_classes.import.data),
                        type: 'import'
                    },
                    type: 'POST',
                    success: function(response) {
                        
                        $('.modal-confirm.show').remove();
                        $('#mfn-preview-wrapper').append('<div style="display: none;" class="mfn-snackbar"><span class="mfn-icon mfn-icon-information"></span><div class="snackbar-message">Global styles imported.</div></div>');
                        $('.mfn-snackbar').fadeIn();
                        closeSnackbar();

                        mfn.classes = response;
                        loopAllStyleFields();

                    }
                });

            }
        }
    },
    list_modal: {
        // mfn_classes.list_modal

        confirm: function() {
            $('.mfn-ui')
                .append(`<div class="mfn-modal modal-confirm show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-delete"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Delete global style</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"> <img class="icon" alt="" src="${mfn.themepath}/muffin-options/svg/warning.svg"> <h3>Delete style?</h3> <p>Please confirm. There is no undo.</p><a class="mfn-btn mfn-btn-red btn-wide btn-modal-confirm" href="#"><span class="btn-wrapper">Delete</span></a> </div></div></div>`);

                $('.btn-modal-confirm').on('click', function(e) {
                    e.preventDefault();
                   if( $(this).hasClass('loading') ) return;
                    $(this).addClass('loading');
                    mfn_classes.list_modal.delete();
                });
        },

        reload: function() {
            mfn_classes.list_modal.close();
            mfn_classes.list_modal.show();
            mfn_classes.refresh = false;
        },

        delete: function() {
            $.ajax({
                url: mfnajaxurl,
                data: {
                    action: 'mfnupdateclasses',
                    'mfn-builder-nonce': wpnonce,
                    val: mfn_classes.uid,
                    type: 'delete'
                },
                type: 'POST',
                success: function(response) {

                    $('.mfn-global-styles-listing li[data-id="'+mfn_classes.uid+'"]').remove();

                    mfn.classes = response;

                    sidebar_form.render();
                    loopAllStyleFields();

                    //$('.mfn-ui').removeClass('mfn-modal-open');
                    mfn_classes.list_modal.reload();
                    $('.modal-confirm.show').remove();

                    $content.find('style.mfn-local-style-'+mfn_classes.uid).remove();

                    $('#mfn-preview-wrapper').append('<div style="display: none;" class="mfn-snackbar"><span class="mfn-icon mfn-icon-information"></span><div class="snackbar-message">Style removed.</div></div>');
                    $('.mfn-snackbar').fadeIn();
                    closeSnackbar();
                }
            });
        },

        rename: function() {
            let tmp_class = mfn.classes.filter( (n) => n.uid == mfn_classes.uid )[0];
            $('.mfn-ui')
                .append(`<div class="mfn-modal modal-confirm show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-be-class"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Rename global style</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"><div class="mfn-form-row"><input value="${tmp_class.title}" type="text" class="mfn-form-control mfn-class-new-name"></div><a class="mfn-btn mfn-btn-blue btn-modal-confirm" href="#"><span class="btn-wrapper">Save</span></a> <a class="mfn-btn btn-modal-close" href="#"><span class="btn-wrapper">Cancel</span></a> </div></div></div>`);

                $('.btn-modal-confirm').on('click', function(e) {
                    e.preventDefault();

                    if( $(this).hasClass('loading') ) return;

                    $('.mfn-class-new-name').removeClass('error');
                    if( !$('.mfn-class-new-name').val().length ) {
                        $('.mfn-class-new-name').addClass('error');
                        return;
                    }

                    $(this).addClass('loading');

                    let new_name = $('.mfn-class-new-name').val();
                    let tmp_class = mfn.classes.filter( (n) => n.uid == mfn_classes.uid )[0];

                    tmp_class.title = new_name;

                    $('.mfn-global-styles-listing li[data-id="'+mfn_classes.uid+'"] .mfn-class-title').text(new_name);

                    setTimeout(mfn_classes.ajax(tmp_class), 10);
                });
        },

        duplicate: function() {
            let tmp_class = JSON.parse( JSON.stringify(mfn.classes.filter( (n) => n.uid == mfn_classes.uid )[0]));
            $('.mfn-ui')
                .append(`<div class="mfn-modal modal-confirm show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-be-class"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Clone global style</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"><div class="mfn-form-row"><input placeholder="Global style name" type="text" class="mfn-form-control mfn-class-new-name"></div><a class="mfn-btn mfn-btn-blue btn-modal-confirm" href="#"><span class="btn-wrapper">Save</span></a> <a class="mfn-btn btn-modal-close" href="#"><span class="btn-wrapper">Cancel</span></a> </div></div></div>`);

                $('.btn-modal-confirm').on('click', function(e) {
                    e.preventDefault();

                    if( $(this).hasClass('loading') ) return;

                    $('.mfn-class-new-name').removeClass('error');

                    if( !$('.mfn-class-new-name').val().length ) {
                        $('.mfn-class-new-name').addClass('error');
                        return;
                    }

                    $(this).addClass('loading');

                    let new_name = $('.mfn-class-new-name').val();
                    let new_uid = `be_${tmp_class.jsclass}_${getUid()}`;

                    let check_if_exists = mfn.classes.filter( cl => cl.title == new_name );

                    if( check_if_exists.length ) {
                        new_name += '_copy';

                        let check_if_exists2 = mfn.classes.filter( cl => cl.title.includes(new_name) );
                        if( check_if_exists2.length ) new_name += '_'+check_if_exists2.length;
                    }

                    tmp_class.title = new_name;
                    tmp_class.uid = new_uid;

                    if( _.has(tmp_class, 'attr') ){
                        _.map(tmp_class.attr, function(atr, a) {
                            if( _.has(atr, 'selector') ) {
                                //console.log(atr.selector);
                                atr.selector = atr.selector.replaceAll(mfn_classes.uid, new_uid);
                            }
                        });
                    }

                    mfn_classes.refresh = true;

                    setTimeout(mfn_classes.ajax(tmp_class), 10);
                });
        },

        show: function() {

            const sortedData = Object.fromEntries(
                Object.keys(renderMfnFields)
                    .sort() // Sort the keys alphabetically
                    .map(key => [key, renderMfnFields[key]]) // Map back to key-value pairs
            );

            $('.mfn-ui')
                .addClass('mfn-modal-open')
                .append(`<div class="mfn-modal show modal-classes-listing mfn-modal-900">
                        <div class="mfn-modalbox mfn-form mfn-shadow-1">
                            <div class="modalbox-header">
                                <div class="options-group">
                                    <div class="modalbox-title-group">
                                        <span class="modalbox-icon mfn-icon mfn-icon-global-styles-list"></span> 
                                        <div class="modalbox-desc"> 
                                            <h4 class="modalbox-title">Global styles</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="options-group right"> <div class="modalbox-search"> <div class="form-control"> <input class="mfn-form-control mfn-form-input mfn-search" type="text" placeholder="Search"> </div> </div> </div>
                                <div class="options-group"><a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a></div>
                            </div>
                            <div class="modalbox-content">
                                ${ mfn.classes.length ? `
                                <ul class="mfn-global-styles-listing">
                                    ${ _.map(sortedData, (item, i) => {

                                        if( i == 'items' ) return '';

                                        let classes_find = mfn.classes.filter( c => c.jsclass == i );

                                        return classes_find.length ? `
                                            <li data-name="${i.toLowerCase().replaceAll('_2', '').replaceAll('_', ' ').replaceAll('-', ' ')}">
                                                <div class="title-group">
                                                    <span class="mfn-icon mfn-icon-${i.replaceAll('_', '-')}"></span>
                                                    <h5>${i.replaceAll('_2', '').replaceAll('_', ' ').replaceAll('-', ' ')}</h5>
                                                </div>
                                                <ul>
                                                    ${classes_find.map( cf => {
                                                        return `<li data-name="${ cf.title.toLowerCase() }" data-id="${cf.uid}"><span class="mfn-class-name-wrapper"><span class="mfn-class-title">${ cf.title }</span><a href="#" data-tooltip="Rename" class="mfn-class-rename mfn-option-btn mfn-option-blank btn-small"><span class="mfn-icon mfn-icon-rename"></span></a><pre class="mfn-class-code">${ cf.uid }</pre></span><div class="modal-classes-listing-tools"><a href="#" data-tooltip="Clone" class="mfn-class-duplicate mfn-option-btn mfn-option-blank btn-small"><span class="mfn-icon mfn-icon-clone"></span></a><a href="#" data-tooltip="Delete" class="mfn-class-remove mfn-option-btn mfn-option-blank btn-small"><span class="mfn-icon mfn-icon-delete"></span></a></div></li>`
                                                    }).join('')}
                                                </ul>
                                            </li>
                                        ` : '';

                                    }).join('')}
                                </ul>

                            ` : '<h5>Empty list</h5>' }
                            </div>
                        </div>
                    </div>`
                );

                $('.btn-modal-close').on('click', function(e) {
                    e.preventDefault();
                    mfn_classes.list_modal.close();
                });


                $('.mfn-class-remove').on('click', function(e) {
                    e.preventDefault();
                    mfn_classes.uid = $(this).closest('li').attr('data-id');
                    mfn_classes.list_modal.confirm();
                });

                $('.mfn-class-rename').on('click', function(e) {
                    e.preventDefault();
                    mfn_classes.uid = $(this).closest('li').attr('data-id');
                    mfn_classes.list_modal.rename();
                });

                $('.mfn-class-duplicate').on('click', function(e) {
                    e.preventDefault();
                    mfn_classes.uid = $(this).closest('li').attr('data-id');
                    mfn_classes.list_modal.duplicate();
                });

        },

        close: function() {
            // mfn_classes.close();
            if( !$('.modal-classes-listing.show').length ) return;
            $('.mfn-ui').removeClass('mfn-modal-open');
            mfn_classes.styles = '';
            $('.modal-classes-listing.show').remove();
        }

    },
    get_styles: function(item) {
        mfn_classes.styles = '';

        _.map( item, function(opt, o) {
            if( !_.isEmpty(opt) && ( o.includes('css_') || _.indexOf(mfn_classes.exceptions, o) >= 0 || _.indexOf(mfn_classes.exceptions, edited_item.jsclass+'_'+o) >= 0 ) ) {

                if( _.has(mfn_classes.original, 'attr') && _.has(mfn_classes.original.attr, o) && ( (opt == mfn_classes.original.attr[o]) || (_.has(mfn_classes.original.attr[o], 'val') && opt.val == mfn_classes.original.attr[o]['val']) || ( _.has(mfn_classes.original.attr[o]['val'], 'desktop') && _.has(opt.val, 'desktop') && opt.val.desktop == mfn_classes.original.attr[o]['val']['desktop'] ) ) ) {
                    return;
                }

                mfn_classes.confirmed.push(o);

                let this_opt = $('.mfn-element-fields-wrapper .mfn-form-row[data-id="'+o+'"]');
                let tab_div = $('.mfn-element-fields-wrapper .mfn-form-row[data-id="'+o+'"]').closest('.modalbox-card');
                let tab = 'Style';
                if( tab_div.hasClass('modalbox-card-content') ) tab = 'Settings';
                if( tab_div.hasClass('modalbox-card-advanced') ) tab = 'Advanced';

                let heading = this_opt.prevAll('.row-header').first().text();

                if( heading === null || heading.match(/^ *$/) !== null ) {
                    heading = this_opt.closest('.mfn-form-row').prevAll('.row-header').first().text();
                   
                    if( this_opt.closest('.mfn-sft').length ) {
                        heading = this_opt.closest('.mfn-sft').closest('.mfn-form-row').prevAll('.row-header').first().text();
                    }

                    if( this_opt.closest('.mfn-sidebar-fields-tabs').length ) {
                        heading = this_opt.closest('.mfn-sidebar-fields-tabs').closest('.mfn-form-row').prevAll('.row-header').first().text();
                    }

                    if( o.includes('_hover') ) heading += ':hover';
                    if( o.includes('_active') ) heading += ':active';
                }

                let this_val = '';

                if( _.has(opt, 'val') && typeof opt.val == 'object' && !_.isEmpty(opt.val) ) {
                    this_val = _.map(opt.val, function(v,s) {
                        if( !_.isEmpty(v) && s != 'string' ) {
                            if( typeof v == 'object' ) {
                                let tv = s+"\r\n"+'<ul>';
                                tv += _.map(v, function(c,x) {
                                    return '<li>'+x+': '+c+'</li>';
                                }).join('');
                                tv += '</ul>'
                                return tv;
                            }else{
                                return s.trim()+"\r\n"+'<ul><li>'+v+'</li></ul>';
                            }
                        }
                    }).join('')
                }else if(!_.isEmpty(opt.val)) {
                    this_val = opt.val;
                }else if(!_.isEmpty(opt)) {
                    if( typeof opt == 'object' ){
                        this_val = _.map(opt, function(v,s) {
                            if( !_.isEmpty(v) && s != 'string' ) {
                                if( typeof v == 'object' ) {
                                    let tv = s+"\r\n"+'<ul>';
                                    tv += _.map(v, function(c,x) {
                                        return '<li>'+x+': '+c+'</li>';
                                    }).join('');
                                    tv += '</ul>'
                                    return tv;
                                }else{
                                    return s.trim()+"\r\n"+'<ul><li>'+v+'</li></ul>';
                                }
                            }
                        }).join('')
                    }else{
                        this_val = opt;
                    }
                    
                }

                //let this_val = _.has(opt, 'val') && typeof opt.val == 'object' ? _.map(opt.val, (v,s) => `${s.trim()}: ${v}<br>`).join('') : `${opt.val}`;

                if( this_val.length && !_.isEmpty(this_val) ) mfn_classes.styles += `<li class="active"><span data-id="${o}" class="mfn-class-styles-check"></span><span class="mfn-class-styles-list-cat">${tab} / ${heading.trim()}</span><span class="mfn-class-styles-list-title">${this_opt.find('label').first().text().trim()}</span><span title="${ this_val.replaceAll('<br>', '; ').replaceAll('<ul>', '').replaceAll('</ul>', "").replaceAll('<li>', "").replaceAll('</li>', "\r\n") }" class="mfn-class-styles-list-val">${ this_val }</span></li>`;

            }
        });
    },
    modal: function() {
        // mfn_classes.modal

        if( !edited_item ) return;
        mfn_classes.confirmed = [];

        if( _.has(edited_item, 'be_classes') && edited_item.be_classes.length > 0 ) {
            mfn_classes.has_classes = true;
        }else{
            mfn_classes.has_classes = false;
        }

        mfn_classes.original = edited_item.jsclass == 'section' || edited_item.jsclass == 'wrap' ? JSON.parse( JSON.stringify(mfn.elements[edited_item.jsclass]) ) : JSON.parse( JSON.stringify(renderMfnFields.items[edited_item.jsclass]) );
        mfn_classes.get_styles(edited_item.attr);

        $('.mfn-ui')
            .addClass('mfn-modal-open')
            .append(`<div class="mfn-modal show modal-classes mfn-modal-900">
                    <div class="mfn-modalbox mfn-form mfn-shadow-1">
                        <div class="modalbox-header">
                            <div class="options-group">
                                <div class="modalbox-title-group">
                                    <span class="modalbox-icon mfn-icon-be-class"></span> 
                                    <div class="modalbox-desc"> 
                                        <h4 class="modalbox-title">Global styles</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="options-group">
                                <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a>
                            </div>
                        </div>
                        <div class="modalbox-content">
                            ${ mfn_classes.styles.length ? 
                            `<h5>${mfn_classes.popup_title}</h5>
                            <div class="mfn-form-row">
                                <label>Options to save</label>
                                <ul class="mfn-class-styles-list">
                                    ${mfn_classes.styles}
                                </ul>
                            </div>
                            <div class="mfn-form-row">
                                <label>Create new global style</label>
                                <input class="mfn-form-control mfn-form-input mfn-new-class-name-input" type="text" placeholder="type-style-name" autocomplete="off">
                            </div>
                            <a class="mfn-btn mfn-btn-blue btn-save-new-class btn-modal-confirm" ${mfn.view == 'demo' ? 'data-tooltip="Unavailable in Demo"' : ''} href="#"><span class="btn-wrapper">Save</span></a> 
                            <a class="mfn-btn mfn-new-class-toggle btn-modal-close" href="#"><span class="btn-wrapper">Cancel</span></a>
                        ` : '<h5>No CSS given</h5>' }
                        </div>
                    </div>
                </div>`
            );

        $('.btn-modal-close').on('click', function(e) {
            e.preventDefault();
            mfn_classes.close();
        });

    },

    close: function() {

        // mfn_classes.close();

        if( !$('.modal-classes.show').length ) return;
        $('.mfn-ui').removeClass('mfn-modal-open');
        mfn_classes.styles = '';
        $('.modal-classes.show').remove();
    },

    create: function() {
        // mfn_classes.create();

        if( mfn.view == 'demo' ) return;
        $('.mfn-new-class-name-input').removeClass('error');
        $('.modal-classes .mfn-input-error-msg').remove();

        var class_name_input = $('.mfn-new-class-name-input');
        var class_name = `be_${edited_item.jsclass}_${getUid()}`;

        if( !class_name_input.val().length ) {
            class_name_input.addClass('error');
            $('.modal-classes.show .mfn-btn.loading').before('<span class="mfn-input-error-msg">Make sure the title is not empty and not taken</span>').removeClass('loading disabled');
            return;
        }

        if( mfn.classes.length && mfn.classes.filter( (n) => n.title == class_name_input.val() ).length ) {
            class_name_input.addClass('error');
            $('.modal-classes.show .mfn-btn.loading').before('<span class="mfn-input-error-msg">This name is already taken. Please choose another.</span>').removeClass('loading disabled');
            return;
        }

        if( !_.has(edited_item, 'be_classes') ) edited_item['be_classes'] = [];
        if( _.indexOf(edited_item.be_classes, class_name) >= 0 ) return;

        let copy_ei = JSON.parse( JSON.stringify(edited_item) );

        let tmp_class = {
            jsclass: copy_ei.jsclass,
            type: 'be_class',
            title: class_name_input.val(),
            uid: class_name,
            attr: {}
        };

        _.map( copy_ei.attr, function(opt, o) {
            if( ( o.includes('css_') && _.indexOf(mfn_classes.confirmed, o) >= 0 ) || _.indexOf(mfn_classes.exceptions, o) >= 0 || _.indexOf(mfn_classes.exceptions, copy_ei.jsclass+'_'+o) >= 0 ) {
                tmp_class['attr'][o] = opt;
                if( _.indexOf(mfn_classes.exceptions, o) < 0 ) delete(edited_item.attr[o]);
            }
        });

        edited_item['be_classes'] = [];
        
        edited_item['be_classes'].push(class_name);
        $('.sidebar-panel-classes-list  .sidebar-panel-classes-input').before('<span data-name="'+class_name+'" class="sidebar-panel-class mfn-autocomplete-item">'+class_name_input.val()+'<span class="sidebar-panel-class-edit mfn-autocomplete-item-edit">&#9998;</span> <span class="sidebar-panel-class-delete mfn-autocomplete-item-delete">&#10005;</span></span>');
        //$builder.find(`.mcb-${edited_item.jsclass}-${edited_item.uid}`).addClass(class_name);
        $builder.find('.'+$('.mfn-element-fields-wrapper').attr('data-element')).addClass(class_name);

        setTimeout(mfn_classes.ajax(tmp_class), 10);
    },

    ajax: function(tmp_class) {

        // mfn_classes.ajax();

        // mfn_classes.has_changed = false;

        _.map( tmp_class.attr, function(opt, o) {
            if( (o.includes('css_') && _.has(opt, 'selector')) || _.indexOf(mfn_classes.exceptions, o) < 0 || _.indexOf(mfn_classes.exceptions, tmp_class.jsclass+'_'+o) < 0 ) {
                if( o.includes('css_') && _.has(opt, 'selector') ) opt.selector = opt.selector.replaceAll('.mcb-section .mcb-wrap .mcb-item-mfnuidelement', '.column.'+tmp_class.uid).replaceAll('.mcb-section .mcb-wrap-mfnuidelement', '.'+tmp_class.uid).replaceAll('mcb-section-mfnuidelement', tmp_class.uid);
                tmp_class['attr'][o] = opt;
            }
        });

        $.ajax({
            url: mfnajaxurl,
            data: {
                action: 'mfnupdateclasses',
                'mfn-builder-nonce': wpnonce,
                val: tmp_class
            },
            type: 'POST',
            success: function(response) {
                mfn_classes.close();
                mfn.classes = response;
                mfn_classes.uid = false;
                mfn_classes.confirmed = [];

                //sidebar_form.open( $content.find('.mfn-current-editing'), false );
                sidebar_form.render();
                $content.find('style.mfn-local-style-'+edited_item.uid).remove();
                loopAllStyleFields();

                if( mfn_classes.refresh_all_items_with_class ) {
                    if(  $builder.find('.'+tmp_class.uid).length ) {
                        $builder.find('.vb-item.'+tmp_class.uid).each(function() {
                            let uid = $(this).attr('data-uid');
                            if( $(this).hasClass('wrap') ) {
                                re_render( $(this).closest('.mcb-section').attr('data-uid') );
                            }else{
                                re_render(uid);
                            }
                        });
                    }
                    mfn_classes.refresh_all_items_with_class = false;
                }
    
                if($('.mfn-class-editor-update').length) $('.mfn-class-editor-update').removeClass('loading');
                if( $('.modal-confirm.show').length ) $('.modal-confirm.show').remove();

                if( mfn_classes.refresh ) mfn_classes.list_modal.reload();

                $('#mfn-preview-wrapper').append('<div style="display: none;" class="mfn-snackbar"><span class="mfn-icon mfn-icon-information"></span><div class="snackbar-message">Global styles updated.</div></div>');
                $('.mfn-snackbar').fadeIn();
                closeSnackbar();
            }
        });
    },

    remove: function(classname) {
        $('.sidebar-panel-classes-list  .sidebar-panel-class[data-name="'+classname+'"]').remove();

        if($('.mfn-ui').hasClass('mfn-class-editor-full')) $('.mfn-ui').removeClass('mfn-class-editor-full');
        
        if( _.has(edited_item, 'be_classes') ) {
            let index = _.indexOf(edited_item.be_classes, classname);
            if( index >= 0 ) edited_item.be_classes.splice(index, 1);

            $builder.find('.'+$('.mfn-element-fields-wrapper').attr('data-element')).removeClass(classname);
            sidebar_form.render();
        }

        if( _.has(edited_item, 'be_classes') && !edited_item.be_classes.length ) {
            $('.mfn-classes-used-info').remove();
            delete(edited_item.be_classes);
        }
    },

    edit: function(classname) {
        
        let this_class = mfn.classes.filter( (c) => c.uid == classname )[0];

        if( !this_class || !_.has(this_class, 'jsclass') ) {
            console.error('There is no such class on the list. Please refresh the page.');
            return false;
        }

        $('.sidebar-panel-classes').remove();
        //$('#header-edit-item .sidebar-panel-title').text('.'+this_class.nicename);

        edited_item = this_class;
        sidebar_form.is_class = classname;

        sidebar_form.open($content.find('.mfn-current-editing'), true);

    }

}

mfn_classes.init();







mfn_live_css = {
    pending: false,
    live_update: true,
    is_editing: false,
    tab: 'global_css',
    input: false,
    row: false,
    history: {},
    new_var: {},
    editors: {},
    init: function() {

        // if( localStorage.getItem("be_live_css_history") ) localStorage.removeItem("be_live_css_history");

        $(document).on('click', '.btn-live-css-switcher:not(.disabled)', function(e) {
            e.preventDefault();
            mfn_live_css.restore.index = false;
            if( $('.mfn-ui').hasClass('mfn-live-css-editor-active') ) {
                mfn_live_css.hide();
            }else{
                if( localStorage.getItem("be_live_css") ) mfn_live_css.tab = localStorage.getItem("be_live_css");
                mfn_live_css.show();
            }
        });

        if( localStorage.getItem("be_live_css_history") ) {
            let helpr = JSON.parse(localStorage.getItem("be_live_css_history"));
            mfn_live_css['history'] = JSON.parse( JSON.stringify(helpr) );
        }else{
            mfn_live_css.backup('global_css');
            mfn_live_css.backup('page_css');
            mfn_live_css.backup('css_variables');
        }

        document.addEventListener('visibilitychange', function () {
            if( document.visibilityState === 'visible' ) {
                mfn_live_css.refresh();
            }
        });

        $(document).on('mouseup', '.mfn-live-css-editor .mfn-builder-tabs li', function(e) {
            e.preventDefault();
            if( $(this).hasClass('active') ) return;
            mfn_live_css.restore.index = false;
            mfn_live_css.tab = $(this).attr('data-tab');
            $(this).siblings('li').removeClass('active');
            $('.mfn-live-css-editor .editor-wrapper.active').removeClass('active');
            $(this).addClass('active');
            localStorage.setItem("be_live_css", mfn_live_css.tab);
            mfn_live_css[mfn_live_css.tab]();
        });

        $(document).on('change', '.mfn-live-css-editor input#live-css-update', function() {
            if( $(this).prop('checked') == true ) {
                mfn_live_css.live_update = true;
                $('.mfn-live-css-editor').addClass('mfn-live-css-editor-live-update');
                $('.mfn-live-css-editor .footer-buttons .mfn-btn').addClass('disabled');
            }else{
                mfn_live_css.live_update = false;
                $('.mfn-live-css-editor').removeClass('mfn-live-css-editor-live-update');
                $('.mfn-live-css-editor .footer-buttons .mfn-btn').removeClass('disabled');
            }
        });

        $(document).on('click', '.mfn-live-css-editor .variable-title', function(e) {
            e.preventDefault();
            let button = $(this);
            navigator.clipboard.writeText(button.text())
            button.attr('data-tooltip', 'Copied');
            setTimeout(function() {
                button.attr('data-tooltip', 'Click to copy');
            }, 3000);
        });

        $(document).on('click', '.mfn-live-css-editor .editor-toolbar .mfn-editor-append', function(e) {
            e.preventDefault();
            let val = $(this).attr('data-val');
            let cm = mfn_live_css.editors['mfn-css-live-cm-editor-'+mfn_live_css.tab].codemirror;

            const lastLine = cm.lastLine();
            const scrollInfo = cm.getScrollInfo();

            // Dodaj nową linię z deklaracją
            const from = { line: lastLine + 1, ch: 0 };
            cm.replaceRange('\n' + val, from);

            // Znajdź linię, którą właśnie wstawiliśmy
            const insertedLine = cm.getLine(from.line);

            // Znajdź pozycję nawiasu klamrowego `{`
            const braceIndex = insertedLine.indexOf('{');
            const selectorEnd = braceIndex > -1 ? braceIndex : insertedLine.length;

            // Zaznacz tylko ".class" (bez nawiasu)
            const selectionFrom = { line: from.line, ch: 0 };
            const selectionTo = { line: from.line, ch: selectorEnd };
            cm.setSelection(selectionFrom, selectionTo);
            cm.focus();

            // Przywróć scroll
            cm.scrollTo(scrollInfo.left, scrollInfo.top+70);
        });

        $(document).on('click', '.mfn-live-css-editor .btn-live-css-editor-save', function(e) {
            e.preventDefault();
            if( mfn_live_css.pending ) return;
            mfn_live_css.pending = true;
            $(this).addClass('loading disabled');
            let cm = mfn_live_css.editors['mfn-css-live-cm-editor-'+mfn_live_css.tab].codemirror;
            let val = cm.getValue();
            mfn_live_css['update'][mfn_live_css.tab](val);
        });

        $(document).on('click', '.css-variables-form .mfn-css-variable-save', function(e) {
            e.preventDefault();
            mfn_live_css.new_var = {};
            let button = $(this);
            let title_input = $('.css-variables-form .mfn-css-var-title');
            let value_input = $('.css-variables-form .mfn-css-var-value');

            if( button.hasClass('loading') ) return;

            $('.css-variables-form .mfn-form-input').removeClass('error');

            if( !title_input.val().length || !value_input.val().length ) {
                if( !title_input.val().length ) title_input.addClass('error');
                if( !value_input.val().length ) value_input.addClass('error');
                return;
            }

            const regex = /^[a-z0-9-]+$/;
            if( !regex.test(title_input.val()) ) {
                title_input.addClass('error');
                return;
            }

            if( !title_input.val().startsWith('--') ) {
                title_input.val('--'+title_input.val());

                if( title_input.val().includes('---') ){
                    title_input.val( title_input.val().replace('---', '--') );
                }
            }

            button.addClass('loading');

            mfn_live_css.new_var.title = title_input.val();
            mfn_live_css.new_var.value = value_input.val();

            mfn_live_css.update.css_variables();
        });

        $(document).on('click', '.mfn-live-css-editor .mfn-css-var-action-delete', function(e) {
            e.preventDefault();
            let title = $(this).attr('data-title');
            mfn.css_variables = mfn.css_variables.filter( (x) => x.title != title );
            mfn_live_css.variables_list();
            mfn_live_css['update']['variables_ajax']();
        });

        $(document).on('click', '.mfn-live-css-editor .mfn-css-var-action-edit', function(e) {
            e.preventDefault();
            let title = $(this).attr('data-title');
            mfn_live_css.is_editing = title;
            $('.css-variables-form .mfn-css-var-title').val(title);
            $('.css-variables-form .mfn-css-var-value').val( mfn.css_variables.filter( (x) => x.title == title )[0]['value'] );

        });

        $(document).on('click', '.mfn-live-css-editor .btn-live-css-editor-history-undo', function(e) {
            e.preventDefault();
            mfn_live_css.restore.undo();
        });

        $(document).on('click', '.mfn-live-css-editor .btn-live-css-editor-history-redo', function(e) {
            e.preventDefault();
            mfn_live_css.restore.redo();
        });

        $(document).on('keyup focus', '.panel-edit-item .object-css-input input.mfn-form-input', function(e) {
            if( !mfn['css_variables'] || !mfn['css_variables'].length ) return;

            if( e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" ) return;

            mfn_live_css.input = $(this);
            mfn_live_css.row = mfn_live_css.input.closest('.mfn-form-row');

            if( mfn_live_css.row.find('.mfn-css-variables-dropdown').length ) mfn_live_css.row.find('.mfn-css-variables-dropdown').remove();
            if( mfn_live_css.input.hasClass('mfn-css-variable-input-active') ) mfn_live_css.input.removeClass('mfn-css-variable-input-active');

            if( !mfn_live_css.input.val().length ) return;

            let val_search = mfn_live_css.input.val().replace('var(', '').replace(')', '');
            
            let filter = mfn.css_variables.filter( (x) => x.title.includes(val_search) );

            if( !filter.length ) return;
            mfn_live_css.input.addClass('mfn-css-variable-input-active');

            let html = '<ul class="mfn-css-variables-dropdown">';
            
                filter.map(function(cv) {
                    html += `<li><a class="mfn-css-variable-item" href="#"><span class="mfn-css-variable-item-title">${cv.title}</span><code class="mfn-css-variable-item-val variable-value ${cv.value.includes('#') ? 'variable-color' : ''}">${cv.value.includes('#') ? '<span style="background-color: '+cv.value+';"></span>' : ''} ${cv.value}</code></a></li>`;
                }).join('');

            html += '</ul>';

            mfn_live_css.row.append(html);

            //if( mfnPickr && mfn_live_css.input.hasClass('color-picker-vb') ) mfnPickr.hide();

            $(document).bind('click', mfn_live_css.hide_classes_dropdown);

        });


        document.addEventListener("keyup", (e) => {
            if( !mfn_live_css.input || !$('.mfn-css-variables-dropdown li').length ) return
            if (e.key === "ArrowDown") {
                e.preventDefault();
                if( $('.mfn-css-variables-dropdown li.active').length ) {
                    let next = $('.mfn-css-variables-dropdown li.active').next('li').length ? $('.mfn-css-variables-dropdown li.active').next('li') : $('.mfn-css-variables-dropdown li').first();
                    $('.mfn-css-variables-dropdown li.active').removeClass('active');
                    next.addClass('active');
                }else{
                    $('.mfn-css-variables-dropdown li').first().addClass('active')
                }
            } else if (e.key === "ArrowUp") {
                e.preventDefault();
                if( $('.mfn-css-variables-dropdown li.active').length ) {
                    let next = $('.mfn-css-variables-dropdown li.active').prev('li').length ? $('.mfn-css-variables-dropdown li.active').prev('li') : $('.mfn-css-variables-dropdown li').last();
                    $('.mfn-css-variables-dropdown li.active').removeClass('active');
                    next.addClass('active');
                }else{
                    $('.mfn-css-variables-dropdown li').last().addClass('active')
                }
            } else if (e.key === "Enter") {
                if( $('.mfn-css-variables-dropdown li.active').length ) $('.mfn-css-variables-dropdown li.active > a.mfn-css-variable-item').trigger('click');
            }
        });


        $(document).on('click', '.mfn-css-variables-dropdown li a.mfn-css-variable-item', function(e) {
            e.preventDefault();

            let val = $(this).find('.mfn-css-variable-item-title').text();
            mfn_live_css.input.val(val).trigger('change');

            if( mfn_live_css.input.hasClass('mfn-css-variable-input-active') ) mfn_live_css.input.removeClass('mfn-css-variable-input-active');
            if( mfn_live_css.row.find('.mfn-css-variables-dropdown').length ) mfn_live_css.row.find('.mfn-css-variables-dropdown').remove();

            if( mfn_live_css.input.hasClass('color-picker-vb') && $(this).find('code').text().includes('#') ) {
                mfn_live_css.input.closest('.color-picker-group').find('.form-addon-prepend .label').css('border-color', val).css('background-color', val);
                mfn_live_css.input.closest('.color-picker-group').find('.form-addon-prepend .label').removeClass('light dark').addClass(getContrastYIQ( $(this).find('code').text().replace(' ', '') ));
            }

            mfn_live_css.input = false;
            mfn_live_css.row = false;

            $(document).unbind('click', mfn_live_css.hide_classes_dropdown);

        });

    },

    hide_classes_dropdown: function(e) {
        var div = $('.mfn-css-variables-dropdown');

        if( !mfn_live_css.input ){
            $(document).unbind('click', mfn_live_css.hide_classes_dropdown);
            return;
        }

        if(!div.is(e.target) && !mfn_live_css.input.is(e.target)) {
            if( mfn_live_css.input.hasClass('mfn-css-variable-input-active') ) mfn_live_css.input.removeClass('mfn-css-variable-input-active');
            if( mfn_live_css.row.find('.mfn-css-variables-dropdown').length ) mfn_live_css.row.find('.mfn-css-variables-dropdown').remove();

            mfn_live_css.input = false;
            mfn_live_css.row = false;
            
            $(document).unbind('click', mfn_live_css.hide_classes_dropdown);
        }

    },

    refresh: function() {

        if( mfn_live_css.pending ) return; 

        mfn_live_css.pending = true;

        $.ajax( mfnajaxurl, {
            type: "POST",
            data: {
              'mfn-builder-nonce': wpnonce,
              action: 'mfn_vb_refresh_live_css',
              postid: mfn.pageid 
            },
            success: function(response) {

                let force_hr = response.themecss == mfn['themeoptions']['custom-css'] ? false : true;
                
                mfn['css_variables'] = response.variables;
                mfn['page_options']['mfn-post-css'] = response.postcss;
                mfn['themeoptions']['custom-css'] = response.themecss;

                if( force_hr && localStorage.getItem("be_live_css_history") ) {
                    let helpr = JSON.parse(localStorage.getItem("be_live_css_history"));
                    mfn_live_css['history'] = JSON.parse( JSON.stringify(helpr) );
                }

                $content.find('style.mfn-be-page-custom-css').html(response.postcss);
                $content.find('style.mfn-be-theme-custom-css').html(response.themecss);

                if( $('.mfn-ui').hasClass('mfn-live-css-editor-active') ) {
                    mfn_live_css.hide();
                    $('.btn-live-css-switcher:not(.disabled)').trigger('click');
                }

                mfn_live_css.pending = false;
                
            }
        });
    },

    backup: function( tab = false ) {

        let tabb = tab ? tab : mfn_live_css.tab;

        if( !_.has(mfn_live_css.history, tabb) ) mfn_live_css.history[tabb] = [];

        if( tabb == 'global_css' && _.has(mfn['themeoptions'], 'custom-css') ) {
            mfn_live_css.history[tabb].push(mfn['themeoptions']['custom-css']);
        }else if( tabb == 'page_css' && _.has(mfn['page_options'], 'mfn-post-css') ) {
            mfn_live_css.history[tabb].push(mfn['page_options']['mfn-post-css']);
        }else if( tabb == 'css_variables' && _.has(mfn, 'css_variables') ) {
            mfn_live_css.history[tabb].push( JSON.parse(JSON.stringify(mfn['css_variables'])) );
        }

        if( $('.mfn-live-css-editor .btn-live-css-editor-history-undo').hasClass('disabled') && mfn_live_css.history[tabb].length ) $('.mfn-live-css-editor .btn-live-css-editor-history-undo').removeClass('disabled');

        localStorage.setItem("be_live_css_history", JSON.stringify(mfn_live_css.history));
    },

    restore: {

        index: false,

        undo: function() {
            
            if( !_.has(mfn_live_css.history, mfn_live_css.tab) || !mfn_live_css.history[mfn_live_css.tab].length ) return;

            let total = mfn_live_css.history[mfn_live_css.tab].length > 1 ? mfn_live_css.history[mfn_live_css.tab].length - 1 : mfn_live_css.history[mfn_live_css.tab].length;

            if( mfn_live_css.restore.index === false ) mfn_live_css.restore.index = total;

            mfn_live_css.restore.index--;

            if( mfn_live_css.restore.index >= 0 ) {
                mfn_live_css.restore.replace();
                if( mfn_live_css.restore.index == 0 ) $('.mfn-live-css-editor .btn-live-css-editor-history-undo').addClass('disabled');
            }else{
                mfn_live_css.restore.index = 0;
                $('.mfn-live-css-editor .btn-live-css-editor-history-undo').addClass('disabled');
            }

            if( $('.mfn-live-css-editor .btn-live-css-editor-history-redo').hasClass('disabled') ) $('.mfn-live-css-editor .btn-live-css-editor-history-redo').removeClass('disabled');

            //console.log(mfn_live_css.restore.index);

        },

        redo: function() {

            if( !_.has(mfn_live_css.history, mfn_live_css.tab) || !mfn_live_css.history[mfn_live_css.tab].length ) return;

            let total = mfn_live_css.history[mfn_live_css.tab].length - 1;

            mfn_live_css.restore.index++;

            if( mfn_live_css.restore.index <= total  ) {
                mfn_live_css.restore.replace();
                if( mfn_live_css.restore.index == total ) $('.mfn-live-css-editor .btn-live-css-editor-history-redo').addClass('disabled');
            }else{
                mfn_live_css.restore.index = total;
                $('.mfn-live-css-editor .btn-live-css-editor-history-redo').addClass('disabled');
            }

            if( $('.mfn-live-css-editor .btn-live-css-editor-history-undo').hasClass('disabled') ) $('.mfn-live-css-editor .btn-live-css-editor-history-undo').removeClass('disabled');

            //console.log(mfn_live_css.restore.index);

        },

        replace: function( val = false ) {

            let to_restore = val ? val : mfn_live_css.history[mfn_live_css.tab][mfn_live_css.restore.index];

            if( !to_restore ) return;

            // console.log({'restoring': to_restore});

            if( mfn_live_css.tab == 'global_css' || mfn_live_css.tab == 'page_css' ) {

                let cm = mfn_live_css.editors['mfn-css-live-cm-editor-'+mfn_live_css.tab].codemirror;
                let new_val = to_restore;
                cm.setValue(new_val);
                
            }else if( mfn_live_css.tab == 'css_variables' ) {
                mfn_live_css.variables_list(to_restore);
            }

        }

    },

    show: function() {
        $('.mfn-ui').addClass('mfn-live-css-editor-active');

        if( edited_item && ( ( _.has(edited_item, 'uid') && edited_item.uid == 'pageoptions' ) || _.has(edited_item, 'last_tab') ) ) backToWidgets();

        let html = `<div class="mfn-live-css-editor ${mfn_live_css.live_update ? `mfn-live-css-editor-live-update` : ''}">
        
        <header class="editor-header">
            <span>Custom:</span>
            <ul class="mfn-builder-tabs">
                <li ${mfn_live_css.tab == 'global_css' ? 'class="active"' : ''} data-tab="global_css">Global CSS</li>
                <li ${mfn_live_css.tab == 'page_css' ? 'class="active"' : ''}  data-tab="page_css">Current Page CSS</li>
                <li ${mfn_live_css.tab == 'css_variables' ? 'class="active"' : ''}  data-tab="css_variables">CSS Variables <span class="mfn-badge badge-filled">${mfn.css_variables ? mfn.css_variables.length : 0}</span></li>
            </ul>
            <div class="editor-header-tools">
                <a class="mfn-option-btn mfn-option-blank btn-large btn-live-css-editor-history-undo" title="Undo" href="#"><span class="mfn-icon mfn-icon-undo"></span></a>
                <a class="mfn-option-btn mfn-option-blank btn-large btn-live-css-editor-history-redo" title="Redo" href="#"><span class="mfn-icon mfn-icon-redo"></span></a>
                <a class="mfn-option-btn mfn-option-blank btn-large btn-live-css-editor-close btn-live-css-switcher" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a>
            </div>
        </header>

        <div class="editor-toolbar-wrapper">
            <p class="warning"><span>Warning:</span> Improper CSS modifications may result in visual or functional issues on your WordPress site. Proceed with caution.</p>
        </div>

        <div class="editor-wrapper"></div>

        </div>`;

        $('.mfn-ui').append(html);

        mfn_live_css[mfn_live_css.tab]();
    },

    css_editor_tollbar: function() {

        if( $('.mfn-live-css-editor .editor-toolbar').length ) return;

        $('.mfn-live-css-editor .editor-toolbar-wrapper').append(`
            <div class="editor-toolbar">
                <p>Toolset:</p>
                <div class="mfn-option-dropdown mfn-option-dropdown-left">
                    <a href="#" class="mfn-option-btn btn-large mfn-option-text btn-icon-right mfn-option-blank"><span class="text">@media</span><span class="mfn-icon mfn-icon-arrow-down"></span></a>
                    <div class="dropdown-wrapper">
                    <a class="mfn-dropdown-item mfn-editor-append" data-val="@media only screen and (min-width: 1441px) {\r\n\r\n}" href="#">Desktop <span class="res">1441px</span> <</a>
                    <a class="mfn-dropdown-item mfn-editor-append" data-val="@media only screen and (min-width: 960px) and (max-width: 1440px) {\r\n\r\n}" href="#">Laptop <span class="res">960</span> - <span class="res">1440px</span></a>
                    <a class="mfn-dropdown-item mfn-editor-append" data-val="@media only screen and (min-width: 768px) and (max-width: 959px) {\r\n\r\n}" href="#">Tablet <span class="res">768</span> - <span class="res">959px</span></a>
                    <a class="mfn-dropdown-item mfn-editor-append" data-val="@media only screen and (max-width: 767px) {\r\n\r\n}" href="#">Mobile < <span class="res">767px</span></a>
                    <a class="mfn-dropdown-item mfn-editor-append" data-val="@media only screen and (max-width: 959px) {\r\n\r\n}" href="#">Mobile & Tablet < <span class="res">959px</span></a>
                </div>
            </div>
            <a href="#" class="mfn-option-btn btn-large mfn-option-text mfn-option-blank mfn-editor-append" data-val="#id{\r\n\r\n}"><span class="text">#id</span></a>
            <a href="#" class="mfn-option-btn btn-large mfn-option-text mfn-option-blank mfn-editor-append" data-val=".class{\r\n\r\n}"><span class="text">.class</span></a>
            <div class="live-update">
                <div class="mfn-switch">
                    <input id="live-css-update" type="checkbox" ${mfn_live_css.live_update ? `checked` : ''} />
                    <label for="live-css-update" class="switch"></label>
                </div>  
                Live Update
            </div>
            </div>
        `);
        
    },

    css_editor_footer: function() {
        
        if( $('.mfn-live-css-editor .editor-footer').length ) return;

        $('.mfn-live-css-editor').append(`
            <footer class="editor-footer">
                <span class="editor-footer-theme-options-info">Custom CSS is available also in <a href="admin.php?page=be-options#css">Theme Options</a></span>
                <div class="footer-buttons">
                    <a class="mfn-btn mfn-btn btn-live-css-switcher ${mfn_live_css.live_update ? 'disabled' : ''}" href="#"><span class="btn-wrapper">Cancel</span></a>
                    <a class="mfn-btn mfn-btn-blue btn-live-css-editor-save ${mfn_live_css.live_update ? 'disabled' : ''}" href="#"><span class="btn-wrapper">Save changes</span></a>
                </div>
            </footer>
        `);
        
    },

    init_cm: function() {

        if( !$('.mfn-live-css-editor .editor-wrapper.active .css-live-cm-editor').length ) return;
        if( $('.mfn-live-css-editor .editor-wrapper.active .css-live-cm-editor.cm-initialized').length ) return;

        let id = 'mfn-css-live-cm-editor-'+mfn_live_css.tab;
        let type = 'css';
        let editor = $('.mfn-live-css-editor .editor-wrapper.active .css-live-cm-editor');

        editor.attr('id', id);
        editor.addClass('cm-initialized');

        wp.codeEditor.defaultSettings.codemirror.mode = 'text/'+type;

        mfn_live_css.editors[id] = wp.codeEditor.initialize( id, mfn_cm[type] );
        mfn_live_css.editors[id].codemirror.setOption( 'lint', true );
        mfn_live_css.editors[id].codemirror.refresh();

        /*mfn_live_css.editors[id].codemirror.setOption('extraKeys', { 'Ctrl-Space': 'autocomplete' });
        mfn_live_css.editors[id].codemirror.setOption('hintOptions', { completeSingle: false });*/

        /*mfn_live_css.editors[id].codemirror.on('inputRead', function(editor, change) {
          if (change.text[0].match(/[\w-]/)) {
            editor.showHint();
          }
        });*/

        if( mfn_live_css.live_update ) {
            mfn_live_css.editors[id].codemirror.on('blur', function(cm, change) {

                if( mfn_live_css.pending ) return;
                mfn_live_css.pending = true;

                mfn_live_css['update'][mfn_live_css.tab](cm.getValue());
            });
        }

    },

    update: {
        global_css: function(val) {

            mfn['themeoptions']['custom-css'] = val;
            $content.find('style.mfn-be-theme-custom-css').html(val);
            $('.mfn-live-css-editor .btn-live-css-editor-history-undo').addClass('loading');

            $.ajax( mfnajaxurl, {
                type: "POST",
                data: {
                  'mfn-builder-nonce': wpnonce,
                  action: 'mfn_vb_themeoptions',
                  betheme: mfn['themeoptions']
                },
                success: function(response) {
                    mfn_live_css.pending = false;
                    if( $('.mfn-live-css-editor .btn-live-css-editor-save').hasClass('loading') ) $('.mfn-live-css-editor .btn-live-css-editor-save').removeClass('loading disabled');
                    mfn_live_css.backup();
                    $('.mfn-live-css-editor .btn-live-css-editor-history-undo').removeClass('loading');

                    let now_date = new Date();
                    localStorage.setItem('be_live_css_history_time', now_date.getTime());
                }
            });

        },

        page_css: function(val) {

            $('.mfn-live-css-editor .btn-live-css-editor-history-undo').addClass('loading');

            $content.find('style.mfn-be-page-custom-css').html(val);
            mfn['page_options']['mfn-post-css'] = val;
            updatePageOpt('mfn-post-css', val);

        },

        css_variables: function() {

            let title = mfn_live_css.new_var.title;

            if( mfn_live_css.is_editing ) title = mfn_live_css.is_editing;

            let find = mfn.css_variables.filter( (x) => x.title == title );

            if( mfn_live_css.is_editing ) {
                find[0]['value'] = mfn_live_css.new_var.value;
                find[0]['title'] = mfn_live_css.new_var.title;
            }else if(find.length) {
                find[0]['value'] = mfn_live_css.new_var.value;
            }else{
                mfn.css_variables.push(mfn_live_css.new_var);
            }
            
            mfn_live_css.is_editing = false;

            mfn_live_css.new_var = {};
            mfn_live_css.variables_list();

            $('.css-variables-form .mfn-css-variable-save').removeClass('loading');
            $('.css-variables-form .mfn-form-input').val('');

            $('.mfn-builder-tabs .mfn-badge').html( mfn.css_variables.length );

            mfn_live_css['update']['variables_ajax']();
        },

        variables_ajax: function() {
            $('.mfn-live-css-editor .btn-live-css-editor-history-undo').addClass('loading');
            $.ajax( mfnajaxurl, {
                type: "POST",
                data: {
                  'mfn-builder-nonce': wpnonce,
                  action: 'mfn_vb_css_variables',
                  val: mfn['css_variables']
                },
                success: function(response){
                    mfn_live_css.backup();
                    $('.mfn-live-css-editor .btn-live-css-editor-history-undo').removeClass('loading');

                }
            });
        }
    },

    global_css: function() {
        if( $('.mfn-live-css-editor .editor-wrapper.global-css-wrapper').length ){
            $('.mfn-live-css-editor .editor-wrapper.global-css-wrapper').addClass('active');
        }else{
            let html = `<div class="editor-wrapper css-live-cm-editor global-css-wrapper active">
                <textarea class="mfn-global-css-live-editor css-live-cm-editor">${_.has( mfn.themeoptions, 'custom-css' ) ? mfn['themeoptions']['custom-css'] : ''}</textarea>
            </div>`;
            if( $('.mfn-live-css-editor .editor-toolbar-wrapper').length ){
                $('.mfn-live-css-editor .editor-toolbar-wrapper').after(html);
            }else{
                $('.mfn-live-css-editor .editor-header').after(html);
            }
        }
        mfn_live_css.css_editor_tollbar();
        mfn_live_css.css_editor_footer();

        if( !_.has(mfn_live_css.history, mfn_live_css.tab) || mfn_live_css.history[mfn_live_css.tab].length <= 1 ) {$('.mfn-live-css-editor .btn-live-css-editor-history-undo').addClass('disabled');}else{ $('.mfn-live-css-editor .btn-live-css-editor-history-undo').removeClass('disabled'); }
        if( !$('.mfn-live-css-editor .btn-live-css-editor-history-redo').hasClass('disabled') ) $('.mfn-live-css-editor .btn-live-css-editor-history-redo').addClass('disabled');
        if( $('.mfn-live-css-editor .editor-wrapper.active .css-live-cm-editor').length ) mfn_live_css.init_cm();

        $('.mfn-live-css-editor').removeClass('mfn-live-page-css-editor mfn-live-css-variables-editor').addClass('mfn-live-global-css-editor');
    },

    page_css: function() {
        if( $('.mfn-live-css-editor .editor-wrapper.current-page-css-wrapper').length ){
            $('.mfn-live-css-editor .editor-wrapper.current-page-css-wrapper').addClass('active');
        }else{
            let html = `<div class="editor-wrapper css-live-cm-editor current-page-css-wrapper active">
                <textarea class="mfn-page-css-live-editor css-live-cm-editor">${_.has( mfn.page_options, 'mfn-post-css' ) ? mfn['page_options']['mfn-post-css'] : ''}</textarea>
            </div>`;
            if( $('.mfn-live-css-editor .editor-toolbar-wrapper').length ){
                $('.mfn-live-css-editor .editor-toolbar-wrapper').after(html);
            }else{
                $('.mfn-live-css-editor .editor-header').after(html);
            }
        }
        if( !_.has(mfn_live_css.history, mfn_live_css.tab) || mfn_live_css.history[mfn_live_css.tab].length <= 1 ) {$('.mfn-live-css-editor .btn-live-css-editor-history-undo').addClass('disabled');}else{ $('.mfn-live-css-editor .btn-live-css-editor-history-undo').removeClass('disabled'); }
        if( !$('.mfn-live-css-editor .btn-live-css-editor-history-redo').hasClass('disabled') ) $('.mfn-live-css-editor .btn-live-css-editor-history-redo').addClass('disabled');
        mfn_live_css.css_editor_tollbar();
        mfn_live_css.css_editor_footer();
        if( $('.mfn-live-css-editor .editor-wrapper.active .css-live-cm-editor').length ) mfn_live_css.init_cm();

        $('.mfn-live-css-editor').removeClass('mfn-live-css-variables-editor mfn-live-global-css-editor').addClass('mfn-live-page-css-editor');
    },

    css_variables: function() {

        if( $('.mfn-live-css-editor .editor-toolbar').length ) $('.mfn-live-css-editor .editor-toolbar').remove();

        if( $('.mfn-live-css-editor .editor-wrapper.css-variables-wrapper').length ) {
            $('.mfn-live-css-editor .editor-wrapper.css-variables-wrapper').addClass('active');
        }else{
            $('.mfn-live-css-editor').append(`
                <div class="editor-wrapper css-variables-wrapper active">

                <div class="mfn-css-variables">

                    <p class="body-tag">body {</p>

                    <ul class="mfn-css-variables-list"></ul>

                    <div class="mfn-form css-variables-form">
                        <input class="mfn-form-control mfn-form-input mfn-css-var-title" placeholder="--variable-title" type="text" />
                        <span class="variable-sep">=</span>
                        <input class="mfn-form-control mfn-form-input mfn-css-var-value" placeholder="value" type="text" />
                        <a href="#" class="mfn-btn mfn-css-variable-save mfn-btn-blue">Save variable</a>
                    </div>
                    <p class="body-tag">}</p>
                </div>

                </div>
            `);
        }
        if( !_.has(mfn_live_css.history, mfn_live_css.tab) || mfn_live_css.history[mfn_live_css.tab].length <= 1 ) {$('.mfn-live-css-editor .btn-live-css-editor-history-undo').addClass('disabled');}else{ $('.mfn-live-css-editor .btn-live-css-editor-history-undo').removeClass('disabled'); }
        if( !$('.mfn-live-css-editor .btn-live-css-editor-history-redo').hasClass('disabled') ) $('.mfn-live-css-editor .btn-live-css-editor-history-redo').addClass('disabled');
        if( $('.mfn-live-css-editor .editor-footer').length ) $('.mfn-live-css-editor .editor-footer').remove();
        mfn_live_css.variables_list();

        $('.mfn-live-css-editor').removeClass('mfn-live-page-css-editor mfn-live-global-css-editor').addClass('mfn-live-css-variables-editor');
    },

    sortable: function() {
        $('.mfn-live-css-editor .mfn-css-variables-list').sortable({
            axis: 'y',
            cursor: 'ns-resize',
            handle: '.mfn-sort-handle',
            opacity: 0.9,
            update: function(e, ui) {

                let updated_vars = [];


                $('.mfn-live-css-editor .mfn-css-variables-list li').each(function(i, el) {
                    let title = $(el).find('.variable-title').text();
                    updated_vars.push(mfn['css_variables'].filter( (f) => f.title == title )[0]);
                });

                if( updated_vars.length == mfn['css_variables'].length ) {
                    mfn['css_variables'] = updated_vars;
                    setTimeout(function() {
                        mfn_live_css['update']['variables_ajax']();
                    },10);
                }else{
                    console.log('Something went wrong with sorting of variables.');
                }
               

            }
        });
    },

    variables_list: function( arr = false ) {

        let css_html = '';
        let html = '';

        let array = arr ? arr : mfn.css_variables;

        if( array && array.length ) {
            array.map(function(cv) {
                html += `<li>
                  <a class="mfn-option-btn mfn-option-blank mfn-sort-handle" href="#"><span class="mfn-icon mfn-icon-sort"></span></a>
                  <span data-tooltip="Click to copy" data-position="right" class="variable-title">${cv.title}</span>
                  <span class="variable-sep">=</span>
                  <code class="variable-value ${cv.value.includes('#') ? 'variable-color' : ''}">${cv.value.includes('#') ? '<span style="background-color: '+cv.value+';"></span>' : ''} ${cv.value}</code>
                  <div>
                    <a class="mfn-option-btn mfn-option-blank mfn-css-var-action-edit" data-title="${cv.title}" href="#"><span class="mfn-icon mfn-icon-edit"></span></a>
                    <a class="mfn-option-btn mfn-option-blank mfn-css-var-action-delete" data-title="${cv.title}" href="#"><span class="mfn-icon mfn-icon-delete"></span></a>
                  </div>
                </li>`;
                css_html += cv.title+': '+cv.value+';';
            }).join('');
        }

        $('.mfn-live-css-editor ul.mfn-css-variables-list').html(html);
        $content.find('style.mfn-be-variables-custom-css').html(`body{${css_html}}`);

        if( !$('body style.mfn-css-be-variables').length ) $('body').append('<style class="mfn-css-be-variables"></style>');
        $('body style.mfn-css-be-variables').html(`body{${css_html}}`);

        mfn_live_css.sortable();
    },

    hide: function() {
        $('.mfn-ui').removeClass('mfn-live-css-editor-active');
        $('.mfn-live-css-editor').remove();
    }
}














$(document).on('focus', '.mfn-placeholder-inherited-class input[type="text"], .mfn-placeholder-inherited-std input[type="text"], .mfn-placeholder-inherited-rwd input[type="text"], .mfn-placeholder-inherited-class input[type="number"], .mfn-placeholder-inherited-std input[type="number"], .mfn-placeholder-inherited-rwd input[type="number"]', function() {
    $(this).attr('placeholder', $(this).val()).val('');
}).on('blur', '.mfn-placeholder-inherited-std input[type="text"], .mfn-placeholder-inherited-class input[type="text"], .mfn-placeholder-inherited-rwd input[type="text"], .mfn-placeholder-inherited-class input[type="number"], .mfn-placeholder-inherited-std input[type="number"], .mfn-placeholder-inherited-rwd input[type="number"]', function() {
    if( !$(this).val().length && typeof $(this).attr('placeholder') != 'undefined' ) $(this).val( $(this).attr('placeholder') );
});

var mfn_conditional_logic = {
    fill: false,
    init: function() {
        $(document).on('click', '.mfn-conditional-logic-add-button', function(e) {
            e.preventDefault();
            $('.modal-conditional-logic').addClass('show');
            $('.modal-conditional-logic-form').empty();

            mfn_conditional_logic.used();
        });

        mfn_conditional_logic.add();
        mfn_conditional_logic.ui();
    },
    ui: function() {
        $(document).on('change', '.modal-conditional-logic .mfn-cl-row-input.mfn-cl-row-input-type', function(e) {
            e.preventDefault();
            var val = $(this).val();
             $(this).closest('.mfn-cl-row').find('.mfn-cl-row-col .mfn-cl-row-input-variable').removeClass('mfn-cl-row-input-visible');

            if( val.length ){
                $(this).closest('.mfn-cl-row').find('.mfn-cl-row-col-variable').addClass('mfn-cl-row-col-visible');
                $(this).closest('.mfn-cl-row').find('.mfn-cl-row-col .mfn-cl-row-input-variable.mfn-cl-row-input-'+val).addClass('mfn-cl-row-input-visible');
            }else{
                $(this).closest('.mfn-cl-row').find('.mfn-cl-row-col-variable').removeClass('mfn-cl-row-col-visible');
            }
        });

        $(document).on('click', '.modal-conditional-logic .mfn-cl-remove', function(e) {
            e.preventDefault();

            let this_condition = $(this).closest('.mfn-cl-condition');
            let cl_rows = this_condition.find('.mfn-cl-row').length;
            
            if( $(this).closest('.mfn-cl-condition').find('.mfn-cl-row').length == 1 ){
                $(this).closest('.mfn-cl-condition').remove();
            }else{
                $(this).closest('.mfn-cl-row').remove();
            }

            if( cl_rows == 2 ) this_condition.addClass('mfn-cl-condition-single').removeClass('mfn-cl-condition-multiple');

            setTimeout(mfn_conditional_logic.update(), 100);
        });

        $(document).on('change', '.modal-conditional-logic .mfn-cl-row .mfn-cl-row-col .mfn-cl-row-input', function(e) {
            setTimeout(mfn_conditional_logic.update(), 100);
        });
    },
    add: function() {
        $(document).on('click', '.modal-conditional-logic .mfn-cl-add-row', function(e) {
            e.preventDefault();
            $('.modal-conditional-logic-form').append( mfn_conditional_logic.form() );
        });

        $(document).on('click', '.modal-conditional-logic .mfn-cl-and', function(e) {
            e.preventDefault();
            $(this).closest('.mfn-cl-condition').removeClass('mfn-cl-condition-single').addClass('mfn-cl-condition-multiple').append( mfn_conditional_logic.form( true ) );
        });
    },
    form: function(ver = false) {
        let html = '';

        if( !ver ) html += '<div class="mfn-cl-condition mfn-cl-condition-single">';

        if( !mfn.is_woocommerce ) delete(mfn_conditional_logic.options.woocommerce);

        html += `<div class="mfn-cl-row">
            <div class="mfn-cl-row-col">
                <select class="mfn-form-control mfn-form-select mfn-form-select mfn-cl-row-input mfn-cl-row-input-type">
                <option value="">Choose option</option>
                ${ _.map( mfn_conditional_logic.options, (opt, o) => `
                    <optgroup data-type="${o}" label="${opt.label}">
                    ${ _.map( opt.options, (field) => 
                        `<option ${mfn_conditional_logic.fill && mfn_conditional_logic.fill.key == field.id ? 'selected' : '' } value="${field.id}">${field.label}</option>`
                    ).join('') }
                    </optgroup>`
                ).join('') }
                </select>
            </div>

            <div class="mfn-cl-row-col mfn-cl-row-col-variable mfn-cl-row-col-is-or-no ${mfn_conditional_logic.fill && mfn_conditional_logic.fill.key.length ? 'mfn-cl-row-col-visible' : '' }">
                ${ _.map( mfn_conditional_logic.options, (opt, o) => 
                    _.map( opt.options, (field) => 
                        `<select class="mfn-form-control mfn-form-select mfn-cl-row-input mfn-cl-row-input-variable mfn-cl-row-input-is mfn-cl-row-input-${field.id} ${mfn_conditional_logic.fill && mfn_conditional_logic.fill.key == field.id ? 'mfn-cl-row-input-visible' : '' }">
                            ${ _.map( field.conditions, (con, c) =>
                            `<option ${mfn_conditional_logic.fill && mfn_conditional_logic.fill.var == c ? 'selected' : '' } value="${c}">${con}</option>`
                            ).join('') }
                        </select>`
                    ).join('')
                ).join('') }
            </div>

            <div class="mfn-cl-row-col mfn-cl-row-col-variable ${mfn_conditional_logic.fill && mfn_conditional_logic.fill.key.length ? 'mfn-cl-row-col-visible' : '' }">
                ${ _.map( mfn_conditional_logic.options, (opt, o) => `
                    ${ _.map( opt.options, function (field) { 
                        let field_html = '';

                        if( field.input == 'text' ){
                            field_html = `<input type="text" class="mfn-form-control mfn-cl-row-input mfn-cl-row-input-value mfn-cl-row-input-variable mfn-cl-row-input-${field.id} ${mfn_conditional_logic.fill && mfn_conditional_logic.fill.key == field.id ? 'mfn-cl-row-input-visible' : '' }" ${mfn_conditional_logic.fill && mfn_conditional_logic.fill.value.length ? 'value="'+mfn_conditional_logic.fill.value+'"' : '' }>`;
                        }else if( field.input == 'date' ){
                            field_html = `<input type="date" class="mfn-form-control mfn-cl-row-input mfn-cl-row-input-value mfn-cl-row-input-variable mfn-cl-row-input-${field.id} ${mfn_conditional_logic.fill && mfn_conditional_logic.fill.key == field.id ? 'mfn-cl-row-input-visible' : '' }" ${mfn_conditional_logic.fill && mfn_conditional_logic.fill.value.length ? 'value="'+mfn_conditional_logic.fill.value+'"' : '' }>`;
                        }else if( field.input == 'select' ){
                            field_html = `<select class="mfn-form-control mfn-form-select mfn-cl-row-input mfn-cl-row-input-value mfn-cl-row-input-variable mfn-cl-row-input-${field.id} ${mfn_conditional_logic.fill && mfn_conditional_logic.fill.key == field.id ? 'mfn-cl-row-input-visible' : '' }">
                                ${ _.map( field.options, (field_opt, f) =>
                                typeof field_opt == 'object' ? `<option ${mfn_conditional_logic.fill && mfn_conditional_logic.fill.value == field_opt.name ? 'selected' : '' } value="${field_opt.name}">${field_opt.label}</option>` : `<option ${mfn_conditional_logic.fill && mfn_conditional_logic.fill.value == f ? 'selected' : '' } value="${f}">${field_opt}</option>`
                                
                                ).join('') }
                            </select>`;
                        }else if( field.input == 'select_2' ){
                            field_html = `<div class="form-group mfn-select2-wrapper mfn-cl-row-input mfn-cl-row-input-value mfn-cl-row-input-variable mfn-cl-row-input-${field.id} ${mfn_conditional_logic.fill && mfn_conditional_logic.fill.key == field.id ? 'mfn-cl-row-input-visible' : '' }">
                                <div class="form-control"><input type="text" ${mfn_conditional_logic.fill.value && _.has(mfn_conditional_logic.fill.value, 'label') ? `value="${mfn_conditional_logic.fill.value.label}"` : ''} ${mfn_conditional_logic.fill.value ? `data-selected='${ JSON.stringify(mfn_conditional_logic.fill.value) }'` : ''} class="mfn-select2-input" data-get="${field.options}" placeholder="Start typing (min. 3 chars) or select available one"></div>
                                <ul class="mfn-select2-options"></ul>
                            </div>`;
                        }

                        return field_html;
                    }).join('') } `
                ).join('') }
            </div>

            <div class="mfn-cl-row-col mfn-cl-row-col-tools">
                <a class="mfn-option-btn mfn-option-blank btn-large mfn-cl-and" title="AND" href="#">AND</a>
                <a class="mfn-option-btn mfn-option-blank btn-large mfn-cl-remove" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a>
            </div>

        </div>`;

        if( !ver ) html += '</div>';

        mfn_conditional_logic.fill = false;
        
        return html;

    },
    used: function() {
        if( !_.has(edited_item, 'attr') ) return;
        if( !_.has(edited_item.attr, 'conditions') ) return;
        if( !edited_item.attr.conditions.length ) return;

        _.map( edited_item.attr.conditions, function(used_opt) {
            if( used_opt.length ) {
                _.map( used_opt, function(opt, o) {
                    mfn_conditional_logic.fill = opt;
                    if( o == 0 ){
                        $('.modal-conditional-logic-form').append( mfn_conditional_logic.form() );
                    }else{
                        $('.modal-conditional-logic-form .mfn-cl-condition:last-child').removeClass('mfn-cl-condition-single').addClass('mfn-cl-condition-multiple').append( mfn_conditional_logic.form(true) );
                    }
                });
            }
        });

    },
    options: {
        'singular': {
            label: 'Singular',
            options: [
                { id: 'post_type',          label: 'Post type',         input: 'select',            conditions: { 'is': 'is', 'isnt': 'is not'},       options: mfn.post_types },
                { id: 'post_taxonomy',      label: 'Post taxonomy',     input: 'select_2',          conditions: { 'is': 'is', 'isnt': 'is not'},       options: 'taxonomies' },
                { id: 'post',               label: 'Post',              input: 'select_2',          conditions: { 'is': 'is', 'isnt': 'is not'},       options: 'posts' },
                { id: 'featured_image',     label: 'Featured image',    input: 'select',            conditions: { 'is': 'is'},                         options: {'set': 'Set', 'not-set': 'Not set'} },
                { id: 'excerpt',            label: 'Excerpt',           input: 'select',            conditions: { 'is': 'is'},                         options: {'set': 'Set', 'not-set': 'Not set'} },
            ],
        },
        'archive': {
            label: 'Archive',
            options: [
                { id: 'post_type_archive',              label: 'Post type archive',         input: 'select',        conditions: { 'is': 'is', 'isnt': 'is not'},     options: mfn.post_types },
                { id: 'archive_category',               label: 'Archive category',          input: 'select_2',      conditions: { 'is': 'is', 'isnt': 'is not'},     options: 'taxonomies' },
            ],
        },
        'user': {
            label: 'User',
            options: [
                { id: 'login_status',           label: 'Login status',              input: 'select',        conditions: { 'is': 'is'},                          options: {'non_logged': 'Non logged', 'logged_in': 'Logged in'} },
                { id: 'user_role',              label: 'User role',                 input: 'select',        conditions: { 'is': 'is', 'isnt': 'is not'},        options: mfn.user_roles },
            ]
        },
        'woocommerce': {
            label: 'Woocommerce',
            options: [
                { id: 'has_purchased',               label: 'User has',              input: 'select_2',          conditions: { 'is': 'Purchased', 'isnt': 'Not Purchased' },       options: 'products' },
            ],
        },
        'dates': {
            label: 'Dates',
            options: [
                { id: 'part_of_the_week',        label: 'Part of the week',     input: 'select',     conditions: { 'is': 'is', 'isnt': 'is not'},       options: {'weekend': 'Weekend', 'monday-friday': 'Monday - Friday', 'monday': 'Monday', 'tuesday': 'Tuesday', 'wednesday': 'Wednesday', 'thursday': 'Thursday', 'friday': 'Friday', 'saturday': 'Saturday', 'sunday': 'Sunday'} },
                { id: 'date',                    label: 'Date',                 input: 'date',       conditions: { 'is': 'is', 'isnt': 'is not'} },
            ]
        }
    },
    update: function() {
        var conditions = [];

        if( $('.modal-conditional-logic .mfn-cl-condition').length ) {
            $('.modal-conditional-logic .mfn-cl-condition').each(function() {
                var cond = $(this);
                var cond_uid = cond.attr('data-uid');
                var cond_obj = [];

                if( cond.find('.mfn-cl-row').length ) {
                    cond.find('.mfn-cl-row').each(function() {
                        var row = $(this);
                        var val = row.find('.mfn-cl-row-col-visible .mfn-cl-row-input-value.mfn-cl-row-input-visible').val();

                        if( row.find('.mfn-cl-row-col-visible .mfn-cl-row-input-value.mfn-cl-row-input-visible').find('.mfn-select2-input').length && typeof row.find('.mfn-cl-row-col-visible .mfn-cl-row-input-value.mfn-cl-row-input-visible .mfn-select2-input').attr('data-selected') !== 'undefined' ) {
                            val = JSON.parse(row.find('.mfn-cl-row-col-visible .mfn-cl-row-input-value.mfn-cl-row-input-visible .mfn-select2-input').attr('data-selected'));
                        }

                        if( row.find('.mfn-cl-row-input-type').val().length ) {
                            cond_obj.push({
                                key: row.find('.mfn-cl-row-input-type').val(),
                                var: row.find('.mfn-cl-row-col-is-or-no.mfn-cl-row-col-visible .mfn-cl-row-input-is.mfn-cl-row-input-visible').val(),
                                value: val,
                            });
                        }

                    });
                    conditions.push(cond_obj);
                }
            });
        }

        if( !_.isEmpty(conditions) ){
            if( !_.has(edited_item, 'attr') ) $edited_item['attr'] = {};

            edited_item['attr']['conditions'] = conditions;
        }else if(typeof edited_item.attr.conditions !== 'undefined' ){
            delete(edited_item.attr.conditions);
        }

        if($('.mfn-form-row.conditional_logic .mfn-used-conditional-logic').length) $('.mfn-form-row.conditional_logic .mfn-used-conditional-logic').remove();
        $('.mfn-form-row.conditional_logic .mfn-conditional-logic-add-button').before(mfn_field_logic_sidebar_used());
        
    }
}

function removeStartBuilding() {
    if($builder.find('.mfn-section-start').length) {
        $content.find('body').removeClass('mfn-ui-empty-page');
        $builder.find('.mfn-section-start').remove();
    }
}

// shortcode remove icon

$('.modal-add-shortcode .browse-icon .mfn-button-delete').on('click', function(e) {
    e.preventDefault();
    $('.modal-add-shortcode.show .browse-icon .mfn-form-control').val(sample_icon).trigger('change');
    $('.modal-add-shortcode.show .form-addon-prepend .mfn-button-upload .label i').attr('class', sample_icon);
});

// choose icon
$('.mfn-modal.modal-select-icon .mfn-items-list li a').on('click', function(e) {
    e.preventDefault();

    let icon = $(this).find('i').attr('class');
    $(this).parent().addClass('active');

    if( $('.modal-add-shortcode').hasClass('show') ) {
        // for shortcode
        $('.modal-add-shortcode.show .browse-icon .mfn-form-control').val(icon).trigger('change');
        $('.modal-add-shortcode.show .browse-icon.has-addons-prepend').removeClass('empty');
        $('.modal-add-shortcode.show .browse-icon .form-addon-prepend .mfn-button-upload .label i').attr('class', icon);
        $('.modal-select-icon.show').removeClass('show');
    }else{
        // for sidebar
        var $input = $('.sidebar-panel-content .mfn-form-row .browse-icon.current-icon-editing .mfn-field-value, .sidebar-panel-content .mfn-form-row .browse-icon.current-icon-editing .field-to-object');
        $input.val(icon).trigger('change');
        $('.sidebar-panel-content .mfn-form-row .browse-icon.current-icon-editing').removeClass('empty current-icon-editing');
        $('.mfn-modal').removeClass('show');
    }
});

// delete icon
$editpanel.on('click', '.browse-icon .mfn-button-delete', function(e) {
    e.preventDefault();
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let group = $(this).closest('.mfn-element-fields-wrapper').attr('data-group');

    $editbox = $(this).closest('.form-control');
    $('.mfn-field-value,.mfn-tab-icon', $editbox).val('').trigger('change');

});


$editpanel.on('change', '.mfn-form-row .browse-icon .mfn-field-value, .mfn-form-row .browse-icon .field-to-object', function() {
    var $input = $(this);
    var $editrow = $(this).closest('.mfn-form-row');
    let it;

    if( $(this).closest('.mfn-element-fields-wrapper').length ){
        it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    }

    let icon = $(this).val();

    if( icon != '' ){

        $(this).closest('.mfn-form-row').find('.form-addon-prepend .mfn-button-upload .label i').attr('class', icon);
        $(this).closest('.mfn-form-row').find('.browse-icon').removeClass('empty');

        // console.log('# icon change');

        if( isBlocks() ){
          $content.find('.'+it+' .item-preview-icon i').attr('class',icon).removeClass('empty');
        } else if($content.find('.'+it).hasClass('column_counter')){
            // counter
            if( $content.find('.'+it+' .icon_wrapper').length ){
                if($content.find('.'+it+' .icon_wrapper i').length){
                    $content.find('.'+it+' .icon_wrapper i').attr('class', icon);
                }else{
                    $content.find('.'+it+' .icon_wrapper').html('<i class="'+icon+'"></i>');
                }
            }else{
                $content.find('.'+it+' .counter').prepend('<div class="icon_wrapper"><i class="'+icon+'"></i></div>');
            }
        }else if($content.find('.'+it).hasClass('column_flat_box')){
            // flat box
            if($content.find('.'+it+' .icon i').length){
                $content.find('.'+it+' .icon i').attr('class', icon);
            }else{
                $content.find('.'+it+' .icon').html('<i class="'+icon+'"></i>');
            }
        }else if($content.find('.'+it).hasClass('column_icon_box')){
            // icon box
            if($content.find('.'+it+' .icon_wrapper .icon i').length){
                $content.find('.'+it+' .icon_wrapper .icon i').attr('class', icon);
            }else{
                if($content.find('.'+it+' .icon_box .image_wrapper').length){ $content.find('.'+it+' .icon_box .image_wrapper').remove(); }
                $content.find('.'+it+' .icon_box').prepend('<div class="icon_wrapper"><div class="icon"><i class="'+icon+'"></i></div></div>');
            }
        }else if($content.find('.'+it).hasClass('column_icon_2')){
            // icon
            $content.find('.'+it+' .mfn-icon-2 i').attr('class', icon);
        }else if($content.find('.'+it).hasClass('column_list')){
            // list
            if($content.find('.'+it+' .list_left i').length){
                $content.find('.'+it+' .list_left i').attr('class', icon);
            }else{
                $content.find('.'+it+' .list_left').removeClass('list_image').addClass('list_icon').html('<i class="'+icon+'"></i>');
            }
        }else if($content.find('.'+it).hasClass('column_fancy_heading')){
            // fancy heading
            if($content.find('.'+it+' .icon_top i').length){
                $content.find('.'+it+' .icon_top i').attr('class', icon);
            }else{
                $content.find('.'+it+' .fh-top').html('<div class="icon_top"><i class="'+icon+'"></i></div>');
            }
        }else if($content.find('.'+it).hasClass('column_call_to_action')){
            // call to action
            if($content.find('.'+it+' .call_center i').length){
                $content.find('.'+it+' .call_center i').attr('class', icon);
            }else{
                $content.find('.'+it+' .call_center').html('<i class="'+icon+'"></i>');
            }
            if( $content.find('.'+it+' .call_center .button').length ){
                $content.find('.'+it+' .call_center .button').addClass('has-icon');
            }
        }else if($content.find('.'+it).hasClass('column_hotspot')){
            // hotspot icon
            var point_id = $editrow.closest('.mfn-hotspot-point').attr('id');
            $content.find('.'+it+' .hotspot-point-'+point_id+' i').attr('class', icon);
        }else if($content.find('.'+it).hasClass('column_button')){
            // button
            if($content.find('.'+it+' .button .button_icon i').length){
                $content.find('.'+it+' .button .button_icon i').attr('class', icon);
            }else{
                $content.find('.'+it+' .button').prepend('<span class="button_icon"><i class="'+icon+'"></i></span>');
                $content.find('.'+it+' .button').addClass('has-icon');
            }
        }else if($content.find('.'+it).hasClass('column_chart')){
            // chart
            if($content.find('.'+it+' .chart .icon i').length){
                $content.find('.'+it+' .chart .icon i').attr('class', icon);
            }else{
                if( !$content.find('.'+it+' .chart > .image').length ){
                    $content.find('.'+it+' .chart > .image').remove();
                    $content.find('.'+it+' .chart > .num').remove();
                    $content.find('.'+it+' .chart').prepend('<div class="icon"><i class="'+icon+'"></i></div>');
                }else{
                    $content.find('.'+it+' .chart').append('<span class="mfn_tmp_info">The picture has higher priority. Delete it to see icon.</span>');
                    setTimeout(function() {
                        $content.find('.mfn_tmp_info').remove();
                    }, 3000);
                }

            }
        }else if($content.find('.'+it).hasClass('column_header_icon')){
            // header icon
            $content.find('.'+it+' .icon-wrapper i').remove();
            $content.find('.'+it+' .icon-wrapper img').remove();
            $content.find('.'+it+' .icon-wrapper svg').remove();
            if($content.find('.'+it+' .icon-wrapper').length){
                $content.find('.'+it+' .icon-wrapper').prepend('<i class="'+icon+'"></i>');
            }
        }else if($content.find('.'+it).hasClass('column_accordion')){
            // accordion icon
            if( $editrow.hasClass('accordion icon_active') ){
                $content.find('.'+it+' .accordion .question .title .acc-icon-minus').attr('class', 'acc-icon-minus '+icon);
            }else{
                $content.find('.'+it+' .accordion .question .title .acc-icon-plus').attr('class', 'acc-icon-plus '+icon);
            }
        }else if($content.find('.'+it).hasClass('column_blockquote')){
            // blockquote icon
            if( $editrow.hasClass('icon_author') ){
                $content.find('.'+it+' .blockquote .author i').attr('class', icon);
            }else{
                $content.find('.'+it+' .blockquote .mfn-blockquote-icon i').attr('class', icon);
            }
        }else if($content.find('.'+it).hasClass('column_icon_box_2')){
            // icon box 2
            if($content.find('.'+it+' .icon-wrapper img').length) return;

            if($content.find('.'+it+' .icon-wrapper').length){

                if( $editrow.hasClass('icon') && $content.find('.'+it+' .icon-wrapper .primary').length ){
                    $content.find('.'+it+' .icon-wrapper .primary').attr('class', icon+' primary');
                }else if( $editrow.hasClass('icon_hover') ){
                    if( $content.find('.'+it+' .icon-wrapper .secondary').length ){
                        $content.find('.'+it+' .icon-wrapper .secondary').attr('class', icon+' secondary');
                    }else{
                        $content.find('.'+it+' .icon-wrapper').append('<i class="'+icon+' secondary" aria-hidden="true"></i>');
                    }
                    
                }
                
            }else{
                $content.find('.'+it+' .desc-wrapper').before('<div class="icon-wrapper"><i class="'+icon+'" aria-hidden="true"></i></div>');
            }
        }else if($content.find('.'+it).hasClass('column_header_menu') && $editrow.hasClass('header_menu') && $editrow.hasClass('submenu_icon') ){
            // header menu submenu icon
            if($content.find('.'+it+' .menu-sub').length){
                $content.find('.'+it+' .menu-sub').html('<i class="'+icon+'" aria-hidden="true"></i>');
            }
        }else if($editrow.hasClass('wrap tab_icon')){

            if( !edited_item.attr?.tab_title ) $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-title').text('');

            if( !$content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-li-icon').length ) {
                $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-li-wrapper').prepend('<div class="mfn-tabber-nav-li-icon" />')
            }else if( $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-li-icon img').length ){
                return false;
            }

            $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-li-icon').html('<i class="'+icon+'" aria-hidden="true"></i>');

        }else if($content.find('.'+it).hasClass('column_sidemenu_menu') && $editrow.hasClass('sidemenu_menu') && $editrow.hasClass('submenu_icon') ){
            // header menu submenu icon
            if($content.find('.'+it+' .outer-menu-sub').length){
                $content.find('.'+it+' .outer-menu-sub').html('<i class="'+icon+'" aria-hidden="true"></i>');
            }
        }else if($content.find('.'+it).hasClass('column_header_search')){
            // header search icon
            if($content.find('.'+it+' .icon_search').length){
                $content.find('.'+it+' .icon_search').replaceWith('<span class="icon_search"><i class="'+icon+'" aria-hidden="true"></i></span>');
            }else{
                $content.find('.'+it+' form#searchform').prepend('<span class="icon_search"><i class="'+icon+'" aria-hidden="true"></i></span>');
            }
        }else if($content.find('.'+it).hasClass('column_megamenu_menu') && $editrow.hasClass('megamenu_menu submenu_icon') ){
            // megamenu submenu icon
            if($content.find('.'+it+' .menu-sub').length){
                $content.find('.'+it+' .menu-sub i').attr('class', icon);
            }else{
                $content.find('.'+it+' li.menu-item-has-children > a').append('<span class="menu-sub"><i class="'+icon+'" aria-hidden="true"></i></span>');
            }
        }else if($content.find('.'+it).hasClass('column_megamenu_menu') && $editrow.hasClass('megamenu_menu decoration_icon') ){
            // megamenu decoration icon
            if($content.find('.'+it+' .decoration-icon').length){
                $content.find('.'+it+' .decoration-icon i').attr('class', icon);
            }else{
                $content.find('.'+it+' li:not(.menu-item-has-children) > a').append('<span class="decoration-icon"><i class="'+icon+'" aria-hidden="true"></i></span>');
            }
        }else if($content.find('.'+it).hasClass('column_share') && $editrow.hasClass('copy_link_icon') ){
            // copy link icon
            $content.find('.'+it+' .mfn-share-post-copy-link i').attr('class', icon);
        }else if($content.find('.'+it).hasClass('column_share') && $editrow.hasClass('facebook_icon') ){
            // facebook icon
            $content.find('.'+it+' .mfn-share-post-facebook i').attr('class', icon);
        }else if($content.find('.'+it).hasClass('column_share') && $editrow.hasClass('twitter_icon') ){
            // twitter icon
            $content.find('.'+it+' .mfn-share-post-twitter i').attr('class', icon);
        }else if($content.find('.'+it).hasClass('column_share') && $editrow.hasClass('linkedin_icon') ){
            // linkedin icon
            $content.find('.'+it+' .mfn-share-post-linkedin i').attr('class', icon);
        }else if($content.find('.'+it).hasClass('column_header_burger') && $editrow.hasClass('icon')){
            // header menu burger
            if($content.find('.'+it+' .icon-wrapper').length){
                $content.find('.'+it+' .icon-wrapper img').remove();
                $content.find('.'+it+' .icon-wrapper i').remove();
                $content.find('.'+it+' .icon-wrapper svg').remove();
                $content.find('.'+it+' .icon-wrapper').html('<i class="'+icon+'" aria-hidden="true"></i>');
            }else{
                $content.find('.'+it+' .mfn-icon-box').prepend('<div class="icon-wrapper"><i class="'+icon+'" aria-hidden="true"></i></div>');
            }
        }else if( $editrow.hasClass('progress_icons') && $content.find('.'+it+' .progress_icon i').length ) {
            $content.find('.'+it+' .progress_icon i').attr('class', icon);
        }else if( $editrow.hasClass('query_display_slider_arrow_prev') || $editrow.hasClass('custom_arrow_prev') ){
            $content.find('.'+it+' .swiper-button-prev i').attr('class', icon);
        }else if( $editrow.hasClass('query_display_slider_arrow_next') || $editrow.hasClass('custom_arrow_next') ){
            $content.find('.'+it+' .swiper-button-next i').attr('class', icon);
        }else if( $editrow.hasClass('cta_icon') && $editrow.hasClass('banner_box') ){
            $content.find('.'+it+' .mfn-banner-box .cta-icon i').attr('class', icon);
            mfnBannerBox();
        }else if($content.find('.'+it).hasClass('column_popup_exit') && $editrow.hasClass('popup_exit icon') ){
            // exit popup close popup icon
            if($content.find('.'+it+' .button_icon').length){
                if( !$content.find('.'+it+' .button_icon img').length ) $content.find('.'+it+' .button_icon').html('<i class="'+icon+'"></i>');
            }else{
                $content.find('.'+it+' .exit-mfn-popup').addClass('has-icon');
                $content.find('.'+it+' .exit-mfn-popup').prepend('<span class="button_icon"><i class="'+icon+'"></i></span>');
            }
        }
    }else{

        $(this).closest('.mfn-form-row').find('.form-addon-prepend .mfn-button-upload .label i').attr('class', sample_icon);
        $(this).closest('.mfn-form-row').find('.mfn-field-value').val('');
        $(this).closest('.mfn-form-row').find('.browse-icon').addClass('empty');

        // console.log('# preview icon');

        if( isBlocks() ){
          $content.find('.'+it+' .item-preview-icon i').removeAttr('class');
        } else if($content.find('.'+it).hasClass('column_counter')){
            // counter
            if($('.mfn-ui .panel-edit-item .mfn-form .mfn-form-control.preview-imageinput').val().length){
                $content.find('.'+it+' .icon_wrapper').html( $('.mfn-ui .panel-edit-item .mfn-form .mfn-form-control.preview-imageinput').val() );
            }else{
                $content.find('.'+it+' .icon_wrapper').remove();
            }
        }else if($content.find('.'+it).hasClass('column_flat_box')){
            // flat box
            if($content.find('.'+it+' .icon i').length){
                $content.find('.'+it+' .icon i').attr('class', sample_icon);
            }
        }else if($content.find('.'+it).hasClass('column_icon_2')){
            // icon
            $content.find('.'+it+' .mfn-icon-2 i').attr('class', `icon-lamp`);
        }else if($content.find('.'+it).hasClass('column_icon_box_2')){
            // icon box
            $content.find('.'+it+' .icon_wrapper').remove();
            if( $('.mfn-ui .panel-edit-item .mfn-form .mfn-form-control.preview-imageinput').val().length ){
                $content.find('.'+it+' .icon_box').prepend(' <div class="image_wrapper"><img src=" '+ $('.mfn-ui .panel-edit-item .mfn-form .mfn-form-control.preview-imageinput').val() +' " class="scale-with-grid" alt=""></div> ');
            }else{
                 $content.find('.'+it+' .icon_wrapper .icon i').attr('class', sample_icon+' primary');
                 //$('.panel-edit-item .mfn-form-row.icon .preview-iconinput').val(sample_icon);
            }
        }else if($content.find('.'+it).hasClass('column_list')){
            // list
            if($content.find('.'+it+' .list_left i').length){
                $content.find('.'+it+' .list_left i').attr('class', sample_icon);
            }
        }else if($content.find('.'+it).hasClass('column_fancy_heading')){
            // fancy heading
            if($content.find('.'+it+' .icon_top i').length){
                $content.find('.'+it+' .icon_top i').attr('class', sample_icon);
            }
        }else if($content.find('.'+it).hasClass('column_call_to_action')){
            // call to action
            if($content.find('.'+it+' .call_center i').length){
                $content.find('.'+it+' .call_center i').attr('class', '');
            }
            if( $content.find('.'+it+' .call_center .button').length ){
                $content.find('.'+it+' .call_center .button').removeClass('has-icon');
                $content.find('.'+it+' .call_center .button .button_icon').remove();
            }
        }else if($content.find('.'+it).hasClass('column_button')){
            // button
            if($content.find('.'+it+' .button .button_icon i').length){
                $content.find('.'+it+' .button .button_icon').remove();
                $content.find('.'+it+' .button').removeClass('has-icon');
            }
        }else if($content.find('.'+it).hasClass('column_hotspot')){
            // hotspot icon
            var point_id = $editrow.closest('.mfn-hotspot-point').attr('id');
            $content.find('.'+it+' .hotspot-point-'+point_id+' i').attr('class', 'icon-plus');
        }else if($content.find('.'+it).hasClass('column_chart')){
            // chart
            if($content.find('.'+it+' .chart .icon').length){
                $content.find('.'+it+' .chart .icon').remove();

                if( $('.panel-edit-item .mfn-form .preview-imageinput').val().length ){
                    $content.find('.'+it+' .chart .num').remove();
                    $content.find('.'+it+' .chart .icon').remove();
                    $content.find('.'+it+' .chart').prepend('<div class="image"><img class="scale-with-grid" src="'+$('.panel-edit-item .mfn-form .preview-imageinput').val()+'" alt="" /></div>');
                }else if( $('.panel-edit-item .mfn-form .preview-labelinput').val().length ){
                    $content.find('.'+it+' .chart .num').remove();
                    $content.find('.'+it+' .chart .image').remove();
                    $content.find('.'+it+' .chart').prepend('<div class="num">'+$('.panel-edit-item .preview-labelinput').val()+'</div>');
                }

            }
        }else if($content.find('.'+it).hasClass('column_header_icon')){
            // header icon
            re_render();
        }else if($content.find('.'+it).hasClass('column_blockquote')){
            // blockquote icon
            if( $editrow.hasClass('icon_author') ){
                $content.find('.'+it+' .blockquote .author i').attr('class', 'icon-user');
            }else{
                $content.find('.'+it+' .blockquote .mfn-blockquote-icon i').attr('class', 'icon-quote');
            }
        }else if($content.find('.'+it).hasClass('column_icon_box_2')){
            // icon box 2
            if( $editpanel.find('.panel-edit-item .mfn-form .icon_box_2.image .preview-imageinput').val().length ){
                if($content.find('.'+it+' .icon-wrapper').length){
                    $content.find('.'+it+' .icon-wrapper').html('<img class="scale-with-grid" src="'+$editpanel.find('.panel-edit-item .mfn-form .icon_box_2.image .preview-imageinput').val()+'" alt="">');
                }else{
                    $content.find('.'+it+' .desc-wrapper').before('<div class="icon-wrapper"><img class="scale-with-grid" src="'+$editpanel.find('.panel-edit-item .mfn-form .icon_box_2.image .preview-imageinput').val()+' alt=""></div>');
                }
            }else if( $editpanel.find('.panel-edit-item .mfn-form .icon_box_2.label .mfn-field-value').val().length ){
                if( $content.find('.'+it+' .icon-wrapper').length ){
                    $content.find('.'+it+' .icon-wrapper').html('<span class="icon-label">'+$editpanel.find('.panel-edit-item .mfn-form .icon_box_2.label .mfn-field-value').val()+'</span>');
                }else{
                    $content.find('.'+it+' .desc-wrapper').before('<div class="icon-wrapper"><span class="icon-label">'+$editpanel.find('.panel-edit-item .mfn-form .icon_box_2.label .mfn-field-value').val()+'</span></div>');
                }
            }else{
                $content.find('.'+it+' .icon-wrapper').remove();
            }
        }else if($content.find('.'+it).hasClass('column_header_menu') && $editrow.hasClass('header_menu') && $editrow.hasClass('submenu_icon') ){
            // header menu submenu icon
            $content.find('.'+it+' .menu-sub').html('');
            $editpanel.find('.header_menu.submenu_icon_display ul.preview-submenu_icon_displayinput li:first-child a').trigger('click');
        }else if($content.find('.'+it).hasClass('column_sidemenu_menu') && $editrow.hasClass('sidemenu_menu') && $editrow.hasClass('submenu_icon') ){
            // header menu submenu icon
            $content.find('.'+it+' .outer-menu-sub').html('');
        }else if($editrow.hasClass('wrap tab_icon')){

            if( !$content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-li-icon img').length ){
                $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-li-icon').remove();
            }

            $('.mfn-form-row.tab_title .mfn-field-value').trigger('change');
        

        }else if($content.find('.'+it).hasClass('column_megamenu_menu') && $editrow.hasClass('megamenu_menu submenu_icon') ){
            // megamenu submenu icon
            if($content.find('.'+it+' .menu-sub').length){
                $content.find('.'+it+' .menu-sub').remove();
            }
        }else if($content.find('.'+it).hasClass('column_share') && $editrow.hasClass('copy_link_icon') ){
            // copy link icon
            $content.find('.'+it+' .mfn-share-post-copy-link i').attr('class', 'far fa-copy');
        }else if($content.find('.'+it).hasClass('column_share') && $editrow.hasClass('facebook_icon') ){
            // facebook icon
            $content.find('.'+it+' .mfn-share-post-facebook i').attr('class', 'icon-facebook');
        }else if($content.find('.'+it).hasClass('column_share') && $editrow.hasClass('twitter_icon') ){
            // twitter icon
            $content.find('.'+it+' .mfn-share-post-twitter i').attr('class', 'icon-x-twitter');
        }else if($content.find('.'+it).hasClass('column_share') && $editrow.hasClass('linkedin_icon') ){
            // linkedin icon
            $content.find('.'+it+' .mfn-share-post-linkedin i').attr('class', 'icon-linkedin');
        }else if($content.find('.'+it).hasClass('column_header_search')){
            // header search icon
            if($content.find('.'+it+' .icon_search').length){
                $content.find('.'+it+' .icon_search').replaceWith('<svg class="icon_search" width="26" viewBox="0 0 26 26" aria-label="search icon"><defs><style>.path{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs><circle class="path" cx="11.35" cy="11.35" r="6"></circle><line class="path" x1="15.59" y1="15.59" x2="20.65" y2="20.65"></line></svg>');
            }else{
                $content.find('.'+it+' form#searchform').prepend('<svg class="icon_search" width="26" viewBox="0 0 26 26" aria-label="search icon"><defs><style>.path{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs><circle class="path" cx="11.35" cy="11.35" r="6"></circle><line class="path" x1="15.59" y1="15.59" x2="20.65" y2="20.65"></line></svg>');
            }
        }else if($content.find('.'+it).hasClass('column_megamenu_menu') && $editrow.hasClass('megamenu_menu decoration_icon') ){
            // megamenu decoration icon
            if($content.find('.'+it+' .decoration-icon').length){
                $content.find('.'+it+' .decoration-icon').remove();
            }
        }else if($content.find('.'+it).hasClass('column_header_burger') && $content.find('.'+it).hasClass('column_header_burger') && $editrow.hasClass('icon')){
            // header menu burger
            if( $content.find('.'+it+' .icon-wrapper').length && $('.mfn-ui .panel-edit-item .mfn-form .header_burger.image .mfn-form-control.preview-imageinput').val().length ){
                $content.find('.'+it+' .icon-wrapper i').remove();
                $content.find('.'+it+' .icon-wrapper').prepend('<img src="'+$('.mfn-ui .panel-edit-item .mfn-form .header_burger.image .mfn-form-control.preview-imageinput').val()+'" alt="">');
            }else{
                $content.find('.'+it+' .icon-wrapper i').attr('class', 'icon-menu-fine');
            }
        }else if($content.find('.'+it).hasClass('column_accordion')){
            // accordion icon
            if( $editrow.hasClass('accordion icon_active') ){
                $content.find('.'+it+' .accordion .question .title .acc-icon-minus').attr('class', 'acc-icon-minus icon-minus');
            }else{
                $content.find('.'+it+' .accordion .question .title .acc-icon-plus').attr('class', 'acc-icon-plus icon-plus');
            }
        }else if( $editrow.hasClass('progress_icons') && $content.find('.'+it+' .progress_icon i').length ) {
            $content.find('.'+it+' .progress_icon i').attr('class', 'icon-lamp');
        }else if( $editrow.hasClass('query_display_slider_arrow_prev') || $editrow.hasClass('custom_arrow_prev') ){
            $content.find('.'+it+' .swiper-button-prev i').attr('class', 'icon-left-open-big');
        }else if( $editrow.hasClass('cta_icon') && $editrow.hasClass('banner_box') ){
            $content.find('.'+it+' .mfn-banner-box .cta-icon i').attr('class', 'icon-right-1');
            mfnBannerBox();
        }else if( $editrow.hasClass('query_display_slider_arrow_next') || $editrow.hasClass('custom_arrow_next') ){
            $content.find('.'+it+' .swiper-button-next i').attr('class', 'icon-right-open-big');
        }else if($content.find('.'+it).hasClass('column_popup_exit') && $editrow.hasClass('popup_exit icon') ){
            // exit popup close popup icon
            if( $('.mfn-form-row.popup_exit.image .mfn-field-value') && $content.find('.'+it+' .button_icon img').length ){
                return;
            }else{
                $content.find('.'+it+' .exit-mfn-popup').removeClass('has-icon');
                $content.find('.'+it+' .button_icon').remove();
            }
        }
    }

});


var presets = {
    init: function() {
        presets.show();
        presets.set();
        presets.export();
    },
    export: function() {
        $('.panel-export-import-presets .mfn-export-presets-button').on('click', function(e) {
            e.preventDefault();
            var $button = $(this);
            $('#export-presets-data-textarea').select();
            document.execCommand("copy");
            $button.find('span').text('Exported').addClass('mfn-icon-check-blue');
            setTimeout(function() { $button.find('span').html('Export'); }, 5000);
        });

        $('.panel-export-import-presets .mfn-import-presets-button').on('click', function(e) {
            e.preventDefault();
            var $input = $('.panel-export-import-presets #import-presets-data-textarea');
            var $button = $(this);
            $input.removeClass('error');

            if($button.hasClass('loading')) return false;

            if( !$input.val().length ){
                $input.addClass('error');
            }else{
                $button.addClass('loading');
                $.ajax({
                    url: mfnajaxurl,
                    data: {
                        action: 'mfnimportpreset',
                        'mfn-builder-nonce': wpnonce,
                        val: JSON.parse( $input.val() )
                    },
                    type: 'POST',
                    success: function(response){
                        $button.removeClass('loading').find('span').html('Imported');
                        setTimeout(function() { $button.find('span').html('Import'); }, 5000);
                        $input.val('');

                        mfn.presets = [];
                        mfn.presets = response;
                    }
                });
            }
        });
    },
    set: function() {
        $editpanel.on('click', '.mfn-ui .mfn-presets-list a.mfn-load-preset', function(e) {
            e.preventDefault();
            if( $(this).hasClass('loading') ) return;
            $(this).addClass('loading');
            var rerender = false;
            historyStorage.allow = false;

            var uid = $(this).attr('data-uid');

            var styles = mfn.presets.filter( (item) => item.uid == uid ).length ? JSON.parse( JSON.stringify(mfn.presets.filter( (item) => item.uid == uid )[0] )) : false;

            if( !styles || typeof styles.attr == 'undefined' || typeof edited_item.attr == 'undefined' ) {
                $('.mfn-presets-list .dropdown-wrapper a').removeClass('loading');
                return;
            }

            if( styles.item != edited_item.jsclass ) {
                $('.mfn-presets-list .dropdown-wrapper a').removeClass('loading');
                return; // different items
            }

            $edited_div = $content.find('.vb-item[data-uid="'+edited_item.uid+'"]');

            // reset first
            for(key in edited_item.attr) {
                if( key.startsWith('css_') || key.startsWith('style:') || ( typeof presets_keys[edited_item.jsclass] !== 'undefined' && presets_keys[edited_item.jsclass].length && presets_keys[edited_item.jsclass].includes(key) ) ) {
                    delete edited_item.attr[key];
                }
            }

            $content.find('style.mfn-local-style').remove();

            // set
            for (key in styles.attr) {
                edited_item.attr[key] = styles.attr[key];
            }

            sidebar_form.is_class = false;
            sidebar_form.open($edited_div, false);
            loopAllStyleFields();

            if( typeof presets_keys[edited_item.jsclass] !== 'undefined' && presets_keys[edited_item.jsclass].length ){
                $.each( presets_keys[edited_item.jsclass], function(i, el) {
                    if( $editpanel.find('.panel-edit-item .mfn-form-row.'+el+'.re_render').length ){
                        rerender = true;
                    }else if( $editpanel.find('.panel-edit-item .mfn-form-row.'+el+' .segmented-options').length ){
                        $editpanel.find('.panel-edit-item .mfn-form-row.'+el+' .segmented-options li.active a').trigger('click');
                    }else{
                        $editpanel.find('.panel-edit-item .mfn-form-row.'+el+' .mfn-field-value').trigger('change');
                    }
                });
            }

            $('.mfn-presets-list .dropdown-wrapper a').removeClass('loading');

            historyStorage.allow = true;

            if( rerender ) {
                re_render();
            }else if( edited_item.jsclass !== 'column'){
                historyStorage.add();
            }

        });
    },
    show: function() {
        $('.mfn-ui:not(.mfn-editing-section, .mfn-editing-wrap) .mfn-presets-list').on('mouseenter', function() {

            $editpanel.find('.mfn-presets-list .dropdown-wrapper').html('');
            var custom = false;
            var builded_in = false;

            if( typeof edited_item.jsclass === 'undefined' ) return;

            if( mfn.presets.length ){
                var el_presets = mfn.presets.filter( (it) => it.item == edited_item.jsclass );
                $('.mfn-presets-list .dropdown-wrapper').append('<h6>Presets</h6>');
                if( el_presets.length > 0 ){
                    $.each(el_presets, function(y,x) {
                        if( !builded_in && x.type == 'mfn' ) builded_in = true;
                        if( !custom && x.type == 'custom' ){
                            custom = true;
                            if( builded_in ) $('.mfn-presets-list .dropdown-wrapper').append('<div class="mfn-dropdown-divider"></div>');
                        }
                        $('.mfn-presets-list .dropdown-wrapper').append('<li class="mfn-preset-type-'+x.type+'"><a class="mfn-dropdown-item mfn-load-preset" data-uid="'+x.uid+'" href="#"> '+x.name+'</a>'+( x.type == 'custom' ? "<span class=\"mfn-icon mfn-icon-delete mfn-preset-remove\"></span>" : "" )+'</li>');
                    });
                }else{
                    $('.mfn-presets-list .dropdown-wrapper').append('<i>No custom presets yet.</i>');
                }

            }

            $('.mfn-presets-list .dropdown-wrapper').append('<li><a class="mfn-btn mfn-btn-blue preset-action-button" data-uid="'+edited_item.uid+'" href="#" data-tooltip="Create new preset from current styles"><span class="btn-wrapper"><span class="mfn-icon mfn-icon-add"></span></span></a></li>');

            $('.mfn-presets-list a.preset-action-button').on('click', function(e) {
                e.preventDefault();
                presets.modal( $(this).attr('data-uid') );
            });

            $('.mfn-presets-list .dropdown-wrapper span.mfn-preset-remove').on('click', function() {
                var $a = $(this).siblings('a');
                if( $a.hasClass('loading') ) return;
                $a.addClass('loading');

                $('.mfn-ui').addClass('mfn-modal-open').append('<div class="mfn-modal modal-confirm show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-delete"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Delete preset</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"> <img class="icon" alt="" src="'+mfn.themepath+'/muffin-options/svg/warning.svg"> <h3>Delete preset?</h3> <p>Please confirm. There is no undo.</p><a class="mfn-btn mfn-btn-red btn-wide btn-modal-confirm" href="#"><span class="btn-wrapper">Delete</span></a> </div></div></div>');

                $('.btn-modal-close').on('click', function(e) {
                    e.preventDefault();
                    $('.mfn-ui').removeClass('mfn-modal-open');
                    $('.modal-confirm.show').remove();
                });

                $('.btn-modal-confirm').on('click', function(e){
                    e.preventDefault();
                    var uid = $a.attr('data-uid');
                    $(this).addClass('loading');
                    $.ajax({
                        url: mfnajaxurl,
                        data: {
                            action: 'mfnremovepreset',
                            'mfn-builder-nonce': wpnonce,
                            item: uid
                        },
                        type: 'POST',
                        success: function(response){
                            $a.parent('li').remove();
                            mfn.presets = mfn.presets.filter( (it) => it.uid != uid );
                            $('.mfn-ui').removeClass('mfn-modal-open');
                            $('.modal-confirm.show').remove();
                        }
                    });

                });

            });

        }).on('click', function(e) {
            e.preventDefault();
        });
    },
    modal: function(uid) {
        $('.mfn-ui').addClass('mfn-modal-open').append('<div class="mfn-modal modal-confirm show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-preset"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Add new preset</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"><div class="mfn-form-row"><input placeholder="Type preset name" type="text" class="mfn-form-control mfn-preset-name"></div><a class="mfn-btn mfn-btn-blue btn-modal-confirm" '+( mfn.view == 'demo' ? 'data-tooltip="Unavailable in Demo"' : '' )+' href="#"><span class="btn-wrapper">Save</span></a> <a class="mfn-btn btn-modal-close" href="#"><span class="btn-wrapper">Cancel</span></a> </div></div></div>');

        $('.btn-modal-close').on('click', function(e) {
            e.preventDefault();
            $('.mfn-ui').removeClass('mfn-modal-open');
            $('.modal-confirm.show').remove();
        });

        $('.btn-modal-confirm').on('click', function(e){
            e.preventDefault();
            $('.mfn-preset-name').removeClass('error');
            if( $('.mfn-preset-name').val() != '' ){
                presets.save(uid);
            }else{
                $('.mfn-preset-name').addClass('error');
            }
        });

    },
    save: function(uid) {

        if( mfn.view == 'demo' ) return;

        if( !$content.find('.preset-action-button').hasClass('loading') ) {
            $content.find('.preset-action-button').addClass('loading');
            $content.find('.mfn-contextmenu-save-preset .label').text('Saving...');

            let pf = prepareForm.get( uid );

            var formData = JSON.parse(pf)[0];

            var save = {};
            var keys_in = [];

            if( typeof presets_keys[formData.jsclass] !== 'undefined' ){
                keys_in = presets_keys[formData.jsclass];
            }

            for (key in formData.attr) {
                if (key.startsWith('css_') || key.startsWith('style:') || ( keys_in.length && keys_in.includes(key) )) {
                    save[key] = formData.attr[key];
                }
            }

            $.ajax({
                url: mfnajaxurl,
                data: {
                    action: 'mfnsavepreset',
                    'mfn-builder-nonce': wpnonce,
                    sections: save,
                    name: $('.mfn-preset-name').val(),
                    item: formData.jsclass
                },
                type: 'POST',
                success: function(response){

                    mfn.presets = [];

                    mfn.presets = response;

                    $content.find('.preset-action-button').removeClass('loading');
                    $('.modal-confirm.show').remove();
                    $content.find('.mfn-contextmenu-save-preset .label').text('Preset saved');

                    setTimeout(function() {
                        $content.find('.mfn-contextmenu-save-preset .label').text('Save preset');
                    }, 3000);

                }
            });
        }
    }
}

// show choose icon
$editpanel.on('click', '.mfn-form-row .browse-icon .mfn-button-upload', function(e) {
    e.preventDefault();
    if( $('.current-icon-editing').length ) $('.current-icon-editing').removeClass('current-icon-editing');
    $(this).closest('.browse-icon').addClass('current-icon-editing');
    $('.mfn-modal.modal-select-icon .mfn-items-list li').removeClass('active');
    $('.mfn-modal.modal-select-icon').addClass('show');
    $('.modal-select-icon.show .modalbox-search .mfn-search').focus();
});

sliderInput = {

    init: function($slider) {

        var max = false;
        var min = false;

        $slider.addClass('mfn-initialized');

        var $editbox = $slider.closest('.mfn-form-row');
        var $inputgroup = $slider.closest('.form-group');
        var it = $editbox.closest('.mfn-element-fields-wrapper').attr('data-element');

        var $hidden = $inputgroup.find('input.mfn-slider-hidden-input');
        var $input = $inputgroup.find('input.mfn-sliderbar-value');

        var css_path = $editbox.attr('data-csspath');
        var css_style = $editbox.attr('data-name');

        if($editbox.hasClass('backdrop-filter') || $editbox.hasClass('filter')) {
            css_path = $editbox.closest('.inline-style-input').attr('data-csspath');
            css_style = $editbox.closest('.inline-style-input').attr('data-name');
        }

        min = $input.attr('min');
        max = $input.attr('max');
        var step = $input.attr('data-step');
        //var unit = typeof $input.attr('data-unit') !== 'undefined' ? $input.attr('data-unit') : "";

        var unit = $editbox.find('.mfn-slider-unit li.active').length ? $editbox.find('.mfn-slider-unit li.active a').text() : $input.attr('data-unit');

        var value = $input.val() != '' ? $input.val() : 0;

        if( $inputgroup.find('.mfn-slider-unit').length ){
            min = $inputgroup.find('.mfn-slider-unit li.active').attr('data-min');
            max = $inputgroup.find('.mfn-slider-unit li.active').attr('data-max');
            step = $inputgroup.find('.mfn-slider-unit li.active').attr('data-step');
            unit = $inputgroup.find('.mfn-slider-unit li.active a').text();
        }

        if( value != '' && max && parseInt(value) > parseInt(max) ){
            value = max;
            $input.val(max);
            $hidden.val( max+unit ).trigger('change');
        }

        $slider.slider({
            range: parseFloat(min),
            min: parseFloat(min),
            max: parseFloat(max),
            step: parseFloat(step),
            value: value,
            start: function( event, ui ) {
                $('.sidebar-wrapper').addClass('mfn-vb-sidebar-overlay');

                // reset custom media queries
                if( $editbox.hasClass('show_under_custom') ){
                    $editpanel.find('.mfn-element-fields-wrapper .hide_under_custom input').val('').trigger('change');
                }else if( $editbox.hasClass('hide_under_custom') ){
                    $editpanel.find('.mfn-element-fields-wrapper .show_under_custom input').val('').trigger('change');
                }

                sidebar_form.no_render = true;
            },
            slide: function(event, ui) {
                $input.val( ui.value );
                let value = ui.value;

                // instant transform effect
                if( $(ui.handle).closest('.transform_field').length ){
                    $input.trigger('change');

                }else if($editbox.hasClass('themeoption grid-width')){
                    if( $content.find('style#themeoptiongrid-width').length ){
                        $content.find('style#themeoptiongrid-width').html('@media only screen and (min-width: 1240px){.section_wrapper, .container{max-width: '+ui.value+'px; }}');
                    }else{
                        $content.find('body').append('<style id="themeoptiongrid-width">@media only screen and (min-width: 1240px){.section_wrapper, .container{max-width: '+ui.value+'px; }}</style>');
                    }
                }else if($editbox.hasClass('filter')){
                    // Set CSS filters in real time
                    var filter = '';
                    $editbox.closest('.css_filters_form').find('.mfn-sliderbar-value').each(function() {
                      var filter_key = $(this).attr('data-key');
                      var unit = $(this).attr('data-unit');

                      if( $(this).val().length && $(this).val() != '0' ){
                        filter += filter_key+'('+$(this).val()+unit+') ';
                        $content.find(css_path.replaceAll('mfnuidelement', edited_item.uid)).attr('style', 'filter: ' + filter);
                      }

                    });

                }else if($editbox.hasClass('backdrop-filter')) {
                    // Set CSS filters in real time
                    var backdrop = '';
                    $editbox.closest('.backdrop_filters_form').find('.mfn-sliderbar-value').each(function() {
                      var filter_key = $(this).attr('data-key');
                      var unit = $(this).attr('data-unit');
                      if( $(this).val().length && $(this).val() != '0' ){
                        backdrop += filter_key+'('+$(this).val()+unit+') ';
                        $content.find(css_path.replaceAll('mfnuidelement', edited_item.uid)).attr('style', 'backdrop-filter: ' + backdrop);
                    }
                    });
                }else if($editbox.hasClass('gradient')) {
                    gradientValue($editbox, true);
                }else if( typeof css_path !== 'undefined' ) {
                    if( css_path.includes(',') ){
                        var css_arr = css_path.split(',');
                        css_arr.map(function(c) {
                            MfnVbApp.changeInlineStyles(c, css_style, ui.value+unit);
                        });
                    }else{
                        //console.log(css_path +' / '+css_style+' / '+ui.value);
                        MfnVbApp.changeInlineStyles(css_path, css_style, ui.value+unit);
                    }
                }else if( !$editbox.hasClass('re_render') ){
                    $input.trigger('change');
                }

                if( typeof $input.attr('data-pointobj') !== 'undefined' && $content.find('.'+it+' .mfn-hotspot-style-line .hotspot-image').length ) {
                    var c_id = $content.find('.'+it+' .mfn-hotspot-style-line .hotspot-image').attr('id').replace('wrapper', '');
                    mfn_multifield_field.refresh(c_id, $input);
                }

            },
            stop: function(event, ui) {

                sidebar_form.no_render = false;

                $input.val( ui.value ).trigger('change');

                if( typeof css_path !== 'undefined' && css_style !== 'transform' && !css_path.includes(',')) {
                    setTimeout(function() { changeInlineStyles(css_path.replaceAll('|hover', '').replaceAll('|before', '').replaceAll('|after', ''), css_style, 'remove'); }, 50);
                }else if( typeof css_path !== 'undefined' && css_path.includes(',') ) {
                    var css_arr = css_path.split(',');
                    setTimeout(function() {
                        css_arr.map(function(c) {
                            MfnVbApp.changeInlineStyles(c.replace('|', ':'), css_style, 'remove');
                        });
                    }, 50);
                }

                $('.sidebar-wrapper').removeClass('mfn-vb-sidebar-overlay');
            }
        });
    },

    unitChange: function() {
        $editpanel.on('click', 'ul.mfn-slider-unit li a', function(e) {
            e.preventDefault();

            var $li = $(this).closest('li');
            var $editbox = $li.closest('.mfn-form-row');
            var $slider = $editbox.find('.sliderbar');

            if(!$li.hasClass('active')){
                $li.siblings().removeClass('active');
                $li.addClass('active');

                $editbox.find('input.mfn-sliderbar-value').attr('min', $li.attr('data-min')).attr('max', $li.attr('data-max')).attr('step', $li.attr('data-step'));

                if($editbox.find('.mfn-sliderbar-value').val().length) $editbox.find('.mfn-sliderbar-value').trigger('change');

                sliderInput.destroy($slider);
            }
        });
    },

    customValue: function() {
        $editpanel.on('change', '.mfn-sliderbar-value', function() {

            var $editbox = $(this).closest('.form-group');
            var $editwrapper = $(this).closest('.mfn-form-row');
            var value = $(this).val();

            var max = false;
            var min = false;

            min = $(this).attr('min');
            max = $(this).attr('max');

            if( $editbox.find('.mfn-slider-unit').length ){
                min = $editbox.find('.mfn-slider-unit li.active').attr('data-min');
                max = $editbox.find('.mfn-slider-unit li.active').attr('data-max');

                if( value != '' && max && parseInt(value) > parseInt(max) ){
                    value = max;
                    $(this).val(max);
                }
            }else{
                min = $(this).attr('min');
                max = $(this).attr('max');

                if( value != '' && max && parseInt(value) > parseInt(max) ){
                    value = max;
                    $(this).val(max);
                }
            }

            $editbox.find('.sliderbar').slider( "value", value );

            if( !$(this).hasClass('mfn-gradient-field') ) {
                var $hidden = $editbox.find('input.mfn-slider-hidden-input');
                var unit = $editbox.find('.mfn-slider-unit li.active').length ? $editbox.find('.mfn-slider-unit li.active a').text() : $(this).attr('data-unit');
                if( value != '' ){

                    if( typeof unit !== 'undefined' ){ value = value+unit; }

                    if( typeof $editwrapper.attr('data-style-prefix') !== 'undefined' ){
                        $hidden.val( $editwrapper.attr('data-style-prefix')+value).trigger('change');
                    }else{
                        $hidden.val( value ).trigger('change');
                    }

                }else{
                    $hidden.val( '' ).trigger('change');
                }
            }

            // Set CSS filters in real time
            if( $editwrapper.hasClass('filter') ) {

                var filter = '';
                $editbox.closest('.css_filters_form').find('.mfn-sliderbar-value').each(function() {
                  var filter_key = $(this).attr('data-key');
                  var unit = $(this).attr('data-unit');

                  if( $(this).val().length && $(this).val() != '0' ){
                    filter += filter_key+'('+$(this).val()+unit+') ';
                  }

                });
                $editbox.closest('.css_filters_form').find('.mfn-field-value').val(filter).trigger('change');
            }else if( $editwrapper.hasClass('backdrop-filter') ){

                var backdrop = '';
                $editbox.closest('.backdrop_filters_form').find('.mfn-sliderbar-value').each(function() {
                  var filter_key = $(this).attr('data-key');
                  var unit = $(this).attr('data-unit');

                  if( $(this).val().length && $(this).val() != '0' ){
                    backdrop += filter_key+'('+$(this).val()+unit+') ';
                  }

                });
                $editbox.closest('.backdrop_filters_form').find('.mfn-field-value').val(backdrop).trigger('change');
            }


            if( $editwrapper.hasClass('query_item_default_width') ){
                iframe.window.jQuery('body').trigger('resize');
                //console.log('stop sliderbar');
            }

        });
    },

    destroy: function($slider) {

        $slider.slider( "destroy" );
        sliderInput.init( $slider );
    }

}

function gradientValue($editbox, tmp = false){

    var $hidden = $editbox.closest('.gradient-form').find('.mfn-field-value');

    var prev_val = $hidden.val();
    
    var type = $editbox.closest('.gradient-form').find('.gradient-type').val();
    var color = $editbox.closest('.gradient-form').find('.gradient-color').val();
    var location = $editbox.closest('.gradient-form').find('.location .mfn-sliderbar-value').val();
    var color2 = $editbox.closest('.gradient-form').find('.gradient-color2').val();
    var location2 = $editbox.closest('.gradient-form').find('.location2 .mfn-sliderbar-value').val();
    var position = $editbox.closest('.gradient-form').find('.gradient-position').val();
    var angle = $editbox.closest('.gradient-form').find('.angle .mfn-sliderbar-value').val();
    var custom_css = $editbox.closest('.gradient-form').find('.gradient-custom textarea').val();

    var val = '';

    if( !location.length ) $editbox.closest('.gradient-form').find('.location .mfn-sliderbar-value').val('0').trigger('change');
    if( !location2.length ) $editbox.closest('.gradient-form').find('.location2 .mfn-sliderbar-value').val('100').trigger('change');
    if( !angle.length ) $editbox.closest('.gradient-form').find('.angle .mfn-sliderbar-value').val('0').trigger('change');

    if( custom_css.length ){

        val = custom_css;

    }else if( type.length && color.length && location.length && (angle.length || position.length) && color2.length && location2.length ) {
        val += type+'(';
        
        if( type == 'linear-gradient' ){
            val += angle+'deg, ';
        }else{
            val += 'at '+position+', ';
        }

        val += color2+' ';
        val += location+'%, ';
        val += color+' ';
        val += location2+'%)';
    }

    if( !tmp ){
        if( val.length || prev_val.length ) $hidden.val( val ).trigger('change');
        if( !val.length ) {
            setTimeout(function() {
                loopAllStyleFields(edited_item.uid);
            }, 100);
        }
    }
}

var dynamicItems = {
    init: function() {

        $editpanel.on('change', '.dynamic_items_wrapper .di-input-rule select', function() {
            var val = $(this).val();
            $(this).parent().siblings('.di-input-wrapper').removeClass('di-input-active');
            $(this).parent().siblings('.di-if-'+val).addClass('di-input-active');
        });

        $editpanel.on('click', '.dynamic_items_wrapper .dynamic_items_add', function(e) {
            e.preventDefault();
            alert('soon');
        });

        $editpanel.on('click', '.dynamic_items_wrapper .di-remove', function(e) {
            e.preventDefault();
            var attr_uid = $(this).closest('li').attr('data-uid');
            var it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
            $content.find('.'+it+' .payment-methods-list li.uid-'+attr_uid).remove();
            $(this).closest('li').remove();

            edited_item.attr.dynamic_items = edited_item.attr.dynamic_items.filter( (item) => item.uid != attr_uid );

            historyStorage.add();
        });

        $editpanel.on('click', '.dynamic_items_wrapper .di-show-modal', function(e) {
            var id = $(this).attr('data-modal');
            $('#'+id).addClass('show');
        });

        $editpanel.on('click', '.mfn-modal-payments ul.mfn-items-list li a', function(e) {
            e.preventDefault();
            var url = $(this).find('img').attr('src');
            var title = $(this).find('.titleicon').text();
            dynamicItems.addNew(url, title);
            $('.mfn-modal-payments.show').removeClass('show');
        });

        $editpanel.on('mouseenter', '.dynamic_items_wrapper .dynamic_items_preview', function(e) {
            if( !$(this).hasClass('sortable-init') ){
                dynamicItems.sortable();
            }
        });
    },

    addNew: function(url, id = false) {
        var name = $editpanel.find('.dynamic_items_wrapper').attr('data-name');
        var it = $editpanel.find('.mfn-element-fields-wrapper').attr('data-element');
        var new_obj = {};
        var order = $('.dynamic_items_wrapper .dynamic_items_preview li').length;

        if( typeof edited_item['attr'][name] == 'undefined' ){
            edited_item['attr'][name] = [];
        }

        var new_uid = getUid();

        new_obj['url'] = url;
        if( id ) new_obj['id'] = id;
        new_obj['uid'] = new_uid;
        if( $editpanel.find('.dynamic_items_wrapper .di-input-rule select').length ){
            new_obj['type'] = $editpanel.find('.dynamic_items_wrapper .di-input-rule select').val();
        }
        edited_item['attr'][name].push(new_obj);

        $('.dynamic_items_wrapper .dynamic_items_preview').append('<li data-uid="'+new_uid+'" class="uid-'+new_uid+'"><img src="'+url+'" alt=""><a class="mfn-option-btn mfn-button-delete di-remove" data-tooltip="Delete" href="#"><span class="mfn-icon mfn-icon-delete"></span></a></li>');

        if( $content.find('.'+it+' .payment-methods-list:not(.empty)').length ){
            $content.find('.'+it+' .payment-methods-list').append('<li data-uid="'+new_uid+'" class="uid-'+new_uid+'"><img src="'+url+'" alt=""></li>');
        }else{
            setTimeout(re_render, 100);
        }

        historyStorage.add();
    },

    sortable: function() {
        $('.dynamic_items_wrapper .dynamic_items_preview').addClass('sortable-init');
        $('.dynamic_items_wrapper .dynamic_items_preview').sortable({
            update: function(e, ui) {
                var new_arr = [];

                $('.dynamic_items_wrapper .dynamic_items_preview li').each(function(i) {
                    new_arr.push( edited_item.attr.dynamic_items.filter( (item) => item.uid == $(this).attr('data-uid') )[0] );
                });

                edited_item.attr.dynamic_items = new_arr;

                setTimeout(re_render, 100);

            }
        });

    }

}

var select2Field = {

    init: function() {

        $editpanel.on('click', '.mfn-select2-wrapper .mfn-select2-options li ul li', function() {
            select2Field.add($(this));
        });

        $editpanel.on('keyup focus paste', '.mfn-select2-wrapper .mfn-select2-input', function() {
            select2Field.search($(this));
        });

    },

    add: function( $li ) {
        var id = $li.attr('data-id');
        var label = $li.html().replaceAll('&nbsp;', '');
        $li.siblings('li').removeClass('selected');
        $li.addClass('selected');

        let obj = {'id':id,'label':label};

        $li.closest('.mfn-select2-wrapper').find('.form-control .mfn-select2-input').attr('data-selected', JSON.stringify(obj)).val(label).trigger('change');

    },

    search: function($field) {

        select2Field.exit();

        var val = $field.val().toLowerCase();
        var $wrapper = $field.closest('.mfn-select2-wrapper');
        var data_get = $wrapper.find('.mfn-select2-input').attr('data-get');
        var post_type = false;

        if( data_get == 'products' ){
            data_get = 'posts';
            post_type = 'product';
        }

        if( $wrapper.hasClass('mfn-select2-loading') ) return;

        $wrapper.addClass('mfn-select2-loading');

        if( !$wrapper.hasClass('mfn-select2-focus') ) {
            $('.sidebar-wrapper').addClass('mfn-vb-sidebar-overlay');
            $wrapper.addClass('mfn-select2-focus');
        }

        $.ajax({
            url: mfnajaxurl,
            data: {
                action: 'mfn_dynamic_get_items',
                'mfn-builder-nonce': wpnonce,
                type: data_get,
                post_type: post_type,
                search: val
            },
            type: 'POST',
            success: function(response) {

                if( mfn.is_woocommerce && ( mfn.builder_type == 'single-product' || mfn.post_type == "product" ) && $field.attr('data-get') == 'products' ) {
                    response.product.options.push( {id: 'current-id', title: 'Current product'} );
                }

                if( $field.attr('data-get') == 'taxonomies' ) {
                    if(mfn.is_woocommerce) response.product_cat.options.push( {id: 'parent_taxonomy', title: 'Parent category'}, {id: 'any_taxonomy', title: 'Any category'} );
                    response.category.options.push( {id: 'parent_taxonomy', title: 'Parent category'}, {id: 'any_taxonomy', title: 'Any category'} );
                }

                $wrapper.removeClass('mfn-select2-loading');
                $wrapper.find('.mfn-select2-options').html(select2Field.display(response));

                if( typeof $field.attr('data-selected') !== 'undefined' ) {
                    var obj = JSON.parse($field.attr('data-selected'));
                    $wrapper.find('.mfn-select2-options li[data-id="'+obj.id+'"]').addClass('selected');
                }

                $(document).bind('click', select2Field.blur);

            }

        });

    },

    display: function(obj) {

        let html = '';
        _.map( obj, function(opt, o) {

            if( opt.options.length ){
                html += `<li class="mfn-select-2-list-group"><span>${opt.label}</span><ul>`;
                    _.map( opt.options, function(val, v) {
                        html += `<li data-id="${val.id}">${val.title}</li>`;
                    });
                html += `</ul></li>`;
            }

        });

        return html;

    },

    blur: function(e) {
        var div = $('.mfn-select2-wrapper');

        if(!div.is(e.target)) {
            select2Field.exit();
        }

    },

    exit: function() {
        $('.mfn-select2-wrapper.mfn-select2-focus .mfn-select2-options').empty();
        $('.mfn-select2-wrapper.mfn-select2-focus').removeClass('mfn-select2-focus');
        $('.mfn-select2-wrapper.mfn-select2-loading').removeClass('mfn-select2-loading');
        $('.sidebar-wrapper').removeClass('mfn-vb-sidebar-overlay');
        $(document).unbind('click', select2Field.blur);
    }

}

select2Field.init();


var select_ajax = {
  
  val: '',
  type: false,
  post_type: false,
  
  wrapper: false,

  init: function() {

    $(document).on('keyup focus', '.mfn-select-ajax .mfn-select-ajax-input', function() {

        select_ajax.wrapper = $(this).closest('.mfn-select-ajax');
        select_ajax.type = typeof $(this).attr('data-selecttype') != 'undefined' ? $(this).attr('data-selecttype') : 'posts';
        select_ajax.post_type = typeof $(this).attr('data-posttype') != 'undefined' && $(this).attr('data-posttype').length ? $(this).attr('data-posttype') : mfn.current_post_type;

        select_ajax.val = $(this).val().length ? $(this).val() : ''; 

        select_ajax.ajax();
        $(document).bind('click', select_ajax.blur);
    });

    $(document).on('click', '.mfn-select-ajax-hints li:not(.disabled)', function() {
      let id = $(this).attr('data-id');
      select_ajax.wrapper = $(this).closest('.mfn-select-ajax');
      select_ajax.wrapper.find('.mfn-field-value').val(id).trigger('change');
      select_ajax.wrapper.find('.mfn-select-ajax-input').val($(this).text());
      select_ajax.exit();
    });
  
  },

  ajax: function() {

    if( select_ajax.wrapper.hasClass('loading') ) return;
    select_ajax.wrapper.addClass('loading');

    $.ajax({
        url: ajaxurl,
        data: {
          'mfn-builder-nonce': wpnonce,
          action: 'mfn_dynamic_get_items',
          type: select_ajax.type, // taxonomies, posts, postmeta
          post_type: select_ajax.post_type, // post type
          search: select_ajax.val,
        },
        type: 'POST',
        success: function(response) {

        $('.mfn-select-ajax .mfn-select-ajax-hints').remove();

          if( !select_ajax.wrapper ) return;

          select_ajax.wrapper.removeClass('loading');
          let html = '<ul class="mfn-select-ajax-hints">';

          if( select_ajax.type == 'postmeta' ){

            response.map( item => {

                if( select_ajax.val.length && item.includes(select_ajax.val) ){
                    html += `<li data-id="${item}">${item}</li>`;
                }else if( !select_ajax.val.length ){
                    html += `<li data-id="${item}">${item}</li>`;
                }
              
            });

          }else if( _.has(response, 'page') && _.has(response.page, 'options') && response.page['options'].length ){

            response.page['options'].map( item => {
              html += `<li class="${item.id == select_ajax.val ? 'disabled' : ''}" data-id="${item.id}">${item.title}</li>`;
            });

          }else{
            html += '<li class="disabled">Empty list</li>';
          }

          html += '</ul>';

          select_ajax.wrapper.append(html);

          //console.log(response);
        }
      });
  },

  blur: function(e) {
    var div = $('.mfn-select-ajax');
    if( !div.is(e.target) && div.has(e.target).length === 0 ) select_ajax.exit();
  },

  exit: function() {
    if( $('.mfn-select-ajax .mfn-select-ajax-hints').length ) $('.mfn-select-ajax .mfn-select-ajax-hints').remove();
    if( $('.mfn-select-ajax').hasClass('loading') ) $('.mfn-select-ajax').removeClass('loading');
    select_ajax.val = false;
    select_ajax.wrapper = false;
    $(document).unbind('click', select_ajax.blur);
  }

}

select_ajax.init();




















var mfnLazySelect = {

    xhr: null,
    cache: {},

    init: function() {
        /*$(document).on('focus mousedown', 'select[data-lazy-taxonomy]', function() {
            mfnLazySelect.load($(this));
        });*/

        if( !$('.panel-edit-item .mfn-element-fields-wrapper select[data-lazy-taxonomy]:not(.initialized)').length ) return;

        $('.panel-edit-item .mfn-element-fields-wrapper select[data-lazy-taxonomy]:not(.initialized)').each(function() {
            mfnLazySelect.load($(this));
        });
    },

    load: function($select) {
        var loaded = $select.attr('data-loaded');
        var taxonomy = $select.attr('data-lazy-taxonomy') || '';
        var currentValue = $select.val() || '';

        if (loaded === '1') {
            return;
        }

        if (!taxonomy) {
            return;
        }

        var cacheKey = 'taxonomy::' + taxonomy;

        if (_.has(mfnLazySelect.cache, cacheKey)) {
            mfnLazySelect.render($select, mfnLazySelect.cache[cacheKey], currentValue);
            $select.attr('data-loaded', '1');
            return;
        }

        if (mfnLazySelect.xhr && mfnLazySelect.xhr.readyState !== 4) {
            mfnLazySelect.xhr.abort();
        }

        $select.prop('disabled', true);

        mfnLazySelect.xhr = $.ajax({
            url: ajaxurl,
            type: 'POST',
            dataType: 'json',
            data: {
                action: 'mfn_get_taxonomy_terms',
                taxonomy: taxonomy,
                'mfn-builder-nonce': wpnonce
            },
            success: function(response) {
                $select.prop('disabled', false);

                if (!response || !response.success || !response.data) {
                    return;
                }

                mfnLazySelect.cache[cacheKey] = response.data;
                mfnLazySelect.render($select, response.data, currentValue);
                $select.attr('data-loaded', '1');
            },
            error: function() {
                $select.prop('disabled', false);
            }
        });
    },

    render: function($select, options, currentValue) {
        var hasCurrent = $select.find('option[value="0-current"]').length > 0;
        $select.addClass('initialized');

        var html = `<option value="">- Select -</option>`;

        if (hasCurrent) {
            html += `<option ${String(currentValue) === '0-current' ? 'selected' : ''} value="0-current">Current</option>`;
        }

        html += _.map(options, function(opt) {
            var selected = String(currentValue) === String(opt.slug) ? 'selected' : '';
            return `<option ${selected} value="${opt.slug}">${opt.name}</option>`;
        }).join('');

        if (
            currentValue &&
            currentValue !== '0-current' &&
            options && 
            !options.filter(function(opt) { return String(opt.slug) === String(currentValue); }).length
        ) {
            html += `<option selected value="${currentValue}">${currentValue}</option>`;
        }

        $select.html(html);
    }
};























var multiSelectField = {

    xhr: null,
    cache: {},

    init: function() {

        $(document).on('focus', '.mfn-multiselect-field-wrapper .form-control .mfn-multiselect-input', function() {
            var $field = $(this);
            var type = $field.attr('data-type');

            $field.closest('.mfn-multiselect-field-wrapper').addClass('mfn-msf-focus');
            $('.sidebar-wrapper').removeClass('mfn-vb-sidebar-overlay');
            $(document).bind('click', multiSelectField.blur);

            if (type === 'tax_cpt') {
                multiSelectField.loadInitialRemote($field, {
                    mode: 'tax_cpt',
                    taxonomy: mfn.current_tax || ''
                });
            }

            if (type === 'post_tax') {
                multiSelectField.loadInitialRemote($field, {
                    mode: 'post_tax',
                    post_type: mfn.current_post_type || ''
                });
            }
        });

        $(document).on('mousedown', '.mfn-multiselect-field-wrapper .mfn-multiselect-options li:not(.selected)', function(e) {
            e.preventDefault();

            var $wrapper = $(this).closest('.mfn-multiselect-field-wrapper');

            multiSelectField.add($(this));
            $wrapper.find('.mfn-multiselect-input').val('').trigger('keyup');
        });

        $(document).on('click', '.mfn-ui .mfn-form .form-group.mfn-multiselect-field-wrapper .form-control span', function(e) {
            e.preventDefault();
            multiSelectField.remove($(this));
        });

        $(document).on('keyup paste change', '.mfn-ui .mfn-form .form-group.mfn-multiselect-field-wrapper .form-control .mfn-multiselect-input', function() {
            multiSelectField.search($(this));
        });

    },

    add: function($li) {

        var id = $li.attr('data-id');
        var label = $li.html().replaceAll('&nbsp;', '');
        var key = String(id).split(':').pop();

        $li.addClass('selected');

        $li.closest('.mfn-multiselect-field-wrapper').find('.form-control input').before('<span data-id="' + id + '">&#10005; ' + label + '</span>');

        var name = $li.closest('.mfn-form-row').attr('data-id');

        if (typeof edited_item.attr[name] === 'object') {
            edited_item.attr[name].push({ key: key, value: label });
        } else {
            edited_item.attr[name] = [];
            edited_item.attr[name].push({ key: key, value: label });
        }

    },

    remove: function($span) {
        var id = $span.attr('data-id');
        var name = $span.closest('.mfn-form-row').attr('data-id');
        var key = String(id).split(':').pop();

        if (typeof edited_item.attr[name] === 'object') {
            if (edited_item.attr[name].filter((item) => item.key == key).length) {
                edited_item.attr[name] = edited_item.attr[name].filter((item) => item.key != key);
            }
        }

        multiSelectField.refresh();

        $span.closest('.mfn-multiselect-field-wrapper').find('.mfn-multiselect-options li[data-id="' + id + '"]').removeClass('selected');
        $span.remove();
    },

    search: function($field) {
        var val = ($field.val() || '').toLowerCase().trim();
        var $wrapper = $field.closest('.mfn-multiselect-field-wrapper');
        var type = $field.attr('data-type');

        if (type === 'tax_cpt') {
            if (val.length < 2) {
                multiSelectField.loadInitialRemote($field, {
                    mode: 'tax_cpt',
                    taxonomy: mfn.current_tax || ''
                });
            } else {
                multiSelectField.searchRemote($field, val, {
                    mode: 'tax_cpt',
                    taxonomy: mfn.current_tax || ''
                });
            }
            return;
        }

        if (type === 'post_tax') {
            if (val.length < 2) {
                multiSelectField.loadInitialRemote($field, {
                    mode: 'post_tax',
                    post_type: mfn.current_post_type || ''
                });
            } else {
                multiSelectField.searchRemote($field, val, {
                    mode: 'post_tax',
                    post_type: mfn.current_post_type || ''
                });
            }
            return;
        }

        if (val.length) {
            if (val.length > 1) {
                $wrapper.addClass('mfn-ms-searching');
                $wrapper.find('.mfn-multiselect-options li').hide();
                $wrapper.find('.mfn-multiselect-options li[data-name*="' + val + '"]').show();
            } else {
                $wrapper.removeClass('mfn-ms-searching');
                $wrapper.find('.mfn-multiselect-options li').removeAttr('style');
            }
        } else {
            $wrapper.removeClass('mfn-ms-searching');
            $wrapper.find('.mfn-multiselect-options li').removeAttr('style');
        }
    },

    loadInitialRemote: function($field, config) {
        multiSelectField.fetchRemote($field, '', config, true);
    },

    searchRemote: function($field, val, config) {
        multiSelectField.fetchRemote($field, val, config, false);
    },

    fetchRemote: function($field, val, config, initial) {
        var $wrapper = $field.closest('.mfn-multiselect-field-wrapper');
        var $list = $wrapper.find('.mfn-multiselect-options');

        var payload = {
            action: 'mfn_search_tax_terms',
            phrase: val,
            initial: initial ? 1 : 0,
            limit: 50,
            'mfn-builder-nonce': wpnonce
        };

        if (config.mode === 'tax_cpt') {
            if (!config.taxonomy) {
                $wrapper.removeClass('mfn-ms-searching');
                $list.html('');
                return;
            }

            payload.taxonomy = config.taxonomy;
        }

        if (config.mode === 'post_tax') {
            if (!config.post_type) {
                $wrapper.removeClass('mfn-ms-searching');
                $list.html('');
                return;
            }

            payload.post_type = config.post_type;
        }

        var cacheKey = JSON.stringify(payload) + '|' + (mfn.current_post_type || '') + '|' + (mfn.current_tax || '');

        if (_.has(multiSelectField.cache, cacheKey)) {
            $wrapper.removeClass('mfn-ms-searching');
            multiSelectField.renderRemoteOptions($wrapper, multiSelectField.cache[cacheKey]);
            return;
        }

        if (multiSelectField.xhr && multiSelectField.xhr.readyState !== 4) {
            multiSelectField.xhr.abort();
        }

        $wrapper.addClass('mfn-ms-searching');

        multiSelectField.xhr = $.ajax({
            url: ajaxurl,
            type: 'POST',
            dataType: 'json',
            data: payload,
            success: function(response) {
                $wrapper.removeClass('mfn-ms-searching');

                if (!response || !response.success || !response.data) {
                    $list.html('');
                    return;
                }

                multiSelectField.cache[cacheKey] = response.data;
                multiSelectField.renderRemoteOptions($wrapper, response.data);
            },
            error: function(xhr, status) {
                $wrapper.removeClass('mfn-ms-searching');

                if (status !== 'abort') {
                    $list.html('');
                }
            }
        });
    },

    renderRemoteOptions: function($wrapper, options) {
        var selected = [];
        var name = $wrapper.closest('.mfn-form-row').attr('data-id');

        if (typeof edited_item !== 'undefined' && edited_item.attr && typeof edited_item.attr[name] === 'object') {
            selected = edited_item.attr[name].map(function(item) {
                return String(item.key);
            });
        }

        var html = _.map(options, function(opt) {
            var id = String(opt.taxonomy ? (opt.taxonomy + ':' + opt.term_id) : opt.term_id);
            var optName = String(opt.name || '');
            var isSelected = selected.indexOf(id) !== -1;

            return `
                <li data-name="${optName.toLowerCase().replaceAll('&nbsp;', '')}" data-id="${id}" data-taxonomy="${opt.taxonomy || ''}" ${isSelected ? 'class="selected"' : ''}>
                    ${optName}
                </li>
            `;
        }).join('');

        if( builder_type.startsWith('single-') || ['post', 'portfolio'].includes(mfn.post_type) ) {

            isCurrentSelected = selected.indexOf('0-current') !== -1 || selected.indexOf('undefined') !== -1;

            if( !isCurrentSelected ) html += `<li data-name="0-current" data-id="0-current" ${isCurrentSelected ? 'class="selected"' : ''}>
                Current
            </li>`;
        }

        $wrapper.find('.mfn-multiselect-options').html(html);
    },

    blur: function(e) {
        var div = $('.mfn-multiselect-field-wrapper.mfn-msf-focus');

        if (!div.is(e.target) && div.has(e.target).length === 0) {
            multiSelectField.refresh();

            $('.mfn-multiselect-field-wrapper.mfn-msf-focus input').val('');
            $('.mfn-multiselect-field-wrapper.mfn-msf-focus').removeClass('mfn-msf-focus');
            $('.sidebar-wrapper').removeClass('mfn-vb-sidebar-overlay');

            $(document).unbind('click', multiSelectField.blur);
        }
    },

    refresh: function() {
        if ($builder.find('.vb-item[data-uid="' + edited_item.uid + '"]').hasClass('mcb-wrap')) {
            re_render($builder.find('.vb-item[data-uid="' + edited_item.uid + '"]').closest('.mcb-section').attr('data-uid'));
        } else {
            re_render(edited_item.uid);
        }
    }
}

multiSelectField.init();



























var multiTextField = {
    init: function() {
        $editpanel.on('click', '.sidebar-add .sidebar-add-button', function(e) {
          e.preventDefault();

          var $form = $(this).closest('.form-group'),
            $clone = $('li.default', $form).clone(true),
            li_length = $('.added-sidebars ul li:not(.default)', $form).length;

          var val = $('.mfn-form-input', $form).val();

          if( ! val ){
            return false;
          }

          $('.added-sidebars ul', $form).append( $clone );

          // $clone = $('.added-sidebars ul li:last-child', $form);

          $clone.removeClass('default')
            .hide().fadeIn(200);

          $clone.find('input').val( val )
            .attr('name', 'sidebars['+li_length+']' )
            .attr('data-key', li_length )
            .removeAttr('data-name').trigger('change');
          $clone.find('.sidebar-title').text( val );

          $('.mfn-form-input', $form).val('');

          $form.removeClass('empty');

        });

        $editpanel.on('click', '.sidebar-add .added-sidebars .mfn-btn-delete', function(e) {
          e.preventDefault();

          var $form = $(this).closest('.form-group');
          var key = $(this).siblings('input').attr('data-key');
          var name = $(this).closest('.mfn-form-row').attr('data-name');
          var $input = $(this).siblings('input');

          if( typeof mfn.themeoptions[name][key] !== undefined ) delete(mfn.themeoptions[name][key]);

          $(this).parent().fadeOut( 200, function() {

            $input.val('').trigger('change');

            $(this).remove();

            if( 1 >= $('.added-sidebars ul li', $form).length ){
              $form.addClass('empty');
            }

          });

        });
    }
}
multiTextField.init();

dynamicItems.init();

var tabsField = {
    init: function() {

        $editpanel.on('click', '.tabs .mfn-button-add', function(e) {
            e.preventDefault();
            var group = $(this).closest('.mfn-element-fields-wrapper').attr('data-group');
            var $form = $(this).closest('.form-group'),
            $clone = $('li.default', $form).clone(true);
            $clone.removeClass('default').addClass('show');
            $('.tabs-wrapper', $form).append( $clone );
            var new_obj = {};
            $clone.find('.field-to-object').each(function(){
                $(this).attr('name', $(this).data('default') ).removeAttr('data-default');
                new_obj[ $(this).attr('data-label') ] = $(this).val();
            });

            if( typeof edited_item.attr.tabs !== 'undefined' ){
                edited_item.attr.tabs.push(new_obj);
            }else{
                edited_item.attr.tabs = [];
                edited_item.attr.tabs.push(new_obj);
            }

            $clone.siblings().removeClass('show');
            $clone.hide().fadeIn(200);
            tabsField.reorder();
            re_render(edited_item.uid);
        });

        $editpanel.on('click', '.tabs .mfn-tab-delete', function(e) {
          e.preventDefault();
          var group = $(this).closest('.mfn-element-fields-wrapper').attr('data-group');
          $(this).closest('.tab').fadeOut( 200, function() {
            $(this).remove();
            tabsField.reorder();
            setTimeout(re_render(edited_item.uid), 1000);
          });
        });

        $editpanel.on('click', '.tabs .mfn-tab-clone', function(e) {
          e.preventDefault();
          var group = $(this).closest('.mfn-element-fields-wrapper').attr('data-group');
          var $tab = $(this).closest('.tab'),
            $clone = $tab.clone(true);
          $tab.removeClass('show').after( $clone );
          $clone.hide().fadeIn(200);
          tabsField.reorder();
          setTimeout(re_render(edited_item.uid), 1000);
        });

        $editpanel.on('click', '.tabs .mfn-tab-toggle', function(e) {
          e.preventDefault();
          var $tab = $(this).closest('.tab');
          $tab.toggleClass('show')
            .siblings().removeClass('show');
        });

        $editpanel.on('change', '.tabs .js-title', function(e) {
            e.preventDefault();
            var $tab = $(this).closest('.tab');
            var val = $(this).val();

            // temporary, second child instead of 'secondary' index
            if(!val.length){
              val = $tab.find('.form-control:nth-child(2) input').val();
              $('.tab-header .title', $tab).text(val);
            }

            if( $(this).hasClass('mfn-tab-image') ){
                if( val.includes('.mp4') ) {
                    $('.tab-header .title', $tab).html(`<span class="mfn-icon-video"></span> <span class="mfn-tab-video-title">${_.escape(val.split('/').pop().split('#')[0].split('?')[0])}</span>`);
                }else if( val.includes('youtu') ){
                    $('.tab-header .title', $tab).html(`<span class="mfn-icon-video"></span>`);
                }else if( val.includes('vimeo') ){
                    $('.tab-header .title', $tab).html(`<span class="mfn-icon-video"></span>`);
                }else{
                    $('.tab-header .title', $tab).html(`<img width="50" src="${val}" alt="" loading="lazy">`);
                }
                
            }else{
                $('.tab-header .title', $tab).text(val);
            }
        });

    },

    sortable: function() {
        $('.panel-edit-item .tabs-wrapper:not(.mfn-initialized)').each(function() {
            $(this).addClass('mfn-initialized');
            var $editbox = $(this).closest('.mfn-form-row');
            var group = $(this).closest('.mfn-element-fields-wrapper').attr('data-group');
            $(this).sortable({
                axis: 'y',
                cursor: 'ns-resize',
                handle: '.tab-header',
                opacity: 0.9,
                update: function(e, ui) {

                    if($editbox.hasClass('order')) {
                        var $input = $editbox.find('input.mfn-field-value');
                        var value = [];
                        $('.panel-edit-item .order .tabs-wrapper li').each(function(){
                          value.push( $(this).text().toLowerCase() );
                        });
                        $input.val( value.join(',') ).trigger('change');

                    }else if($editbox.hasClass('tabber_content_order')) {

                        let tabs_backup = $edited_div.find('.section_wrapper').clone(true);
                        let new_tabs_nav = $('<ul class="mfn-tabber-nav" />');
                        let new_tabs_content = $('<ul class="mfn-tabber-nav" />');


                        $('.panel-edit-item .tabber_content_order .tabs-wrapper li').each(function() {
                            let uid = $(this).attr('data-uid');
                            let wrap_clone = $edited_div.find('.mcb-wrap-'+uid).clone(true);

                            $edited_div.find('.mcb-wrap-'+uid).remove();

                            $edited_div.find('.section_wrapper').append(wrap_clone);
                            new_tabs_nav.append( $edited_div.find('.mfn-tabber-nav .mfn-nav-tab-'+uid).clone(true) );
                        });

                        $edited_div.find('.mfn-tabber-nav').replaceWith(new_tabs_nav);
                        

                    }else{
                        tabsField.reorder();
                        setTimeout(re_render(edited_item.uid), 500);
                    }

                }
            });
        });
    },
    reorder: function() {
        edited_item.attr.tabs = [];
        $('.panel-edit-item .mfn-form ul.tabs-wrapper li.tab:not(.default)').each(function(i) {
            var new_obj = {};
            $(this).find('.field-to-object').each(function() {
                var $input = $(this);
                var old_name = $input.attr('name');
                var patt_tabs = /tabs\[([0-9]|[0-9][0-9])\]/g;
                var new_attr_name = old_name.replace(patt_tabs, 'tabs['+i+']');
                $input.attr( 'name', new_attr_name );
                $input.attr( 'data-order', i );
                new_obj[ $input.attr('data-label') ] = $input.val();
            });
            edited_item.attr.tabs.push(new_obj);
        });
    }
}

tabsField.init();

// contact box address
$editpanel.on('keyup paste change', '.contact_box.address .preview-addressinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if( isBlocks() ){
      $content.find('.'+it+' .item-preview-content ').text(val);
    } else if(val.length){
        if($content.find('.'+it+' .get_in_touch_wrapper ul li.address .address_wrapper').length){
            $content.find('.'+it+' .get_in_touch_wrapper ul li.address .address_wrapper').html(val);
        }else{
            $content.find('.'+it+' .get_in_touch_wrapper ul').append('<li data-sort="1" class="address"><span class="icon"><i class="icon-location"></i></span><span class="address_wrapper">'+val+'</span></li>');
        }
    }else{
        $content.find('.'+it+' .get_in_touch_wrapper ul li.address').remove();
    }

});

// header search placeholder
$editpanel.on('keyup paste change', '.panel-edit-item .header_search.placeholder .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    $content.find('.'+it+' .search_wrapper input.field').attr('placeholder', val);

});


// contact box phone
$editpanel.on('keyup paste change', '.contact_box.telephone .preview-telephoneinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if(val.length){
        if($content.find('.'+it+' .get_in_touch_wrapper ul li.phone.phone-1 p a').length){
            $content.find('.'+it+' .get_in_touch_wrapper ul li.phone.phone-1 p a').html(val);
        }else{
            $content.find('.'+it+' .get_in_touch_wrapper ul').append('<li data-sort="2" class="phone phone-1"><span class="icon"><i class="icon-phone"></i></span><p><a href="tel:'+val+'">'+val+'</a></p></li>');
        }
    }else{
        $content.find('.'+it+' .get_in_touch_wrapper ul li.phone.phone-1').remove();
    }

});

$editpanel.on('keyup change paste', '.filters_fields .filters.label .mfn-field-value', function() {
    let val = $(this).val();
    let hea = $(this).closest('.mfn-multifield-point').find('.mfn-multifield-point-tab-header h6');
    let index = $(this).closest('.mfn-multifield-point').index();

    if( val.length ){
        hea.text(val);
    }else{
        hea.text(`Filter ${index+1}`);
    }
    
});

// contact box phone 2
$editpanel.on('keyup paste change', '.contact_box.telephone_2 .preview-telephone_2input', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if(val.length){
        if($content.find('.'+it+' .get_in_touch_wrapper ul li.phone.phone-2 p a').length){
            $content.find('.'+it+' .get_in_touch_wrapper ul li.phone.phone-2 p a').html(val);
        }else{
            $content.find('.'+it+' .get_in_touch_wrapper ul').append('<li data-sort="3" class="phone phone-2"><span class="icon"><i class="icon-phone"></i></span><p><a href="tel:'+val+'">'+val+'</a></p></li>');
        }
    }else{
        $content.find('.'+it+' .get_in_touch_wrapper ul li.phone.phone-2').remove();
    }

});

// contact box fax
$editpanel.on('keyup paste change', '.contact_box.fax .preview-faxinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if(val.length){
        if($content.find('.'+it+' .get_in_touch_wrapper ul li.phone.fax p a').length){
            $content.find('.'+it+' .get_in_touch_wrapper ul li.phone.fax p a').html(val);
        }else{
            $content.find('.'+it+' .get_in_touch_wrapper ul').append('<li data-sort="4" class="phone fax"><span class="icon"><i class="icon-print"></i></span><p><a href="fax:'+val+'">'+val+'</a></p></li>');
        }
    }else{
        $content.find('.'+it+' .get_in_touch_wrapper ul li.phone.fax').remove();
    }

});

// contact box email
$editpanel.on('keyup paste change', '.contact_box.email .preview-emailinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if(val.length){
        if($content.find('.'+it+' .get_in_touch_wrapper ul li.mail p a').length){
            $content.find('.'+it+' .get_in_touch_wrapper ul li.mail p a').html(val);
        }else{
            $content.find('.'+it+' .get_in_touch_wrapper ul').append('<li data-sort="5" class="mail"><span class="icon"><i class="icon-mail"></i></span><p><a href="mailto:'+val+'">'+val+'</a></p></li>');
        }
    }else{
        $content.find('.'+it+' .get_in_touch_wrapper ul li.mail').remove();
    }

});

// breadcrumbs separator

$editpanel.on('keyup paste change', '.breadcrumbs.separator .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if( val.length ){
        $content.find('.'+it+' .breadcrumbs li .mfn-breadcrumbs-separator').html(val);
    }else{
        $content.find('.'+it+' .breadcrumbs li .mfn-breadcrumbs-separator').html('<i class="icon-right-open"></i>');
    }
});

$editpanel.on('keyup paste change', '.cart_table.update_cart_label .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if( val.length ){
        $content.find('.'+it+' .button[name="update_cart"]').html(val);
    }else{
        $content.find('.'+it+' .button[name="update_cart"]').html($(this).attr('placeholder'));
    }
});

$editpanel.on('keyup paste change', '.cart_table.apply_coupon_label .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if( val.length ){
        $content.find('.'+it+' .coupon .button').html(val);
    }else{
        $content.find('.'+it+' .coupon .button').html($(this).attr('placeholder'));
    }
});

$editpanel.on('keyup paste change', '.cart_table.coupon_code_placeholder .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if( val.length ){
        $content.find('.'+it+' .coupon .input-text').attr('placeholder', val);
    }else{
        $content.find('.'+it+' .coupon .input-text').attr('placeholder', $(this).attr('placeholder'));
    }
});



$editpanel.on('keyup paste change', '.cart_totals.proceed_checkout_label .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if( val.length ){
        $content.find('.'+it+' .wc-forward').html(val);
    }else{
        $content.find('.'+it+' .wc-forward').html($(this).attr('placeholder'));
    }
});

$editpanel.on('keyup paste change', '.cart_totals.continue_shopping_string .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if( val.length ){
        $content.find('.'+it+' .mfn-woo-cart-link').html(val);
    }else{
        $content.find('.'+it+' .mfn-woo-cart-link').html($(this).attr('placeholder'));
    }
});
$editpanel.on('keyup paste change', '.share.facebook_label .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if( val.length ){
        if( !$content.find('.'+it+' .mfn-share-post-facebook .mfn-share-post-button-label').length ) $content.find('.'+it+' .mfn-share-post-facebook').append('<span class="mfn-share-post-button-label"></span>');
        $content.find('.'+it+' .mfn-share-post-facebook .mfn-share-post-button-label').html(val);
    }else{
        $content.find('.'+it+' .mfn-share-post-facebook .mfn-share-post-button-label').remove();
    }
});

$editpanel.on('keyup paste change', '.share.twitter_label .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if( val.length ){
        if( !$content.find('.'+it+' .mfn-share-post-twitter .mfn-share-post-button-label').length ) $content.find('.'+it+' .mfn-share-post-twitter').append('<span class="mfn-share-post-button-label"></span>');
        $content.find('.'+it+' .mfn-share-post-twitter .mfn-share-post-button-label').html(val);
    }else{
        $content.find('.'+it+' .mfn-share-post-twitter .mfn-share-post-button-label').remove();
    }
});

$editpanel.on('keyup paste change', '.share.linkedin_label .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if( val.length ){
        if( !$content.find('.'+it+' .mfn-share-post-linkedin .mfn-share-post-button-label').length ) $content.find('.'+it+' .mfn-share-post-linkedin').append('<span class="mfn-share-post-button-label"></span>');
        $content.find('.'+it+' .mfn-share-post-linkedin .mfn-share-post-button-label').html(val);
    }else{
        $content.find('.'+it+' .mfn-share-post-linkedin .mfn-share-post-button-label').remove();
    }
});

$editpanel.on('keyup paste change', '.share.copy_link_label .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if( val.length ){
        if( !$content.find('.'+it+' .mfn-share-post-copy-link .mfn-share-post-button-label').length ) $content.find('.'+it+' .mfn-share-post-copy-link').append('<span class="mfn-share-post-button-label"></span>');
        $content.find('.'+it+' .mfn-share-post-copy-link .mfn-share-post-button-label').html(val);
    }else{
        $content.find('.'+it+' .mfn-share-post-copy-link .mfn-share-post-button-label').remove();
    }
});


// contact box www
$editpanel.on('keyup paste change', '.contact_box.www .preview-wwwinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if(val.length){
        if($content.find('.'+it+' .get_in_touch_wrapper ul li.www p a').length){
            $content.find('.'+it+' .get_in_touch_wrapper ul li.www p a').html(val);
        }else{
            $content.find('.'+it+' .get_in_touch_wrapper ul').append('<li data-sort="6" class="www"><span class="icon"><i class="icon-link"></i></span><p><a target="_blank" href="https://'+val+'">'+val+'</a></p></li>');
        }
    }else{
        $content.find('.'+it+' .get_in_touch_wrapper ul li.www').remove();
    }

});

// call to action button
$editpanel.on('keyup paste change', '.preview-button_titleinput', function() {
    let val = $(this).val();
    let icon = $(this).closest('.mfn-element-fields-wrapper').find('.preview-iconinput').val();

    if($edited_div.hasClass('column_call_to_action')){
        // call to action button
        if( val ){
            if( icon.length ){
                $edited_div.find('.call_center').html('<a href="#" class="button has-icon "><span class="button_icon"><i class="'+$('.mfn-element-fields-wrapper .preview-iconinput').val()+'"></i></span><span class="button_label">'+val+'</span></a>');
            }else{
                $edited_div.find('.call_center').html('<a href="#" class="button"><span class="button_label">'+val+'</span></a>');
            }
        }else{
            $edited_div.find('.call_center').html('<span class="icon_wrapper"><i class="'+$('.mfn-element-fields-wrapper .preview-iconinput').val()+'"></i></span>');
        }
    }
});

// helper title 1
$editpanel.on('keyup paste change', '.helper.title1 .preview-title1input', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if($content.find('.'+it+' .links .link-1').length){
        $content.find('.'+it+' .links .link-1').html(val);
    }else{
        $content.find('.'+it+' .links').prepend('<a class="link link-1 toggle" href="#" data-rel="1">'+val+'</a>');
    }
});

// helper title 2
$editpanel.on('keyup paste change', '.helper.title2 .preview-title2input', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if($content.find('.'+it+' .links .link-2').length){
        $content.find('.'+it+' .links .link-2').html(val);
    }else{
        $content.find('.'+it+' .links').append('<a class="link link-2 toggle" href="#" data-rel="2">'+val+'</a>');
    }
});

// universal txt edit function

function fieldUpdate($field){
    let $box = $field.closest('.mfn-form-row');
    let rare_tag = $box.attr('data-edittag');
    let tag = rare_tag.replace(' | ', ' ');
    let tag_wrapper = rare_tag.split(' | ')[0];
    let tag_el = rare_tag.split(' | ')[1];
    let tag_child = $box.attr('data-edittagchild');
    let tag_pos = $box.attr('data-tagposition');
    let tag_var = $box.attr('data-edittagvar');
    let it = '.'+$box.closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $field.val();

    if(tag_el.includes('.')){
        var tag_el_ex = tag_el.split('.');
        if( $('.panel-edit-item .'+tag_var+' .active input').length ){
            tag = tag_wrapper + ' ' +$('.panel-edit-item .'+tag_var+' .active input').val()+'.'+tag_el_ex[1];
        }else if(tag_el_ex[0]){
            tag = tag_wrapper + ' ' +tag_el_ex[0]+'.'+tag_el_ex[1];
        }
    }else if( tag_child ){
        tag = tag+' '+tag_child;
    }

    // console.log('# fieldUpdate');

    if( isBlocks() ){

      if( 'title' == $box.attr('data-id') ){
        tag = '.item-preview-title';
      } else if( 'content' == $box.attr('data-id') ) {
        tag = '.item-preview-content';
      } else if( 'subtitle' == $box.attr('data-id') ) {
        tag = '.item-preview-subtitle';
      } else if( 'slogan' == $box.attr('data-id') ) {
        tag = '.item-preview-subtitle';
      } else if( 'price' == $box.attr('data-id') ) { // pricing item
        tag = '.item-preview-number';
      } else {
        return;
        // re_render();
      }
    }

    if($content.find(it+' '+tag).length){
        if( val == '' ){
            if( edited_item.jsclass == 'cart_totals' || edited_item.jsclass == 'cart_cross_sells' ){
                $content.find(it+' '+tag).html($field.attr('placeholder'));
            }else{
                $content.find(it+' '+tag).html('').hide();
            }
            return;
        }else if( !$content.find(it+' '+tag).is(':visible') ){
            $content.find(it+' '+tag).show().removeClass('empty');
        }

        if( $edited_div.hasClass('column_code') ){
            $content.find(it+' '+tag).text(val);
        }else{
            $content.find(it+' '+tag).html(val);
        }
    }else{

        if(tag_el.includes('.')){

            var tag_el_ex = tag_el.split('.');

            if( $('.panel-edit-item .'+tag_var+' .active input').length ){

                var html = document.createElement( $('.panel-edit-item .'+tag_var+' .active input').val() );
            }else if(tag_el_ex[0]){
                var html = document.createElement( tag_el_ex[0] );
            }else{
                var html = document.createElement( 'h4' );
            }

            html.classList.add(tag_el_ex[1]);


        }else{
            var html = document.createElement(tag_el);
        }

        if( tag_child ){
            var html_child = document.createElement(tag_child);
            html_child.innerHTML = val;
            html.appendChild(html_child);
        }else{
            html.innerHTML = val;
        }

        if( tag_pos.includes('|') ){

            var tag_pos_exp = tag_pos.split(' | ');
            if( tag_pos_exp[0] == 'before' ){
                $content.find(it+' '+tag_pos_exp[1]).before( html );
            }else{
                $content.find(it+' '+tag_pos_exp[1]).after( html );
            }

        }else{
            if( tag_pos == 'prepend' ){
                $content.find(it+' '+tag_wrapper).prepend( html );
            }else{
                $content.find(it+' '+tag_wrapper).append( html );
            }
        }

    }
}

function lottie_play(){
    var it = $content.find('.mcb-item-'+edited_item.uid+' .lottie').attr('id');

    var frame_start = $editpanel.find('.lottie.frame_start .mfn-field-value').val();
    var frame_end = $editpanel.find('.lottie.frame_end .mfn-field-value').val();
    var direction = $editpanel.find('.lottie.direction li.active input').val();

    iframe.window['start'+it+'frame'] = Math.floor( (parseInt(frame_start)*iframe.window[it].animationData.op)/100 );
    iframe.window['total'+it+'frames'] = Math.floor( (parseInt(frame_end)*iframe.window[it].animationData.op)/100 );

    iframe.window['frames'+it] = [iframe.window['start'+it+'frame'], iframe.window['total'+it+'frames']];
    iframe.window['frames'+it+'_reverse'] = [iframe.window['total'+it+'frames'], iframe.window['start'+it+'frame']];

    if(direction == '-1') {
        iframe.window[it].playSegments( iframe.window['frames'+it+'_reverse'], true);
    }else{
        iframe.window[it].playSegments( iframe.window['frames'+it], true);
    }
}

// lottie start
$editpanel.on('change', '.lottie .mfn-field-value', function() {
    var $editrow = $(this).closest('.mfn-form-row');
    var val = $(this).val();
    var it = $content.find('.mcb-item-'+edited_item.uid+' .lottie').attr('id');
    var $trigger_field = $editpanel.find('.lottie.trigger .mfn-field-value');

    var current_lottie = iframe.window[it];

    if( $editrow.hasClass('speed') ){
        if( $trigger_field.val() == 'scroll' ){
            re_render();
        }else{
            iframe.window[it].setSpeed(val);
            lottie_play();
        }
    }else if( $editrow.hasClass('trigger') && val == 'scroll' ){
        $('.panel-edit-item .lottie.loop li:first-child a').trigger('click');
        $('.panel-edit-item .lottie.direction li:first-child a').trigger('click');
    }else if( $editrow.hasClass('frame_start') || $editrow.hasClass('frame_end') ){
        if( $trigger_field.val() == 'scroll' ){
            re_render();
        }else{
            lottie_play();
        }
    }else if( $editrow.hasClass('src') && val != '' ){
        $editpanel.find('.lottie.file .browse-image .mfn-button-delete').trigger('click');
    }else if( $editrow.hasClass('file') && val != '' ){
        $editpanel.find('.lottie.src .mfn-field-value').val('');
    }
});
// lottie end

$(document).on('keyup paste change', '.content-txt-edit .mfn-field-value', function() {
    fieldUpdate($(this));
});

// re render

$editpanel.on('change', '.absolute-pos-watcher .mfn-field-value', function(){
    var val = $(this).val();
    if( val == 'absolute'){
        $edited_div.addClass('mcb-column-absolute');
    }else{
        $edited_div.removeClass('mcb-column-absolute');
    }
});

$editpanel.on('change', '.checkout.layout .mfn-field-value', function(){
    var val = $(this).val();
    var el = $builder.find('.mcb-item-'+edited_item.uid+' .mfn-checkout-wrapper');

    el.removeClass('mfn-be-checkout mfn-be-checkout-default');

    if( val.length ){
        el.addClass('mfn-be-checkout-'+val);
    }else{
        el.addClass('mfn-be-checkout');
    }
});

// read more line info
$editpanel.on('change', '.widget-button.button_function .mfn-field-value, .icon_box_2.link_type .mfn-field-value', function(){
    var val = $(this).val();
    var el = $builder.find('.mcb-item-'+edited_item.uid);

    if( el.next('.mfn-read-more-line').length ) el.next('.mfn-read-more-line').remove();

    if( val.length && val == 'mfn-read-more' ){
        el.after('<span class="mfn-read-more-line"></span>');
    }
});


$editpanel.on('change', '.preview-numberinput', function() {
    // number
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if( isBlocks() ){
      if($content.find('.'+it+' .item-preview-number').length){
        $content.find('.'+it+' .item-preview-number').text(val);
      }
    }else if($edited_div.hasClass('column_counter')){
        // counter
        if($content.find('.'+it+' .desc_wrapper .number').length){
            $content.find('.'+it+' .desc_wrapper .number').text(val);
        }else{
            if($content.find('.'+it+' .desc_wrapper .number-wrapper').length){
                $content.find('.'+it+' .desc_wrapper .number-wrapper').append('<span class="number" data-to="'+val+'">'+val+'</span>');
            }else{
                $content.find('.'+it+' .desc_wrapper').prepend('<div class="number-wrapper"><span class="number" data-to="'+val+'">'+val+'</span></div>');
            }
        }
    }else if($edited_div.hasClass('column_how_it_works')){
        // how it works
        if($content.find('.'+it+' .number').length){
            $content.find('.'+it+' .number').text(val);
        }else{
            $content.find('.'+it+' .image').html('<span class="number">'+val+'</span>');
        }
    }else if($edited_div.hasClass('column_quick_fact')){
        // quick fact
        if($content.find('.'+it+' .number-wrapper .number').length){
            $content.find('.'+it+' .number-wrapper .number').attr('data-to', val).text(val);
        }else{
            $content.find('.'+it+' .quick_fact').prepend('<div class="number-wrapper"><span class="number" data-to="'+val+'">'+val+'</span></div>');
        }
    }
});

$editpanel.on('keyup paste change', '.wrap.tab_title .mfn-field-value', function() {
    let val = $(this).val();

    $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-title').text(val);

    if( !val.length && !$content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-li-icon').length ) {
        $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-title').text('[ Fill the title or icon ]');
    }

});

$editpanel.on('keyup paste change', '.wrap.tab_desc .mfn-field-value', function() {
    let val = $(this).val();

    if( !$content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-desc').length ) {
        $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-li-desc').append('<span class="mfn-tabber-nav-desc" />')
    }
    $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-desc').text(val);
});

$editpanel.on('keyup paste change', '.preview-prefixinput', function() {
    // prefix
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if($edited_div.hasClass('column_counter')){
        // counter
        if($content.find('.'+it+' .desc_wrapper .label.prefix').length){
            $content.find('.'+it+' .desc_wrapper .label.prefix').text(val);
        }else{
            if($content.find('.'+it+' .desc_wrapper .number-wrapper').length){
                $content.find('.'+it+' .desc_wrapper .number-wrapper').prepend('<span class="label prefix">'+val+'</span>');
            }else{
                $content.find('.'+it+' .desc_wrapper').prepend('<div class="number-wrapper"><span class="label prefix">'+val+'</span></div>');
            }
        }
    }else if($edited_div.hasClass('column_quick_fact')){
        // quick fact prefix
        if($content.find('.'+it+' .number-wrapper .prefix').length){
            $content.find('.'+it+' .number-wrapper .prefix').text(val);
        }else{
            if($content.find('.'+it+' .number-wrapper').length){
                $content.find('.'+it+' .number-wrapper').prepend('<span class="label prefix">'+val+'</span>');
            }else{
                $content.find('.'+it+' .desc_wrapper').prepend('<div class="number-wrapper"><span class="label prefix">'+val+'</span></div>');
            }
        }
    }
});
$editpanel.on('keyup paste change', '.preview-labelinput', function() {
    // postfix
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if($edited_div.hasClass('column_counter')){
        // counter
        if($content.find('.'+it+' .desc_wrapper .label.postfix').length){
            $content.find('.'+it+' .desc_wrapper .label.postfix').text(val);
        }else{
            if($content.find('.'+it+' .desc_wrapper .number-wrapper').length){
                $content.find('.'+it+' .desc_wrapper .number-wrapper').append('<span class="label postfix">'+val+'</span>');
            }else{
                $content.find('.'+it+' .desc_wrapper').prepend('<div class="number-wrapper"><span class="label postfix">'+val+'</span></div>');
            }
        }
    }else if($edited_div.hasClass('column_quick_fact')){
        // quick fact postfix
        if($content.find('.'+it+' .number-wrapper .label.postfix').length){
            $content.find('.'+it+' .number-wrapper .label.postfix').text(val);
        }else{
            if($content.find('.'+it+' .number-wrapper').length){
                $content.find('.'+it+' .number-wrapper').append('<span class="label postfix">'+val+'</span>');
            }else{
                $content.find('.'+it+' .desc_wrapper').prepend('<div class="number-wrapper"><span class="label postfix">'+val+'</span></div>');
            }
        }
    }else if($edited_div.hasClass('column_chart')){
        // chart

        if(val.length){
            if($content.find('.'+it+' .num').length){
                $content.find('.'+it+' .num').text(val);
            }else{

                if( !$content.find('.'+it+' .chart > .image').length && !$content.find('.'+it+' .chart > .icon').length ){
                    $content.find('.'+it+' .chart').prepend('<div class="num">'+val+'</div>');
                }else{
                    if(!$content.find('.'+it+' .chart .mfn_tmp_info').length){
                        $content.find('.'+it+' .chart').append('<span class="mfn_tmp_info">Picture and icon have higher priority. Delete them to see label.</span>');
                        setTimeout(function() {
                            $content.find('.mfn_tmp_info').remove();
                        }, 3000);
                    }
                }
            }
        }else{
            if( $('.panel-edit-item .mfn-form .preview-imageinput').val().length ){
                if($content.find('.'+it+' .chart .image img').length){
                    $content.find('.'+it+' .chart .image img').attr('src', $('.panel-edit-item .mfn-form .preview-imageinput').val());
                }else{
                    $content.find('.'+it+' .chart .num').remove();
                    $content.find('.'+it+' .chart .icon').remove();
                    $content.find('.'+it+' .chart').prepend('<div class="image"><img class="scale-with-grid" src="'+$('.panel-edit-item .mfn-form .preview-imageinput').val()+'" alt="" /></div>');
                }
            }else if( $('.panel-edit-item .mfn-form .preview-iconinput').val().length ){
                if($content.find('.'+it+' .chart .icon i').length){
                    $content.find('.'+it+' .chart .icon i').attr('class', $('.panel-edit-item .mfn-form .preview-iconinput').val());
                }else{
                    $content.find('.'+it+' .chart > .image').remove();
                    $content.find('.'+it+' .chart > .num').remove();
                    $content.find('.'+it+' .chart').prepend('<div class="icon"><i class="'+$('.panel-edit-item .mfn-form .preview-iconinput').val()+'"></i></div>');
                }
            }

        }
    }else if($edited_div.hasClass('column_icon_box_2')){
        // icon box 2

        if( $('.panel-edit-item .mfn-form .icon_box_2.image .mfn-field-value').val().length || $('.panel-edit-item .mfn-form .icon_box_2.icon .mfn-field-value').val().length ){
            if( !$content.find('.'+it+' .mfn-icon-box .mfn_tmp_info').length ){
                $content.find('.'+it+' .mfn-icon-box').prepend('<span style="margin-bottom: 20px;" class="mfn_tmp_info">Image and icon have higher priority. Delete them to see label.</span>');
                setTimeout(function() {
                    $content.find('.mfn_tmp_info').remove();
                }, 3000);
            }
        }else if(val.length){
            if( $content.find('.'+it+' .mfn-icon-box .icon-wrapper').length ){
                $content.find('.'+it+' .mfn-icon-box .icon-wrapper').html('<span class="icon-label">'+val+'</span>');
            }else{
                $content.find('.'+it+' .mfn-icon-box .desc-wrapper').before('<div class="icon-wrapper"><span class="icon-label">'+val+'</span></div>');
            }
        }else{
            $content.find('.'+it+' .mfn-icon-box .icon-wrapper').remove();
        }
    }

});

$editpanel.on('change', '.banner_box.image_height .mfn-field-value', function() {
    var val = $(this).val();
    var it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');

    $builder.find('.'+it+' .mfn-banner-box').removeClass('mfn-banner-box-height');

    if( val.length ){
        $builder.find('.'+it+' .mfn-banner-box').addClass('mfn-banner-box-height');
    }
});

$editpanel.on('change', '.product_tabs.nav .mfn-field-value', function() {
    var val = $(this).val();
    var it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    $content.find('.'+it+' .mfn-woocommerce-tabs').removeClass('mfn-woocommerce-tabs-nav-top mfn-woocommerce-tabs-nav-left mfn-woocommerce-tabs-nav-right');
    if(!val.length) val = 'top';
    $content.find('.'+it+' .mfn-woocommerce-tabs').addClass('mfn-woocommerce-tabs-nav-'+val);
});

$editpanel.on('change', '.preview-positioninput', function() {
    var val = $(this).val();

    if(!val.length) {
        $('.panel-edit-item .mfn-element-fields-wrapper .activeif-item_position input').val('').trigger('change');
    }

});

$editpanel.on('change', '.mfn-line-clamp-field .mfn-field-value', function() {
    var val = $(this).val();
    var it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    if( val.length && val != '0' ) {
        $content.find('.'+it).addClass('mfn-line-clamp');
    }else{
        $content.find('.'+it).removeClass('mfn-line-clamp');
    }
});

$editpanel.on('keyup paste change', '.mfn-element-fields-wrapper .preview-titleinput', function() {
    // title
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if($edited_div.hasClass('column_list')) {
        // list
        if($content.find('.'+it+' .list_right h4').length) {
            $content.find('.'+it+' .list_right h4').html(val);
        }else if($content.find('.'+it+' .circle').length) {
            $content.find('.'+it+' .circle').html(val);
        }
    }

});

$editpanel.on('change', '.mfn-element-fields-wrapper .responsive-custom-visibility .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    let label = 'Hide under ';

    if( $(this).closest('.mfn-form-row').hasClass('show_under_custom')){
        label = 'Show under ';
        $editpanel.find('.mfn-element-fields-wrapper .hide_under_custom input').val('');
    }else{
        $editpanel.find('.mfn-element-fields-wrapper .show_under_custom input').val('');
    }

    if( val.length ) {
        $edited_div.attr('data-tooltip', label+val);
        $edited_div.attr('data-position', 'bottom');
    }else{
        $edited_div.removeAttr('data-tooltip');
    }

});

// custom ID

$editpanel.on('change', '.custom_id .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    let uid = $edited_div.attr('data-uid');

    if(val.length) {
        $edited_div.attr('id', val);
        if( $('body').hasClass('mfn-navigator-active') ) {
            $navigator.find('.navigator-section.nav-'+uid+' > a > .navigator-link-label').text('#'+val);
        }
    }else{
        $edited_div.removeAttr('id');
        $navigator.find('.navigator-section.nav-'+uid+' > a > .navigator-link-label').text('Section');
    }

    if($('body').hasClass('mfn-navigator-active') ) be_navigator.show(edited_item.uid);
});

// our team list links email fb twitter linkedin vcard
$editpanel.on('keyup paste change', '.our_team_list.email .preview-emailinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    if(val.length) {
        if($content.find('.'+it+' .bq_wrapper .links').length){
            if($content.find('.'+it+' .bq_wrapper .links a.mail').length){
                $content.find('.'+it+' .bq_wrapper .links a.mail').attr('href', val);
            }else{
                $content.find('.'+it+' .bq_wrapper .links').prepend('<a href="mailto:'+val+'" class="icon_bar icon_bar_small mail"><span class="t"><i class="icon-mail"></i></span><span class="b"><i class="icon-mail"></i></span></a>');
            }
        }else{
            $content.find('.'+it+' .bq_wrapper').append('<div class="links"><a href="mailto:'+val+'" class="icon_bar icon_bar_small mail"><span class="t"><i class="icon-mail"></i></span><span class="b"><i class="icon-mail"></i></span></a></div>');
        }
    }else{
        $content.find('.'+it+' .bq_wrapper .links a.mail').remove();
    }
});

$editpanel.on('keyup paste change', '.our_team_list.facebook .preview-facebookinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    if(val.length){
        if($content.find('.'+it+' .bq_wrapper .links').length){
            if($content.find('.'+it+' .bq_wrapper .links a.facebook').length){
                $content.find('.'+it+' .bq_wrapper .links a.facebook').attr('href', val);
            }else{
                $content.find('.'+it+' .bq_wrapper .links').append('<a target="_blank" href="'+val+'" class="icon_bar icon_bar_small facebook"><span class="t"><i class="icon-facebook"></i></span><span class="b"><i class="icon-facebook"></i></span></a>');
            }
        }else{
            $content.find('.'+it+' .bq_wrapper').append('<div class="links"><a target="_blank" href="'+val+'" class="icon_bar icon_bar_small facebook"><span class="t"><i class="icon-facebook"></i></span><span class="b"><i class="icon-facebook"></i></span></a></div>');
        }
    }else{
        $content.find('.'+it+' .bq_wrapper .links a.facebook').remove();
    }
});

$editpanel.on('keyup paste change', '.our_team_list.twitter .preview-twitterinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    if(val.length){
        if($content.find('.'+it+' .bq_wrapper .links').length){
            if($content.find('.'+it+' .bq_wrapper .links a.twitter').length){
                $content.find('.'+it+' .bq_wrapper .links a.twitter').attr('href', val);
            }else{
                $content.find('.'+it+' .bq_wrapper .links').append('<a target="_blank" href="'+val+'" class="icon_bar icon_bar_small twitter"><span class="t"><i class="icon-twitter"></i></span><span class="b"><i class="icon-twitter"></i></span></a>');
            }
        }else{
            $content.find('.'+it+' .bq_wrapper').append('<div class="links"><a target="_blank" href="'+val+'" class="icon_bar icon_bar_small twitter"><span class="t"><i class="icon-twitter"></i></span><span class="b"><i class="icon-twitter"></i></span></a></div>');
        }
    }else{
        $content.find('.'+it+' .bq_wrapper .links a.twitter').remove();
    }
});

$editpanel.on('keyup paste change', '.our_team_list.linkedin .preview-linkedininput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    if(val.length){
        if($content.find('.'+it+' .bq_wrapper .links').length){
            if($content.find('.'+it+' .bq_wrapper .links a.linkedin').length){
                $content.find('.'+it+' .bq_wrapper .links a.linkedin').attr('href', val);
            }else{
                $content.find('.'+it+' .bq_wrapper .links').append('<a target="_blank" href="'+val+'" class="icon_bar icon_bar_small linkedin"><span class="t"><i class="icon-linkedin"></i></span><span class="b"><i class="icon-linkedin"></i></span></a>');
            }
        }else{
            $content.find('.'+it+' .bq_wrapper').append('<div class="links"><a target="_blank" href="'+val+'" class="icon_bar icon_bar_small linkedin"><span class="t"><i class="icon-linkedin"></i></span><span class="b"><i class="icon-linkedin"></i></span></a></div>');
        }
    }else{
        $content.find('.'+it+' .bq_wrapper .links a.linkedin').remove();
    }
});

$editpanel.on('keyup paste change', '.our_team_list.vcard .preview-vcardinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    if(val.length){
        if($content.find('.'+it+' .bq_wrapper .links').length){
            if($content.find('.'+it+' .bq_wrapper .links a.vcard').length){
                $content.find('.'+it+' .bq_wrapper .links a.vcard').attr('href', val);
            }else{
                $content.find('.'+it+' .bq_wrapper .links').append('<a href="'+val+'" class="icon_bar icon_bar_small vcard"><span class="t"><i class="icon-vcard"></i></span><span class="b"><i class="icon-vcard"></i></span></a>');
            }
        }else{
            $content.find('.'+it+' .bq_wrapper').append('<div class="links"><a href="'+val+'" class="icon_bar icon_bar_small vcard"><span class="t"><i class="icon-vcard"></i></span><span class="b"><i class="icon-vcard"></i></span></a></div>');
        }
    }else{
        $content.find('.'+it+' .bq_wrapper .links a.vcard').remove();
    }
});

// our team list blockquote
$editpanel.on('keyup paste change', '.our_team_list.blockquote .preview-blockquoteinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if($content.find('.'+it+' .column .bq_wrapper blockquote').length){
        $content.find('.'+it+' .column .bq_wrapper blockquote').html(val);
    }else{
        $content.find('.'+it+' .column .bq_wrapper').prepend('<div class="blockquote"><span class="mfn-blockquote-icon"><i class="icon-quote"></i></span><blockquote>'+val+'</blockquote></div>');
    }
});

// our team
$editpanel.on('keyup paste change', '.our_team.blockquote .preview-blockquoteinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if($content.find('.'+it+' .desc_wrapper blockquote').length){
        $content.find('.'+it+' .desc_wrapper blockquote').html(val);
    }else{
        $content.find('.'+it+' .desc_wrapper').append('<blockquote>'+val+'</blockquote>');
    }
});

// our team links email fb twitter linkedin vcard
$editpanel.on('keyup paste change', '.our_team.email .preview-emailinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    if(val.length){
        if($content.find('.'+it+' .desc_wrapper .links').length){
            if($content.find('.'+it+' .desc_wrapper .links a.mail').length){
                $content.find('.'+it+' .desc_wrapper .links a.mail').attr('href', val);
            }else{
                $content.find('.'+it+' .desc_wrapper .links').prepend('<a href="mailto:'+val+'" class="icon_bar icon_bar_small mail"><span class="t"><i class="icon-mail"></i></span><span class="b"><i class="icon-mail"></i></span></a>');
            }
        }else{
            $content.find('.'+it+' .desc_wrapper').append('<div class="links"><a href="mailto:'+val+'" class="icon_bar icon_bar_small mail"><span class="t"><i class="icon-mail"></i></span><span class="b"><i class="icon-mail"></i></span></a></div>');
        }
    }else{
        $content.find('.'+it+' .desc_wrapper .links a.mail').remove();
    }
});

$editpanel.on('keyup paste change', '.our_team.facebook .preview-facebookinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    if(val.length){
        if($content.find('.'+it+' .desc_wrapper .links').length){
            if($content.find('.'+it+' .desc_wrapper .links a.facebook').length){
                $content.find('.'+it+' .desc_wrapper .links a.facebook').attr('href', val);
            }else{
                $content.find('.'+it+' .desc_wrapper .links').append('<a target="_blank" href="'+val+'" class="icon_bar icon_bar_small facebook"><span class="t"><i class="icon-facebook"></i></span><span class="b"><i class="icon-facebook"></i></span></a>');
            }
        }else{
            $content.find('.'+it+' .desc_wrapper').append('<div class="links"><a target="_blank" href="'+val+'" class="icon_bar icon_bar_small facebook"><span class="t"><i class="icon-facebook"></i></span><span class="b"><i class="icon-facebook"></i></span></a></div>');
        }
    }else{
        $content.find('.'+it+' .desc_wrapper .links a.facebook').remove();
    }
});

$editpanel.on('keyup paste change', '.our_team.twitter .preview-twitterinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    if(val.length){
        if($content.find('.'+it+' .desc_wrapper .links').length){
            if($content.find('.'+it+' .desc_wrapper .links a.twitter').length){
                $content.find('.'+it+' .desc_wrapper .links a.twitter').attr('href', val);
            }else{
                $content.find('.'+it+' .desc_wrapper .links').append('<a target="_blank" href="'+val+'" class="icon_bar icon_bar_small twitter"><span class="t"><i class="icon-twitter"></i></span><span class="b"><i class="icon-twitter"></i></span></a>');
            }
        }else{
            $content.find('.'+it+' .desc_wrapper').append('<div class="links"><a target="_blank" href="'+val+'" class="icon_bar icon_bar_small twitter"><span class="t"><i class="icon-twitter"></i></span><span class="b"><i class="icon-twitter"></i></span></a></div>');
        }
    }else{
        $content.find('.'+it+' .desc_wrapper .links a.twitter').remove();
    }
});

$editpanel.on('keyup paste change', '.our_team.linkedin .preview-linkedininput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    if(val.length){
        if($content.find('.'+it+' .desc_wrapper .links').length){
            if($content.find('.'+it+' .desc_wrapper .links a.linkedin').length){
                $content.find('.'+it+' .desc_wrapper .links a.linkedin').attr('href', val);
            }else{
                $content.find('.'+it+' .desc_wrapper .links').append('<a target="_blank" href="'+val+'" class="icon_bar icon_bar_small linkedin"><span class="t"><i class="icon-linkedin"></i></span><span class="b"><i class="icon-linkedin"></i></span></a>');
            }
        }else{
            $content.find('.'+it+' .desc_wrapper').append('<div class="links"><a target="_blank" href="'+val+'" class="icon_bar icon_bar_small linkedin"><span class="t"><i class="icon-linkedin"></i></span><span class="b"><i class="icon-linkedin"></i></span></a></div>');
        }
    }else{
        $content.find('.'+it+' .desc_wrapper .links a.linkedin').remove();
    }
});

$editpanel.on('keyup paste change', '.preview-cart_button_textinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if($content.find('.'+it+' button[type="submit"]').length){
        $content.find('.'+it+' button[type="submit"]').text(val);
    }
});

$editpanel.on('keyup paste change', '.our_team.vcard .preview-vcardinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    if(val.length){
        if($content.find('.'+it+' .desc_wrapper .links').length){
            if($content.find('.'+it+' .desc_wrapper .links a.vcard').length){
                $content.find('.'+it+' .desc_wrapper .links a.vcard').attr('href', val);
            }else{
                $content.find('.'+it+' .desc_wrapper .links').append('<a href="'+val+'" class="icon_bar icon_bar_small vcard"><span class="t"><i class="icon-vcard"></i></span><span class="b"><i class="icon-vcard"></i></span></a>');
            }
        }else{
            $content.find('.'+it+' .desc_wrapper').append('<div class="links"><a href="'+val+'" class="icon_bar icon_bar_small vcard"><span class="t"><i class="icon-vcard"></i></span><span class="b"><i class="icon-vcard"></i></span></a></div>');
        }
    }else{
        $content.find('.'+it+' .desc_wrapper .links a.vcard').remove();
    }
});

$editpanel.on('keyup paste change', '.preview-phoneinput', function() {
    // phone
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if($edited_div.hasClass('column_our_team')){
        // our team
        if($content.find('.'+it+' .desc_wrapper p.phone a').length){
            $content.find('.'+it+' .desc_wrapper p.phone a').text(val);
        }else{
            $content.find('.'+it+' .desc_wrapper .hr_color').before('<p class="phone"><i class="icon-phone"></i> <a href="#">'+val+'</a></p>');
        }
    }else if($edited_div.hasClass('column_our_team_list')){
        // our team
        if($content.find('.'+it+' .desc_wrapper p.phone a').length){
            $content.find('.'+it+' .desc_wrapper p.phone a').text(val);
        }else{
            $content.find('.'+it+' .desc_wrapper .hr_color').before('<p class="phone"><i class="icon-phone"></i> <a href="#">'+val+'</a></p>');
        }
    }
});

$editpanel.on('change', '.widget-chart .preview-line_widthinput', function() {
    // chart
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    $content.find('.'+it+' .chart').attr('data-line-width', val);
    $content.find('.'+it+' .chart_box').removeClass('mfn-initialized');
    mfnChart();
});

$editpanel.on('change', '.gallery-msnry-rerender-item .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if( $content.find('.'+it+' .gallery').hasClass('masonry') ) {
        setTimeout(function() { re_render(edited_item.uid); }, 100);
    }
});

// mennu pointer position top/bottom
$editpanel.on('change', ' .preview-menu-pointer-positioninput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    $edited_div.removeClass('mfn-pointer-bottom');
    if(val.length){
        $edited_div.addClass(val);
    }
});

$editpanel.on('change', '.preview-stretchinput', function() {
    // stretch image
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    if($edited_div.hasClass('column_image')){
        // image stretch
        $content.find('.'+it+' .image_frame').removeClass('stretch-ultrawide stretch');
        if(val == 'ultrawide'){
            $content.find('.'+it+' .image_frame').addClass('stretch-ultrawide');
        }else if(val == "1"){
            $content.find('.'+it+' .image_frame').addClass('stretch');
        }
    }
});

$editpanel.on('change', '.panel-edit-item .mfn-form .form-group.font-family-select select', function() {
    var val = $(this).val();
    $(this).attr('data-value', val);
});

// query builder query loop settings

$editpanel.on('change', '.query_slider_columns .mfn-field-value', function() {
    updateColumnsRwd();
});

function updateColumnsRwd() {

    var val_desktop = $('.query_slider_columns .mfn-field-value').val();

    if( val_desktop > 0 ) {
        var percent_d = 100 / parseInt(val_desktop);
        $editpanel.find('.mfn-form-row.query_item_default_width .mfn-field-value').val(percent_d+"%").trigger('change');
    }

}


/**
 * Performance
 * Uses 'perf' name because 'preformance' is reserved in JS
 */

$(document).on( 'click', '.mfn-form-themeoptions .performance-apply-enable', function(e){
    e.preventDefault();
    perf.enable( $(this) ); // performance name is reverved
});

$(document).on( 'click', '.mfn-form-themeoptions .performance-apply-disable', function(e){
    e.preventDefault();
    perf.disable( $(this) ); // performance name is reverved
});

var perf = {

  // perf.enable()

  enable: function( $el ){

    if ( confirm( "Apply recommended settings?" ) ) {

      enableBeforeUnload();

      var button_text = $el.text();

      $el.addClass('loading');

      // change options

      $('.themeoption.google-font-mode .form-control li:eq(1) a').trigger('click');

      $('.themeoption.lazy-load .form-control li:eq(1) a').trigger('click');
      $('.themeoption.srcset-limit .form-control li:eq(1) a').trigger('click');

      $('.themeoption.performance-assets-disable .form-control li:eq(0).active').trigger('click');
      $('.themeoption.performance-assets-disable .form-control li:eq(1).active').trigger('click');
      $('.themeoption.performance-assets-disable .form-control li:eq(2):not(.active)').trigger('click');
      $('.themeoption.performance-wp-disable .form-control li:not(.active)').trigger('click');

      $('.themeoption.jquery-location .form-control li:eq(1) a').trigger('click');
      $('.themeoption.css-location .form-control li:eq(0) a').trigger('click');
      $('.themeoption.local-styles-location .form-control li:eq(1) a').trigger('click');

      $('.themeoption.minify-css .form-control li:eq(1) a').trigger('click');
      $('.themeoption.minify-js .form-control li:eq(1) a').trigger('click');

      $('.themeoption.static-css .form-control li:eq(1) a').trigger('click');
      $('.themeoption.hold-cache .form-control li:eq(0) a').trigger('click');

      // trigger ajax actions

      setTimeout(function(){

        $('.themeoption.google-font-mode-regenerate .mfn-btn').attr('data-confirm',1).trigger('click');

      },100);

      // button

      setTimeout(function(){

        $el.removeClass('loading');
        $('.btn-wrapper', $el).text('Downloading Google Fonts...');

        setTimeout(function(){
          $el.addClass('loading');

          setTimeout(function(){
            $el.removeClass('loading');
            $('.btn-wrapper', $el).text('All done');

            setTimeout(function(){
              $('.btn-wrapper', $el).text(button_text);
            },2000);

          },2000);

        },2000);

      },2000);

    } else {
      return false;
    }

  },

  // perf.disable()

  disable: function( $el ){

    if ( confirm( "Disable all performance settings?" ) ) {

      enableBeforeUnload();

      var button_text = $el.text();

      $el.addClass('loading');

      // change options

      $('.themeoption.google-font-mode .form-control li:eq(0) a').trigger('click');

      $('.themeoption.lazy-load .form-control li:eq(0) a').trigger('click');
      $('.themeoption.srcset-limit .form-control li:eq(0) a').trigger('click');

      $('.themeoption.performance-assets-disable .form-control li.active').trigger('click');
      $('.themeoption.performance-wp-disable .form-control li.active').trigger('click');

      $('.themeoption.jquery-location .form-control li:eq(0) a').trigger('click');
      $('.themeoption.css-location .form-control li:eq(0) a').trigger('click');
      $('.themeoption.local-styles-location .form-control li:eq(0) a').trigger('click');

      $('.themeoption.minify-css .form-control li:eq(0) a').trigger('click');
      $('.themeoption.minify-js .form-control li:eq(0) a').trigger('click');

      $('.themeoption.static-css .form-control li:eq(0) a').trigger('click');
      $('.themeoption.hold-cache .form-control li:eq(0) a').trigger('click');

      // button

      setTimeout(function(){

        $el.removeClass('loading');
        $('.btn-wrapper', $el).text('All done');

        setTimeout(function(){
          $('.btn-wrapper', $el).text(button_text);
        },2000);

      },1000);

    } else {
      return false;
    }

  }

};


// segmented options

$editpanel.on("click", '.mfn-modal .segmented-options.single-segmented-option li a, .sidebar-panel-content .panel:not(.panel-settings) .segmented-options.single-segmented-option li a', function(e) {
    e.preventDefault();

    let $li = $(this).closest('li');
    /*let is_unclickable = false;
    if( $li.closest('.segmented-options').hasClass('mfn-placeholder-inherited-class') ) is_unclickable = true;*/

    if( !$li.hasClass('active') ){
        $li.siblings('li').removeClass('active');
        $li.siblings('li').find('input').prop('checked', false);

        $li.addClass('active');
        $li.find('input').prop('checked', true).trigger('change');
    }else{
        return;
    }

    /*else{
        $li.removeClass('active');
        $li.find('input').prop('checked', false).trigger('change');
    }*/


    let $editbox = $(this).closest('.mfn-form-row');
    let $editwrapper = $(this).closest('.mfn-element-fields-wrapper');

    let val = $li.find('input').val();
    let it = $editbox.closest('.mfn-element-fields-wrapper').attr('data-element');

    if( $editbox.hasClass('shop_products') && $editbox.hasClass('text-align') ) {
        $content.find('.'+it+' .products').removeClass(`mfn-align-left-${screen} mfn-align-center-${screen} mfn-align-right-${screen}`);
        if( val.length ) $content.find('.'+it+' .products').addClass(`mfn-align-${val}-${screen}`);
    }


    if( $(this).closest('.mfn-modal').length ) return;


    

    if( $(this).closest('.mfn-element-fields-wrapper').length && !val.length && $editbox.hasClass('mfn-placeholder-inherited-class') ) return;


    // shop products text align fix
    /*if( $editbox.hasClass('shop_products') && $editbox.hasClass('text-align') ){
        
        if( !$builder.find('style.mfn-style-shop-products-equalizator').length ) $builder.append('<style class="mfn-style-shop-products-equalizator"></style>');

        let flex_sp_val = 'center';
        if( val == 'left' ){ flex_sp_val = 'flex-start'; }else if( val == 'right' ){ flex_sp_val = 'flex-end'; }
        $builder.find('style.mfn-style-shop-products-equalizator').html('.mcb-section .mcb-wrap .mcb-item-'+edited_item.uid+' ul.products.mfn-equal-heights li.product{ align-items: '+flex_sp_val+';}');
    }*/


    if( $editbox.hasClass('inline-style-input') ) return;


    // lottie start
    if( $editbox.hasClass('lottie') ){
        var l_id = $content.find('.mcb-item-'+edited_item.uid+' .lottie').attr('id');

        if( $editbox.hasClass('loop') ){
            if( val == 1 ){
                iframe.window[l_id].loop = true;
                iframe.window[l_id].play();
            }else{
                iframe.window[l_id].loop = false;
                iframe.window[l_id].stop();
            }
        }

        if( $editbox.hasClass('direction') ){
            iframe.window[l_id].setDirection(val);
            iframe.window['direction'+l_id] = parseInt(val);
            lottie_play();
        }
    }
    // lottie end

    // header icon count position

    if( $editbox.hasClass('icon_count_posv') ){
        if( val == '0' ){
            $editpanel.find('.panel-edit-item .header_icon.bottom .mfn-field-value').val('initial').trigger('change');
            $editpanel.find('.panel-edit-item .header_icon.bottom_tablet .mfn-field-value').val('initial').trigger('change');
            $editpanel.find('.panel-edit-item .header_icon.bottom_laptop .mfn-field-value').val('initial').trigger('change');
            $editpanel.find('.panel-edit-item .header_icon.bottom_mobile .mfn-field-value').val('initial').trigger('change');
        }else{
            $editpanel.find('.panel-edit-item .header_icon.top .mfn-field-value').val('initial').trigger('change');
            $editpanel.find('.panel-edit-item .header_icon.top_tablet .mfn-field-value').val('initial').trigger('change');
            $editpanel.find('.panel-edit-item .header_icon.top_laptop .mfn-field-value').val('initial').trigger('change');
            $editpanel.find('.panel-edit-item .header_icon.top_mobile .mfn-field-value').val('initial').trigger('change');
        }
    }

    if( $editbox.hasClass('icon_count_posh') ){
        if( val == '0' ){
            $editpanel.find('.panel-edit-item .header_icon.right .mfn-field-value').val('initial').trigger('change');
            $editpanel.find('.panel-edit-item .header_icon.right_tablet .mfn-field-value').val('initial').trigger('change');
            $editpanel.find('.panel-edit-item .header_icon.right_laptop .mfn-field-value').val('initial').trigger('change');
            $editpanel.find('.panel-edit-item .header_icon.right_mobile .mfn-field-value').val('initial').trigger('change');
        }else{
            $editpanel.find('.panel-edit-item .header_icon.left .mfn-field-value').val('initial').trigger('change');
            $editpanel.find('.panel-edit-item .header_icon.left_tablet .mfn-field-value').val('initial').trigger('change');
            $editpanel.find('.panel-edit-item .header_icon.left_laptop .mfn-field-value').val('initial').trigger('change');
            $editpanel.find('.panel-edit-item .header_icon.left_mobile .mfn-field-value').val('initial').trigger('change');
        }
    }

    if( $editbox.hasClass('tabber_nav_position') ){

        if( screen == 'desktop' ){
            $content.find('.'+it).removeClass('mfn-tabber-nav-left mfn-tabber-nav-top mfn-tabber-nav-right mfn-tabber-nav-bottom');
            $content.find('.'+it).addClass('mfn-tabber-nav-'+val);
        }else{
            $content.find('.'+it).removeClass('mfn-tabber-nav-'+screen+'-left mfn-tabber-nav-'+screen+'-top mfn-tabber-nav-'+screen+'-right mfn-tabber-nav-'+screen+'-bottom');
            $content.find('.'+it).addClass('mfn-tabber-nav-'+screen+'-'+val);
        }
    }

    if( $editbox.hasClass('tabber_icon_position') ){

        if( screen == 'desktop' ){
            $content.find('.'+it).removeClass('mfn-tabber-icon-left mfn-tabber-icon-top mfn-tabber-icon-right mfn-tabber-icon-bottom mfn-tabber-icon-center-left mfn-tabber-icon-center-right');
            $content.find('.'+it).addClass('mfn-tabber-icon-'+val);
        }else{
            $content.find('.'+it).removeClass('mfn-tabber-icon-'+screen+'-left mfn-tabber-icon-'+screen+'-top mfn-tabber-icon-'+screen+'-right mfn-tabber-icon-'+screen+'-bottom mfn-tabber-icon-'+screen+'-center-right mfn-tabber-icon-'+screen+'-center-left');
            $content.find('.'+it).addClass('mfn-tabber-icon-'+screen+'-'+val);
        }
    }

    

    if( $editbox.hasClass('wrap grid') ) {
        if( val.length ){
            $content.find('.'+it).addClass('mcb-wrap-grid');
        }else{
            $content.find('.'+it).removeClass('mcb-wrap-grid');
        }
    }

    if( $editbox.hasClass('wrap') && $editbox.hasClass('grid_columns_switcher') ) {

        $content.find('.'+it).removeClass('mcb-wrap-grid-col-custom');

        if( val.length ){
            $content.find('.'+it).addClass('mcb-wrap-grid-col-custom');
        }

    }


    

    if( $editbox.hasClass('shop_categories') && $editbox.hasClass('grid-template-columns') ) {
        let this_el = $content.find('.'+it+' .products');

        if( this_el.hasClass('mfn-grid-layout') ) return;

        $content.find('.'+it+' .woocommerce').attr('class', 'woocommerce');
        this_el.addClass('mfn-grid-layout');
    }



    if( $editbox.hasClass('tabber_nav_width_switcher') ) {

        if( !val.length ) {
            delete(edited_item.attr?.css_tabber_nav_width);
            loopAllStyleFields(edited_item.uid);
        }

    }

    if( $editbox.hasClass('tabber_nav_open_opt') ) {

        $content.find('.'+it).removeClass('mfn-tabber-open-on-click mfn-tabber-open-on-hover');

        if( val.length ){
            $content.find('.'+it).addClass('mfn-tabber-open-on-'+val);
        }else{
            $content.find('.'+it).addClass('mfn-tabber-open-on-click');
        }

        runAjaxElements();

    }

    

    if( $editbox.hasClass('divider_2') && $editbox.hasClass('align') ) {

        if( screen == 'desktop' ){
            $content.find('.'+it+' .mfn-divider').removeClass('mfn-divider-start mfn-divider-center  mfn-divider-end');
        }else{
            $content.find('.'+it+' .mfn-divider').removeClass('mfn-divider-'+screen+'-start mfn-divider-'+screen+'-center  mfn-divider-'+screen+'-end');
        }

        if( val.length ) {
            if( screen == 'desktop' ){
                $content.find('.'+it+' .mfn-divider').addClass('mfn-divider-'+val);
            }else{
                $content.find('.'+it+' .mfn-divider').addClass('mfn-divider-'+screen+'-'+val);
            }
        }else{
            if( screen == 'desktop' ){
                $content.find('.'+it+' .mfn-divider').addClass('mfn-divider-start');
            }else{
                $content.find('.'+it+' .mfn-divider').addClass('mfn-divider-'+screen+'-start');
            }
        }

    }

    // watchchanges
    if( $editbox.hasClass('watchChanges') ) {
        var id = $editbox.attr('id');
        mfnoptsinputs.getField(id, val);
    }

    // section type query loop
    if( $editbox.hasClass('section type') ) {

        if( !val.length ) {

            $('.mfn-element-fields-wrapper .query_type .mfn-field-value').val('').trigger('change');
            $('.mfn-element-fields-wrapper .query_post_type .mfn-field-value').val('').trigger('change');
            $('.mfn-element-fields-wrapper .query_terms_taxonomy .mfn-field-value').val('').trigger('change');

            $content.find('.'+it).removeClass('mfn-looped-items mfn-section-tabber');
            $('.mfn-element-fields-wrapper').removeClass('mfn-is-query-looped');
            $('.mfn-element-fields-wrapper').removeClass('mfn-section-is-tabber');
            $('.mfn-ui.mfn-editing-section .mfn-form .mfn-element-fields-wrapper').removeClass('mfn-is-query-looped');

        } else if( val == 'query' ) {

            $content.find('.'+it).addClass('mfn-looped-items');
            $('.mfn-ui.mfn-editing-section .mfn-form .mfn-element-fields-wrapper').addClass('mfn-is-query-looped');
            $('.mfn-element-fields-wrapper .query_terms_taxonomy .mfn-field-value').val('').trigger('change');
            $('.mfn-element-fields-wrapper .query_type .mfn-field-value').val('posts').trigger('change');

            /*if( builder_type == 'portfolio' ){
                $('.mfn-element-fields-wrapper .query_post_type .mfn-field-value').val('portfolio').trigger('change');
            }else{
                $('.mfn-element-fields-wrapper .query_post_type .mfn-field-value').val('post').trigger('change');
            }*/

            if( mfn.preview_post_type.includes('archive-') ){
                $('.mfn-element-fields-wrapper .query_post_type .mfn-field-value').val(mfn.preview_post_type.replace('archive-', '')).trigger('change');
            }

        } else if( val == 'tabber' ) {
            $content.find('.'+it).addClass('mfn-section-tabber');
            $('.mfn-element-fields-wrapper .query_post_type .mfn-field-value').val('').trigger('change');
            $('.mfn-element-fields-wrapper .query_terms_taxonomy .mfn-field-value').val('').trigger('change');
            $('.mfn-element-fields-wrapper').removeClass('mfn-is-query-looped');
            $('.mfn-ui.mfn-editing-section .mfn-form .mfn-element-fields-wrapper').removeClass('mfn-is-query-looped');
        }

    }

    // wrap type query loop
    if( $editbox.hasClass('wrap type') ) {

        if( !val.length ){
            
            $('.mfn-element-fields-wrapper .query_type .mfn-field-value').val('').trigger('change');
            $('.mfn-element-fields-wrapper .query_post_type .mfn-field-value').val('').trigger('change');
            $('.mfn-element-fields-wrapper .query_terms_taxonomy .mfn-field-value').val('').trigger('change');
            $content.find('.'+it).removeClass('mfn-looped-items');
            $('.mfn-element-fields-wrapper').removeClass('mfn-is-query-looped');
            $('.mfn-ui.mfn-editing-section .mfn-form .mfn-element-fields-wrapper').removeClass('mfn-is-query-looped');
        } else if( val == 'query' ) {
            $content.find('.'+it).addClass('mfn-looped-items');
            $('.mfn-ui.mfn-editing-section .mfn-form .mfn-element-fields-wrapper').addClass('mfn-is-query-looped');
            $('.mfn-element-fields-wrapper .query_type .mfn-field-value').val('posts').trigger('change');
            $('.mfn-element-fields-wrapper .query_terms_taxonomy .mfn-field-value').val('').trigger('change');
            $('.mfn-element-fields-wrapper').addClass('mfn-is-query-looped');
            if( builder_type == 'portfolio' ){
                $('.mfn-element-fields-wrapper .query_post_type .mfn-field-value').val('portfolio').trigger('change');
            }else{
                $('.mfn-element-fields-wrapper .query_post_type .mfn-field-value').val('post').trigger('change');
            }
        }

        //re_render2( $content.find('.'+it).attr('data-uid'), 'wrap' );
    }

    if( $editbox.hasClass('query_display_style') ){
        if( val == 'masonry' ){
            $content.find('.'+it).addClass('mfn-looped-items-masonry');
            $content.find('.'+it+' .mfn-queryloop-item-wrapper').wrapAll( "<div class='mfn-query-loop-masonry' />");
            //queryLoopMasonry();
            iframe.queryLoopMasonry();
        }else if( !val.lenght ){
            if( $content.find('.'+it).hasClass('mfn-looped-items-masonry') ){
                iframe.window.jQuery('.'+it+' .mfn-query-loop-masonry').isotope( 'destroy' );
                $content.find('.'+it).removeClass('mfn-looped-items-masonry');
                $content.find('.'+it+' .mfn-query-loop-masonry > .mfn-queryloop-item-wrapper').removeAttr('style').unwrap();
            }
        }
    }

    if( $editbox.hasClass('product_cart_button') && $editbox.hasClass('style') ){

        $content.find('.'+it+' .mfn-product-add-to-cart').removeClass(`mfn-add-to-cart-layout-inline-${screen} mfn-add-to-cart-layout-wrap-${screen}`);

        if( val.length ){
            $content.find('.'+it+' .mfn-product-add-to-cart').ad
            dClass(`mfn-add-to-cart-layout-${val}-${screen}`);
        }
    }

    // query loop slider type

    if( $editbox.hasClass('query_display') && val == 'slider' ){
        $('.panel-edit-item .query_post_pagination .mfn-field-value').val('').trigger('change');
        $('.panel-edit-item .query_post_pagination').addClass('mfn-disabled-field');
        $('.mfn-element-fields-wrapper').addClass('mfn-is-ql-slider');
    }else{
        $('.panel-edit-item .query_post_pagination').removeClass('mfn-disabled-field');
        $('.mfn-element-fields-wrapper').removeClass('mfn-is-ql-slider');
    }

    if( $editbox.hasClass('product_star_rating_stats') ) {

        if( $content.find('.'+it+' ul.products').length ) {
            $content.find('.'+it+' ul.products').removeClass('mfn-stars-visible-rate');
            if( val.length ) $content.find('.'+it+' ul.products').addClass('mfn-stars-'+val);
        }else if( $content.find('.'+it+' .woocommerce-product-rating').length ) {
            $content.find('.'+it+' .woocommerce-product-rating').removeClass('mfn-stars-visible-rate');
            if( val.length ) $content.find('.'+it+' .woocommerce-product-rating').addClass('mfn-stars-'+val);
        }
    }

    // image custom height

    if( $editbox.hasClass('image image_height') ){

        if( $content.find('.'+it+' .mfn-coverimg').length ){
            $content.find('.'+it+' .mfn-coverimg').removeClass('mfn-coverimg');
            $content.find('.'+it+' .mfn-coverimg-wrapper').removeClass('mfn-coverimg-wrapper mfn-fitimg-wrapper');
        }

        if( val == 'custom' ) {
            $content.find('.'+it+' .image_frame').addClass('mfn-coverimg');

            var helper_class = 'mfn-coverimg-wrapper';

            if( $('.image_height_style li.active input').val().length ){
                helper_class = 'mfn-'+$('.image_height_style li .active input').val()+'img-wrapper';
            }

            if( $content.find('.'+it+' .image_wrapper > a').length ){
                $content.find('.'+it+' .image_wrapper > a').addClass(helper_class);
            }else{
                $content.find('.'+it+' .image_wrapper').addClass(helper_class);
            }
        }
    }

    if( $editbox.hasClass('image') && $editbox.hasClass('image_height_style') ) {

        $content.find('.'+it+' .mfn-coverimg-wrapper').removeClass('mfn-coverimg-wrapper mfn-fitimg-wrapper');

        if( val.length ) {
            $content.find('.'+it+' .image_wrapper').addClass('mfn-'+val+'img-wrapper');
        }else{
            $content.find('.'+it+' .image_wrapper').addClass('mfn-coverimg-wrapper');
        }

    }

    if( $editbox.hasClass('filters') && $editbox.hasClass('form_layout') ) {

        $content.find('.'+it+' .mfn-advanced-filters').removeClass('mfn-advanced-filters-horizontal mfn-advanced-filters-vertical');

        if( val.length ) {
            $content.find('.'+it+' .mfn-advanced-filters').addClass('mfn-advanced-filters-'+val);
        }else{
            $content.find('.'+it+' .mfn-advanced-filters').addClass('mfn-advanced-filters-vertical');
        }

    }

    if( $editbox.hasClass('filters') && $editbox.hasClass('form_submit') ) {

        $content.find('.'+it+' .mfn-advanced-filters').removeClass('mfn-advanced-filters-auto-submit mfn-advanced-filters-ajax-submit');

        if( val.length ) {
            $content.find('.'+it+' .mfn-advanced-filters').addClass('mfn-advanced-filters-'+val);
        }

    }





    if( $editbox.hasClass('box_type') ) {

        $content.find('.'+it+' .mfn-grid-item').removeClass('mfn-grid-item-vertical mfn-grid-item-horizontal');

        if( val.length ) {
            $content.find('.'+it+' .mfn-grid-item').addClass('mfn-grid-item-'+val);
        }else{
            $content.find('.'+it+' .mfn-grid-item').addClass('mfn-grid-item-vertical');
        }

    }






    if( $editbox.hasClass('tabber_nav_items_hover_type') ) {

        if( val.length ){
            let li =  $content.find('.'+it+' ul.mfn-tabber-nav li:first-child');
            $content.find('.'+it+' ul.mfn-tabber-nav').addClass('mfn-tabber-nav-hover-sliding');
            $content.find('.'+it+' ul.mfn-tabber-nav').prepend('<span class="mfn-tabber-nav-slide-helper"></span>');
            $content.find('.'+it+' ul.mfn-tabber-nav .mfn-tabber-nav-slide-helper').css({ width: li.outerWidth(), height: li.outerHeight() });

            runAjaxElements();

        }else{
            $content.find('.'+it+' ul.mfn-tabber-nav').removeClass('mfn-tabber-nav-hover-sliding');
            $content.find('.'+it+' ul.mfn-tabber-nav .mfn-tabber-nav-slide-helper').remove();
        }
    } 


    if( $editbox.hasClass('product_brands') && $editbox.hasClass('logo_pos') ) {

        $content.find('.'+it+' .mfn-product-brands').removeClass('mfn-product-brands-logo-top mfn-product-brands-logo-left');

        if( val.length ) {
            $content.find('.'+it+' .mfn-product-brands').addClass('mfn-product-brands-logo-'+val);
        }else{
            $content.find('.'+it+' .mfn-product-brands').addClass('mfn-product-brands-logo-left');
        }

    }

    if( $editbox.hasClass('product_brands') && $editbox.hasClass('layout') ) {

        $content.find('.'+it+' .mfn-product-brands').removeClass('mfn-product-brands-horizontal mfn-product-brands-vertical');

        if( val.length ) {
            $content.find('.'+it+' .mfn-product-brands').addClass('mfn-product-brands-'+val);
        }else{
            $content.find('.'+it+' .mfn-product-brands').addClass('mfn-product-brands-horizontal');
        }

    }

    if( $editbox.hasClass('product_brands') && $editbox.hasClass('column_switcher') ) {

        $content.find('.'+it+' .mfn-product-brands').removeClass('mfn-product-brands-horizontal-custom-cols');

        if( val.length ) {
            $content.find('.'+it+' .mfn-product-brands').addClass('mfn-product-brands-horizontal-'+val+'-cols');
        }

    }
    

    

    // header menu submenu icon
    if( $editbox.hasClass('header_menu submenu_icon_display') ) {
        $content.find('.'+it+' .mfn-header-menu').addClass('mfn-menu-submenu-icon-off');
        if( val == 'on' ) $content.find('.'+it+' .mfn-header-menu').removeClass('mfn-menu-submenu-icon-off');
    }

    // product add to cart label position
    if( $editbox.hasClass('product_cart_button variations-label') ) {
        $content.find('.'+it+' .mfn-product-add-to-cart').removeClass('mfn-vr-label-top');
        if( val == 'top' )
            $content.find('.'+it+' .mfn-product-add-to-cart').addClass('mfn-vr-label-top');
    }

    if( $editbox.hasClass('filters filter_by') ) {
        sidebar_form.render();
    }


    // shop filters
    if( $editbox.hasClass('shop-products-filters-switcher') ) {
        let field_opt = $li.find('input').attr('name');

        if( $content.find('.mfn-builder-active').hasClass('mfn-'+field_opt+'-hidden') ) $content.find('.mfn-builder-active').removeClass('mfn-'+field_opt+'-hidden');
        if( $content.find('.mfn-builder-active').hasClass('mfn-'+field_opt+'-visible') ) $content.find('.mfn-builder-active').removeClass('mfn-'+field_opt+'-visible');

        if( val == '0' ){
            $content.find('.mfn-builder-active').addClass('mfn-'+field_opt+'-hidden');
        }else{
            $content.find('.mfn-builder-active').addClass('mfn-'+field_opt+'-visible');
        }

    }

    if( $editbox.hasClass('product_images product_badge_onsale_position') ) {
        $content.find('.'+it+' .mfn-product-images-wrapper').removeClass('mfn-product-badges-left mfn-product-badges-right');
        if( val.length ) {
            $content.find('.'+it+' .mfn-product-images-wrapper').addClass('mfn-product-badges-right');
        }else{
            $content.find('.'+it+' .mfn-product-images-wrapper').addClass('mfn-product-badges-left');
        }
    }

    if( $editbox.hasClass('shop_products product_badge_onsale_position') ) {
        $content.find('.'+it+' .products').removeClass('mfn-product-badges-left mfn-product-badges-right');
        if( val.length ) {
            $content.find('.'+it+' .products').addClass('mfn-product-badges-right');
        }else{
            $content.find('.'+it+' .products').addClass('mfn-product-badges-left');
        }
    }

    if( $editbox.hasClass('ql_badge_onsale_position') ) {
        $content.find('.'+it+' .mfn-img-box').removeClass('mfn-product-badges-left mfn-product-badges-right');
        if( val.length ) {
            $content.find('.'+it+' .mfn-img-box').addClass('mfn-product-badges-right');
        }else{
            $content.find('.'+it+' .mfn-img-box').addClass('mfn-product-badges-left');
        }
    }

    // banner box style

    if( $editbox.hasClass('banner_box style') ) {
        $content.find('.'+it+' .mfn-banner-box').removeClass('mfn-banner-box-boxed');
        if( val.length ) $content.find('.'+it+' .mfn-banner-box').addClass('mfn-banner-box-'+val);
    }

    if( $editbox.hasClass('banner_box overlay') ) {
        $content.find('.'+it+' .mfn-banner-box').removeClass('mfn-banner-box-image-overlay');
        if( val.length ) $content.find('.'+it+' .mfn-banner-box').addClass('mfn-banner-box-image-overlay');
    }

    if( $editbox.hasClass('product_cart_button') && $editbox.hasClass('layout') ) {
        $content.find('.'+it+' .mfn-product-add-to-cart').removeClass(`mfn-add-to-cart-layout-wrap-${screen} mfn-add-to-cart-layout-inline-${screen}`);
        if( val.length ) $content.find('.'+it+' .mfn-product-add-to-cart').addClass(`mfn-add-to-cart-layout-${val}-${screen}`);
    }

    // header menu icon align
    if( $editbox.hasClass('product_images zoom') ) {
        updatePageOpt('mfn_template_product_image_zoom', val);
    }

    if( $editbox.hasClass('hotspot-x-axis-switcher') ) {
        $li.closest('.mfn-hotspot-point').find('.hotspot-x-axis-field .mfn-sliderbar-value').val('').trigger('change');
    }

    if( $editbox.hasClass('hotspot') && $editbox.hasClass('content_position') ) {
        var hash = $(this).closest('.mfn-hotspot-point').attr('id');

        if( screen == 'desktop' ){
            $content.find('.hotspot-point-'+hash).removeClass('hotspot-point-bottom hotspot-point-top hotspot-point-left hotspot-point-right').addClass('hotspot-point-'+val);
        }else{
            $content.find('.hotspot-point-'+hash).removeClass('hotspot-point-'+screen+'-bottom hotspot-point-'+screen+'-top hotspot-point-'+screen+'-left hotspot-point-'+screen+'-right').addClass('hotspot-point-'+screen+'-'+val);
        }
    }

    if( $editbox.hasClass('hotspot-y-axis-switcher') ) {
        $li.closest('.mfn-hotspot-point').find('.hotspot-y-axis-field .mfn-sliderbar-value').val('').trigger('change');
    }

    // product gallery arrows
    if( $editbox.hasClass('product_images thumbnail_arrows') ){
        $content.find('.'+it).removeClass('mfn-thumbnails-arrows-active');
        if( val.length ) $content.find('.'+it).addClass('mfn-thumbnails-arrows-active');
    }

    // image gallery image height
    if( $editbox.hasClass('image_gallery image_height') ){
        $content.find('.'+it+' .gallery').removeClass('mfn_custom_img_height');
        if( val.length ) $content.find('.'+it+' .gallery').addClass('mfn_custom_img_height');
    }

    // image gallery caption style
    if( $editbox.hasClass('image_gallery') && $editbox.hasClass('image_caption_style') ){
        $content.find('.'+it+' .gallery').removeClass('img_caption_overlay');
        if( val.length ) $content.find('.'+it+' .gallery').addClass('img_caption_overlay');
    }

    if( $editbox.hasClass('image_gallery') && $editbox.hasClass('layout') ){
        $content.find('.'+it+' .gallery').removeClass('equal-heights');

        if( val.length ){
            $content.find('.'+it+' .gallery').addClass('equal-heights');
            if( !$content.find('.'+it+' .gallery').hasClass('img_caption_overlay') ) $('.mfn-form-row.image_gallery.image_caption_style input[value="img_caption_overlay"]').siblings('a').trigger('click');
        }
    }

    // image gallery style
    if( $editbox.hasClass('image_gallery style') ){
        if( val == 'masonry' ) $('.image_gallery.layout .mfn-field-value[value=""]').siblings('a').trigger('click');
    }

    // hotspot 

    if( $editbox.hasClass('hotspot marker_animation') ){
        $content.find('.'+it+' .mfn-image-hotspot').removeClass('mfn-image-hotspot-point-pulse mfn-image-hotspot-point-scale mfn-image-hotspot-point-bounce');
        if( val.length ) $content.find('.'+it+' .mfn-image-hotspot').addClass('mfn-image-hotspot-point-'+val);
    }

    if( $editbox.hasClass('hotspot content_animation') ){
        $content.find('.'+it+' .mfn-image-hotspot').removeClass('mfn-image-hotspot-content-fadeIn');
        if( val.length ) $content.find('.'+it+' .mfn-image-hotspot').addClass('mfn-image-hotspot-content-'+val);
    }

    if( $editbox.hasClass('hotspot content_position') ){
        var point_id = $editbox.closest('.mfn-hotspot-point').attr('id');
        $content.find('.'+it+' .mfn-image-hotspot .hotspot-point-'+point_id).removeClass('hotspot-point-top hotspot-point-left hotspot-point-right hotspot-point-bottom');
        if( val.length ) $content.find('.'+it+' .mfn-image-hotspot .hotspot-point-'+point_id).addClass('hotspot-point-'+val);
    }

    if( $editbox.hasClass('hotspot content_position_laptop') ){
        var point_id = $editbox.closest('.mfn-hotspot-point').attr('id');
        $content.find('.'+it+' .mfn-image-hotspot .hotspot-point-'+point_id).removeClass('hotspot-point-laptop-top hotspot-point-laptop-left hotspot-point-laptop-right hotspot-point-laptop-bottom');
        if( val.length ) $content.find('.'+it+' .mfn-image-hotspot .hotspot-point-'+point_id).addClass('hotspot-point-'+val);
    }

    if( $editbox.hasClass('hotspot content_position_tablet') ){
        var point_id = $editbox.closest('.mfn-hotspot-point').attr('id');
        $content.find('.'+it+' .mfn-image-hotspot .hotspot-point-'+point_id).removeClass('hotspot-point-tablet-top hotspot-point-tablet-left hotspot-point-tablet-right hotspot-point-tablet-bottom');
        if( val.length ) $content.find('.'+it+' .mfn-image-hotspot .hotspot-point-'+point_id).addClass('hotspot-point-'+val);
    }

    if( $editbox.hasClass('hotspot content_position_mobile') ){
        var point_id = $editbox.closest('.mfn-hotspot-point').attr('id');
        $content.find('.'+it+' .mfn-image-hotspot .hotspot-point-'+point_id).removeClass('hotspot-point-mobile-top hotspot-point-mobile-left hotspot-point-mobile-right hotspot-point-mobile-bottom');
        if( val.length ) $content.find('.'+it+' .mfn-image-hotspot .hotspot-point-'+point_id).addClass('hotspot-point-'+val);
    }

    if( $editbox.hasClass('hotspot img_height') ){
        $content.find('.'+it+' .mfn-image-hotspot').removeClass('mfn-image-hotspot-height');
        if( val.length ) $content.find('.'+it+' .mfn-image-hotspot').addClass('mfn-image-hotspot-height');
    }

    if( $editbox.hasClass('hotspot') && $editbox.hasClass('img_height_style') ){
        $content.find('.'+it+' .mfn-image-hotspot.mfn-image-hotspot-height').removeClass('mfn-image-hotspot-height-cover');
        if( val.length ) $content.find('.'+it+' .mfn-image-hotspot.mfn-image-hotspot-height').addClass('mfn-image-hotspot-height-cover');
    }


    // header menu icon align
    if( $editbox.hasClass('header_menu icon_align') ){
        $content.find('.'+it+' .mfn-header-menu').removeClass('mfn-menu-icon-left mfn-menu-icon-right mfn-menu-icon-top');
        $content.find('.'+it+' .mfn-header-menu').addClass('mfn-menu-icon-'+val);
    }

    // mega menu icon align
    if( $editbox.hasClass('megamenu_menu icon_align') ){
        $content.find('.'+it+' .mfn-megamenu-menu').removeClass('mfn-mm-menu-icon-left mfn-mm-menu-icon-right mfn-mm-menu-icon-top');
        $content.find('.'+it+' .mfn-megamenu-menu').addClass('mfn-mm-menu-icon-'+val);
    }

    // header menu separator
    if( $editbox.hasClass('header_menu separator') ){
        $content.find('.'+it+' .mfn-header-menu').removeClass('mfn-menu-separator-on');
        if( val == 'on' ) $content.find('.'+it+' .mfn-header-menu').addClass('mfn-menu-separator-on');
    }

    // header icon cart/wislist count icon reset top/bottom left/right
    if( $editbox.hasClass('header_icon icon_count_posv') ){
        $editpanel.find('.header-icon-vert-count.header_icon .mfn-field-value').val('').trigger('change');
    }

    if( $editbox.hasClass('header_icon icon_count_posh') ){
        $editpanel.find('.header-icon-hori-count.header_icon .mfn-field-value').val('').trigger('change');
    }

    // greyscale
    if($editbox.hasClass('greyscale')){
        if(val == 0){
            $content.find('.'+it+' .element_classes').removeClass('greyscale');
        }else{
            $content.find('.'+it+' .element_classes').addClass('greyscale');
        }
    }

    // closeable header section

    if( $editbox.hasClass('section closeable') ){
        $content.find('.'+it+' .close-closeable-section').remove();
        $content.find('.'+it).removeClass('closeable-active');
        if( val == 1 ){
            $content.find('.'+it).append('<span class="close-closeable-section mfn-close-icon"><span class="icon">&#10005;</span></span>');
            $content.find('.'+it).addClass('closeable-active');
            if( !$content.find('.'+it).hasClass('close-button-right') && !$content.find('.'+it).hasClass('close-button-left') ){
                $content.find('.'+it).addClass('close-button-left');
            }
        }

        // close-button-right closeable-active
    }

    // closeable header section

    if( $editbox.hasClass('section') && $editbox.hasClass('closeable-x') ){
        $content.find('.'+it).removeClass('close-button-right close-button-left');
        $content.find('.'+it).addClass('close-button-'+val);
    }

    // invert
    if($editbox.hasClass('invert')){
        if(val == 0){
            $content.find('.'+it+' .element_classes').removeClass('invert');
        }else{
            $content.find('.'+it+' .element_classes').addClass('invert');
        }
    }

    // reverse order
    if($editbox.hasClass('reverse_order') && $('.mfn-ui').hasClass('mfn-editing-wrap')){
        $edited_div.removeClass('column-reverse column-reverse-rows');
        if( val == '1' ){
            $edited_div.addClass('column-reverse');
        }else if( val == '2' ){
            $edited_div.addClass('column-reverse-rows');
        }
    }

    // reverse order sections
    if($editbox.hasClass('reverse_order') && $('.mfn-ui').hasClass('mfn-editing-section')){
        $edited_div.removeClass('wrap-reverse wrap-reverse-rows');
        if( val == '1' ){
            $edited_div.addClass('wrap-reverse');
        }else if( val == '2' ){
            $edited_div.addClass('wrap-reverse-rows');
        }
    }

    // olds

    // icon box 2 icon position
    if($editbox.hasClass('icon_box_2 icon_position') || $editbox.hasClass('header_icon icon_position') || $editbox.hasClass('header_burger icon_position') ){
        if( screen == 'desktop' ){
            $content.find('.'+it+' .mfn-icon-box').removeClass('mfn-icon-box-top mfn-icon-box-bottom mfn-icon-box-left mfn-icon-box-right');
        }else{
            $content.find('.'+it+' .mfn-icon-box').removeClass('mfn-icon-box-'+screen+'-top mfn-icon-box-'+screen+'-bottom mfn-icon-box-'+screen+'-left mfn-icon-box-'+screen+'-right');
            val = screen+'-'+val;
        }
        $content.find('.'+it+' .mfn-icon-box').addClass('mfn-icon-box-'+val);
    }

    // icon box 2 icon align
    if($editbox.hasClass('icon_box_2 icon_align') || $editbox.hasClass('header_icon icon_align')){
        if( screen == 'desktop' ){
            $content.find('.'+it+' .mfn-icon-box').removeClass('mfn-icon-box-center mfn-icon-box-start mfn-icon-box-end');
        }else{
            $content.find('.'+it+' .mfn-icon-box').removeClass('mfn-icon-box-'+screen+'-center mfn-icon-box-'+screen+'-start mfn-icon-box-'+screen+'-end');
            val = screen+'-'+val;
        }
        $content.find('.'+it+' .mfn-icon-box').addClass('mfn-icon-box-'+val);
    }

    // icon box 2 title tag
    if($editbox.hasClass('icon_box_2') && $editbox.hasClass('title_tag')){
        var ib2_title = $content.find('.'+it+' .mfn-icon-box .title').html();
        $content.find('.'+it+' .mfn-icon-box .title').replaceWith('<'+val+' class="title">'+ib2_title+'</'+val+'>');
    }

    // sticky wrapper

    if( $('.mfn-ui').hasClass('mfn-editing-wrap') && $editbox.hasClass('sticky') ){

        if( val == 1 ){
            $content.find('.'+it).addClass('sticky sticky-'+screen);
            $editwrapper.find('.mfn_field_'+screen+'.adv_alignself_wrap .positioning-options ul li:first-child a').trigger('click');
        }else{
            $content.find('.'+it).removeClass('sticky');
            $content.find('.'+it).removeClass('sticky-'+screen);
        }

    }

    // single product add to cart text-align
    if($editbox.hasClass('product_cart_button text-align')){
        $content.find('.'+it+' .mfn-product-add-to-cart').removeClass('mfn_product_cart_center mfn_product_cart_left mfn_product_cart_right mfn_product_cart_justify')
        if(val){
            $content.find('.'+it+' > div').addClass('mfn_product_cart_'+val);
        }
    }

    // text column align
    if($editbox.hasClass('column align')){
        $content.find('.'+it+' > div').removeClass('align_center align_left align_right align_justify');
        if(val){
            $content.find('.'+it+' > div').addClass('align_'+val);
        }
    }

    // quick fact align
    if($editbox.hasClass('quick_fact align')){
        $content.find('.'+it+' .quick_fact').removeClass('align_center align_left align_right').addClass('align_'+val);
    }

    // our team style
    if($editbox.hasClass('our_team') && $editbox.hasClass('style')){
        $content.find('.'+it+' .team').removeClass('team_circle team_vertical team_horizontal').addClass('team_'+val);
    }

    // offer thumb align
    if($editbox.hasClass('offer_thumb align')){
        $content.find('.'+it+' .desc_wrapper').removeClass('align_center align_left align_right align_justify').addClass('align_'+val);
    }

    // promo box image position
    if($editbox.hasClass('promo_box position')){
        $content.find('.'+it+' .promo_box_wrapper').removeClass('promo_box_right promo_box_left').addClass('promo_box_'+val);
    }

    // button icon position
    if($editbox.hasClass('widget-button icon_position')){
        $content.find('.'+it+' .button').removeClass('button_right button_left').addClass('button_'+val);
    }

    // counter type
    if($editbox.hasClass('counter') && $editbox.hasClass('type')){
        $content.find('.'+it+' .counter').removeClass('counter_horizontal counter_vertical').addClass('counter_'+val);
    }

    // promo box border
    if($editbox.hasClass('promo_box border')){
        if(val == 0){
            $content.find('.'+it+' .promo_box').removeClass('has_border').addClass('no_border');
        }else{
            $content.find('.'+it+' .promo_box').addClass('has_border').removeClass('no_border');
        }
    }

    // image border
    if($editbox.hasClass('image border')){
        if(val == 0){
            $content.find('.'+it+' .image_frame').removeClass('has_border').addClass('no_border');
        }else{
            $content.find('.'+it+' .image_frame').addClass('has_border').removeClass('no_border');
        }
    }

    // image align
    if($editbox.hasClass('image align')){
        $content.find('.'+it+' .image_frame').removeClass('alignleft alignright aligncenter');
        if(val){
            $content.find('.'+it+' .image_frame').addClass('align'+val);
        }
    }

    // trailer box orientation
    if($editbox.hasClass('trailer_box orientation')) {
        $content.find('.'+it+' .trailer_box').removeClass('horizontal');
        if(val){
            $content.find('.'+it+' .trailer_box').addClass(val);
        }
    }

    // story box style
    if($editbox.hasClass('story_box') && $editbox.hasClass('style')){
        $content.find('.'+it+' .story_box').removeClass('vertical');
        if(val){
            $content.find('.'+it+' .story_box').addClass('vertical');
        }
    }

    // list style
    if($editbox.hasClass('list') && $editbox.hasClass('style')){
        $content.find('.'+it+' .list_item').removeClass('lists_1 lists_2 lists_3 lists_4').addClass('lists_'+val);
    }

    // icon box icon position
    if($editbox.hasClass('icon_box icon_position')){
        $content.find('.'+it+' .icon_box').removeClass('icon_position_left');
        if(val == 'left'){
            $content.find('.'+it+' .icon_box').addClass('icon_position_left');
        }
    }

    // blog teaser margin
    if($editbox.hasClass('blog_teaser margin')){
        $content.find('.'+it+' .blog-teaser').removeClass('margin-no');
        if(val == 0){
            $content.find('.'+it+' .blog-teaser').addClass('margin-no');
        }
    }

    // how it works border
    if($editbox.hasClass('how_it_works border')){
        if(val == 1){
            $content.find('.'+it+' .how_it_works').addClass('has_border').removeClass('no_border');
        }else{
            $content.find('.'+it+' .how_it_works').removeClass('has_border').addClass('no_border');
        }
    }

    // hover color align
    if($editbox.hasClass('hover_color align')){
        $content.find('.'+it+' .hover_color').removeClass('align_center align_left align_right align_justify');
        $content.find('.'+it+' .hover_color').addClass('align_'+val);
    }


    // button full width fullwidth
    if($editbox.hasClass('widget-button full_width')){
        $content.find('.'+it+' .button').removeClass('button_full_width');
        if(val == 1){
            $content.find('.'+it+' .button').addClass('button_full_width');
        }
    }

    // button size
    if($editbox.hasClass('widget-button') && $editbox.hasClass('size')){
        $content.find('.'+it+' .button').removeClass('button_size_1 button_size_2 button_size_3 button_size_4');
        $content.find('.'+it+' .button').addClass('button_size_'+val);
    }

    // blog more
    if($editbox.hasClass('blog more')){
        $content.find('.'+it+' .posts_group').removeClass('hide-more');
        if(val == 0){
            $content.find('.'+it+' .posts_group').addClass('hide-more');
        }
    }

    // blog more
    if($editbox.hasClass('blog margin')){
        $content.find('.'+it+' .posts_group').removeClass('margin');
        if(val == 1){
            $content.find('.'+it+' .posts_group').addClass('margin');
        }
    }

    // mobile column text align
    if($editbox.hasClass('column align-mobile')){
        $content.find('.'+it+' > div').removeClass('mobile_align_center mobile_align_left mobile_align_right mobile_align_justify');
        if(val){
            $content.find('.'+it+' > div').addClass('mobile_align_'+val);
        }
    }

});

$editpanel.on('change', '.mfn-element-fields-wrapper .banner_box.hidden_elements_mobile .mfn-field-value', function() {
    var val = $(this).val();
    var it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');

    $content.find('.'+it+' .mfn-banner-box').removeClass('mfn-show-hidden-elements-on-mobile mfn-show-hidden-elements-on-tablet');
    if( val.length && val == '1' ){
        $content.find('.'+it+' .mfn-banner-box').addClass('mfn-show-hidden-elements-on-mobile');
    }else if( val.length && val == '2' ){
        $content.find('.'+it+' .mfn-banner-box').addClass('mfn-show-hidden-elements-on-tablet');
    }

});

// header icon desc / empty desc

$editpanel.on('keyup paste change', '.mfn-element-fields-wrapper .header_icon.desc .mfn-field-value', function() {
    var val = $(this).val();
    if( val.length ){
        $edited_div.find('.mfn-icon-box').removeClass('mfn-icon-box-empty-desc');
    }else{
        $edited_div.find('.mfn-icon-box').addClass('mfn-icon-box-empty-desc');
    }
});

$editpanel.on('keyup paste change', '.mfn-element-fields-wrapper .hotspots .mfn-hotspot-point .content .mfn-field-value', function() {
    var val = $(this).val();
    var hash = $(this).closest('.mfn-hotspot-point').attr('id');
    $content.find('.hotspot-point-'+hash+' .hotspot-content').html(val);
});

$editpanel.on('keyup paste change', '.mfn-element-fields-wrapper .hotspot.text .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    var val = $(this).val();
    var point_id = $(this).closest('.mfn-hotspot-point').attr('id');

    if( val.length ) {
        $content.find('.'+it+' .hotspot-point-'+point_id+' .marker-text').text(val);
    }else{
        $content.find('.'+it+' .hotspot-point-'+point_id+' .marker-text').text('Point text');
    }

});

// multiple fields

$(document).on('keyup', '.multiple-inputs .field input', function() {
    var $editbox = $(this).closest('.multiple-inputs');

    if($editbox.hasClass('isLinked')) {
        var thisval = $(this).val();
        $editbox.find('.disableable input').val(thisval);
    }

}).on('focus', '.multiple-inputs.separated-fields .field input:not(.readonly), .mfn-form-row.border-radius .multiple-inputs .field input:not(.readonly), .mfn-form-row.border-width .multiple-inputs .field input:not(.readonly)', function() {
    let input = $(this);
    let input_wrapper = input.closest('.field');
    let row = input.closest('.multiple-inputs');

    if( input_wrapper.hasClass('focused') ) return;

    if( row.find('.focused').length ) row.find('.focused').removeClass('focused');

    if( !row.hasClass('mfn-field-active') ) row.addClass('mfn-field-active');
    if( !input_wrapper.hasClass('focused') ) input_wrapper.addClass('focused');

}).on('blur', '.multiple-inputs.separated-fields .field input:not(.readonly), .mfn-form-row.border-radius .multiple-inputs .field input:not(.readonly), .mfn-form-row.border-width .multiple-inputs .field input:not(.readonly)', function() {
    let input = $(this);
    let input_wrapper = input.closest('.field');
    
    if( input_wrapper.hasClass('focused') ) input_wrapper.removeClass('focused');

}).on('change', '.multiple-inputs .field input:not(.readonly)', function() {
    var $input = $(this);
    var $editbox = $input.closest('.multiple-inputs');
    var $box = $input.closest('.mfn-form-row');
    var val = $input.val();

    var units_check = false;

    //console.log('multiple inputs change');

    // console.log($input);

    if( val.length && $input.hasClass('numeral') ){
        $.each( units, function( i, el ) {
            if( val == 'initial' || val == 'auto' || val == 'unset' || val.includes(el) || val.includes('--') ){
                units_check = true;
                return;
            }
        });

        if(units_check == false){
            val += "px";
            $input.val(val);
        }
    }

    if( val.includes('--') && !val.includes('var(') && val != '--' ) {
        val = 'var('+val+')';
        $input.val( val );
    }

    if( $editbox.hasClass('isLinked') ) {

        $editbox.find('.disableable input').val(val);

        if($editbox.hasClass('separated-fields')) {
            $editbox.find('.disableable input').each(function() {
                $(this).trigger('change');
            });
            setTimeout(function() {
                historyStorage.add()
            }, 200);
        }else{
            updatePseudoField($editbox);
        }

        if( $box.hasClass('pageoption') ) {
            setTimeout(function() {
                $editbox.find('.field:last-child input').trigger('change');
            },400);
        }

    }else{
        if(!$editbox.hasClass('separated-fields')){
            updatePseudoField($editbox);
        }else{
            setTimeout(historyStorage.add, 200);
        }
    }

    if($content.find('.vb-item[data-uid='+edited_item.uid+'] .slick-initialized').length){
        setTimeout(function() {
        $content.find('.vb-item[data-uid='+edited_item.uid+'] .slick-initialized').each(function() {
            $(this).slick('setPosition');
        });
        },300);
    }

    /*setTimeout(function() {
        loopAllStyleFields(edited_item.uid);
    }, 100);*/

    return;

});

$editpanel.on('change', '.mfn-element-fields-wrapper .header_menu.justify-content .preview-justify-contentinput', function() {
    var val = $(this).val();
    if( val == 'center' || val == 'flex-end' || val == 'flex-start' ){
        $('.mfn-element-fields-wrapper .header_menu.flex-grow .preview-flex-growinput').val('unset').trigger('change');
    }
});

$editpanel.on('change', '.mfn-element-fields-wrapper .header_menu.justify-content_tablet .preview-justify-content_tabletinput', function() {
    var val = $(this).val();
    if( val == 'center' || val == 'flex-end' || val == 'flex-start' ){
        $('.mfn-element-fields-wrapper .header_menu.flex-grow_tablet .preview-flex-grow_tabletinput').val('unset').trigger('change');
    }
});

$editpanel.on('change', '.mfn-element-fields-wrapper .header_menu.justify-content_laptop .preview-justify-content_laptopinput', function() {
    var val = $(this).val();
    if( val == 'center' || val == 'flex-end' || val == 'flex-start' ){
        $('.mfn-element-fields-wrapper .header_menu.flex-grow_laptop .preview-flex-grow_laptopinput').val('unset').trigger('change');
    }
});

$editpanel.on('change', '.mfn-element-fields-wrapper .custom-element-position .mfn-field-value', function() {
    var val = $(this).val();
    if( !val.length || val == 'unset' ){
        $content.find('.'+edited_item.uid).removeClass('mfn-column-absolute');
        if( $('.mfn-element-fields-wrapper .mfn_field_desktop.custom-abs-offset-values').length ){
            $('.mfn-element-fields-wrapper .mfn_field_'+screen+'.custom-abs-offset-values .mfn-field-value').val('').trigger('change');
        }else{
            $('.mfn-element-fields-wrapper .custom-abs-offset-values .mfn-field-value').val('').trigger('change');
        }
    }else if(val == 'absolute'){
        $content.find('.'+edited_item.uid).addClass('mfn-column-absolute');
    }
});



$editpanel.on('change', '.mfn-element-fields-wrapper .header_menu.justify-content_mobile .preview-justify-content_mobileinput', function() {
    var val = $(this).val();
    if( val == 'center' || val == 'flex-end' || val == 'flex-start' ){
        $('.mfn-element-fields-wrapper .header_menu.flex-grow_mobile .preview-flex-grow_mobileinput').val('unset').trigger('change');
    }
});

$editpanel.on('click', '.multiple-inputs a.link', function(e) {
    e.preventDefault();
    var $editbox = $(this).closest('.multiple-inputs');

    historyStorage.allow = false;

    if($editbox.hasClass('isLinked')){
        $editbox.removeClass('isLinked');
        $editbox.find('.disableable input').removeClass('readonly').removeAttr('readonly');
    }else{
        var thisval = $editbox.find('.form-control .field').first().find('input').val();
        $editbox.addClass('isLinked');
        $editbox.find('.disableable input').addClass('readonly').attr('readonly', 'readonly');
        $editbox.find('.disableable input').val(thisval);
        if(!$editbox.hasClass('separated-fields')){
            updatePseudoField($editbox);
        }else{
            $editbox.find('.disableable input').trigger('change');
        }
    }

    historyStorage.allow = true

});

$editpanel.on('change', '.mfn-element-fields-wrapper .query_type .mfn-field-value', function() {
    var val = $(this).val();

    if( mfn.builder_type.startsWith('archive-') ) {
        if( !val ){
            edited_item['attr']['query_loop_is_main'] = 1;
            edited_item['attr']['query_post_type'] = 'posts';
            edited_item['attr']['query_post_type'] = mfn.builder_type.replace('archive-', '');
        }else{
            delete(edited_item['attr']['query_loop_is_main']);
        }
    }else{
        if( !val.length ) {
            $('#section_type .mfn-loop-switcher ul li:first-child a').trigger('click');
            return false;
        }
    }

    if( val == 'terms' ){
        $('.mfn-element-fields-wrapper .query_terms_taxonomy .mfn-field-value').val('category').trigger('change');
        $('.mfn-element-fields-wrapper .query_post_type .mfn-field-value').val('').trigger('change');
    }else if( val == 'posts' ){
        $('.mfn-element-fields-wrapper .query_post_type .mfn-field-value').val('post').trigger('change');
        $('.mfn-element-fields-wrapper .query_terms_taxonomy .mfn-field-value').val('').trigger('change');
    }
});

$editpanel.on('click', '.reset-bg', function(e) {
    e.preventDefault();
    var bg_switcher = $(this);
    if( bg_switcher.hasClass('active') ){
        bg_switcher.removeClass('active');
        bg_switcher.closest('.mfn-form-row').find('.browse-image').addClass('empty');
        bg_switcher.closest('.mfn-form-row').find('.mfn-field-value').val('').trigger('change');
    }else{
        bg_switcher.addClass('active');
        bg_switcher.closest('.mfn-form-row').find('.mfn-field-value').val('none').trigger('change');
    }
    
});

$editpanel.on('change', '.browse-image:not(.multi) .mfn-field-value', function() {
    var val = $(this).val();
    var imgInput = $(this);

    if( val.length ){
        uploader.itemsUpdate(val, imgInput);
    }
});

$editpanel.on('change', '#label_visibility.filters .mfn-field-value', function(e) {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');

    $content.find('.'+it+' .mfn-advanced-filters').removeClass('mfn-advanced-filters-labels-hidden');
    if( $(this).is(':checked') ) $content.find('.'+it+' .mfn-advanced-filters').addClass('mfn-advanced-filters-labels-hidden');
});


$editpanel.on('change', '.height_switcher .mfn-field-value', function(e) {
    let val = $(this).val();
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let $el = $edited_div;

    if(val == 'full-screen') {
        $el.addClass('full-screen');
    }else{
        $el.removeClass('full-screen');
    }

    if( !val.length && _.has(edited_item.attr, 'css_advanced_height') ) {
        delete( edited_item['attr']['css_advanced_height'] );
        loopAllStyleFields(edited_item.uid);
    }
    
});

$editpanel.on('change', '.width_switcher .mfn-field-value', function(e) {
    let val = $(this).val();
    let uid = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');

    $content.find('.'+uid).removeClass('mfn-item-inline custom-width full-width default-width mfn-item-custom-width');

    if( $content.find('.'+uid).hasClass('mcb-section')){
         $content.find('.'+uid).addClass(val+'-width');
    }else{
        if(val == 'inline') {
             $content.find('.'+uid).addClass('mfn-item-inline');
        }else if(val == 'custom') {
            $content.find('.'+uid).addClass('mfn-item-custom-width');

            if (
                builder_type == 'header' &&
                edited_item.jsclass == 'wrap' &&
                edited_item &&
                edited_item.attr &&
                edited_item.attr.css_advanced_flex_grow &&
                edited_item.attr.css_advanced_flex_grow.val
            ) {
                edited_item.attr.css_advanced_flex_grow.val.desktop = 'unset';
                edited_item.attr.css_advanced_flex_grow.val.laptop = 'unset';
                edited_item.attr.css_advanced_flex_grow.val.tablet = 'unset';
                edited_item.attr.css_advanced_flex_grow.val.mobile = 'unset';
            }

            /*if( $('.mfn-form-row.inline-style-input.flex-grow .mfn-field-value').length ) $('.mfn-form-row.inline-style-input.flex-grow .mfn-field-value').val('unset').trigger('change');
            if( $('.mfn-form-row.inline-style-input.flex-grow_laptop .mfn-field-value').length ) $('.mfn-form-row.inline-style-input.flex-grow_laptop .mfn-field-value').val('unset').trigger('change');
            if( $('.mfn-form-row.inline-style-input.flex-grow_tablet .mfn-field-value').length ) $('.mfn-form-row.inline-style-input.flex-grow_tablet .mfn-field-value').val('unset').trigger('change');
            if( $('.mfn-form-row.inline-style-input.flex-grow_mobile .mfn-field-value').length ) $('.mfn-form-row.inline-style-input.flex-grow_mobile .mfn-field-value').val('unset').trigger('change');*/
        
        }
    }

    if( !val.length && _.has(edited_item.attr, 'css_advanced_flex') ) delete(edited_item['attr']['css_advanced_flex']);

    if( !val.length || val == 'inline' ){

        if( $('.mfn-ui .panel-edit-item .mfn-form .modalbox-card-advanced .inline-style-input.max-width .mfn-form-input').length ){
            $('.mfn-ui .panel-edit-item .mfn-form .modalbox-card-advanced .inline-style-input.max-width .mfn-form-input').val('').trigger('change');
        }

        $('.mfn-ui .panel-edit-item .mfn-form .modalbox-card-advanced .advanced_flex .mfn-field-value').val('').trigger('change');

        delete(edited_item['attr']['css_advanced_flex']);

        if( screen == 'desktop' ){
            $builder.find('.'+uid).attr('data-desktop-size', edited_item.size);
            $builder.find('.'+uid).find('.mfn-header').first().find('.mfn-size-label span').text(edited_item.size);
        }else if( screen == 'laptop' ){
            $builder.find('.'+uid).attr('data-desktop-size', edited_item.laptop_size);
            $builder.find('.'+uid).find('.mfn-header').first().find('.mfn-size-label span').text(edited_item.laptop_size);
        }else if( screen == 'tablet' ){
            $builder.find('.'+uid).attr('data-desktop-size', edited_item.tablet_size);
            $builder.find('.'+uid).find('.mfn-header').first().find('.mfn-size-label span').text(edited_item.tablet_size);
        }else if( screen == 'mobile' ){
            $builder.find('.'+uid).attr('data-desktop-size', edited_item.mobile_size);
            $builder.find('.'+uid).find('.mfn-header').first().find('.mfn-size-label span').text(edited_item.mobile_size);
        }
    }

    setTimeout(function() {
        setSizeLabels();

        if($('body').hasClass('mfn-navigator-active') ) be_navigator.show(edited_item.uid);

    }, 200);

});

$editpanel.on('change', '.mfn-layout-modifier .mfn-field-value', function() {
    let uid = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    reLayoutIsotope( uid );
});

function reLayoutIsotope( uid ) {
    if( !$content.find('.'+uid+' .masonry').length ) return;
    setTimeout(function() {
        iframe.jQuery('.'+uid+' .masonry').isotope('layout'); // isotope
    }, 200);
}



$editpanel.on('change', '.mfn-form-row.bgposopt select', function() {

    if( $(this).val() != 'custom' && _.has(edited_item['attr'], 'css_advanced_background_position_v2') ){
        delete(edited_item['attr']['css_advanced_background_position_v2']);
        sidebar_form.render();
        loopAllStyleFields(edited_item.uid);
    }

});

$editpanel.on('change', '.mfn-form-row.custombgsize select', function() {

    if( $(this).val() != 'custom' && _.has(edited_item['attr'], 'css_advanced_background_size_v2') ) {
        delete(edited_item['attr']['css_advanced_background_size_v2']);
        sidebar_form.render();
        loopAllStyleFields(edited_item.uid);
    }

});

$editpanel.on('click', '.multiple-inputs a.inset', function(e) {
    e.preventDefault();
    var $editbox = $(this).closest('.multiple-inputs');
    if($editbox.hasClass('isInset')){
        $editbox.removeClass('isInset');
        $editbox.find('input.boxshadow-inset').val('');
    }else{
        var thisval = $editbox.find('.field input').val();
        $editbox.addClass('isInset');
        $editbox.find('input.boxshadow-inset').val('inset');
    }
    updatePseudoField($editbox);
});

// animation

$editpanel.on('change', '.preview-animateinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let $edited_box = $edited_div;
    let val = $(this).val();

    $edited_box.removeClass('animate fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpLarge fadeInDownLarge fadeInLeftLarge fadeInRightLarge zoomIn zoomInUp zoomInDown zoomInLeft zoomInRight zoomInUpLarge zoomInDownLarge zoomInLeftLarge bounceIn bounceInUp bounceInDown bounceInLeft bounceInRight');
    if(val.length){
        $edited_box.addClass('animate '+val);
    }
});

// mask shape

function maskShapeGetAttrs( el ) {
    const formInputVal = $(el).find('.mfn-form-select').val();
    const sectionName = $(el).closest('.mfn-element-fields-wrapper').attr('data-element');
    const sectionDom = $("iframe#mfn-vb-ifr").contents().find('body').find('.'+sectionName);

    return {formInputVal, sectionName, sectionDom};
}

let maskShapeConditionalArray = [];
function maskShapeHideChildrenConditional( el ) {
    const isMaskShapeEnabled = "None" !== $(el).find('[data-name="mask_shape_type"] select option:selected').text();

    //Hide

    if ( !isMaskShapeEnabled ) {
        maskShapeConditionalArray = [];
        let isPositionEnabled = "Custom" === $(el).find('[data-name="mask_shape_position"] select option:selected').text();
        let isSizeEnabled = "Custom" === $(el).find('[data-name="mask_shape_size"] select option:selected').text() ;

        if ( isPositionEnabled ) {
            const hiddenInputX = $(el).find('[data-name="-webkit-mask-position-x"]');
            const hiddenInputY = $(el).find('[data-name="-webkit-mask-position-y"]');

            maskShapeConditionalArray.push(hiddenInputX, hiddenInputY);
        }

        if ( isSizeEnabled ) {
            const hiddenInput = $(el).find('[data-name="-webkit-mask-size"]');
            maskShapeConditionalArray.push(hiddenInput);
        }

        setTimeout(function(){
            maskShapeConditionalArray.forEach(element => {
                $(element).removeClass('conditionally-show');
                $(element).addClass('conditionally-hide');
            });
        }, 0 )

        return;
    }

    //Display

    maskShapeConditionalArray.forEach(element => {
        $(element).addClass('conditionally-show');
        $(element).removeClass('conditionally-hide');
    });

    return;

}

$editpanel.on('change', '.mfn-element-fields-wrapper .media_carousel.iframe_custom_height .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    if ($(this).prop('checked')) {
      $content.find('.'+it+' .mfn-media-carousel-wrapper').addClass('mfn-iframe-custom-height');
    } else {
      $content.find('.'+it+' .mfn-media-carousel-wrapper').removeClass('mfn-iframe-custom-height');
    }
});

$editpanel.on('change', '.heading.background-image:not(.activeif-background_switcher_adv)', function() {
    const formInputVal = $(this).find('.mfn-form-input').val();
    const {sectionDom } = maskShapeGetAttrs($(this));
    const titleDom = $(sectionDom).find('.title');

    if(formInputVal.length > 0){
        $(titleDom).addClass('mfn-mask-shape');
    } else {
        $(titleDom).removeClass('mfn-mask-shape');
    }
})

$editpanel.on('change', '.mask_shape_type', function() {
    const {formInputVal, sectionDom } = maskShapeGetAttrs($(this));
    const availableStyles = ['circle', 'blob', 'blob-2', 'brush', 'brush-2', 'cross', 'irregular-circle', 'stain', 'triangle', 'custom'];
    const itemName = sectionDom.hasClass('column_image') ? 'image' : 'video';
    const shapeContainer = itemName === 'image' ? $(sectionDom).find('.image_frame') : $(sectionDom).find('.content_video');
    const parentContainer = $(this).closest('.mfn-element-fields-wrapper');

    availableStyles.forEach(style => {
        $( shapeContainer ).removeClass(style);
    })

    if(parseInt(formInputVal) == 0 ){
        if( shapeContainer.hasClass('mfn-mask-shape') ){
            $(shapeContainer).removeClass('mfn-mask-shape');
        }

        maskShapeHideChildrenConditional(parentContainer);
    } else {
        if( !shapeContainer.hasClass('mfn-mask-shape') ){
            $(shapeContainer).addClass('mfn-mask-shape');
        }

        maskShapeHideChildrenConditional(parentContainer);
        $( shapeContainer ).addClass( formInputVal );
    }
})

$editpanel.on('change', '.mask_shape_size', function() {
    const {formInputVal, sectionName, sectionDom } = maskShapeGetAttrs($(this));

    //itemName variable must be here, because heading does not have custom size/position
    const itemName = sectionDom.hasClass('column_image') ? 'image' : 'video';
    const shapeContainer = itemName === 'image' ? $(sectionDom).find('img') : $(sectionDom).find('video, iframe');

    if(formInputVal !== 'custom' ){
        shapeContainer.css('mask-size', formInputVal);
    } else {
        var sizeAppended = $(this).closest('.mfn-element-fields-wrapper').find('.-webkit-mask-size .mfn-sliderbar-value').val();
        shapeContainer.css('mask-size', `${sizeAppended}%`);
    }
})

$editpanel.on('change', '.mask_shape_position', function() {
    const {formInputVal, sectionName, sectionDom } = maskShapeGetAttrs($(this));

    //itemName variable must be here, because heading does not have custom size/position
    const itemName = sectionDom.hasClass('column_image') ? 'image' : 'video';
    const shapeContainer = itemName === 'image' ? $(sectionDom).find('img') : $(sectionDom).find('video, iframe');

    if(formInputVal !== 'custom' ){
        const positions = formInputVal.split(' ');
        shapeContainer.css('mask-position-y', positions[0]);
        shapeContainer.css('mask-position-x', positions[1]);
    }
})

$editpanel.on('change', '.banner_box.bb_badge_pos .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    $builder.find('.'+it+' .banner-badge').removeClass('banner-badge-top-right banner-badge-top-left banner-badge-bottom-right banner-badge-bottom-left');

    if( val.length ){
        $builder.find('.'+it+' .banner-badge').addClass('banner-badge-'+val);
    }else{
        $builder.find('.'+it+' .banner-badge').addClass('banner-badge-top-right');
    }
});

$editpanel.on('change', '.banner_box.hover_effect .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    $builder.find('.'+it+' .mfn-banner-box').removeClass('mfn-banner-box-image-toggle mfn-banner-box-image-zoom-in mfn-banner-box-image-zoom-out mfn-banner-box-image-blur mfn-banner-box-image-grayscale-10 mfn-banner-box-image-grayscale-01');

    if( val.length ) {
        $builder.find('.'+it+' .mfn-banner-box').addClass('mfn-banner-box-image-'+val);
    }

});

$editpanel.on('change', '.banner_box.cta_hover_effect .mfn-field-value', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    $builder.find('.'+it+' .mfn-banner-box').removeClass('mfn-banner-box-cta-zoom-in');

    if( val.length ){
        $builder.find('.'+it+' .mfn-banner-box').addClass('mfn-banner-box-image-'+val);
    }

});

// shape divider

function shapeDividerGetAttrs( el ) {
    const sectionName = $(el).closest('.mfn-element-fields-wrapper').attr('data-element');
    const sectionDom = $content.find('.'+sectionName);

    const inputName = $(el).attr('data-name');
    const inputValue = $(el).find('.mfn-field-value').val();
    const checkboxValue = $(el).find('li.active input[type="checkbox"]').val();

    const shapeDividerPosition = inputName.match(/top|bottom/).toString();
    const shapeDividerDom = $(sectionDom).find('.mfn-shape-divider[data-name="'+ shapeDividerPosition +'"]');

    let invertValue = $(el).siblings('.shape_divider_invert_'+shapeDividerPosition).find('li.active input[type="checkbox"]').val();

    let shapeDividerOptions = inputName.match(/flip|bring_front/);
    if (shapeDividerOptions != null){
      shapeDividerOptions = shapeDividerOptions.toString();
    }

    return {inputName, inputValue, checkboxValue, sectionName, sectionDom, shapeDividerPosition, shapeDividerDom, shapeDividerOptions, invertValue};
}

$editpanel.on('change', '.shape_divider_type_top, .shape_divider_type_bottom', function() {
    const { inputValue, shapeDividerPosition, sectionDom, invertValue } = shapeDividerGetAttrs($(this));

    let { shapeDividerDom } = shapeDividerGetAttrs($(this));
    let svgLocation = $(shapeDividerDom).find('svg');
    let currentTabView = $('.panel-edit-item');

    // empty value

    if( ! inputValue ){
      svgLocation.html('<path></path>');
      return;
    }

    // invert

    let invertValSet = currentTabView.find('.shape_divider_invert_'+ shapeDividerPosition +' li.active input').val();
    invertValSet = parseInt(invertValSet);

    let key = 'svg';
    if( invertValSet && ( 'invert' in mfn.shape_dividers[inputValue] ) ) {
      key = 'invert';
    } else {
      invertValSet = 0;
    }

    shapeDividerDom.attr('data-invert',invertValSet);

    // viewbox

    let viewbox = '0 0 1200 120';

    if( 'viewbox' in mfn.shape_dividers[inputValue] ){
      viewbox = mfn.shape_dividers[inputValue]['viewbox'];
    }

    svgLocation.attr('viewBox',viewbox);

    // get path

    const rand = Math.random().toString(36).substring(8);
    const regex = /mfn-uid-/g;
    let pathVal = mfn.shape_dividers[inputValue][key].replace( regex, 'mfn-uid-'+ rand );

    svgLocation.html(pathVal);
});

$editpanel.on('change', '.shape_divider_flip_top, .shape_divider_invert_top, .shape_divider_bring_front_top, .shape_divider_flip_bottom, .shape_divider_invert_bottom, .shape_divider_bring_front_bottom', function() {
    const { shapeDividerDom, inputName, checkboxValue, shapeDividerPosition } = shapeDividerGetAttrs($(this));
    let svgLocation = $(shapeDividerDom).find('svg');
    let toChange;

    switch(inputName){

      case 'shape_divider_flip_'+ shapeDividerPosition:
        $(shapeDividerDom).attr('data-flip', checkboxValue); //0 or 1
        break;

      case 'shape_divider_invert_'+ shapeDividerPosition:
        svgLocation = $(shapeDividerDom).closest('.be-custom-shape');

        $(shapeDividerDom).attr('data-invert', checkboxValue); //0 or 1

        //Invert is chaning the "D" path, so we need to update it
        const typeSwitch = $(this).siblings('div[data-name="shape_divider_type_'+shapeDividerPosition+'"]');
        $(typeSwitch).trigger('change');
        break;

      case 'shape_divider_bring_front_'+ shapeDividerPosition:
        $(shapeDividerDom).attr('data-bring-front', checkboxValue); //0 or 1

        $(svgLocation).css('z-index', toChange);
        break;

    }
});

// decoration svgs

$editpanel.on('change', '.preview-dividerinput', function() {
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();
    if($content.find('.'+it+' .section-divider').length){
        $content.find('.'+it+' .section-divider').removeClass('circle up square triangle triple-triangle down').addClass(val);
    }else if(val != ''){
        $edited_div.append('<div class="section-divider '+val+'"></div>');
    }
});

// segmented options multi segmented

$editpanel.on('click', '.multiple-segmented-options.segmented-options ul li a', function(e) {
    e.preventDefault();

    let $editbox = $(this).closest('.mfn-form-row');
    let $li = $(this).closest('li');
    let it = $editbox.closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $li.find('input').val();
    let id = $li.find('input').attr('name');

    let this_div = $content.find('.'+it);

    if( $editbox.hasClass('header_icon_desc_visibility') ) {
        this_div = $content.find('.'+it+' .mfn-header-icon-box .desc-wrapper');
    }


    if($li.hasClass('active')){
        $li.find('input').prop('checked', false);
        $li.removeClass('active');
        this_div.removeClass(val);
    }else{
        // max 2/3 in responsive visibility
        if( $editbox.hasClass('visibility') && $editbox.find('ul li.active').length == 3 ) return;
        $li.addClass('active');
        $li.find('input').prop('checked', true);
        this_div.addClass(val);
    }

    var value = '';

    $('li input:checked', $editbox).each(function() {
        value = value + ' ' + $(this).val();
    });


    if( $li.closest('.segmented-option').hasClass('mfn-placeholder-inherited-class') ) $li.closest('.segmented-option').removeClass('mfn-placeholder-inherited-class');
    if( $li.closest('.segmented-option').hasClass('mfn-placeholder-inherited-rwd') ) $li.closest('.segmented-option').removeClass('mfn-placeholder-inherited-rwd');

    if( value.length ){
        edited_item['attr'][id] = value;
    }else{
        delete(edited_item['attr'][id]);
    }

    be_navigator.responsive(value, edited_item.uid, true);

    /*var value = '';

    $('li input:checked', $editbox).each(function() {
        value = value + ' ' + $(this).val();
    });

    $hiddeninput.val(value).trigger('change');*/
});

// gradient input change

$editpanel.on('change', '.mfn-form-row.gradient .mfn-form-control', function() {
    let $editbox = $(this).closest('.mfn-form-row');
    gradientValue($editbox);
});


// pseudo checkbox

$editpanel.on('click', '.checkboxes ul li', function() {

    let $input = $(this).find('input');
    let $editbox = $(this).closest('.mfn-form-row');
    let input_name = $input.attr('name');
    let val = $input.val();

    let windowH = $(window).height() || 0;

    if($(this).hasClass('active')){
        $input.prop('checked', false).trigger('change');
        $(this).removeClass('active');
        if( $editbox.closest('.mfn-element-fields-wrapper').length ) $edited_div.removeClass(val);

        if($editbox.hasClass('mfn-type-section') && val == 'full-screen'){
            let it = $editbox.closest('.mfn-element-fields-wrapper').attr('data-element');
            $edited_div.css({'min-height': '50px'});
            $content.find('.'+it+' .section_wrapper').css({'padding-top': 0, 'padding-bottom': 0});
        }

    }else{
        $(this).addClass('active');
        $input.prop('checked', true).trigger('change');
        if( $editbox.closest('.mfn-element-fields-wrapper').length ) $edited_div.addClass(val);
    }


    if( $editbox.find( '.checkboxes.pseudo' ).length ){
        var value = '';

        $('li input:checked', $editbox).each(function() {
            value = value + ' ' + $(this).val();
        });

        edited_item['attr'][input_name] = value;

        $('.value', $editbox).val(value).trigger('change');
    }else if( typeof edited_item['attr'] !== 'undefined' && typeof edited_item['attr'][input_name] !== 'undefined' ){
        //$input.trigger('change');
        delete(edited_item['attr'][input_name])
    }

});

// radio img

$editpanel.on('click', '.visual-options ul li a', function(e) {
    e.preventDefault();

    let $li = $(this).closest('li');
    let $editbox = $li.closest('.mfn-form-row');
    let $edit_wrapper = $li.closest('.mfn-element-fields-wrapper');

    let it = $edit_wrapper.attr('data-element');
    let val = $li.find('input').val();

    if(!$li.hasClass('active')){
        $editbox.find('li').removeClass('active');
        $editbox.find('li').find('input').prop('checked', false);

        $li.addClass('active');
        $li.find('input').prop('checked', true).trigger('change');
    }

    if( $editbox.hasClass('themeoption layout') ){
        // themeoption layout
        $content.find('body').removeClass('layout-boxed layout-full-width').addClass('layout-'+val);
    }

    if( $editbox.hasClass('themeoption style') ){
        // themeoption style
        $content.find('body').removeClass('style-default style-simple');
        if( val.length ){
            $content.find('body').addClass('style-simple');
        }else{
            $content.find('body').addClass('style-default');
        }
    }

    if( $editbox.hasClass('popup_position') ){
        $editbox.find('input[name="popup_position"]').each(function() {
            $content.find('.mfn-popup-tmpl').removeClass('mfn-popup-tmpl-'+$(this).val());
        });
        $content.find('.mfn-popup-tmpl').addClass('mfn-popup-tmpl-'+val);
    }

    if( $editbox.hasClass('sidemenu_position') ){
        $content.find('.mfn-sidemenu-tmpl').removeClass('mfn-sidemenu-align-right mfn-sidemenu-align-left');
        if( val.length ){
            $content.find('.mfn-sidemenu-tmpl').addClass('mfn-sidemenu-align-'+val);
        }else{
            $content.find('.mfn-sidemenu-tmpl').addClass('mfn-sidemenu-align-left');
        }

    }


    if( $editbox.hasClass('watchChanges') ){
        var id = $editbox.attr('id');
        mfnoptsinputs.getField(id, val);
    }

});



$editpanel.on('change', '.panel-view-options .option.popup_close_button_active .mfn-field-value', function() {
    let val = $(this).val();
    $content.find('.mfn-popup-tmpl').removeClass('mfn-popup-tmpl-close-button-hidden');

    if( val == '' ){
        $content.find('.mfn-popup-tmpl').addClass('mfn-popup-tmpl-close-button-hidden');
    }

});

$editpanel.on('change', '.panel-view-options .option.sidemenu_close_button_active .mfn-field-value', function() {
    let val = $(this).val();
    $content.find('.mfn-sidemenu-tmpl').removeClass('mfn-sidemenu-closebutton-hidden mfn-sidemenu-closebutton-active');

    if( val.length ){
        $content.find('.mfn-sidemenu-tmpl').addClass('mfn-sidemenu-closebutton-active');
    }else{
        $content.find('.mfn-sidemenu-tmpl').addClass('mfn-sidemenu-closebutton-hidden');
    }

});

$editpanel.on('change', '.panel-view-options .option.popup_width .mfn-field-value', function() {
    let val = $(this).val();
    $content.find('.mfn-popup-tmpl').removeClass('mfn-popup-tmpl-full-width mfn-popup-tmpl-width-default mfn-popup-tmpl-custom-width');

    if( val.length ){
        $content.find('.mfn-popup-tmpl').addClass('mfn-popup-tmpl-'+val);
    }else{
        $content.find('.mfn-popup-tmpl').addClass('mfn-popup-tmpl-width-default');
    }

});

$editpanel.on('change', '.panel-view-options .option.popup_close_button_align .mfn-field-value', function() {
    let val = $(this).val();
    $content.find('.mfn-popup-tmpl').removeClass('mfn-popup-close-button-right mfn-popup-close-button-left');

    if( val.length ){
        $content.find('.mfn-popup-tmpl').addClass('mfn-popup-close-button-'+val);
    }else{
        $content.find('.mfn-popup-tmpl').addClass('mfn-popup-close-button-right');
    }

});

$editpanel.on('change', '.panel-view-options .sidemenu_close_button_align .mfn-field-value', function() {
    let val = $(this).val();

    $content.find('.mfn-sidemenu-tmpl').removeClass('mfn-sidemenu-close-button-left mfn-sidemenu-close-button-right');
    if( val.length ){
        $content.find('.mfn-sidemenu-tmpl').addClass('mfn-sidemenu-close-button-'+val);
    }else{
        $content.find('.mfn-sidemenu-tmpl').addClass('mfn-sidemenu-close-button-right');
    }

});
























$(document).on('click', '.mfn-form-row .color-picker .form-control .color-picker-vb', function () {

    const this_input   = $(this);
    const $edit_field  = this_input.closest('.mfn-form-row');
    const $edit_wrapper = this_input.closest('.mfn-element-fields-wrapper');
    const element      = $edit_wrapper.attr('data-element');

    let css_style = $edit_field.attr('data-name');
    const css_path  = $edit_field.attr('data-csspath');

    if ($edit_field.hasClass('themeoption')) {
        css_style = $edit_field.attr('data-style');
    }

    if (this_input.val().length && this_input.val().includes('--')) return;

    const default_color = this_input.val().length ? this_input.val() : '#000';

    this_input.addClass('mfn-initialized');

    const inputElement = this_input[0]; // zamiast kombinacji z klasą

    const pickr = Pickr.create({
        el: inputElement,
        theme: 'nano',
        useAsButton: true,
        defaultRepresentation: 'HEX',
        default: default_color,
        comparison: true,
        swatches: color_palette,
        components: {
            palette: true,
            preview: true,
            opacity: true,
            hue: true,
            interaction: {
                hex: false,
                rgba: false,
                hsla: false,
                hsva: false,
                cmyk: false,
                input: true,
                clear: true,
                save: true
            }
        }
    })

    .on('init', (instance) => {
        sidebar_form.no_render = true;
        instance.show();
    })

    .on('show', (color, instance) => {
        if (this_input.val().length && this_input.val().includes('#') && this_input.val() !== color.toHEXA().toString(0)) {
            instance.setColor(this_input.val());
            instance.show();
        }
        sidebar_form.no_render = true;
        $('.sidebar-wrapper').addClass('mfn-vb-sidebar-overlay');
    })

    .on('hide', (instance) => {
        if (this_input.val().length) {
            instance.setColor(this_input.val());
        }

        $('.sidebar-wrapper').removeClass('mfn-vb-sidebar-overlay');

        if (css_path && !$edit_field.hasClass('fancy_divider')) {
            setTimeout(function () {
                changeInlineStyles(css_path, css_style, 'remove');
            }, 50);
        }

        sidebar_form.no_render = false;
    })

    .on('save', (color, instance) => {
        instance.hide(); // ZAMIast mfnPickr.hide()
    })

    .on('change', (color, source, instance) => {

        if (isBlocks()) return;

        let cl = color.toHEXA().toString(0);
        if (color.a < 1) cl = color.toRGBA().toString(0).replaceAll(' ', '');

        this_input.val(cl);

        if ($edit_field.hasClass('inline-style-input') && $edit_field.hasClass('option')) {
            this_input.trigger('change');
        }

        if ($edit_field.hasClass('fancy_divider color_top')) {
            changeFancyDividerColorTop($edit_wrapper.attr('data-element'), $edit_wrapper.attr('data-group'), cl);
        } else if ($edit_field.hasClass('fancy_divider color_bottom')) {
            changeFancyDividerColorBottom($edit_wrapper.attr('data-element'), $edit_wrapper.attr('data-group'), cl);
        } else if ($edit_field.hasClass('widget-chart color')) {
            changeColorChart($edit_wrapper.attr('data-element'), cl);
        } else if (typeof edited_item.type !== 'undefined' && edited_item.type === 'list_2') {
            // prevent local styles change
        } else if (typeof css_path !== 'undefined') {
            changeInlineStyles(css_path, css_style, cl);
        }

        $(inputElement)
            .closest('.color-picker-group')
            .find('.form-addon-prepend .label')
            .css({
                'border-color': cl,
                'background-color': cl
            })
            .removeClass('light dark')
            .addClass(getContrastYIQ(color.toHEXA().toString(0)));
    })

    .on('changestop', (source, instance) => {

        let cl = instance._color.toHEXA().toString(0);

        if (typeof css_path === typeof undefined && $edit_field.hasClass('widget-chart color')) {
            this_input.val(cl).trigger('change');
            return;
        }

        if (instance._color.a < 1) {
            cl = instance._color.toRGBA().toString(0).replaceAll(' ', '');
        }

        this_input.val(cl).trigger('change');

        if (typeof edited_item.type !== 'undefined' && edited_item.type === 'list_2') {
            // prevent local styles change
            return;
        }

        if (css_path && !$edit_field.hasClass('fancy_divider')) {
            setTimeout(function () {
                changeInlineStyles(css_path, css_style, 'remove');
            }, 50);
        }
    })

    .on('swatchselect', (source, instance) => {

        let cl = instance._color.toHEXA().toString(0);

        if (!css_path && $edit_field.hasClass('widget-chart color')) {
            this_input.val(cl).trigger('change');
            return;
        }

        this_input.val(cl).trigger('change');

        if (typeof edited_item.type !== 'undefined' && edited_item.type === 'list_2') {
            // prevent local styles change
            return;
        }

        if (css_path && !$edit_field.hasClass('fancy_divider')) {
            setTimeout(function () {
                changeInlineStyles(css_path, css_style, 'remove');
            }, 50);
        }
    })

    .on('clear', (instance) => {
        instance.hide(); // ZAMIast mfnPickr.hide()
        $edit_field.find('.color-picker-clear').trigger('click');
    });

    // jeśli chcesz mieć dostęp do instancji później:
    this_input.data('pickr', pickr);
});










// color picker

$editpanel.on('change', '.mfn-form-row .color-picker-vb', function(e){
    e.preventDefault();
    var $field = $(this);
    var color = $field.val();

    if( color.length == 6 && !color.includes('#') ){
        $field.val('#'+color).trigger('change');
        return;
    }

    if( color == '#fff' ){
        $field.val('#ffffff').trigger('change');
        return;
    }

    if( color == '--'  ) return;
    if( color.includes('--') && !color.includes('var(') ){
        color = 'var('+color+')';
    }

    if( color.length ){
        $field.closest('.color-picker-group').find('.form-addon-prepend .label').css('border-color', color).css('background-color', color);
        $field.closest('.color-picker-group').find('.form-addon-prepend .label').removeClass('light dark').addClass(getContrastYIQ( color ));
    }else{
        $field.closest('.color-picker-group').find('.form-addon-prepend .label').removeAttr('style').removeClass('dark').addClass('light');
    }

});

$editpanel.on('click', '.color-picker-clear', function(e){
    e.preventDefault();

    let $edit_wrapper = $(this).closest('.mfn-element-fields-wrapper');
    let $editfield = $(this).closest('.mfn-form-row');
    let $group = $(this).closest('.color-picker-group');

    let csspath = $editfield.attr('data-csspath');
    let cssstyle = $editfield.attr('data-name');

    if( !$group.find('.color-picker-vb').val().length ) return

    if($editfield.hasClass('gradient')) {
        $editfield.find('.color-picker-vb').val('').trigger('change');
    }else if($editfield.hasClass('box-shadow')) {
        $group.find('.color-picker-vb').val('').trigger('change');
        $editfield.find('.field input').val('').trigger('change');
    }else{
        $group.find('.color-picker-vb').val('').trigger('change');
    }

    if( $editfield.find('.multiple-inputs .pseudo-field.mfn-field-value').length ) {
        updatePseudoField( $editfield.find('.multiple-inputs') );
    }else if($editfield.hasClass('fancy_divider color_top')) {
        changeFancyDividerColorTop( $edit_wrapper.attr('data-element'), $edit_wrapper.attr('data-group'), 'remove' );
    }else if($editfield.hasClass('fancy_divider color_bottom')) {
        changeFancyDividerColorBottom( $edit_wrapper.attr('data-element'), $edit_wrapper.attr('data-group'), 'remove' );
    }

    //changeInlineStyles(csspath, cssstyle, 'remove');
    $group.find('.form-addon-prepend .label').removeAttr('style').removeClass('dark').addClass('light');

});

$editpanel.on('click', '.color-picker-open', function(e){
    e.preventDefault();
    let $group = $(this).closest('.color-picker-group');
    $('.form-control .mfn-form-input', $group).trigger('click');
});


$editpanel.on('blur', '.custom_css .preview-custom_cssinput', function() {
    // inline styles column
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    let styles = val.split(';');

    $.each(styles, function( i, v ) {
      if(v.trim()){

        let st_expl = v.split(':');
        if(st_expl[0] && st_expl[1]){
            changeInlineStyles('.'+it, st_expl[0], st_expl[1]);
        }
      }
    });

}).on('focus', '.custom_css .preview-custom_cssinput', function() {
    // inline styles column
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    let styles = val.split(';');

    $.each(styles, function( i, v ) {
      if(v.trim()){

        let st_expl = v.split(':');

        if(st_expl[0] && st_expl[1]){
            changeInlineStyles('.'+it, st_expl[0], 'remove');
        }
      }
    });

});

/**
 *
 * DEPRECATED FIELDS
 *
 * */

// column inline css

$editpanel.on('blur', '.column.style .preview-styleinput', function() {
    // inline styles column
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    let styles = val.split(';');
    $.each(styles, function( i, v ) {
      if(v.trim()){
        let st_expl = v.split(':');
        if(st_expl[0] && st_expl[1]){
            changeInlineStyles('.'+it+' .column_attr', st_expl[0], st_expl[1]);
        }
      }
    });
}).on('focus', '.column.style .preview-styleinput', function() {
    // inline styles column
    let it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    let val = $(this).val();

    let styles = val.split(';');
    $.each(styles, function( i, v ) {
      if(v.trim()){
        let st_expl = v.split(':');
        if(st_expl[0] && st_expl[1]){
            changeInlineStyles('.'+it+' .column_attr', st_expl[0], 'remove');
        }
      }
    });
});

/**
 *
 * END DEPRECATED FIELDS
 *
 * */

$(document).on('click', '.mfn-fr-help-icon', function(e) {
    e.preventDefault();
    if( $(this).closest('div').find('.desc-group').is(':visible') ){
        $(this).closest('div').find('.desc-group').slideUp(300);
    }else{
        $(this).closest('div').find('.desc-group').slideDown(300);
    }
});

$editpanel.on('mouseover', '.panel-edit-item .tabs-wrapper:not(.mfn-initialized)', function() {
    tabsField.sortable();
});


function updatePseudoField($box) {
    var value = '';
    var is_empty = true;

    $box.find('.field input').each(function(i) {

        if( $(this).val().length ) {
            value += i == 0 ? $(this).val() : ' '+$(this).val();
            is_empty = false;
        }else if( !$(this).val().length && !$(this).hasClass('boxshadow-inset') ) {
            value += i == 0 ? '0' : ' 0';
        }

    });

    $box.find('input.pseudo-field').val(is_empty ? '' : value).trigger('change');

    setTimeout( historyStorage.add, 200 );
}



// global functions

// import element

function importFromClipboard(u, w) {

    let import_clipboard = localStorage.getItem('mfn-builder') ? JSON.parse(localStorage.getItem('mfn-builder')) : {};

    if( import_clipboard.clipboard && !$content.find('.vb-item[data-uid="' +u+ '"] .mfn-section-import').hasClass('pending') ) {
        $content.find('.vb-item[data-uid="' +u+ '"] .mfn-section-import').addClass('pending');
        $.ajax({
            url: mfnajaxurl,
            data: {
                action: 'importfromclipboard',
                'mfn-builder-nonce': wpnonce,
                import: import_clipboard.clipboard,
                id: pageid,
                type: 'section'
            },
            type: 'POST',
            success: function(response) {

                const prepared = loadExistedElementsFromObject(response.form || []);

                const html = response.html
                  .replaceAll('mfn-default-section', 'mfn-' + elements_ver + '-section')
                  .replaceAll('mfn-cart-empty-section', 'mfn-' + elements_ver + '-section');

                const $target = $content.find('.vb-item[data-uid="' + u + '"]');

                if (w === 'replace') {
                  $target.after(html).remove();
                } else if (w === 'after') {
                  $target.after(html);
                } else {
                  $target.before(html);
                }

                $content.find('.vb-item[data-uid="' + u + '"] .mfn-section-import').removeClass('pending');

                let new_uid = false;

                prepared.forEach((el) => {
                  if (el?.jsclass === 'section') {
                    new_uid = el.uid;
                    el.ver = elements_ver;
                  }
                });

                mfn.pagedata = Array.isArray(mfn.pagedata) ? mfn.pagedata : [];

                if (w === 'replace') {
                  mfn.pagedata = mfn.pagedata.filter((item) => item.uid !== u);
                }

                mfn.pagedata.push(...prepared);

                loopAllStyleFields();
                inlineEditor();
                blink();

                be_layout.emptys.sections();
                be_layout.emptys.wraps();

                if( $('body').hasClass('mfn-navigator-active') ) be_navigator.show( new_uid );

                runAjaxElements();

            }
        });

    }
}

// export element

function elementToClipboard(u) {

    if( !$content.find('.vb-item[data-uid="' +u+ '"] .mfn-section-export').hasClass('pending') ) {
        $content.find('.vb-item[data-uid="' +u+ '"] .mfn-section-export').addClass('pending');

        var formData = prepareForm.get( u );

        var btnText = $content.find('.vb-item[data-uid="' +u+ '"] .mfn-section-export').text();
        $content.find('.vb-item[data-uid="' +u+ '"] .mfn-section-export').html('<span class="mfn-icon mfn-icon-check-blue"></span> Exported');

        setTimeout(function(){
          $content.find('.vb-item[data-uid="' +u+ '"] .mfn-section-export').html('<span class="mfn-icon mfn-icon-export"></span> Export section');
          $content.find('.vb-item[data-uid="' +u+ '"] .mfn-section-export').removeClass('pending');
        }, 1000);

        $content.find('.section-header .mfn-disabled').removeClass('mfn-disabled');

        localStorage.setItem( 'mfn-builder', JSON.stringify({
          clipboard: formData
        }) );

        mfnbuilder.clipboard = formData;

    }
}

// export/import - import submit

$('.mfn-import-button').on('click', function(e) {

    e.preventDefault();

    var single = 0; // import single section only

    if(!$('.mfn-import-button').hasClass('loading')){

        if($('#import-data-textarea.mfn-import-field').val().length){

            $('.mfn-import-button').addClass('loading disabled');

            var type = $('.panel-export-import-import .mfn-import-type').val();

            if( $('body').hasClass('mfn-template-section') || $('body').hasClass('mfn-template-wrap') ){
              single = 1;
              type = 'replace';
            }

            $.ajax({
                url: mfnajaxurl,
                data: {
                    action: 'importdata',
                    'mfn-builder-nonce': wpnonce,
                    import: $('#import-data-textarea.mfn-import-field').val(),
                    single: single,
                    count: 0,
                    id: samplecontentid ? samplecontentid : pageid
                },

                type: 'POST',
                success: function(response){
                    $('.mfn-import-button').removeClass('loading disabled');

                    if( type == 'after' ){
                        $builder.append(response.html);
                    }else if( type == 'before' ){
                        $builder.prepend(response.html);
                    }else{
                        $builder.html(response.html);
                    }


                    let prepare_obj = loadExistedElementsFromObject(response.form || []);
                    mfn.pagedata = mfn.pagedata.concat(prepare_obj);

                    /*$.each(response.form, function(i, el) {

                      // Load Global Section/Wrap CSS
                      if( el.mfn_global_section_id || (el.attr && el.attr.global_wraps_select) ) {
                        const globalId = el.mfn_global_section_id ? el.mfn_global_section_id : el.attr.global_wraps_select;
                        $content.find('head').append(`<link rel="stylesheet" type="text/css" href='${mfn.site_url}/wp-content/uploads/betheme/css/post-${globalId}.css' />`);
                      }

                      mfn.pagedata.push(el);
                    });*/

                    if( $content.find('.vb-item .mfn-lottie-wrapper .lottie').length ){
                        $content.find('.vb-item .mfn-lottie-wrapper .lottie').each(function() {
                            $(this).attr('id', 'mfn_lottie_'+getUid());
                            $(this).closest('.vb-item').find('.mfn-header').first().find('.mfn-element-edit').trigger('click');
                            re_render();
                        });
                    }

                    loopAllStyleFields();

                    blink();

                    be_layout.emptys.sections();
                    be_layout.emptys.wraps();

                    mfnChart();
                    inlineEditor();

                    runAjaxElements();

                }
            });

        }else{
            alert('Import input cannot be empty');
        }

    }else{
        alert('Loading. Please wait');
    }

});

// export/import - import single page

$('.mfn-import-single-page-button').on('click', function(e) {
    e.preventDefault();

    var import_place = $('.panel-export-import-single-page .mfn-import-type').val();

    if(!$('.mfn-import-single-page-button').hasClass('loading')){

        if($('#mfn-items-import-page').val().length){

            $('.mfn-import-single-page-button').addClass('loading disabled');

            $.ajax({
                url: mfnajaxurl,
                data: {
                    action: 'importsinglepage',
                    'mfn-builder-nonce': wpnonce,
                    import: $('#mfn-items-import-page').val(),
                    pageid: pageid,
                    count: 0
                },
                type: 'POST',
                success: function(response){
                    $('.mfn-import-single-page-button').removeClass('loading disabled');
                    removeStartBuilding();

                    if(import_place == 'before'){
                        $builder.prepend(response.html);
                        //$navigator.find('.navigator-tree').prepend(response.navigator);
                    }else if(import_place == 'after'){
                        $builder.append(response.html);
                        //$navigator.find('.navigator-tree').append(response.navigator);
                    }else{
                        $builder.html(response.html);
                        //$navigator.find('.navigator-tree').html(response.navigator);
                    }

                    $('#mfn-items-import-page').val('');

                    /*$.each(response.form, function(i, el) {
                        mfn.pagedata.push(el);
                    });*/

                    let prepare_obj = loadExistedElementsFromObject(response.form || []);
                    mfn.pagedata = mfn.pagedata.concat(prepare_obj);

                    loopAllStyleFields();

                    inlineEditor();

                    runAjaxElements();
                    //historyStorage.add();

                    blink();

                    be_layout.emptys.sections();
                    be_layout.emptys.wraps();

                    //location.reload();
                }
            });

        }else{
            alert('Import input cannot be empty');
        }

    }else{
        alert('Loading. Please wait');
    }

});


// export/import - builder seo / builder to seo

$('.mfn-builder-export-to-seo-button').on('click', function(e) {
    e.preventDefault();

    let $seo_button = $(this);

    if(!$seo_button.hasClass('loading')){
        $seo_button.addClass('loading disabled');

        var formData = prepareForm.get();

        $.ajax({
            url: mfnajaxurl,
            data: {
                action: 'mfnvb_builder_seo',
                'mfn-builder-nonce': wpnonce,
                sections: formData,
                pageid: pageid,
            },
            type: 'POST',
            success: function(response){

                $seo_button.removeClass('loading disabled');
                $seo_button.find('.btn-wrapper').text('Generated...');

                setTimeout(function(){
                    $seo_button.find('span.btn-wrapper').text('Generate');
              },2000);


                //location.reload();
            }
        });


    }else{
        alert('Loading. Please wait');
    }

});

$('.mfn-import-template-button').on('click', function(e) {
    e.preventDefault();

    if(!$('.mfn-import-template-button').hasClass('loading')){

        if($('.mfn-items-import-template li.active').length){

            $('.mfn-import-template-button').addClass('loading disabled');

            var type = $('.mfn-import-template-type').val();

            $.ajax({
                url: mfnajaxurl,
                data: {
                    action: 'importtemplate',
                    'mfn-builder-nonce': wpnonce,
                    import: $('.mfn-items-import-template li.active').data('id'),
                    count: 0,
                    id: $('.mfn-import-template-button').data('id')
                },
                type: 'POST',
                success: function(response){
                    $('.mfn-import-template-button').removeClass('loading disabled');
                    removeStartBuilding();
                    if( type == 'after' ){
                        $builder.append(response.html);
                        //$navigator.find('.navigator-tree').append(response.navigator);
                    }else if( type == 'before' ){
                        $builder.prepend(response.html);
                        //$navigator.find('.navigator-tree').prepend(response.navigator);
                    }else{
                        $builder.html(response.html);
                        //$navigator.find('.navigator-tree').html(response.navigator);
                    }

                    let prepare_obj = loadExistedElementsFromObject(response.form || []);
                    mfn.pagedata = mfn.pagedata.concat(prepare_obj);

                    /*$.each(response.form, function(i, el) {
                        mfn.pagedata.push(el);
                    });*/

                    blink();

                    be_layout.emptys.sections();
                    be_layout.emptys.wraps();
                    be_layout.emptys.page();
                    loopAllStyleFields();
                    inlineEditor();
                    runAjaxElements();

                }
            });

        }else{
            alert('Choose template first');
        }

    }else{
        alert('Loading. Please wait');
    }

});

// preview

$('.mfn-preview-generate').on('click', function(e) {
    e.preventDefault();

    var $el = $(this),
    tooltip = $el.attr('data-tooltip'),
    previewURL = $el.attr('data-href');

    if(!$el.hasClass('pending')){

        $el.attr('data-tooltip', 'Generating preview...');
        $el.addClass('pending');

        prepareForm.save = true;

        var formData = prepareForm.get();

        $.ajax({
            url: mfnajaxurl,
            data: {
                sections: formData,
                action: 'generatepreview',
                gtype: 'mfn-builder-preview',
                obj: JSON.stringify(prepareForm.object),
                pageid: pageid,
                'mfn-builder-nonce': wpnonce,
            },
            type: 'POST',
            success: function(response){

                $el.attr('data-tooltip', 'Generate preview');

                removeStartBuilding();

                if ( ! previewTab || previewTab.closed ) {
                    previewTab = window.open(response, 'preview' );
                    if ( previewTab ) {
                        previewTab.focus();
                    } else {
                        alert('Please allow popups to use preview');
                    }
                } else {
                    previewTab.location.reload();
                    previewTab.focus();
                }

                $el.removeClass('pending');

            }
        });

    }
});

// take post editing

$('.take-post-editing').on('click', function(e) {
    e.preventDefault();
    $el = $(this);

    if(!$el.hasClass('loading')){

        $el.addClass('loading disabled');

        $.ajax({
            url: mfnajaxurl,
            data: {
                action: 'takepostediting',
                'mfn-builder-nonce': wpnonce,
                pageid: $('.mfn-import-template-button').data('id')
            },
            type: 'POST',
            success: function(response){
                $('.mfn-modal-locker').remove();
            }
        });

    }
});

// prebuilts

$(document).on('click', '.mfn-insert-prebuilt', function(e) {
    e.preventDefault();

    $el = $(this);

    if(!$el.hasClass('loading')){

        let id = $el.closest('li').data('id');
        let count = $content.find('.mcb-section').length;
        let isGlobalSectionEditor =  $content.find('body').hasClass('mfn-template-section');

        $el.addClass('loading disabled');

        // be global sections pbl == button on alert false

        if( isGlobalSectionEditor ){
          if( ! confirm('Using pre-built section will erase all current content in this section.\n\nAre you sure you want to do this?') ) {
            return $el.removeClass('loading').removeClass('empty').removeClass('disabled').text('+ '.btnText);
          }
        }

        $.ajax({
            url: mfnajaxurl,
            data: {
                'mfn-builder-nonce': wpnonce,
                action: 'insertprebuilt',
                id: id,
                pageid: pageid,
                count: count
            },
            type: 'POST',
            success: function(response){

                removeStartBuilding();

                //console.log(response);

                $el.removeClass('loading').find('.text').text('Done');

                // be global sections pbl == remove content, no multiple sections
                if ( isGlobalSectionEditor ) {
                    $($content).find('.mcb-section').remove();
                    //$($navigator).find('.navigator-section').remove();
                }

                if( !$content.find('.mcb-section-'+prebuiltType).length || prebuiltType == 'end' ){
                    $builder.append(response.html);
                    //$navigator.find('.navigator-tree').append(response.navigator);
                }else{
                    $content.find('.mcb-section-'+prebuiltType).after(response.html);
                    //$navigator.find('.navigator-tree li.nav-'+$content.find('.mcb-section-'+prebuiltType).attr('data-uid')).after(response.navigator);
                }

                if( $content.find('.mfn-builder-content .mfn-builder-content .mcb-section').length ){
                    $content.find('.mfn-builder-content .mfn-builder-content .mcb-section').unwrap();
                }

                let prepare_obj = loadExistedElementsFromObject(response.form || []);
                mfn.pagedata = mfn.pagedata.concat(prepare_obj);

                /*$.each(response.form, function(i, el) {
                    mfn.pagedata.push(el);
                });*/

                if(prebuiltType != 'end'){

                    let newPreBuiltType = $content.find('.mcb-section-'+prebuiltType).next('.mcb-section').attr('data-uid');

                    if($content.find('.mcb-section-'+prebuiltType).hasClass('empty')){
                        var pre_uid = $content.find('.mcb-section-'+prebuiltType).attr('data-uid');
                        //$navigator.find('.nav-'+pre_uid).remove();
                        $content.find('.mcb-section-'+prebuiltType).remove();
                        $('.mfn-form .mfn-vb-'+prebuiltType).remove();
                    }

                    prebuiltType = newPreBuiltType;

                }else{
                    prebuiltType = 'end';
                }

                setTimeout(function(){
                    $el.removeClass('disabled').find('.text').text('Insert');
                },1000);

                if( $('body').hasClass('mfn-navigator-active') ) be_navigator.show(prebuiltType);

                inlineEditor();
                loopAllStyleFields();

                blink();


            }
        });


    }else{
        alert('Loading. Please wait');
    }

});

// set revision
function setRevision(type) {

    $list = $('.panel ul.revisions-list[data-type="'+type+'"]');

    let formData = prepareForm.get();

    $.ajax({
        url: mfnajaxurl,
        data: {
            'sections': formData,
            'action': 'setrevision',
            'revtype': type,
            'mfn-builder-nonce': wpnonce,
            'pageid': pageid
        },
        type: 'POST',
        success: function(response){

            if(type == 'autosave'){
                $('.btn-save-changes').removeClass('loading disabled');
            }

            if( response == 'empty' ){
                $('.mfn-save-revision').removeClass('loading disabled').find('.btn-wrapper').text('Nothing saved');
                setTimeout(function() { $('.mfn-save-revision .btn-wrapper').text('Save revision'); }, 2000);
            }else{
                displayRevisions(response, $list);
                if(type == 'revision'){
                    $('.mfn-save-revision').removeClass('loading disabled').find('.btn-wrapper').text('Saved');
                    setTimeout(function() { $('.mfn-save-revision .btn-wrapper').text('Save revision'); }, 2000);
                }else if(type == 'mfn-builder-preview'){
                    return true;
                }
            }
        },
        error: function(response){
            if(type == 'autosave'){
                $('.btn-save-changes').removeClass('loading disabled');
            }

            $('#mfn-preview-wrapper').append('<div style="display: none;" class="mfn-snackbar"><span class="mfn-icon mfn-icon-information"></span><div class="snackbar-message">An error occurred. Please refresh the BeBuilder</div></div>');
            $('.mfn-snackbar').fadeIn();
            closeSnackbar();

        }
    });
}

// autosave
if( !mfn.autosave ) setInterval(autosave, 300000);

function autosave(){
    if( mfn.view == 'demo' ) return;
    if(!$('.btn-save-changes').hasClass('disabled')){
        $('.btn-save-changes').addClass('loading disabled');
        setRevision('autosave');
    }
}

// manual save revision
$('.mfn-save-revision').on('click', function(e) {
    if( mfn.view == 'demo' ) return;
    if(!$('.mfn-save-revision').hasClass('disabled')){
        $('.mfn-save-revision').addClass('loading disabled');
        setRevision('revision');
    }
});

// restore
$('.revision-restore').on('click', function(e) {
    e.preventDefault();
    if( mfn.view == 'demo' ) return;
    restoreRev($(this));
});

function restoreRev($btn){
    if( mfn.view == 'demo' ) return;
    if(!$btn.hasClass('disabled')){

        $btn.addClass('loading disabled');

        $list = $('.panel ul[data-type="backup"]');

        $el = $btn.closest('li');

        var time = $el.attr('data-time'),
          type = $el.closest('ul').attr('data-type'),
          btnText = $el.text(),
          revision;

        $.ajax({
            url: mfnajaxurl,
            data: {
                action: 'restorerevision',
                'mfn-builder-nonce': wpnonce,
                time: time,
                type: type,
                pageid: pageid
            },
            type: 'POST',
            success: function(response){

                $builder.empty();

                mfn.pagedata = [];
                let prepare_obj = loadExistedElementsFromObject(response.form || []);
                mfn.pagedata = mfn.pagedata.concat(prepare_obj);

                /*$.each(response.form, function(i, el) {
                    mfn.pagedata.push(el);
                });*/

                $builder.append(response.html);
                displayRevisions(response.revisions, $list);

                //$navigator.find('.navigator-tree').html(response.navigator);

                // render local styles

                $btn.removeClass('loading disabled');

                inlineEditor();
                blink();

                loopAllStyleFields();

                runAjaxElements();

            }
        });

    }
}

function displayRevisions(rev, $list) {
    $list.empty();
    $.each(JSON.parse(rev), function(i, item) {
        $list.append('<li data-time="'+ i +'"><span class="revision-icon mfn-icon-clock"></span><div class="revision"><h6>'+ item +'</h6><a class="mfn-option-btn mfn-option-text mfn-option-blue mfn-btn-restore revision-restore" href="#"><span class="text">Restore</span></a></div></li>');
    });

    $('.revision-restore').on('click', function(e) {
        e.preventDefault();
        restoreRev($(this));
    });
}


// copy / paste element

var copypaste = {
    item: false,
    parent: false,
    uid: false,
    type: false,
    ls_obj: localStorage.getItem("mfn_copy") ? JSON.parse(localStorage.getItem("mfn_copy")) : false,
    copy: function(el, action = false) {
        copypaste.uid = el;

        copypaste.copy_to_localstorage();

        if(action){
            copypaste.parent = action;
            copypaste.paste();
        }
    },
    copy_to_localstorage: function() {
        localStorage.removeItem("mfn_copy");

        copypaste.ls_obj = {};
        copypaste.ls_obj['html'] = $content.find('.vb-item[data-uid="'+copypaste.uid+'"]')[0].outerHTML;
        copypaste.ls_obj['obj'] = [];

        copypaste.ls_obj['obj'].push( mfn.pagedata.filter( (item) => item.uid == copypaste.uid )[0] );

        if( $content.find('.vb-item[data-uid="'+copypaste.uid+'"] .vb-item').length ) {
            $content.find('.vb-item[data-uid="'+copypaste.uid+'"] .vb-item').each(function() {
                var uid = $(this).attr('data-uid');
                copypaste.ls_obj['obj'].push( mfn.pagedata.filter( (item) => item.uid == uid )[0] );
            });
        }

        localStorage.setItem("mfn_copy", JSON.stringify(copypaste.ls_obj));

    },
    paste: function() {

        if( !localStorage.getItem("mfn_copy") && !copypaste.ls_obj ) return;

        if( !copypaste.ls_obj ){
            copypaste.ls_obj = JSON.parse(localStorage.getItem("mfn_copy"));
        }

        copypaste.item = $(copypaste.ls_obj['html']);

        copypaste.type = 'column';

        if( copypaste.item.hasClass('mcb-section') ){ copypaste.type = 'section'; }else if( copypaste.item.hasClass('mcb-wrap') ){ copypaste.type = 'wrap'; }

        if( copypaste.item.find('.mfn-initialized').length ){
            if( inlineEditors[copypaste.item.find('.mfn-initialized').attr('data-mfnindex')] ) inlineEditors[copypaste.item.find('.mfn-initialized').attr('data-mfnindex')].destroy();
            copypaste.item.find('.mfn-initialized').removeClass('mfn-initialized mfn-watchChanges mfn-blur-action mfn-focused').removeAttr('data-mfnindex');
        }

        $content.find('.vb-item[data-uid="'+copypaste.uid+'"]').removeClass('mfn-current-editing');
        if( $('.mfn-ui').hasClass('mfn-class-editor') ) $('.mfn-ui').removeClass('mfn-class-editor');
        if( $content.find('body').hasClass('mfn-class-editor-preview') ) $content.find('body').removeClass('mfn-class-editor-preview');
        if( $('.mfn-ui').hasClass('mfn-class-editor-full') ) $('.mfn-ui').addClass('mfn-class-editor-full');


        if( $editpanel.find( '.mfn-form .html-editor' ).length ) MfnFieldTextarea.destroy();
        if( $editpanel.find( '.mfn-form .visual-editor' ).length ) tinymce.execCommand( 'mceRemoveEditor', false, 'mfn-editor' );
 

        //var $copy_el = copypaste.item.clone();

        if( copypaste.item.hasClass('mcb-column') ){
            // column
            var newuid = copypaste.updateItem(copypaste.item);
        }else if( copypaste.item.hasClass('mcb-wrap') ){
            // wrap
            var newuid = copypaste.updateWrap(copypaste.item);
        }else if( copypaste.item.hasClass('mcb-section') ){
            // section
            var newuid = copypaste.updateSection(copypaste.item);
        }

        edited_item = mfn.pagedata.filter( (item) => item.uid == newuid )[0];

        if(copypaste.parent.hasClass('mcb-section') && copypaste.type == 'wrap'){
            // wrap to section
            copypaste.parent.find('.section_wrapper').append(copypaste.item);
        }else if(copypaste.parent.hasClass('mcb-section') && copypaste.type == 'column'){
            // column to section
            if(copypaste.parent.find('.mcb-wrap-inner').length){
                copypaste.parent.find('.mcb-wrap-inner').last().append(copypaste.item);
            }else{
                alert('Append wrap first.');
            }
        }else if(copypaste.parent.hasClass('mcb-wrap') && copypaste.type == 'column'){
            // column to wrap
            copypaste.parent.find('.mcb-wrap-inner').append(copypaste.item);
        }else if( ( copypaste.parent.hasClass('mcb-column') || copypaste.parent.hasClass('mcb-wrap') ) && copypaste.type == 'section'){
            // section to wrap or column
            copypaste.parent.closest('.mcb-section').after(copypaste.item);
        }else if( copypaste.parent.hasClass('mcb-column') && copypaste.type == 'wrap'){
            // wrap to column
            copypaste.parent.closest('.mcb-wrap').after(copypaste.item);
        }else if( copypaste.parent.hasClass('mfn-builder-content')){
            copypaste.parent.append(copypaste.item);
        }else{
            copypaste.parent.after(copypaste.item);
        }

        if( $builder.find('.vb-item[data-uid="'+newuid+'"]').hasClass('mcb-column') ) {
            $builder.find('.vb-item[data-uid="'+newuid+'"]').addClass('loading');
        }else{
            $builder.find('.vb-item[data-uid="'+newuid+'"]').find('.mcb-column').addClass('loading');
        }

        if( builder_type == 'header' && copypaste.type == 'wrap' ){
            checkWrapsCount( $content.find('.mcb-wrap-'+newuid).closest('.mcb-section').attr('data-uid') );
        }

        be_layout.emptys.sections();
        be_layout.emptys.wraps();

        if( $content.find('.vb-item[data-uid="'+newuid+'"] .mfn-lottie-wrapper .lottie').length ){
            $content.find('.vb-item[data-uid="'+newuid+'"] .mfn-lottie-wrapper .lottie').each(function() {
                $(this).attr('id', 'mfn_lottie_'+getUid());
                $(this).closest('.vb-item').find('.mfn-header').first().find('.mfn-element-edit').trigger('click');
                re_render();
            });
        }

        setTimeout(function() {

            if( $content.find('.mfn-looped-items.vb-item[data-uid="'+newuid+'"]').length ) {
                if( $content.find('.mfn-looped-items.vb-item[data-uid="'+newuid+'"]').hasClass('section') ){
                    re_render( $content.find('.mfn-looped-items.vb-item[data-uid="'+newuid+'"]').attr('data-uid') );
                }else{
                    re_render( $content.find('.mfn-looped-items.vb-item[data-uid="'+newuid+'"]').closest('.section').attr('data-uid') );
                }
            }else if( $content.find('.vb-item[data-uid="'+newuid+'"]').closest('.mfn-looped-items').length ){
                re_render( $content.find('.vb-item[data-uid="'+newuid+'"]').closest('.section').attr('data-uid') );
            }else{
                historyStorage.add();
            }

            if( $content.find('.vb-item[data-uid="'+newuid+'"]').hasClass('mfn-current-editing') ) $content.find('.vb-item[data-uid="'+newuid+'"]').removeClass('mfn-current-editing');
            if( $content.find('.vb-item[data-uid="'+newuid+'"]').find('.mfn-current-editing').length ) $content.find('.vb-item[data-uid="'+newuid+'"]').find('.mfn-current-editing').removeClass('mfn-current-editing');

            if( $('body').hasClass('mfn-navigator-active') ) be_navigator.show(newuid);

            $builder.find('.vb-item.loading').removeClass('loading');

            mfnChart();
            inlineEditor();

            $content.find('.vb-item[data-uid="'+newuid+'"]').find('.mfn-header').first().find('.mfn-element-edit').trigger('click');

            if( $content.find('.vb-item.mfn-ready').length ) $content.find('.vb-item.mfn-ready').removeClass('mfn-ready');

            copypaste.uid = false;
            copypaste.parent = false;
            copypaste.type = false;

            // re render tabber
            if( !$content.find('.vb-item[data-uid="'+newuid+'"]').hasClass('mfn-nested-wrap') && $content.find('.vb-item[data-uid="'+newuid+'"]').hasClass('mcb-wrap') && $content.find('.vb-item[data-uid="'+newuid+'"]').closest('.mfn-section-tabber').length ) re_render( $content.find('.vb-item[data-uid="'+newuid+'"]').closest('.mfn-section-tabber').attr('data-uid') );

        }, 300);

    },

    updateItem: function($copy_el) {
        var old_uid = $copy_el.attr('data-uid');
        var new_uid = getUid();

        $copy_el.removeClass('mcb-item-'+old_uid).addClass('mcb-item-'+new_uid).attr('data-uid', new_uid);
        $copy_el.children('.mcb-column-inner').removeClass('mcb-column-inner-'+old_uid).addClass('mcb-column-inner-'+new_uid);

        if( $copy_el.find('.chart_box.mfn-initialized').length ){
            $copy_el.find('.chart_box.mfn-initialized').removeClass('mfn-initialized');
        }

        var get_copy = copypaste.ls_obj['obj'].filter( (item) => item.uid == old_uid )[0];
        var copy_obj = {};

        copy_obj = JSON.parse( JSON.stringify(get_copy) );

        copy_obj.uid = new_uid;
        mfn.pagedata.push(copy_obj);

        loopAllStyleFields(new_uid);

        return new_uid;
    },
    updateWrap: function($copy_el) {
        var old_uid = $copy_el.attr('data-uid');
        var new_uid = getUid();

        // wrap
        $copy_el.removeClass('mcb-wrap-'+old_uid).addClass('mcb-wrap-'+new_uid).attr('data-uid', new_uid);
        $copy_el.find('.mcb-wrap-inner').first().removeClass('mcb-wrap-inner-'+old_uid).addClass('mcb-wrap-inner-'+new_uid);

        var get_copy = copypaste.ls_obj['obj'].filter( (item) => item.uid == old_uid )[0];
        var copy_obj = {};

        copy_obj = JSON.parse( JSON.stringify(get_copy) );

        copy_obj.uid = new_uid;
        mfn.pagedata.push(copy_obj);

        // wraps childrens

        if( $copy_el.find('.vb-item').length ) {
            $copy_el.find('.vb-item').each(function() {

                var $copy_el = $(this);
                var old_col_uid = $(this).attr('data-uid');
                var new_col_uid = getUid();

                if( $(this).hasClass('mcb-column') ){
                    $(this).removeClass('mcb-item-'+old_col_uid).addClass('mcb-item-'+new_col_uid).attr('data-uid', new_col_uid);
                    $(this).children('.mcb-column-inner').removeClass('mcb-column-inner-'+old_col_uid).addClass('mcb-column-inner-'+new_col_uid);
                }else{
                    $(this).removeClass('mcb-wrap-'+old_col_uid).addClass('mcb-wrap-'+new_col_uid).attr('data-uid', new_col_uid);
                    $(this).children('.mcb-wrap-inner').removeClass('mcb-wrap-inner-'+old_col_uid).addClass('mcb-wrap-inner-'+new_col_uid);
                }

                var get_copy = copypaste.ls_obj['obj'].filter( (item) => item.uid == old_col_uid )[0];
                var copy_obj = {};

                copy_obj = JSON.parse( JSON.stringify(get_copy) );
                copy_obj.uid = new_col_uid;
                mfn.pagedata.push(copy_obj);

                loopAllStyleFields(new_col_uid);
            });
        }

        loopAllStyleFields(new_uid);
        return new_uid;
    },
    updateSection: function($copy_el) {
        var old_uid = $copy_el.attr('data-uid');
        var new_uid = getUid();

        // section
        $copy_el.removeClass('mcb-section-'+old_uid).addClass('mcb-section-'+new_uid).attr('data-uid', new_uid);
        $copy_el.find('.mcb-section-inner').removeClass('mcb-section-inner-'+old_uid).addClass('mcb-section-inner-'+new_uid);

        var get_copy = copypaste.ls_obj['obj'].filter( (item) => item.uid == old_uid )[0];
        var copy_obj = {};

        copy_obj = JSON.parse( JSON.stringify(get_copy) );

        copy_obj.ver = elements_ver;
        $copy_el.removeClass('mfn-default-section mfn-header-sticky-section mfn-header-mobile-section').addClass('mfn-'+elements_ver+'-section');

        copy_obj.uid = new_uid;
        mfn.pagedata.push(copy_obj);

        // wraps childrens

        if( $copy_el.find('.vb-item.mcb-wrap:not(.mfn-ready)').length ){
            $copy_el.find('.vb-item.mcb-wrap:not(.mfn-ready)').each(function() {
                //copypaste.updateWrap( $(this) ); // because of nav tmp
                var $copy_el = $(this);
                var old_wrap_uid = $copy_el.attr('data-uid');
                var new_wrap_uid = getUid();

                // wrap
                $copy_el.removeClass('mcb-wrap-'+old_wrap_uid).addClass('mcb-wrap-'+new_wrap_uid).attr('data-uid', new_wrap_uid);
                $copy_el.children('.mcb-wrap-inner').first().removeClass('mcb-wrap-inner-'+old_wrap_uid).addClass('mcb-wrap-inner-'+new_wrap_uid);

                var get_copy = copypaste.ls_obj['obj'].filter( (item) => item.uid == old_wrap_uid )[0];
                var copy_obj = {};

                copy_obj = JSON.parse( JSON.stringify(get_copy) );

                copy_obj.uid = new_wrap_uid;
                mfn.pagedata.push(copy_obj);
                $copy_el.addClass('mfn-ready');

                loopAllStyleFields(new_wrap_uid);

                // wraps childrens

                if( $copy_el.find('.vb-item.mcb-column:not(.mfn-ready)').length ){
                    $copy_el.find('.vb-item.mcb-column:not(.mfn-ready)').each(function() {

                        var $copy_el = $(this);
                        var old_col_uid = $copy_el.attr('data-uid');
                        var new_col_uid = getUid();

                        $copy_el.removeClass('mcb-item-'+old_col_uid).addClass('mcb-item-'+new_col_uid).attr('data-uid', new_col_uid);
                        $copy_el.children('.mcb-column-inner').removeClass('mcb-column-inner-'+old_col_uid).addClass('mcb-column-inner-'+new_col_uid);

                        var get_copy = copypaste.ls_obj['obj'].filter( (item) => item.uid == old_col_uid )[0];
                        var copy_obj = {};

                        copy_obj = JSON.parse( JSON.stringify(get_copy) );

                        copy_obj.uid = new_col_uid;
                        mfn.pagedata.push(copy_obj);

                        $copy_el.addClass('mfn-ready');

                        loopAllStyleFields(new_col_uid);
                    });
                }

            });
        }

        if( $copy_el.find('.promo_bar_slider').length ){
            runAjaxElements();
        }

        loopAllStyleFields(new_uid);
        return new_uid;
    }
}

function prepareStyleId(el) {

    el = el.replaceAll('.', '');
    el = el.replaceAll('tablet', '');
    el = el.replaceAll('laptop', '');
    el = el.replaceAll('mobile', '');
    el = el.replaceAll('desktop', '');
    el = el.replaceAll(',', '');
    el = el.replaceAll('#', '');
    el = el.replaceAll('|', '');
    el = el.replaceAll(' ', '');
    el = el.replaceAll('(', '');
    el = el.replaceAll(')', '');
    el = el.replaceAll('[', '');
    el = el.replaceAll('%', '');
    el = el.replaceAll('/', '');
    el = el.replaceAll(']', '');
    el = el.replaceAll('>', '');
    el = el.replaceAll('_', '');
    el = el.replaceAll('-', '');
    el = el.replaceAll('=', '');
    el = el.replaceAll(':', '');
    el = el.replaceAll('"', '');

    return el;
}

// is bebuilder blocks
function isBlocks() {
    let disabled_blocks = ['header', 'popup', 'megamenu', 'footer'];
    if( !disabled_blocks.includes(builder_type)  ) {
      return $content.find('body').hasClass('mfn-builder-blocks');
    }
    return false;
}

// add local style

function addLocalStyle(u, v, s, r, uid) {

    if( isBlocks() ) return;

    // console.log(u+' / '+s+' / '+v+' / '+r+' / '+uid);
    // console.log(addLocalStyle.caller);

    if( !u || !s ) return;

    if( sidebar_form.is_class ){
        u = u.replaceAll('.mcb-section .mcb-wrap .be_', '.column.be_');
    }

    u = u.replaceAll('mfnuidelement', uid);
    u = u.replaceAll('postid', uid);
    if( s == 'gradient' ) s = 'background-image';

    var el = u+s;

    if(typeof u === "undefined" || typeof s === "undefined") return;

    el = prepareStyleId(el);

    if( $content.find('style.'+el+r).length ){
        $content.find('style.'+el+r).remove();
    }

    var selector_arr = u.split(",");
    var selector_string = '';

    $.each( selector_arr, function( i, value ) {
        if( i > 0 ){ selector_string += ', '; }
        selector_string += value.replaceAll('|', ':');
    });

    // while changing margin or padding, recalculate transformed elements
    if( s.includes('padding') || s.includes('margin') ) {
        Transforms.attachNewMargins();
    }

    if( v == '' ) return;

    if( !uid.includes('be_') ) {

        selector_string = selector_string.replace('mcb-column-inner', 'mcb-column-inner-'+uid);
        selector_string = selector_string.replace('mcb-wrap-inner', 'mcb-wrap-inner-'+uid);
        selector_string = selector_string.replace('mcb-section-inner', 'mcb-section-inner-'+uid);
        selector_string = selector_string.replace('section_wrapper', 'mcb-section-inner-'+uid);

        selector_string = 'html '+selector_string;
    
    }

    //console.log(selector_string+' / '+s+' / '+v);

    s = s.replace('_v2', '');

    if( r == 'laptop' ) {
        $content.find('.mfn-be-local-css-laptop').append('<style class="mfn-local-style mfn-local-style-'+uid+' '+el+r+'">@media(max-width: 1440px){'+selector_string+' { '+(s.replace('_laptop', ''))+': '+v+' }}</style>');
    }else if( r == 'tablet' ) {
        $content.find('.mfn-be-local-css-tablet').append('<style class="mfn-local-style mfn-local-style-'+uid+' '+el+r+'">@media(max-width: 959px){'+selector_string+' { '+(s.replace('_tablet', ''))+': '+v+' }}</style>');
    }else if( r == 'mobile' ) {
        $content.find('.mfn-be-local-css-mobile').append('<style class="mfn-local-style mfn-local-style-'+uid+' '+el+r+'">@media(max-width: 767px){'+selector_string+' { '+(s.replace('_mobile', ''))+': '+v+' }}</style>');
    }else{
        $content.find('.mfn-be-local-css-desktop').append('<style class="mfn-local-style mfn-local-style-'+uid+' '+el+r+'">'+selector_string+' { '+s+': '+v+' }</style>');
    }

}

// change styles function

function changeInlineStyles(u, s, v){

    if( _.has(edited_item, 'uid') && u.includes('mfnuidelement') && !sidebar_form.is_class ) u = u.replaceAll('mfnuidelement', edited_item.uid);
    if( _.has(edited_item, 'uid') && edited_item.uid == 'pageoptions' && u.includes('postid') ) u = u.replaceAll('postid', mfn.pageid);
    if( _.has(edited_item, 'uid') && sidebar_form.is_class ) u = u.replaceAll('mcb-item-mfnuidelement', 'mcb-column.'+sidebar_form.is_class).replaceAll('mcb-wrap-mfnuidelement', 'mcb-wrap.'+sidebar_form.is_class).replaceAll('mcb-section-mfnuidelement', 'mcb-section.'+sidebar_form.is_class)

    //console.log(u+' / '+s+' / '+v);

    let styles = [];
    if($content.find(u).length){

        $content.find(u).each(function() {

            if(v == 'remove_style'){
                $(this).removeAttr('style');
            }else{
                let attrstyle = $(this).attr('style');

                if(typeof attrstyle !== typeof undefined && attrstyle !== false){
                    styles = attrstyle.split(';');
                }

                let sid = styles.findIndex( st => st.includes(s));

                if(styles[sid]){
                    if( v == 'remove' || !v.length ){
                        styles.splice(sid,1);
                    }else{
                        styles[sid] = s+': '+v;
                    }

                }else if(v.length && v != 'remove'){
                    styles.push(s+': '+v);
                }

                let newstyles = styles.join(';');
                $(this).attr('style', newstyles);
            }

        });
    }
}

// change fancy divider color

function changeFancyDividerColorTop(u, g, v){

    let style = $('.mfn-element-fields-wrapper .style .preview-styleinput').val();

    if( style == 'circle up' || style == 'curve up' || style == 'triangle up' ) {
        changeInlineStyles('.'+u+' svg', 'background', v);
    }else{
        changeInlineStyles('.'+u+' svg path', 'fill', v);
        changeInlineStyles('.'+u+' svg path', 'stroke', v);
    }
}
function changeFancyDividerColorBottom(u, g, v){
    let style = $('.mfn-element-fields-wrapper .style .preview-styleinput').val();

    if(style == 'circle down' || style == 'curve down' || style == 'triangle down'){
        changeInlineStyles('.'+u+' svg', 'background', v);
    }else{
        changeInlineStyles('.'+u+' svg path', 'fill', v);
        changeInlineStyles('.'+u+' svg path', 'stroke', v);
    }
}

// video bg

function setVideoBg(u, t, v){
    if(v != ''){
        if($content.find('.'+u+' .section_video video').length){
            if($content.find('.'+u+' .section_video video source[type="video/'+t+'"]').length){
                $content.find('.'+u+' .section_video video source[type="video/'+t+'"]').attr('src', v);
            }else{
                $content.find('.'+u+' .section_video video').append('<source type="video/'+t+'" src="'+v+'">');
            }
        }else{
            $content.find('.'+u).append('<div class="section_video"><div class="mask"></div><video poster autoplay="true" loop="true" muted="muted"><source type="video/'+t+'" src="'+v+'"></video></div>').addClass('has-video');
        }
    }else{
        if($content.find('.'+u+' .section_video video source[type="video/'+t+'"]').length){
            $content.find('.'+u+' .section_video video source[type="video/'+t+'"]').remove();
        }
        if(!$content.find('.'+u+' .section_video video source').length){
            $content.find('.'+u+' .section_video').remove();
            $content.find('.'+u).removeClass('has-video');
        }
    }
}

// chart color

function changeColorChart(u, v) {
    if(v != 'transparent'){
        $content.find('.'+u+' .chart').attr('data-bar-color', v);
    }else{
        $content.find('.'+u+' .chart').attr('data-bar-color', '#000');
    }
}

// image for widget

function imageForWidget(u, v, p){

    p ? p = p : '';

    // console.log('# imageForWidget');

    if( isBlocks() ){
      if( p != 'after' && p != 'hoverimg' ){

        // hide icon
        if( $content.find('.'+u).is('.column_counter, .column_icon_box, .column_icon_box_2, .column_list') ){
          if(v){
            $content.find('.'+u+' .item-preview-icon').addClass('empty');
          } else {
            $content.find('.'+u+' .item-preview-icon').removeClass('empty');
          }
        }

        // change image src
        $content.find('.'+u+' .item-preview-image').attr('src',v);

        // empty class
        if(v){
          $content.find('.'+u+' .item-preview-image').parent().removeClass('empty');
        } else {
          $content.find('.'+u+' .item-preview-image').parent().addClass('empty');
        }

      }
    } else if($content.find('.'+u).hasClass('column_article_box')) {
        // article box
        $content.find('.'+u+' .article_box .photo_wrapper').html('<img class="scale-with-grid" src="'+v+'" alt="">');
    }else if($content.find('.'+u).hasClass('column_before_after')){
        // before after
        if(p == 'before') {
            $content.find('.'+u+' .twentytwenty-before').attr('src', v);
        }else if(p == 'after') {
            $content.find('.'+u+' .twentytwenty-after').attr('src', v);
        }
        $content.find('.before_after.twentytwenty-container').twentytwenty();
        resetBeforeAfter(u);
    }else if($content.find('.'+u).hasClass('column_counter')){
        // counter
        if( v != '' ){
            $content.find('.'+u+' .icon_wrapper').html('<img class="scale-with-grid" src="'+v+'" alt="">');
        }else if( $('.panel-edit-item .mfn-form-row .preview-iconinput').val() ){
            $content.find('.'+u+' .icon_wrapper').html('<i class="' +$('.panel-edit-item .mfn-form-row .preview-iconinput').val()+ '"></i>');
        }
    }else if($content.find('.'+u).hasClass('column_feature_box')){
        // feature box
        $content.find('.'+u+' .photo_wrapper').html('<img class="scale-with-grid" src="'+v+'" alt="">');
    }else if($content.find('.'+u).hasClass('column_flat_box') && p == 'boximg'){
        // flat box
        $content.find('.'+u+' .photo_wrapper img').attr('src', v);
    }else if($content.find('.'+u).hasClass('column_flat_box') && p == 'iconimg'){
        // flat box icon
        if(v != ''){
            $content.find('.'+u+' .icon').html('<img class="scale-with-grid" src="'+v+'"  alt="">');
        }else{
            $content.find('.'+u+' .icon').html('');
        }
    }else if($content.find('.'+u).hasClass('column_hover_box') && p == 'mainimg'){
        // hover box
        $content.find('.'+u+' img.visible_photo').attr('src', v);
    }else if($content.find('.'+u).hasClass('column_hover_box') && p == 'hoverimg'){
        // hover box
        $content.find('.'+u+' img.hidden_photo').attr('src', v);
    }else if($content.find('.'+u).hasClass('column_how_it_works')){
        // how it works
        if(v){
            $content.find('.'+u+' .how_it_works').removeClass('no-img');
            if($content.find('.'+u+' .how_it_works .image img').length){
                $content.find('.'+u+' .how_it_works .image img').attr('src', v).removeAttr('width').removeAttr('height');;
            }else{
                $content.find('.'+u+' .how_it_works .image').append('<img src="'+v+'" class="scale-with-grid" alt="">');
            }
        }else{
            $content.find('.'+u+' .how_it_works').addClass('no-img');
            $content.find('.'+u+' .how_it_works .image img').remove();
        }
    }else if($content.find('.'+u).hasClass('column_icon_box')){
        // icon box
        if(v != ''){
            if($content.find('.'+u+' .icon_box .image_wrapper img').length){
                $content.find('.'+u+' .icon_box .image_wrapper img').attr('src', v);
            }else{
                if($content.find('.'+u+' .icon_box .icon_wrapper').length) { $content.find('.'+u+' .icon_box .icon_wrapper').remove(); }
                $content.find('.'+u+' .icon_box').prepend('<div class="image_wrapper"><img src="'+v+'" class="scale-with-grid" alt=""></div>');
            }
        }else if( $('.mfn-ui .panel-edit-item .mfn-form .mfn-form-control.preview-iconinput').val().length ){
            $content.find('.'+u+' .icon_box .image_wrapper').remove();
            $content.find('.'+u+' .icon_box').prepend('<div class="icon_wrapper"><div class="icon"><i class="'+$('.mfn-ui .panel-edit-item .mfn-form .mfn-form-control.preview-iconinput').val()+'"></i></div></div>');
        }else{
            if($content.find('.'+u+' .icon_box .icon_wrapper').length) { $content.find('.'+u+' .icon_box .icon_wrapper').remove(); }
            if($content.find('.'+u+' .icon_box .image_wrapper').length) { $content.find('.'+u+' .icon_box .image_wrapper').remove(); }
        }
    }else if($content.find('.'+u).hasClass('column_image')){
        // image
        $content.find('.'+u+' .image_wrapper img').attr('src', v).removeAttr('width').removeAttr('height');
    }else if($content.find('.'+u).hasClass('column_hotspot')){
        // hotspot
        $content.find('.'+u+' .hotspot-image img').attr('src', v).removeAttr('width').removeAttr('height');
    }else if($content.find('.'+u).hasClass('column_list')){
        // list
        $content.find('.'+u+' .list_left').removeClass('list_icon list_image').addClass('list_image').html('<img src="'+v+'" class="scale-with-grid" alt="">');
    }else if($content.find('.'+u).hasClass('column_photo_box')){
        // photo box
        $content.find('.'+u+' .image_wrapper img').attr('src', v).removeAttr('width').removeAttr('height');
    }else if($content.find('.'+u).hasClass('column_promo_box')){
        // promo box
        $content.find('.'+u+' .photo_wrapper img').attr('src', v).removeAttr('width').removeAttr('height');
    }else if($content.find('.'+u).hasClass('column_sliding_box')){
        // sliding box
        $content.find('.'+u+' .photo_wrapper img').attr('src', v).removeAttr('width').removeAttr('height');
    }else if($content.find('.'+u).hasClass('column_story_box')){
        // sliding box
        $content.find('.'+u+' .photo_wrapper img').attr('src', v).removeAttr('width').removeAttr('height');
    }else if($content.find('.'+u).hasClass('column_trailer_box')){
        // trailer box
        $content.find('.'+u+' .trailer_box img').attr('src', v).removeAttr('width').removeAttr('height');
    }else if($content.find('.'+u).hasClass('column_zoom_box') && p == 'main'){
        // zoom box main
        $content.find('.'+u+' .photo img').attr('src', v).removeAttr('width').removeAttr('height');
    }else if($content.find('.'+u).hasClass('column_zoom_box')){
        // zoom box desc
        if(v){
            if($content.find('.'+u+' .desc_wrap .desc_img img').length){
                $content.find('.'+u+' .desc_wrap .desc_img img').attr('src', v);
            }else{
                $content.find('.'+u+' .desc_wrap').prepend('<div class="desc_img"><img class="scale-with-grid" src="'+v+'" alt=""></div>');
            }
        }else{
            if($content.find('.'+u+' .desc_wrap .desc_img img').length){
                $content.find('.'+u+' .desc_wrap .desc_img').remove();
            }
        }
    }else if($content.find('.'+u).hasClass('mcb-section') && p == 'decortop'){
        // section decor top
        if(v.length){
            if($content.find('.'+u+' .section-decoration.top').length){
                $content.find('.'+u+' .section-decoration.top').css({ 'background-image': 'url('+v+')'});
            }else{
                $content.find('.'+u).prepend('<div class="section-decoration top" style="background-image:url('+v+');"></div>');
            }
        }else{
            $content.find('.'+u+' .section-decoration.top').remove();
        }
    }else if($content.find('.'+u).hasClass('mcb-section') && p == 'decorbottom'){
        // section decor bottom
        if(v != ''){
            if($content.find('.'+u+' .section-decoration.bottom').length){
                $content.find('.'+u+' .section-decoration.bottom').css({ 'background-image': 'url('+v+')'});
            }else{
                $content.find('.'+u).append('<div class="section-decoration bottom" style="background-image:url('+v+');"></div>');
            }
        }else{
            $content.find('.'+u+' .section-decoration.bottom').remove();
        }
    }else if($content.find('.'+u).hasClass('column_our_team')) {
        // our team
        $content.find('.'+u+' .image_wrapper img').attr('src', v);
    }else if($content.find('.'+u).hasClass('column_our_team_list')){
        // our team list
        $content.find('.'+u+' .image_wrapper img').attr('src', v);
    }else if($content.find('.'+u).hasClass('column_pricing_item')){
        // pricing item
        if( v ){
            if( $content.find('.'+u+' .image').length ) {
                $content.find('.'+u+' .image img').attr('src', v);
            }else{
                $content.find('.'+u+' .plan-header').prepend('<div class="image"><img src="'+v+'" alt="" /></div>');
            }
        }else{
            $content.find('.'+u+' .image').remove();
        }

    }else if($content.find('.'+u).hasClass('column_header_icon')){
        // header icon
        $content.find('.'+u+' .icon-wrapper img').remove();
        $content.find('.'+u+' .icon-wrapper i').remove();
        $content.find('.'+u+' .icon-wrapper svg').remove();
        $content.find('.'+u+' .icon-wrapper').prepend('<img width="20" src="'+v+'" alt="">');
    }else if($content.find('.'+u).hasClass('column_chart')){
        // chart
        if(v){
            if($content.find('.'+u+' .chart .image img').length){
                $content.find('.'+u+' .chart .image img').attr('src', v);
            }else{
                $content.find('.'+u+' .chart .num').remove();
                $content.find('.'+u+' .chart .icon').remove();
                $content.find('.'+u+' .chart').prepend('<div class="image"><img class="scale-with-grid" src="'+v+'" alt="" /></div>');
            }
        }else if($('.panel-edit-item .mfn-form-row .preview-iconinput').val().length){
            $content.find('.'+u+' .chart .image').remove();
            $content.find('.'+u+' .chart .label').remove();
            $content.find('.'+u+' .chart').prepend('<div class="icon"><i class="'+$('.panel-edit-item .mfn-form .preview-iconinput').val()+'"></i></div>');
        }else if($('.panel-edit-item .mfn-form-row .preview-labelinput').val().length){
            $content.find('.'+u+' .chart .image').remove();
            $content.find('.'+u+' .chart .icon').remove();
            $content.find('.'+u+' .chart').prepend('<div class="num">'+$('.panel-edit-item .mfn-form-row .preview-labelinput').val()+'</div>');
        }else{
            $content.find('.'+u+' .chart .image').remove();
            $content.find('.'+u+' .chart .icon').remove();
            $content.find('.'+u+' .chart .num').remove();
        }

    }else if($content.find('.'+u).hasClass('column_header_logo')){
        // logo
        $content.find('.'+u+' img').attr('src', v);
    }else if($content.find('.'+u).hasClass('column_progress_icons')){
        // logo
        $content.find('.'+u+' .progress_icon').html(`<img src="${v}" alt="">`);
        $content.find('.'+u+' .progress_icon').addClass('progress_image');
    }else if($content.find('.'+u).hasClass('column_banner_box') && p == 'cta'){
        // banner box cta
        $content.find('.'+u+' .cta-image img').attr('src', v);
        mfnBannerBox();
    }else if($content.find('.'+u).hasClass('column_banner_box')){
        // banner box
        $content.find('.'+u+' .banner-image img').replaceWith('<img src="'+v+'" alt="">');
    }else if($content.find('.'+u).hasClass('column_footer_logo')){
        // logo
        $content.find('.'+u+' img').attr('src', v);
    }else if($content.find('.'+u).hasClass('column_icon_box_2')) {

        if( v ) {

            if( $('.panel-edit-item .mfn-form .image .mfn-field-value').val().length ) {

                if( $content.find('.'+u+' .icon-wrapper img.primary').length ) {
                    $content.find('.'+u+' .icon-wrapper img.primary').replaceWith('<img src="'+$('.panel-edit-item .mfn-form .image .mfn-field-value').val()+'" alt="" class="primary">');
                }else{
                    $content.find('.'+u+' .icon-wrapper').html('<img src="'+$('.panel-edit-item .mfn-form .image .mfn-field-value').val()+'" alt="" class="primary">');
                }

            }

            if( $('.panel-edit-item .mfn-form .image_hover .mfn-field-value').val().length ) {
                if( $content.find('.'+u+' .icon-wrapper img.secondary').length ) {
                    $content.find('.'+u+' .icon-wrapper img.secondary').replaceWith('<img src="'+$('.panel-edit-item .mfn-form .image_hover .mfn-field-value').val()+'" alt="" class="secondary">');
                }else{
                    $content.find('.'+u+' .icon-wrapper').append('<img src="'+$('.panel-edit-item .mfn-form .image_hover .mfn-field-value').val()+'" alt="" class="secondary">');
                }
            }

            /*if( $content.find('.'+u+' .icon-wrapper').length ) {
                $content.find('.'+u+' .icon-wrapper').html('<img class="scale-with-grid" src="'+v+'" alt="">');
            }else{
                $content.find('.'+u+' .mfn-icon-box').prepend('<div class="icon-wrapper"><img class="scale-with-grid" src="'+v+'" alt=""></div>');
            }*/

        }else{
            if( $editpanel.find('.panel-edit-item .mfn-form .icon_box_2.icon .mfn-field-value').val().length ){
                if( $content.find('.'+u+' .icon-wrapper i.primary').length ){
                    $content.find('.'+u+' .icon-wrapper i.primary').attr('class', $editpanel.find('.panel-edit-item .mfn-form .icon_box_2.icon .mfn-field-value').val()+' primary');
                }else{
                    $content.find('.'+u+' .icon-wrapper').html('<i class="'+$editpanel.find('.panel-edit-item .mfn-form .icon_box_2.icon .mfn-field-value').val()+' primary" aria-hidden="true"></i>');
                }

                if( $editpanel.find('.panel-edit-item .mfn-form .icon_box_2.icon_hover .mfn-field-value').val().length ){
                    if( $content.find('.'+u+' .icon-wrapper i.secondary').length ){
                        $content.find('.'+u+' .icon-wrapper i.secondary').attr('class', $editpanel.find('.panel-edit-item .mfn-form .icon_box_2.icon_hover .mfn-field-value').val()+' secondary');
                    }else{
                        $content.find('.'+u+' .icon-wrapper').append('<i class="'+$editpanel.find('.panel-edit-item .mfn-form .icon_box_2.icon_hover .mfn-field-value').val()+' secondary" aria-hidden="true"></i>');
                    }
                }

            }else if( $editpanel.find('.panel-edit-item .mfn-form .icon_box_2.label .mfn-field-value').val().length ){
                if( $content.find('.'+u+' .icon-wrapper').length ){
                    $content.find('.'+u+' .icon-wrapper').html('<span class="icon-label">'+$editpanel.find('.panel-edit-item .mfn-form .icon_box_2.label .mfn-field-value').val()+'</span>');
                }else{
                    $content.find('.'+u+' .desc_wrapper').before('<div class="icon-wrapper"><span class="icon-label">'+$editpanel.find('.panel-edit-item .mfn-form .icon_box_2.label .mfn-field-value').val()+'</span></div>');
                }
            }else{
                $content.find('.'+u+' .icon-wrapper').remove();
            }
        }
    }else if($content.find('.'+u).hasClass('column_header_burger')){
        // menu burger
        $content.find('.'+u+' .icon-wrapper img').remove();
        $content.find('.'+u+' .icon-wrapper i').remove();
        $content.find('.'+u+' .icon-wrapper svg').remove();
        if( v ){
            $content.find('.'+u+' .icon-wrapper').prepend('<img src="'+v+'" alt="">');
        }else if( $editpanel.find('.panel-edit-item .mfn-form .header_burger.icon .preview-iconinput').val().length ){
            $content.find('.'+u+' .icon-wrapper').prepend('<i class="'+$editpanel.find('.panel-edit-item .mfn-form .header_burger.icon .preview-iconinput').val()+'"></i>');
        }else{
            $content.find('.'+u+' .icon-wrapper').prepend('<i class="icon-menu-fine"></i>');
        }
    }else if($content.find('.'+u).hasClass('column_popup_exit')){
        if(v != ''){
            if( $content.find('.'+u+' .button_icon').length ){
                $content.find('.'+u+' .button_icon').html('<img src="'+v+'" alt="">');
            }else{
                $content.find('.'+u+' .exit-mfn-popup').addClass('has-icon');
                $content.find('.'+u+' .exit-mfn-popup').prepend('<span class="button_icon"><img src="'+v+'" alt=""></span>');
            }
        }else{
            if( $('.mfn-form-row.popup_exit.icon .mfn-field-value').val().length ){
                $content.find('.'+u+' .button_icon').html('<i class="'+$('.mfn-form-row.popup_exit.icon .mfn-field-value').val()+'"></i>');
            }else{
                $content.find('.'+u+' .button_icon').remove();
                $content.find('.'+u+' .exit-mfn-popup').removeClass('has-icon');
            }
        }
    }else if($content.find('.'+u).hasClass('column_hotspot')){
        $content.find('.'+u+' .hotspot-image img').attr('src', v);
    }
}

function resetBeforeAfter(u){
    if($content.find('.vb-item[data-uid='+u+'] .before_after.twentytwenty-container').length){
        $content.find('.vb-item[data-uid='+u+'] .before_after.twentytwenty-container .twentytwenty-overlay').remove();
        $content.find('.vb-item[data-uid='+u+'] .before_after.twentytwenty-container .twentytwenty-after-label').remove();
        $content.find('.vb-item[data-uid='+u+'] .before_after.twentytwenty-container .twentytwenty-handle').remove();
        $content.find('.vb-item[data-uid='+u+'] .before_after.twentytwenty-container').unwrap();
        $content.find('.vb-item[data-uid='+u+'] .before_after.twentytwenty-container').twentytwenty();
    }
}

// MEDIA

var uploader = {
    sortable: function(galleryContainer = false) {

        if( !galleryContainer ){
            galleryContainer = $('.gallery-container:not(.mfn-initialized)');
        }

        galleryContainer.each(function() {

            var $modulebox = $(this).closest('.mfn-form-row');
            var $input = $modulebox.find('.upload-input.mfn-field-value');
            var groupid = $(this).closest('.mfn-element-fields-wrapper').attr('data-group');

            var $sortablebox = $(this);

            $sortablebox.sortable({
                stop: function(event, elem) {
                    var imgarr = [];
                    $sortablebox.find('li img').each(function() {
                        imgarr.push( $(this).attr('data-pic-id') );
                    });

                    $input.val(imgarr.join(',')).trigger('change');
                    re_render();
                }
            });
            $(this).addClass('mfn-initialized');
        });
    },
    browse: function() {
        $editpanel.on('click', '.panel .mfn-form .mfn-form-row .browse-image .mfn-button-upload', function(e) {
            e.preventDefault();
            var frame,
                addImgLink = $(this),
                metaBox = addImgLink.closest('.browse-image'),
                $modulebox = metaBox.closest('.mfn-form-row'),
                $moduleWrapper = metaBox.closest('.mfn-element-fields-wrapper'),
                eluid = $moduleWrapper.attr('data-element'),
                groupid = $moduleWrapper.attr('data-group'),
                delImgAll = metaBox.find( '.mfn-button-delete-all'),
                imgContainer = metaBox.find( '.selected-image'),
                multipleImgs = false,
                multipleImgsInput = metaBox.find( '.upload-input' ),
                galleryContainer = metaBox.find( '.gallery-container' ),
                imgIdInput = metaBox.find( '.mfn-field-value, .field-to-object' );

            if(metaBox.hasClass('multi')){
                multipleImgs = 'add';
            }

            if ( frame ) { frame.open(); return; }

            frame = wp.media({
                multiple: multipleImgs,
                states: [
                    new wp.media.controller.Library({
                        library: wp.media.query({}),
                        multiple: multipleImgs,
                        filterable: 'all',
                        sortable: true,
                        content: 'browse',
                        router: 'browse',
                        toolbar: 'select'
                    })
                ]
            });


            if(multipleImgs && multipleImgs == 'add' && metaBox.find( '.upload-input' ).length) {

                frame.on('open', function() {

                    var library = frame.state().get('selection'),
                    images = metaBox.find( '.upload-input' ).val();

                    if (!images) {
                        return true;
                    }

                    imageIDs = images.split(',');

                    imageIDs.forEach(function(id) {
                        var attachment = wp.media.attachment(id);
                        attachment.fetch();
                        library.add(attachment ? [attachment] : []);
                    });

                });

                frame.on( 'select', function() {

                    galleryContainer.html('');

                    var library = frame.state().get('selection'),
                    imageURLs = [],
                    imageIDs = [],
                    imageURL, outputHTML, joinedIDs;

                    if( galleryContainer.closest('.media_carousel_ids').length ) {
                        library.map(function(image) {
                            if( !edited_item?.attr?.tabs ) edited_item.attr.tabs = [];

                            image = image.toJSON();

                            let image_url = image.url;
                            if( image.mime != 'video/mp4' ) image_url += '#'+image.id;

                            edited_item.attr.tabs.push({
                                image: image_url,
                                content: '',
                                link: '',
                                title: ''
                            });

                        });
                        
                        sidebar_form.render();
                        setTimeout(re_render(edited_item.uid), 500);

                    }else{
                        library.map(function(image) {

                            image = image.toJSON();
                            imageURLs.push(image.url);
                            imageIDs.push(image.id);

                            if (typeof image.sizes !== 'undefined' && typeof image.sizes.medium !== 'undefined') {
                            imageURL = image.sizes.medium.url;
                            } else {
                            imageURL = image.url;
                            }

                            outputHTML = '<li class="selected-image">' +
                            '<img data-pic-id="' + image.id + '" src="' + imageURL + '" />' +
                            '<a class="mfn-option-btn mfn-button-delete" data-tooltip="Delete" href="#"><span class="mfn-icon mfn-icon-delete"></span></a>' +
                            '</li>';

                            galleryContainer.append(outputHTML);
                            uploader.sortable(galleryContainer);

                        });

                        joinedIDs = imageIDs.join(',').replace(/^,*/, '');
                        if (joinedIDs.length !== 0) {
                            metaBox.removeClass('empty');
                        }
                        multipleImgsInput.val(joinedIDs).trigger('change');
                        re_render();
                    }

                    

                });
                frame.open();
            }else{

                frame.on( 'select', function() {

                    if( addImgLink.closest('.dynamic_items_wrapper').length ){

                        var attachment = frame.state().get('selection').first().toJSON();
                        dynamicItems.addNew(attachment.url, attachment.id);

                    }else{
                        metaBox.removeClass('empty');
                        var attachment = frame.state().get('selection').first().toJSON();

                        if( $modulebox.attr('data-id') == '_thumbnail_id' ){
                            imgIdInput.val( attachment.id ).trigger('change');
                            mfn.featured_image = attachment.url;
                            setTimeout(function() { imgContainer.html('<img src="'+attachment.url+'">') }, 200);
                        }else if( $modulebox.attr('data-id') == 'mfn-meta-seo-og-image' ){
                            imgIdInput.val( attachment.url ).trigger('change');
                        }else{
                            imgIdInput.val( attachment.url+'#'+attachment.id ).trigger('change');
                        }
                        if( $modulebox.find('.reset-bg.active').length ) $modulebox.find('.reset-bg').removeClass('active');
                    }

                });

                frame.open();
            }
        });
    },

    itemsUpdate: function(attachment, imgIdInput) {

        var $modulebox = imgIdInput.closest('.mfn-form-row');
        var metaBox = $modulebox.find('.browse-image');
        var $moduleWrapper = imgIdInput.closest('.mfn-element-fields-wrapper');
        var imgContainer = metaBox.find( '.selected-image');
        var eluid = $moduleWrapper.attr('data-element');
        var uid = $content.find('.'+eluid).attr('data-uid');
        var rwd = screen;

        if(imgContainer) {
            if( !attachment.includes('{') && !attachment.includes('none') ){
                imgContainer.html( '<img src="'+attachment+'" alt="">' );
            }else{
                imgContainer.html( '' );
            }
            if( !attachment.includes('none') ) metaBox.removeClass('empty');
        }

        if( $modulebox.hasClass('themeoption logo-img') ){
            // theme options

            if( $content.find('#Top_bar .logo img.logo-main').length ) {

                $content.find('#Top_bar .logo img.logo-main').attr('src', attachment);
                if( attachment.includes('.svg') ) {$content.find('#Top_bar .logo img.logo-main').addClass('svg');}else{$content.find('#Top_bar .logo img.logo-main').removeClass('svg');}
                if( !$('.themeoption.sticky-logo-img .mfn-field-value').val().length ) $content.find('#Top_bar .logo img.logo-sticky').attr('src', attachment);
            }else if( $content.find('#Header_creative .logo img.logo-main').length ) {
                $content.find('#Header_creative .logo img.logo-main').attr('src', attachment);
                if( attachment.includes('.svg') ) {$content.find('#Header_creative .logo img.logo-main').addClass('svg');}else{$content.find('#Header_creative .logo img.logo-main').removeClass('svg');}
                if( !$('.themeoption.sticky-logo-img .mfn-field-value').val().length ) $content.find('#Header_creative .logo img.logo-sticky').attr('src', attachment);
            }

        }else if( $modulebox.hasClass('themeoption retina-logo-img') ){

            if( $content.find('#Top_bar .logo img.logo-mobile').length ) {
                $content.find('#Top_bar .logo img.logo-mobile').attr('src', attachment);
            }else if($content.find('#Header_creative .logo img.logo-mobile').length) {
                $content.find('#Header_creative .logo img.logo-mobile').attr('src', attachment);
            }

        }else if( $modulebox.hasClass('themeoption sticky-logo-img') ){

            if( $content.find('#Top_bar .logo img.logo-sticky').length ) {
                $content.find('#Top_bar .logo img.logo-sticky').attr('src', attachment);
            }else if($content.find('#Header_creative .logo img.logo-sticky').length) {
                $content.find('#Header_creative .logo img.logo-sticky').attr('src', attachment);
            }

        }else if( $modulebox.hasClass('themeoption gdpr-content-image') ){

            if( $content.find('.mfn-gdpr-image img').length ) {
                $content.find('.mfn-gdpr-image img').attr('src', attachment);
            }

        }else{

            // all rest widgets

            if( attachment.includes('{') ) return;

            if(imgIdInput.hasClass('preview-bg_imageinput')){
                changeInlineStyles(eluid, 'background-image', 'url('+attachment+')');
            }else if(imgIdInput.hasClass('preview-bg_video_mp4input')){
                setVideoBg(eluid, 'mp4', attachment);
            }else if(imgIdInput.hasClass('preview-bg_video_ogvinput')){
                setVideoBg(eluid, 'ogg', attachment);
            }else if($modulebox.hasClass('article_box') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('wrap') && $modulebox.hasClass('tab_image') ){
                
                if( !$content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-li-icon').length ) {
                    $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-li-wrapper').prepend('<div class="mfn-tabber-nav-li-icon" />')
                }

                $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-li-icon').html('<img src="'+attachment+'" alt="" />');

                if( !edited_item.attr?.tab_title ) $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-title').text('');

            }else if(imgIdInput.hasClass('preview-image_beforeinput')){
                imageForWidget(eluid, attachment, 'before');
            }else if(imgIdInput.hasClass('preview-image_afterinput')){
                imageForWidget(eluid, attachment, 'after');
            }else if($modulebox.hasClass('counter image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('feature_box') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('flat_box image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment, 'boximg');
            }else if($modulebox.hasClass('flat_box icon_image') && imgIdInput.hasClass('preview-icon_imageinput')){
                imageForWidget(eluid, attachment, 'iconimg');
            }else if($modulebox.hasClass('hover_box') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment, 'mainimg');
            }else if($modulebox.hasClass('hover_box') && imgIdInput.hasClass('preview-image_hoverinput')){
                imageForWidget(eluid, attachment, 'hoverimg');
            }else if($modulebox.hasClass('how_it_works image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('icon_box') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('icon_box_2') && $modulebox.hasClass('image')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('image') && $modulebox.hasClass('src') && imgIdInput.hasClass('preview-srcinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('image') && $modulebox.hasClass('hotspot')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('list image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('photo_box image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('promo_box') && $modulebox.hasClass('image')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('sliding_box image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('story_box image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('trailer_box image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('zoom_box') && $modulebox.hasClass('image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment, 'main');
            }else if($modulebox.hasClass('zoom_box') && $modulebox.hasClass('content_image')){
                imageForWidget(eluid, attachment, 'desc');
            }else if($modulebox.hasClass('section') && imgIdInput.hasClass('preview-decor_topinput')){
                imageForWidget(eluid, attachment, 'decortop');
            }else if($modulebox.hasClass('section') && imgIdInput.hasClass('preview-decor_bottominput')){
                imageForWidget(eluid, attachment, 'decorbottom');
            }else if($moduleWrapper.attr('data-item') == 'video placeholder' && imgIdInput.hasClass('preview-placeholderinput')){
                re_render();
            }else if($moduleWrapper.attr('data-item') == 'video mp4' && imgIdInput.hasClass('preview-mp4input')){
                re_render();
            }else if($moduleWrapper.attr('data-item') == 'video ogv' && imgIdInput.hasClass('preview-ogvinput')){
                re_render();
            }else if($modulebox.hasClass('our_team image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('banner_box') && $modulebox.hasClass('image')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('banner_box') && $modulebox.hasClass('cta_image')){
                imageForWidget(eluid, attachment, 'cta');
            }else if($modulebox.hasClass('our_team_list image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('pricing_item image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('header_icon image')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('widget-chart image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('header_logo image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('footer_logo image') && imgIdInput.hasClass('preview-imageinput')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('popup_exit image')){
                imageForWidget(eluid, attachment);
            }else if($modulebox.hasClass('inline-style-input')){
                addLocalStyle($modulebox.attr('data-csspath'), 'url('+attachment+')', $modulebox.attr('data-name'), rwd, uid);
            }
        }
    },

    delete: function() {
        $editpanel.on('click', '.mfn-form .mfn-form-row .browse-image .mfn-button-delete', function(e) {
            e.preventDefault();

            var metaBox = $(this).closest('.browse-image'),
                $modulebox = metaBox.closest('.mfn-form-row'),
                $moduleWrapper = metaBox.closest('.mfn-element-fields-wrapper'),
                eluid = $moduleWrapper.attr('data-element'),
                uid = $content.find('.'+eluid).attr('data-uid'),
                groupid = $moduleWrapper.attr('data-group'),
                delImgAll = metaBox.find( '.mfn-button-delete-all'),
                imgContainer = metaBox.find( '.selected-image'),
                multipleImgs = false,
                multipleImgsInput = metaBox.find( '.upload-input' ),
                galleryContainer = metaBox.find( '.gallery-container' ),
                rwd = screen,
                imgIdInput = metaBox.find( '.mfn-form-input' );

            if(metaBox.hasClass('multi')){
                multipleImgs = 'add';
            }

            if(multipleImgs == 'add'){
                $(this).closest('.selected-image').remove();

                var imageIDs = [], id;

                setTimeout(function() {

                    metaBox.find('.gallery-container img').each(function() {
                        id = $(this).attr('data-pic-id');
                        imageIDs.push(id);
                    });

                    var joinedIDs = imageIDs.join( ',' );

                    if (joinedIDs === '') {
                        metaBox.addClass('empty');
                    }

                    multipleImgsInput.val(joinedIDs).trigger('change');
                    re_render( edited_item.uid );

                }, 1);
            }else{

                imgContainer.html( '' );
                metaBox.addClass('empty');

                if( $modulebox.hasClass('themeoption gdpr-content-image') ){
                    imgIdInput.val( '#' ).trigger('change');
                }else{
                    imgIdInput.val( '' ).trigger('change');
                }

                if( $modulebox.hasClass('themeoption logo-img') ){

                    if( $content.find('#Top_bar .logo img.logo-main').length ) {
                        $content.find('#Top_bar .logo img.logo-main').attr('src', mfn.themepath+'/images/logo/logo.png').removeClass('svg');
                    }else{
                        $content.find('#Header_creative .logo img.logo-main').attr('src', mfn.themepath+'/images/logo/logo.png').removeClass('svg');
                    }

                }else if( $modulebox.hasClass('themeoption retina-logo-img') ){

                    if( $content.find('#Top_bar .logo img.logo-mobile').length ) {
                        $content.find('#Top_bar .logo img.logo-mobile').attr('src', mfn.themepath+'/images/logo/logo-retina.png');
                    }else if($content.find('#Header_creative .logo img.logo-mobile').length) {
                        $content.find('#Header_creative .logo img.logo-mobile').attr('src', mfn.themepath+'/images/logo/logo-retina.png');
                    }

                }else if( $modulebox.hasClass('themeoption sticky-logo-img') ){

                    if( $content.find('#Top_bar .logo img.logo-sticky').length ) {
                        $content.find('#Top_bar .logo img.logo-sticky').attr('src', mfn.themepath+'/images/logo/logo.png');
                    }else if($content.find('#Header_creative .logo img.logo-sticky').length) {
                        $content.find('#Header_creative .logo img.logo-sticky').attr('src', mfn.themepath+'/images/logo/logo.png');
                    }
                }else if( $modulebox.hasClass('themeoption gdpr-content-image') ){

                    if( $content.find('.mfn-gdpr-image img').length ) {
                        $content.find('.mfn-gdpr-image img').attr('src', mfn.themepath+'/images/cookies.png');
                    }

                }else{

                    if(imgIdInput.hasClass('preview-bg_imageinput')){
                        changeInlineStyles(eluid, 'background-image', '');
                    }else if(imgIdInput.hasClass('preview-bg_video_mp4input')){
                        setVideoBg(eluid, 'mp4', '');
                    }else if(imgIdInput.hasClass('preview-bg_video_ogvinput')){
                        setVideoBg(eluid, 'ogg', '');
                    }else if($modulebox.hasClass('article_box') && $modulebox.attr('data-name') == 'image' && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, sample_img);
                    }else if(imgIdInput.hasClass('preview-image_beforeinput')){
                        imageForWidget(eluid, sample_img, 'before');
                    }else if($modulebox.hasClass('wrap') && $modulebox.hasClass('tab_image') ){
                
                        if( $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-li-icon img').length ) {
                            $content.find('.mfn-nav-tab-'+edited_item.uid+' .mfn-tabber-nav-li-wrapper .mfn-tabber-nav-li-icon img').remove();
                        }

                        $('.mfn-field-icon.wrap.tab_icon .mfn-field-value').trigger('change');

                    }else if(imgIdInput.hasClass('preview-image_afterinput')){
                        imageForWidget(eluid, sample_img, 'after');
                    }else if($modulebox.hasClass('counter image') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, '');
                    }else if($modulebox.hasClass('feature_box') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, sample_img);
                    }else if($modulebox.hasClass('flat_box image') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, sample_img, 'boximg');
                    }else if($modulebox.hasClass('flat_box icon_image') && imgIdInput.hasClass('preview-icon_imageinput')){
                        imageForWidget(eluid, '', 'iconimg');
                    }else if($modulebox.hasClass('hover_box') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, sample_img, 'mainimg');
                    }else if($modulebox.hasClass('hover_box') && imgIdInput.hasClass('preview-image_hoverinput')){
                        imageForWidget(eluid, sample_img, 'hoverimg');
                    }else if($modulebox.hasClass('how_it_works image') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, '');
                    }else if($modulebox.hasClass('icon_box') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, '');
                    }else if($modulebox.hasClass('icon_box_2') && $modulebox.hasClass('image')){
                        imageForWidget(eluid, '');
                    }else if($modulebox.hasClass('image') && $modulebox.hasClass('src') && imgIdInput.hasClass('preview-srcinput')){
                        imageForWidget(eluid, sample_img);
                    }else if($modulebox.hasClass('image') && $modulebox.hasClass('hotspot')){
                        imageForWidget(eluid, '');
                    }else if($modulebox.hasClass('list image') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, '');
                    }else if($modulebox.hasClass('photo_box image') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, sample_img);
                    }else if($modulebox.hasClass('promo_box') && $modulebox.hasClass('image')) {
                        imageForWidget(eluid, sample_img);
                    }else if($modulebox.hasClass('sliding_box image') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, sample_img);
                    }else if($modulebox.hasClass('story_box image') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, sample_img);
                    }else if($modulebox.hasClass('trailer_box image') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, sample_img);
                    }else if($modulebox.hasClass('hotspot image')){
                        imageForWidget(eluid, sample_img);
                    }else if($modulebox.hasClass('zoom_box') && $modulebox.hasClass('image') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, sample_img, 'main');
                    }else if($modulebox.hasClass('zoom_box') && $modulebox.hasClass('content_image')){
                        imageForWidget(eluid, '', 'desc');
                    }else if($modulebox.hasClass('section') && imgIdInput.hasClass('preview-decor_topinput')){
                        imageForWidget(eluid, '', 'decortop');
                    }else if($modulebox.hasClass('section') && imgIdInput.hasClass('preview-decor_bottominput')){
                        imageForWidget(eluid, '', 'decorbottom');
                    }else if($moduleWrapper.attr('data-item') == 'video placeholder' && imgIdInput.hasClass('preview-placeholderinput')){
                        re_render();
                    }else if($moduleWrapper.attr('data-item') == 'video mp4' && imgIdInput.hasClass('preview-mp4input')){
                        re_render();
                    }else if($moduleWrapper.attr('data-item') == 'video ogv' && imgIdInput.hasClass('preview-ogvinput')){
                        re_render();
                    }else if($modulebox.hasClass('our_team image') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, sample_img);
                    }else if($modulebox.hasClass('banner_box') && $modulebox.hasClass('image')){
                        imageForWidget(eluid, sample_img);
                    }else if($modulebox.hasClass('banner_box') && $modulebox.hasClass('cta_image')){
                        imageForWidget(eluid, sample_img, 'cta');
                    }else if($modulebox.hasClass('our_team_list image') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, sample_img);
                    }else if($modulebox.hasClass('popup_exit image')){
                        imageForWidget(eluid, '');
                    }else if($modulebox.hasClass('pricing_item image') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, '');
                    }else if($modulebox.hasClass('header_icon image')){
                        re_render();
                    }else if($modulebox.hasClass('progress_icons')){
                        re_render();
                    }else if($modulebox.hasClass('widget-chart image') && imgIdInput.hasClass('preview-imageinput')){
                        imageForWidget(eluid, '');
                    }else if($modulebox.hasClass('header_logo image') && imgIdInput.hasClass('preview-imageinput')){
                        re_render();
                    }else if($modulebox.hasClass('footer_logo image') && imgIdInput.hasClass('preview-imageinput')){
                        re_render();
                    }else if($modulebox.hasClass('inline-style-input')){
                        addLocalStyle($modulebox.attr('data-csspath'), 'none', $modulebox.attr('data-name'), rwd, uid);
                    }
                }
            }
        });
    },

    deleteAllGallery: function() {
        $editpanel.on('click', '.mfn-form .mfn-form-row .browse-image .mfn-button-delete-all', function(e) {
            e.preventDefault();

            var metaBox = $(this).closest('.browse-image'),
                $moduleWrapper = metaBox.closest('.mfn-element-fields-wrapper'),
                eluid = $moduleWrapper.attr('data-element'),
                groupid = $moduleWrapper.attr('data-group'),
                multipleImgsInput = metaBox.find( '.upload-input' ),
                galleryContainer = metaBox.find( '.gallery-container' ),
                imgIdInput = metaBox.find( '.mfn-form-input' );

            galleryContainer.html('');
            metaBox.find( '.upload-input' ).val('').trigger('change');
            metaBox.addClass('empty');
            $content.find('.'+eluid+' .gallery').remove();
            $content.find('.'+eluid+' style').remove();
            imgIdInput.val( '' );
            re_render();

        });
    }
}






function blink(his = false){
    setTimeout(function(){
        $builder.find('.blink').removeClass('blink');
        if( !his ) historyStorage.add();
    }, 200);
}
























function re_render( uid = false ) {
    //if( mfn.view == 'demo' ) return;

    // console.trace('re_render caller');

    let active_tabber_tab = false;

    var type = edited_item.jsclass == 'wrap' || edited_item.jsclass == 'section' ? edited_item.jsclass : 'item';

    if( uid && uid.includes('be_') ) return; // class editor will be reloaded upon class update

    if( !uid ) {
        uid = edited_item.uid;
    } else {
        var looped_obj = mfn.pagedata.filter( (item) => item.uid == uid )[0];
        type = looped_obj.jsclass == 'wrap' || looped_obj.jsclass == 'section' ? looped_obj.jsclass : 'item';
    }

    if( edited_item && edited_item.type == 'lottie' ) {
        $content.find('.'+edited_item.uid+' .mcb-column-inner').css('min-height', $content.find('.'+edited_item.uid+' .mfn-lottie-wrapper').outerHeight());
        var it_lottie = $content.find('.mcb-item-'+edited_item.uid+' .lottie').attr('id');
        if( typeof iframe.window[it_lottie] !== 'undefined' && typeof iframe.window[it_lottie] === "function" ) iframe.window[it_lottie].destroy();
    }

    if( $content.find('.vb-item[data-uid="'+uid+'"]').hasClass('mfn-section-tabber') ) {
       active_tabber_tab = $content.find('.vb-item[data-uid="'+uid+'"] .mfn-tabber-nav li.active').attr('data-uid');
    }

    if( $content.find('.vb-item[data-uid="'+uid+'"]').hasClass('loading') ) return;

    $content.find('.vb-item[data-uid="'+uid+'"]').addClass('loading disabled');

    if( $content.find('.vb-item[data-uid="'+uid+'"]').next('.mfn-read-more-line').length ) $content.find('.vb-item[data-uid="'+uid+'"]').next('.mfn-read-more-line').remove();

    var formData = prepareForm.get( uid );

    // console.log('re render '+type);
    // console.log(formData);

    $.ajax({
        url: mfnajaxurl,
        data: {
            action: 'mfnrerendersection',
            'mfn-builder-nonce': wpnonce,
            sections: formData,
            id: pageid,
            type: type
        },
        type: 'POST',
        success: function(response) {

            if(Array.isArray(response)) {

                $content.find('.vb-item[data-uid="'+uid+'"]').replaceWith( response[0] );
                //$content.find('.'+it+' .mcb-column-inner').append( response[0] );
                var ajax_script = document.createElement("script");
                ajax_script.innerHTML = response[1];
                document.getElementById('mfn-vb-ifr').contentWindow.document.body.appendChild(ajax_script);

            }else{

                if( builder_type == 'shop-archive' && edited_item && edited_item.jsclass == 'shop_products' ) {
                    $content.find('.vb-item[data-uid="'+uid+'"] .products_wrapper').replaceWith( $(response).find('.products_wrapper') );
                    $content.find('.vb-item[data-uid="'+uid+'"]').removeClass('loading disabled');
                }else{
                    $content.find('.vb-item[data-uid="'+uid+'"]').replaceWith( response );
                }
                
            }

            $('.mfn-element-fields-wrapper .mfn-form-row.mfn-field-loading').removeClass('mfn-field-loading');
            $('.sidebar-wrapper').removeClass('mfn-vb-sidebar-overlay');

            // console.log(' re render ');

            be_layout.emptys.sections();
            be_layout.emptys.wraps();

            if( sidebar_form.force_open ) {
                $content.find('.vb-item[data-uid="'+sidebar_form.force_open+'"]').find('.mfn-header').first().find('.mfn-element-edit').trigger('click');
                sidebar_form.force_open = false;
            }

            setTimeout(function() {

                historyStorage.add();
                runAjaxElements();
                inlineEditor();
                if( screen != 'desktop' ) setSizeLabels();

                if( active_tabber_tab ){
                    var iframeWin = document.getElementById('mfn-vb-ifr').contentWindow;
                    iframeWin.jQuery('body .mfn-tabber-nav li.mfn-nav-tab-'+active_tabber_tab+' a').trigger('click');
                    active_tabber_tab = false;
                }

            }, 10);

        }
    });

}







var sidebar_form = {

    edited_div: false,

    is_class: false,
    is_pageoptions: false,
    is_themeoptions: false,

    wyswig_active: false,
    type: false,
    no_render: false,
    focus: false,
    force_open: false,

    before: function() {

        // sidebar_form.before();

        mfn.placeholders = {};

        if( sidebar_form.wyswig_active && !copypaste.uid ) {
            if( $editpanel.find( '.mfn-form .html-editor' ).length ) MfnFieldTextarea.destroy();
            if( $editpanel.find( '.mfn-form .visual-editor' ).length ) tinymce.execCommand( 'mceRemoveEditor', false, 'mfn-editor' );
        }

        if(sidebar_form.wyswig_active) sidebar_form.wyswig_active = false;
    },

    open: function($edited_div, scroll = false) {

        $('style.mfn-builder-fields-css').remove();
        $('.mfn_classes_footer').remove();

        if( $('.mfn-ui').hasClass('mfn-reset-margin-placeholders') ) $('.mfn-ui').removeClass('mfn-reset-margin-placeholders');

        sidebar_form.is_pageoptions = false;
        sidebar_form.is_themeoptions = false;
        // sidebar_form.open

        // if( mfn_classes.has_changed ) setTimeout(mfn_classes.ajax(mfn_classes.has_changed), 10);

        if( sidebar_form.wyswig_active && edited_item?.uid ) {
            // destroy editors has to be here and in before
            if( $editpanel.find( '.mfn-form .html-editor' ).length ) MfnFieldTextarea.destroy();
            if( $editpanel.find( '.mfn-form .visual-editor' ).length ) tinymce.execCommand( 'mceRemoveEditor', false, 'mfn-editor' );

            if( $content.find('.mcb-item-'+edited_item['uid']).length && $content.find('.mcb-item-'+edited_item['uid']).closest('.mfn-looped-items').length ) {
                re_render( $content.find('.mcb-item-'+edited_item['uid']).closest('.vb-item.mcb-section').attr('data-uid') );
            }else if($content.find('.mcb-item-'+edited_item['uid']).length) {
                re_render( edited_item['uid'] );
            }
        }

        if( edited_item && typeof edited_item.jsclass !== 'undefined' ) $('.mfn-ui').removeClass('mfn-editing-'+edited_item.jsclass);
        
        // console.log(sidebar_form.open.caller);
        
        if( $content.find('.vb-item.mfn-current-editing').length ) $content.find('.vb-item.mfn-current-editing').removeClass('mfn-current-editing');

        sidebar_form.edited_div = $edited_div;

        sidebar_form.edited_div.addClass('mfn-current-editing');

        if( !sidebar_form.is_class ) {
            var id = sidebar_form.edited_div.attr('data-uid');
            edited_item = mfn.pagedata.filter( (item) => item.uid == id )[0];
        }

        // Global Wraps -> BeSections, PBL, Prevent opening edit form for sections
        if ( $('body').hasClass('mfn-template-wrap') && sidebar_form.edited_div.hasClass('section') ) return;

        $('.mfn-ui').removeClass('modalbox-card-active-content modalbox-card-active-style modalbox-card-active-advanced');
        $('.mfn-element-fields-wrapper').removeClass('mfn-section-is-tabber');
        $('.mfn-ui').removeClass('mfn-is-tabber');


        $('.sidebar-panel-classes-list  .sidebar-panel-class').remove();

        // Global Wraps -> BeWraps, PBL, hide all elements except for global wraps
        if( sidebar_form.edited_div.hasClass('mfn-global-wrap') ) {
            $('.sidebar-panel').addClass('mfn-global-wrap-edit');
            if( _.has(edited_item, 'attr') && _.has(edited_item['attr'], 'global_wraps_select') && typeof edited_item['attr']['global_wraps_select'] == 'number' ) edited_item['attr']['global_wraps_select'] = edited_item['attr']['global_wraps_select'].toString();
        } else {
            $('.sidebar-panel').removeClass('mfn-global-wrap-edit');
        }

        if( edited_item && edited_item.jsclass !== 'undefined' ) $('.mfn-ui').removeClass('mfn-editing-'+edited_item.jsclass);
        $('.mfn-ui').removeClass('mfn-editing-element mfn-editing-section mfn-editing-wrap mfn-editing-nested-wrap mfn-editing-spacer');

        $(".header:not(.header-edit-item):visible").hide();
        if( !$(".panel-edit-item").is(":visible") ) { $('.panel').hide(); $(".panel-edit-item").show(); $(".header-edit-item").show(); }

        if( !edited_item ) return;

        sidebar_form.type = 'item';

        if( edited_item.jsclass == 'section' ) {
            sidebar_form.type = 'section';
        }else if(edited_item.jsclass == 'wrap') {
            sidebar_form.type = 'wrap';
            if( _.has(edited_item, 'item_is_wrap') || sidebar_form.edited_div.hasClass('mfn-nested-wrap') ) $('.mfn-ui').addClass('mfn-editing-nested-wrap');
        }

        if( ui_mode == 'dev' ) $('.topbar-nav #main-menu li').removeClass('active');

        // console.log(edited_item);

        if( _.has(edited_item, 'attr') && _.has(edited_item.attr, 'undefined') ) {
            delete(edited_item['attr']['undefined']);
        }

        if( edited_item.jsclass != 'wrap' && edited_item.jsclass != 'section' ) {
            $('.mfn-ui').addClass('mfn-editing-element');
            if( sidebar_form.edited_div.closest('.mcb-wrap').hasClass('mcb-wrap-grid') ) $('.mfn-ui').addClass('mfn-reset-margin-placeholders');
        }

        $('.mfn-ui .panel-edit-item .mfn-form').html(`<div class="mfn-element-fields-wrapper" data-item="${edited_item.jsclass}" data-element="${ sidebar_form.is_class ? edited_item.uid : `mcb-${sidebar_form.type}-${edited_item.uid}` }"><ul class="mfn-form-row sidebar-panel-content-tabs"></ul>`);

        if( !['thankyou_overview', 'thankyou_order'].includes(edited_item.jsclass) ) {
            $('.mfn-ui .panel-edit-item .mfn-form .mfn-element-fields-wrapper ul').append('<li data-tab="content" class="spct-li-content active">Settings</li><li data-tab="style" class="spct-li-style">Style</li>');
        }else{
            $('.mfn-ui .panel-edit-item .mfn-form .mfn-element-fields-wrapper ul').append('<li data-tab="style" class="spct-li-style active">Style</li>');
        }
        
        $('.mfn-ui .panel-edit-item .mfn-form .mfn-element-fields-wrapper ul').append('<li data-tab="advanced" class="spct-li-advanced">Advanced</li>');

        $('.mfn-ui .panel-edit-item .mfn-form').append('</div>');

        mfn.current_post_type = _.has(edited_item, 'attr') && _.has( edited_item['attr'], 'query_post_type' ) ? edited_item['attr']['query_post_type'] : 'post';
        mfn.current_tax = _.has(edited_item, 'attr') && _.has( edited_item['attr'], 'query_terms_taxonomy' ) ? edited_item['attr']['query_terms_taxonomy'] : 'category';

        if( edited_item.jsclass == 'shop_products' ) {
            mfn.current_tax = 'product_cat';
            mfn.current_post_type = 'product';
        }

        if( edited_item.jsclass == 'filters' ) {
            mfn.current_post_type =
              edited_item?.attr?.post_type
              ?? (mfn.builder_type?.startsWith('archive-')
                    ? mfn.builder_type.slice(8)
                    : 'post');
        }

        sidebar_form.render();

        $('.mfn-ui').addClass('mfn-editing-'+edited_item.jsclass);

        if( edited_item?.uid && $content.find('.vb-item[data-uid="'+edited_item.uid+'"]').hasClass('mfn-tabber-content') && $content.find('.mfn-section-tabber .mfn-tabber-nav li.mfn-nav-tab-'+edited_item.uid+':not(.active)').length ) {
            $content.find('.mfn-section-tabber .mfn-tabber-nav li.mfn-nav-tab-'+edited_item.uid).addClass('active').siblings().removeClass('active');
            $content.find('.vb-item[data-uid="'+edited_item.uid+'"]').addClass('active').siblings().removeClass('active');
        }

        if( !sidebar_form.is_class ) {

            if( $content.find('body').hasClass('mfn-class-editor-preview') ) $content.find('body').removeClass('mfn-class-editor-preview');
            if( $('.mfn-ui').hasClass('mfn-class-editor') ) $('.mfn-ui').removeClass('mfn-class-editor');
            
        }else{

            if( !$content.find('body').hasClass('mfn-class-editor-preview') ) $content.find('body').addClass('mfn-class-editor-preview');
            if( !$('.mfn-ui').hasClass('mfn-class-editor') ) $('.mfn-ui').addClass('mfn-class-editor');
            if($('.mfn-ui').hasClass('mfn-class-editor-full')) $('.mfn-ui').removeClass('mfn-class-editor-full');
            
            if( !$('.mfn-ui .panel-edit-item .mfn-form .modalbox-card-content').hasClass('mfn-class-editor-card-visible') ) {
                $('.mfn-ui .panel-edit-item .mfn-form .spct-li-content').remove();
                $('.mfn-ui .panel-edit-item .mfn-form .modalbox-card-content').remove();
            }

            if( edited_item.jsclass == 'section' || edited_item.jsclass == 'wrap' ) {
                $('.mfn-ui .panel-edit-item .mfn-form .spct-li-style').remove();
                $('.mfn-ui .panel-edit-item .mfn-form .modalbox-card-style').remove();
            }
            
            $('.mfn-ui .panel-edit-item .mfn-form').append(`<div class="mfn_classes_footer"><a href="#" class="mfn-btn mfn-class-editor-dismiss">Cancel</a><a href="#" class="mfn-btn mfn-btn-green mfn-class-editor-update">Update style</a></div>`);

            mfn_classes.backup = JSON.parse( JSON.stringify(edited_item) );

        }

        $('.mfn-ui .panel-edit-item .mfn-form .sidebar-panel-content-tabs li:first-child').trigger('click');

        //Global Wraps/Sections -> Hiding some elements on Visual Bar
        $('.mfn-visualbuilder .sidebar-panel').attr('data-edited', edited_item.title);

        $('.mfn-visualbuilder .sidebar-panel .sidebar-panel-header .header-edit-item .title-group .sidebar-panel-desc .sidebar-panel-title').html( edited_item.title );
        $('.mfn-visualbuilder .sidebar-panel .sidebar-panel-header .header-edit-item .title-group .sidebar-panel-icon').attr('class', 'sidebar-panel-icon mfn-icon-'+( !sidebar_form.is_class ? edited_item.icon : 'global-styles-list'));

        if( !historyStorage.obj[0].uid ) {
            historyStorage.obj[0].uid = edited_item.uid;
            // localStorage.setItem('mfnhistory', JSON.stringify(ls)); 
        }

        if( !sidebar_form.is_class && sidebar_form.edited_div.length && scroll && builder_type !== 'header' ) {
            $content.find('html, body').animate({ scrollTop: sidebar_form.edited_div.offset().top - 50 }, 1000);
        }

        $(document).trigger('be:edit');

        if( $('body').hasClass('mfn-navigator-active') && !$('.mfn-navigator ul.navigator-tree li.nav-'+edited_item.uid+' > a.active-element').length ) be_navigator.show(edited_item.uid, true);

        setTimeout(function() {
            $('body').append('<style class="mfn-builder-fields-css mfn-fields-switcher-normal-hover">.mfn-ui .mfn-form .mfn-sft-nav li:first-child a{background: var(--mfn-ui-sft-nav-tab-bg-active); color: var(--mfn-ui-sft-nav-tab-color-active);} .mfn-ui .mfn-form .mfn-sft.mfn-sft-normal{display: block;}</style>');
        }, 1);

        if( $('.mfn-preview-footer.active').length ) {

            console.log(edited_item);

            if( edited_item.jsclass == 'section' ){
                sidebar_form.breadcrumbs.section();
            }else if( edited_item.jsclass == 'wrap' && edited_item?.item_is_wrap ){
                sidebar_form.breadcrumbs.innerWrap();
            }else if( edited_item.jsclass == 'wrap' ){
                sidebar_form.breadcrumbs.wrap();
            }else{
                sidebar_form.breadcrumbs.item();
            }

        }
        
        return;

    },


    breadcrumbs: {

        section: function() {
            $('.mfn-preview-footer.active ul.parent-selector-tree').html(`<li><span class="mfn-icon mfn-icon-navigation"></span></li><li><a href="#" data-uid="${edited_item.uid}">Section</a></li>`);
        },

        innerWrap: function() {
            let section_uid = $content.find('.vb-item[data-uid="'+edited_item.uid+'"]').closest('.section').attr('data-uid');
            let wrap_uid = $content.find('.vb-item[data-uid="'+edited_item.uid+'"]').closest('.wrap').attr('data-uid');
            $('.mfn-preview-footer.active ul.parent-selector-tree').html(`<li><span class="mfn-icon mfn-icon-navigation"></span></li><li><a href="#" data-uid="${section_uid}">Section</a></li><li><a href="#" data-uid="${wrap_uid}">Wrap</a></li><li><a href="#" data-uid="${edited_item.uid}">Inner wrap</a></li>`);
        },

        wrap: function() {
            let section_uid = $content.find('.vb-item[data-uid="'+edited_item.uid+'"]').closest('.section').attr('data-uid');
            $('.mfn-preview-footer.active ul.parent-selector-tree').html(`<li><span class="mfn-icon mfn-icon-navigation"></span></li><li><a href="#" data-uid="${section_uid}">Section</a></li><li><a href="#" data-uid="${edited_item.uid}">Wrap</a></li>`);
        },

        item: function() {
            let section_uid = $content.find('.vb-item[data-uid="'+edited_item.uid+'"]').closest('.section').attr('data-uid');

            if( $content.find('.vb-item[data-uid="'+edited_item.uid+'"]').closest('.wrap').hasClass('mfn-nested-wrap') ) {
                let wrap_uid = $content.find('.vb-item[data-uid="'+edited_item.uid+'"]').closest('.wrap.mfn-nested-wrap').attr('data-uid');
                let parent_wrap_uid = $content.find('.vb-item[data-uid="'+edited_item.uid+'"]').closest('.wrap.mfn-nested-wrap').closest('.wrap').attr('data-uid');
                $('.mfn-preview-footer.active ul.parent-selector-tree').html(`<li><span class="mfn-icon mfn-icon-navigation"></span></li><li><a href="#" data-uid="${section_uid}">Section</a></li><li><a href="#" data-uid="${parent_wrap_uid}">Wrap</a></li><li><a href="#" data-uid="${wrap_uid}">Inner wrap</a></li><li><a href="#" data-uid="${edited_item.uid}">${edited_item.title}</a></li>`);
            }else{
                let wrap_uid = $content.find('.vb-item[data-uid="'+edited_item.uid+'"]').closest('.wrap').attr('data-uid');
                $('.mfn-preview-footer.active ul.parent-selector-tree').html(`<li><span class="mfn-icon mfn-icon-navigation"></span></li><li><a href="#" data-uid="${section_uid}">Section</a></li><li><a href="#" data-uid="${wrap_uid}">Wrap</a></li><li><a href="#" data-uid="${edited_item.uid}">${edited_item.title}</a></li>`);
            }
            
        }

    },


    render: function() {

        // sidebar_form.render

        if( sidebar_form.no_render ) return;

        // console.log('sidebar re render');

        sidebar_form.before();

        if( $('.mfn-ui .panel-edit-item .mfn-form .mfn-element-fields-wrapper .modalbox-card').length ) $('.mfn-ui .panel-edit-item .mfn-form .mfn-element-fields-wrapper .modalbox-card').remove();

        if( !sidebar_form.is_class ) {

            if( $('.mfn-element-fields-wrapper .mfn-classes-used-info') ) $('.mfn-element-fields-wrapper .mfn-classes-used-info').remove();

            if( _.has(edited_item, 'be_classes') && mfn.classes.length && !mfn.classes.filter( cl => cl.uid == edited_item.be_classes[0] ).length ) delete( edited_item.be_classes );
            if( $('.mfn-ui .panel-edit-item .mfn-form .sidebar-panel-classes').length ) $('.mfn-ui .panel-edit-item .mfn-form .sidebar-panel-classes').remove();

            if( edited_item.jsclass != 'placeholder' && !sidebar_form.edited_div.hasClass('mfn-global-wrap') ) $('.mfn-ui .panel-edit-item .mfn-form').prepend('<div class="sidebar-panel-classes mfn-autocomplete"><label class="form-label form-label-wrapper">Global styles<a class="mfn-option-btn mfn-option-blank mfn-fr-help-icon" target="_blank" data-tooltip="Toggle description" data-position="left" href="#"><span class="mfn-icon mfn-icon-desc"></span></a><a href="#" class="sidebar-panel-class-create mfn-option-btn mfn-option-blank mfn-vb-label-button" title="Add new global style" data-tooltip="Add new global style" data-position="left"><span class="mfn-icon mfn-icon-add"></span></a><a href="#" class="sidebar-panel-class-list mfn-option-btn mfn-option-blank mfn-vb-label-button" title="Show list" data-tooltip="Show list" data-position="left"><span class="mfn-icon mfn-icon-global-styles-list"></span></a></label><div class="desc-group"><span class="description">Save the current styles so you can use them later anywhere. Check a <a href="https://www.youtube.com/watch?v=SO1EfBu24Oo" rel="nofollow" target="_blank">quick introduction</a> or watch a <a href="https://www.youtube.com/watch?v=bN1gSP009Vc" rel="nofollow" target="_blank">detailed tutorial</a>.</span></div><div class="sidebar-panel-classes-list mfn-autocomplete-list"><a class="mfn-option-btn mfn-sidebar-classes-show-list" href="#"><span class="mfn-icon mfn-icon-classes"></span></a><input data-list="mfn-classes" class="sidebar-panel-classes-el sidebar-panel-classes-input mfn-autocomplete-input" placeholder="Choose style"></div></div>');

            if( _.has(edited_item, 'be_classes') && edited_item.be_classes.length && mfn.classes.length && mfn.classes.filter( cl => cl.uid == edited_item.be_classes[0] ) ) {
                $('.mfn-ui').addClass('mfn-class-editor-full');
            }else{
                $('.mfn-ui').removeClass('mfn-class-editor-full');
            }

            if( _.has(edited_item, 'be_classes') && edited_item.be_classes.length && mfn.classes.length && !sidebar_form.edited_div.hasClass('mfn-global-wrap') ) {
                let classes_html = '';
                
                _.map( edited_item.be_classes, function(clas, c) {

                    let nm = mfn.classes.filter( (c) => c.uid == clas );
                    
                    if( nm.length ) {
                        classes_html += `<span data-name="${clas}" class="sidebar-panel-class mfn-autocomplete-item">${ nm[0]['title'] }<span class="sidebar-panel-class-edit mfn-autocomplete-item-edit">&#9998;</span> <span class="sidebar-panel-class-delete mfn-autocomplete-item-delete">&#10005;</span></span>`;
                    }else{
                        edited_item.be_classes.splice(c, 1);
                    }

                }).join('');
                    
                $('.sidebar-panel-classes .sidebar-panel-classes-input').before(classes_html);
            }

            if( mfn.classes.length && _.has(edited_item, 'be_classes') && edited_item.be_classes.length && !$('.mfn-ui .panel-edit-item .mfn-form .mfn-element-fields-wrapper .mfn-classes-used-info').length && mfn.classes.filter( (cl) => cl.uid == edited_item.be_classes[0]).length ){
                $('.mfn-ui .panel-edit-item .mfn-form .mfn-element-fields-wrapper').append('<div class="mfn-form-row mfn-alert mfn-classes-used-info placeholder"><div class="alert-icon mfn-icon-information"></div> <div class="alert-content"><p>This element uses global style. Any local changes will overwrite the global styles.</p></div> </div>');
                }

        }


        if( builder_type == 'archive-product' && edited_item.jsclass == 'filters' && !$('.mfn-ui .panel-edit-item .mfn-form .mfn-element-fields-wrapper .mfn-shop-products-alert').length ){
            $('.mfn-ui .panel-edit-item .mfn-form .mfn-element-fields-wrapper').append('<div class="mfn-form-row mfn-alert mfn-shop-products-alert"><div class="alert-icon mfn-icon-information"></div> <div class="alert-content"><p>This element works with Shop Products element and Query Loops. It does not work with Shop element.</p></div> </div>');
        }


        const mfn_form = new MfnForm( renderMfnFields[edited_item.jsclass] );
        let form_html = mfn_form.render();

        $('.mfn-ui .panel-edit-item .mfn-form .mfn-element-fields-wrapper').append(form_html);

        if( sidebar_form.edited_div && !sidebar_form.edited_div.hasClass('mfn-looped-items') && (sidebar_form.edited_div.closest('.mfn-looped-items').length || sidebar_form.edited_div.find('.mfn-looped-items').length) ) {

            if( $('.mfn-element-fields-wrapper .type.re_render li:not(:first-child) input').is('checked') ) $('.mfn-element-fields-wrapper .type.re_render li:first-child a').trigger('click');
            
            $('.mfn-element-fields-wrapper .wrap.type.re_render').addClass('mfn-disabled-field');

            if( edited_item?.attr?.type == 'tabber' ){
                $('.mfn-element-fields-wrapper .section.type.re_render li:nth-child(2)').remove();
            }else{
                $('.mfn-element-fields-wrapper .section.type.re_render').addClass('mfn-disabled-field');
            }

        }

        if( edited_item.jsclass == 'wrap' && !_.has(edited_item, 'item_is_wrap') && sidebar_form.edited_div.closest('.mcb-section').hasClass('mfn-section-tabber') ) {
            $('.mfn-ui').addClass('mfn-is-tabber');
        }

        if( edited_item.jsclass == 'section' && typeof edited_item['attr']['type'] !== 'undefined' && edited_item['attr']['type'] == 'tabber' ) {
            $('.mfn-element-fields-wrapper').addClass('mfn-section-is-tabber');
        }

        if( edited_item?.attr?.type == 'query' ) {
            $('.mfn-element-fields-wrapper').addClass('mfn-is-query-looped');
        }

        //if( (edited_item.jsclass == 'wrap' || edited_item.jsclass == 'section') && typeof edited_item['attr']['type'] !== 'undefined' && edited_item['attr']['type'] == 'query' ) {
        if( sidebar_form.edited_div && ( sidebar_form.edited_div.hasClass('mfn-looped-items') || sidebar_form.edited_div.closest('.mfn-looped-items').length || sidebar_form.edited_div.find('.mfn-looped-items').length ) ) {

            // $('.mfn-element-fields-wrapper').addClass('mfn-is-query-looped');
            
            if( _.has(edited_item['attr'], 'query_display') && edited_item['attr']['query_display'] == 'slider' ) {
                $('.mfn-element-fields-wrapper').addClass('mfn-is-ql-slider');
                $('.panel-edit-item .query_post_pagination').addClass('mfn-disabled-field');
            }

        }

        /*if( sidebar_form.edited_div && sidebar_form.edited_div.find('.mfn-nested-wrap').length ) {
            $('.mfn-loop-switcher.type ul li:first-child a').trigger('click');
            $('.mfn-form-row.mfn-loop-switcher').addClass('mfn-disabled-field');
        }*/

        if( edited_item.jsclass != 'placeholder' && $('.mfn-ui').hasClass('mfn-editing-element') && !$('.mfn-element-fields-wrapper .modalbox-card-advanced').length ) {
            const mfn_form_advanced = new MfnForm( renderMfnFields['advanced'] );
            let form_html_advanced = mfn_form_advanced.render();
            $('.mfn-ui .panel-edit-item .mfn-form .mfn-element-fields-wrapper').append( form_html_advanced );
        }

        if( sidebar_form.focus ) {
            $('.sidebar-panel-content .mfn-form').find(sidebar_form.focus).focus();
            sidebar_form.focus = false;
        }

        sidebar_form.after();
        mfnoptsinputs.start();

        //console.log( mfn.placeholders );
    },

    after() {
        // sidebar_form.after

        if( $('.mfn-ui').hasClass('mfn-sidebar-hidden-footer') ) $('.mfn-ui').removeClass('mfn-sidebar-hidden-footer');

        /**
         * Query loop
        * */

        if( edited_item.jsclass == 'wrap' || edited_item.jsclass == 'section' ) {
            //$('.mfn-element-fields-wrapper .mfn-form-row.type .segmented-options li:first-child a').trigger('click');

            // console.log(edited_item);

            if( typeof edited_item['attr']['type'] === 'undefined' || edited_item['attr']['type'] == '' || edited_item['attr']['type'] == 'tabber' ) {
                $('.mfn-element-fields-wrapper .mfn-form-row.query_type .mfn-field-value').val('');
                $('.mfn-element-fields-wrapper .mfn-form-row.query_post_type .mfn-field-value').val('');
                $('.mfn-element-fields-wrapper .query_terms_taxonomy .mfn-field-value').val('');
            }else if( ( typeof edited_item['attr']['query_type'] === 'undefined' || edited_item['attr']['query_type'] == 'terms' ) ) {
                $('.mfn-element-fields-wrapper .mfn-form-row.query_post_type .mfn-field-value').val('');
            }else if( typeof edited_item['attr']['query_type'] === 'undefined' || edited_item['attr']['query_type'] == 'posts' ) {
                 $('.mfn-element-fields-wrapper .query_terms_taxonomy .mfn-field-value').val('');
            }

        }

        /**
         *
         * Blog & Portfolio tmpl
         *
         * */

        if( builder_type.includes('archive-') && (edited_item?.jsclass === 'section' || edited_item?.jsclass === 'wrap') ) {
            $('.mfn-form-row.query_type select option:first-child').text('Main query');
        }else{
            $('.mfn-form-row.query_type select option:first-child').css({'display': 'none'});
        }

        /*if( builder_type.includes('archive-') && (edited_item?.jsclass === 'section' || edited_item?.jsclass === 'wrap') && edited_item?.attr?.type === 'query' && !edited_item?.attr?.query_type ) {
            let ql_posts = builder_type.replace('archive-', '');
            if( $('.panel-edit-item .mfn-form .mfn-form-row.query_post_type .mfn-field-value').val() != ql_posts ) {
                $('.panel-edit-item .mfn-form .mfn-form-row.query_type .mfn-field-value').val('posts').trigger('change');
                $('.panel-edit-item .mfn-form .mfn-form-row.query_post_type .mfn-field-value').val(ql_posts).trigger('change');
            }
        }*/


        /**
         * Deprecated hide
        * */

        if( $('.panel-edit-item .mfn-element-fields-wrapper .mfn-form-row.mfn-deprecated').length ){
            if( !$('.panel-edit-item .mfn-element-fields-wrapper .mfn-form-row.mfn-deprecated .mfn-field-value').length ) $('.panel-edit-item .mfn-element-fields-wrapper .mfn-form-row.mfn-deprecated').remove();
        }

        //$('.panel-edit-item .mfn-element-fields-wrapper .mfn-form-row .checkboxes.pseudo .mfn-deprecated:not(.active)').remove();

        if( $('.panel-edit-item .mfn-element-fields-wrapper .browse-image.multi .gallery-container li').length ){
            uploader.sortable();
        }

        /**
         * Slider bar
        * */

        if( $('.mfn-form .mfn-element-fields-wrapper .mfn-form-row .sliderbar:not(.mfn-initialized)').length ){
            $('.mfn-form .mfn-element-fields-wrapper .mfn-form-row .sliderbar:not(.mfn-initialized)').each(function() {
                sliderInput.init($(this));
            });
        }

        /**
         * 
         * Lazy load select
         * 
         * */

        mfnLazySelect.init();

        /**
         * Mask shapes
         */

        const getMaskShapeParents = $('.panel-edit-item').find('[data-item="image"], [data-item="video"]');
        if( getMaskShapeParents.length ) {
          maskShapeHideChildrenConditional( getMaskShapeParents );
        };

        /**
         * Font init
         * */

        if( $('.mfn-form .mfn-element-fields-wrapper .mfn-form-row.typography .mfn-toggle-fields-wrapper').is(':visible') ) {
            $('.mfn-form .mfn-element-fields-wrapper .mfn-form-row.typography').each(function() {
                initFontSelect($(this));
            });
        }

        /**
         * WYSWIG
         */

        if( $( '.mfn-form .mfn-element-fields-wrapper .html-editor' ).length ) {
            sidebar_form.wyswig_active = true;
            preventEdit = true;
            MfnFieldTextarea.create();
            //$(document).trigger('mfn:vb:edit');
        }

        if( $( '.mfn-form .mfn-element-fields-wrapper .visual-editor' ).length ) {
            sidebar_form.wyswig_active = true;
            preventEdit = true;
            MfnFieldVisual.init();
        }
    }
}


$(document).on('click', '.mfn-preview-footer .parent-selector-tree li a', function(e) {

    e.preventDefault();

    let uid = $(this).attr('data-uid');

    if( edited_item?.uid == uid ) return;

    let this_el = $builder.find('.vb-item[data-uid="'+uid+'"]');
    this_el.find('.mfn-header').first().find('.mfn-element-edit').trigger('click');
    $content.find('html, body').stop();
    if( builder_type != 'header' ) $content.find('html, body').animate({ scrollTop: this_el.offset().top - 50 }, 500);

});


let inputDrag = {
    t: false,
    i: false,
    v: false,
    n_v: false,
    n: false,
    u: false,
    x: false,
    x_s: false,
    is_d: false,
    l: false,
    p: false,
    path: false,
    style: false,
    postfix: false,

    init: function () {
        $(document).on( 'mousedown', '.mfn-slider-input .mfn-form-input', function(e) {
            inputDrag.i = $(this);
            if( !inputDrag.i.val().includes('--') ) inputDrag.start(e);
        });
        $(document).mouseup(this.end);
    },

    start: function (e) {
        inputDrag.postfix = false;
        inputDrag.l = false;
        inputDrag.v = inputDrag.i.val();
        inputDrag.n = inputDrag.v.replace(/[a-z\%]/g, "");
        inputDrag.u = inputDrag.v.length ? inputDrag.v.replace(/[0-9\-]/g, "") : "px";
        if( inputDrag.i.closest('.isLinked').length ) inputDrag.l = true;
        if( inputDrag.i.closest('.pseudo').length ) inputDrag.p = true;
        inputDrag.path = inputDrag.i.closest('.mfn-form-row').attr('data-csspath').replace('mcb-wrap-inner', 'mcb-wrap-inner-'+edited_item.uid);
        inputDrag.style = inputDrag.i.closest('.mfn-form-row').attr('data-name');
        inputDrag.postfix = typeof inputDrag.i.attr('data-key') !== 'undefined' ? inputDrag.i.attr('data-key') : '';
        if( inputDrag.postfix && !inputDrag.l ) {
            if( inputDrag.style.includes('border-width') ) {
                inputDrag.style = inputDrag.style.replace('-', '-'+inputDrag.postfix+'-');
            }else if( inputDrag.postfix == '0' || inputDrag.postfix == '1' || inputDrag.postfix == '2' || inputDrag.postfix == '3' ) {
                if( inputDrag.postfix == '0' ) inputDrag.postfix = 'top-left';
                if( inputDrag.postfix == '1' ) inputDrag.postfix = 'top-right';
                if( inputDrag.postfix == '2' ) inputDrag.postfix = 'bottom-right';
                if( inputDrag.postfix == '3' ) inputDrag.postfix = 'bottom-left';
                inputDrag.style = inputDrag.style.replace('-', '-'+inputDrag.postfix+'-');
            }else{
                inputDrag.style = inputDrag.style+'-'+inputDrag.postfix;
            }
        };
        
        inputDrag.t = setTimeout(function() {
            $('.sidebar-wrapper').addClass('mfn-vb-sidebar-overlay');
            inputDrag.is_d = true;
            inputDrag.i.addClass('mfn-slider-input-initialized');
            inputDrag.x = e.clientX - inputDrag.n;
            inputDrag.x_s = inputDrag.x;  
            // init
            $(document).mousemove( inputDrag.move );
        }, 500);
    },

    move: function(e) {
        if( !inputDrag.is_d ) return;
        inputDrag.x = e.clientX;
        if( inputDrag.x && inputDrag.x > 0 ) inputDrag.n_v = inputDrag.x - inputDrag.x_s;
        inputDrag.i.val( inputDrag.n_v+inputDrag.u );
        if( inputDrag.l ) {
            inputDrag.i.closest('.isLinked').find('input').val(inputDrag.n_v+inputDrag.u);
        }else{
            inputDrag.i.val( inputDrag.n_v+inputDrag.u );
        }
        inputDrag.inline();
    },

    end: function (e) {
        clearTimeout(inputDrag.t);
        if( !inputDrag.is_d ) return;
        inputDrag.is_d = false;
        $(inputDrag.i).removeClass('mfn-slider-input-initialized');
        $(document).off("mousemove", inputDrag.move);
        $('.sidebar-wrapper').removeClass('mfn-vb-sidebar-overlay');
        inputDrag.i.trigger('change');
        setTimeout(function() { inputDrag.inline(true); }, 1000);
        if( inputDrag.v == inputDrag.n_v ) return;
    },

    inline: function( reset = false ) {
        let val = reset ? 'remove' : inputDrag.n_v+inputDrag.u;

        if( inputDrag.style.includes('flex') ){
            changeInlineStyles(inputDrag.path, inputDrag.style, '0 0 '+val);
        }else if( inputDrag.path.includes(',') || inputDrag.path.includes('|') ){
            var css_arr = inputDrag.path.split(',');
            css_arr.map(function(c) {
                changeInlineStyles(c.replace('|', ':'), inputDrag.style, val);
            });
        }else{
            changeInlineStyles(inputDrag.path, inputDrag.style, val);
        }
    }
};

inputDrag.init();

/**
 * Builder settings
 */

var settings = {

    option: false,
    forceReload: false,

    start: function(){

        // column text editor

        if( $('#mfn-visualbuilder').hasClass('column-visual') ){
          $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="column-visual"] li:first').removeClass('active')
            .siblings().addClass('active');
        }

        // navigation

        if( !$content.find("body").hasClass('mfn-modern-nav') ){
          $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="mfn-modern-nav"] li:first').removeClass('active')
            .siblings().addClass('active');
        }

        // builder blocks

        if( $content.find("body").hasClass('mfn-builder-blocks') ){
          $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="builder-blocks"] li:first').addClass('active')
            .siblings().removeClass('active');
        }

        if( $content.find("body").hasClass('simple-view') ){
          $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="simple-view"] li:first').removeClass('active')
            .siblings().addClass('active');
        }

        if( $content.find("body").hasClass('hover-effects-disable') ){
          $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="hover-effects"] li:first').addClass('active')
            .siblings().removeClass('active');
        }

        if( $("body").hasClass('mfn-default-ui') ){
          $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="user-interface"] li:last-child').addClass('active')
            .siblings().removeClass('active');
        }

        if( $("body").hasClass('mfn-scalable-preview') ){
          //$('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="scalable-preview"] li:last-child').addClass('active')
            //.siblings().removeClass('active');
            $('.mfn-ui .panel-settings .mfn-form .settings input#settings-scalable-preview').prop('checked', true);
        }

        if( $("body").hasClass('mfn-presets-enabled') ){
            $('.mfn-ui .panel-settings .mfn-form .settings input#settings-enable-presets').prop('checked', true);
        }

        if( $content.find("body").hasClass('mfn-parent-select-active') ) {
            $('.mfn-ui .panel-settings .mfn-form .settings input#settings-parent-select').prop('checked', true);
            $('.mfn-ui .panel-settings .mfn-form .mfn-row-if-parent-select').show();

            if( $content.find("body").hasClass('mfn-parent-select-navbar') ) {
                $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="parent-select-position"] li:first-child').addClass('active')
                    .siblings().removeClass('active');
                $('.mfn-preview-footer').removeClass('active');
            }else{
                $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="parent-select-position"] li:last-child').addClass('active')
                    .siblings().removeClass('active');
                $('.mfn-preview-footer').addClass('active');
            }

        }else{
            $('.mfn-ui .panel-settings .mfn-form .mfn-row-if-parent-select').hide();
            $('.mfn-preview-footer').removeClass('active');
        }

        if( $content.find("body").hasClass('mfn-ui-section-header-condensed') ) {
          $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="section-options"] li:last-child').addClass('active')
            .siblings().removeClass('active');
        }

        if( $("body").hasClass('mfn-navigator-fixed') ){
          $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="navigator-position"] li:last-child').addClass('active')
            .siblings().removeClass('active');
        }

        if( $("body").hasClass('mfn-history-ajax-mode') ){
          $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="history-mode"] li:last-child').addClass('active')
            .siblings().removeClass('active');
        }

        // ui mode

        if( $('#mfn-visualbuilder').hasClass('mfn-ui-dark') && !$('#mfn-visualbuilder').hasClass('mfn-ui-auto') ){
            $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="ui-theme"] li').removeClass('active');
            $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="ui-theme"] li:last-child').addClass('active');
        }else if( $('#mfn-visualbuilder').hasClass('mfn-ui-light') ){
            $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="ui-theme"] li').removeClass('active');
            $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="ui-theme"] li:nth-child(2)').addClass('active');
        }else{
            settings.detectOsTheme();
        }

        settings.run();
    },
    run: function() {

        $('.mfn-ui .panel-settings .mfn-switch input').on('change', function(e) {
            e.preventDefault();

            if( mfn.view == 'demo' ) return;

            settings.forceReload = false;
            settings.option = $(this);
            $row = settings.option.closest('.mfn-row');

            if( $row.hasClass('mfn-reload-required') ) {

                $('.mfn-ui').addClass('mfn-modal-open').append('<div class="mfn-modal modal-confirm mfn-modal-600 show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-settings"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Confirmation box</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"> <img class="icon" alt="" src="'+mfn.themepath+'/muffin-options/svg/warning.svg"> <h3>Page reload is required</h3> <p>Continue?</p><a class="mfn-btn mfn-btn-red btn-wide btn-modal-close" href="#"><span class="btn-wrapper">Cancel</span></a> <a class="mfn-btn btn-wide btn-modal-confirm" href="#"><span class="btn-wrapper">Reload</span></a> <a class="mfn-btn mfn-btn-green btn-wide btn-modal-confirm-with-save" href="#"><span class="btn-wrapper">Save & Reload</span></a> </div></div></div>');

                $('.btn-modal-close').on('click', function(e) {
                    e.preventDefault();
                    $('.mfn-ui').removeClass('mfn-modal-open');
                    $('.modal-confirm.show').remove();
                    return;
                });

                $('.btn-modal-confirm').on('click', function(e) {
                    e.preventDefault();

                    if( $(this).hasClass('loading') ) return;
                    window.onbeforeunload = null;

                    $(this).addClass('loading disabled');
                    settings.forceReload = true;
                    settings.continue();
                });

                $('.btn-modal-confirm-with-save').on('click', function(e) {
                    e.preventDefault();

                    if( $(this).hasClass('loading') ) return;
                    window.onbeforeunload = null;

                    $(this).addClass('loading disabled');
                    settings.forceReload = true;

                    if(!$('.btn-save-form-primary.btn-save-changes').hasClass('disabled')){
                        $('.btn-save-form-primary.btn-save-changes').trigger('click');
                    }

                });

            }else{
                settings.continue();
            }


        });

        $('.mfn-ui .panel-settings .single-segmented-option.segmented-options ul li a').on('click', function(e) {
            e.preventDefault();

            if( mfn.view == 'demo' ) return;

            settings.forceReload = false;
            settings.option = $(this);

            var $li = settings.option.closest('li'),
            $row = settings.option.closest('.mfn-row');

            if( $row.hasClass('mfn-reload-required') ){
                $('.mfn-ui').addClass('mfn-modal-open').append('<div class="mfn-modal modal-confirm mfn-modal-600 show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-settings"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Confirmation box</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"> <img class="icon" alt="" src="'+mfn.themepath+'/muffin-options/svg/warning.svg"> <h3>Page reload is required</h3> <p>Continue?</p><a class="mfn-btn mfn-btn-red btn-wide btn-modal-close" href="#"><span class="btn-wrapper">Cancel</span></a> <a class="mfn-btn btn-wide btn-modal-confirm" href="#"><span class="btn-wrapper">Reload</span></a> <a class="mfn-btn mfn-btn-green btn-wide btn-modal-confirm-with-save" href="#"><span class="btn-wrapper">Save & Reload</span></a> </div></div></div>');

                $('.btn-modal-close').on('click', function(e) {
                    e.preventDefault();
                    $('.mfn-ui').removeClass('mfn-modal-open');
                    $('.modal-confirm.show').remove();
                    return;
                });

                $('.btn-modal-confirm').on('click', function(e) {
                    e.preventDefault();

                    if( $(this).hasClass('loading') ) return;
                    window.onbeforeunload = null;

                    $(this).addClass('loading disabled');
                    settings.forceReload = true;
                    settings.continue();
                });

                $('.btn-modal-confirm-with-save').on('click', function(e) {
                    e.preventDefault();

                    if( $(this).hasClass('loading') ) return;
                    window.onbeforeunload = null;

                    $(this).addClass('loading disabled');
                    settings.forceReload = true;

                    if(!$('.btn-save-form-primary.btn-save-changes').hasClass('disabled')){
                        $('.btn-save-form-primary.btn-save-changes').trigger('click');
                    }

                });

            }else{
                settings.continue();
            }

        });
    },

    continue: function() {

        //console.log('continue');

        var option = settings.option.closest('.form-control').attr('data-option'),
            value = false;
        var $row = settings.option.closest('.mfn-row');

        if( $row.find('.segmented-options').length ){
            var $li = settings.option.closest('li');
                
            $li.addClass('active')
                .siblings('li').removeClass('active');

            value = $li.attr('data-value');
        }else if( $row.find('input').is(':checked') ){
            value = $row.find('input').attr('value');
        }

            if( option == 'mfn-modern-nav' || option == 'simple-view' ){

                if( value == 1 && !$content.find("body").hasClass(option) ){
                    $content.find("body").addClass(option);
                }else{
                    $content.find("body").removeClass(option);
                }

            }else if( option == 'hover-effects' ){

                if( value == 1 && !$content.find("body").hasClass('hover-effects-disable') ){
                    $content.find("body").addClass('hover-effects-disable');
                }else{
                    $content.find("body").removeClass('hover-effects-disable');
                }

            }else if( option == 'ui-theme' ){

                $("#mfn-visualbuilder").removeClass('mfn-ui-auto mfn-ui-dark mfn-ui-light').addClass(value);

                if( ! isBlocks() ){
                  $content.find('body').removeClass('mfn-ui-auto mfn-ui-dark mfn-ui-light').addClass(value);

                  if(value == 'mfn-ui-auto'){
                      settings.detectOsTheme();
                  }
                }

            }else if( option == 'scalable-preview' ){

                $("body").removeClass('mfn-scalable-preview');

                if( value == 'enable' ) $("body").addClass('mfn-scalable-preview');

            }else if( option == 'enable-presets' ){

                $("body").removeClass('mfn-presets-enabled');

                if( value == 'enable' ) $("body").addClass('mfn-presets-enabled');

            }else if( option == 'section-options' ){

                $content.find("body").removeClass('mfn-ui-section-header-condensed');

                if( value == 'compressed' ) $content.find("body").addClass('mfn-ui-section-header-condensed');

            }else if( option == 'history-mode' ){

                $("body").removeClass('mfn-history-ls-mode mfn-history-ajax-mode');

                if( value.length && value == '1' ){
                    $("body").addClass('mfn-history-ajax-mode');
                }else{
                    $("body").addClass('mfn-history-ls-mode');
                }

            }else if( option == 'navigator-position' ){

                $("body").removeClass('mfn-navigator-fixed');

                if( value.length && value == '1' ){
                    $("body").addClass('mfn-navigator-fixed');
                }

            }else if(option == 'parent-select') {

                $content.find("body").removeClass('mfn-parent-select-active');

                if( value.length ){
                    $content.find("body").addClass('mfn-parent-select-active');
                    $('.mfn-ui .panel-settings .mfn-form .mfn-row-if-parent-select').show();

                    if( $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="parent-select-position"] li:last-child').hasClass('active') ){
                        $('.mfn-preview-footer').addClass('active');
                    }
                }else{
                    $('.mfn-ui .panel-settings .mfn-form .mfn-row-if-parent-select').hide();
                    $('.mfn-preview-footer').removeClass('active');
                }

            }else if(option == 'parent-select-position') {

                $content.find("body").removeClass('mfn-parent-select-navbar mfn-parent-select-breadcrumbs');

                if( value.length ) {
                    $content.find("body").addClass('mfn-parent-select-breadcrumbs');
                    $('.mfn-preview-footer').addClass('active');
                }else{
                    $content.find("body").addClass('mfn-parent-select-navbar');
                    $('.mfn-preview-footer').removeClass('active');
                }

            }else{
                if( value ){
                  $('#mfn-visualbuilder').addClass(option);
                } else {
                  $('#mfn-visualbuilder').removeClass(option);
                }
            }

            settings.save(option, value);
    },

    save: function(option, value) {

        $.ajax( mfnajaxurl, {
          type : "POST",
          data : {
            'mfn-builder-nonce': wpnonce,
            action: 'mfn_builder_settings',
            option: option,
            value: value,
          }

        }).done(function(response){

          // show info for pre-completed option

          /*if( ['pre-completed','column-visual'].includes(option) ){
            $row.addClass('changed');
          }*/

          if( 'hover-effects' == option ){
            triggerResize();
          }

          if( settings.forceReload ){
            location.reload();
            settings.forceReload = false;
          }

        });
    },

    detectOsTheme: function() {
        $('body').removeClass('mfn-ui-dark mfn-ui-light');

        if( $('#mfn-visualbuilder').hasClass('mfn-ui-auto') && !$('#mfn-visualbuilder').hasClass('builder-blocks') ){
            
            if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                $('#mfn-visualbuilder').addClass('mfn-ui-dark');
                if($content) $content.find('body').addClass('mfn-ui-dark');
            }else{
                $('#mfn-visualbuilder').addClass('mfn-ui-light');
                if($content) $content.find('body').addClass('mfn-ui-light');
            }
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
                const newColorScheme = event.matches;

                if( newColorScheme ) {
                    $('#mfn-visualbuilder').addClass('mfn-ui-dark');
                    if($content) $content.find('body').addClass('mfn-ui-dark');
                }else{
                    $('#mfn-visualbuilder').removeClass('mfn-ui-dark').addClass('mfn-ui-light');
                    if($content) $content.find('body').removeClass('mfn-ui-dark').addClass('mfn-ui-light');
                }
                //const newColorScheme = event.matches ? $('#mfn-visualbuilder').addClass('mfn-ui-dark') /*$content.find('body').addClass('mfn-ui-dark')*/ : $('#mfn-visualbuilder').removeClass('mfn-ui-dark')/* $content.find('body').addClass('mfn-ui-dark')*/;

            });
        }
    }
}


var modernmenu = {
    start: function() {
        $builder.on('click', '.mfn-header .mfn-element-menu', function(e) {
            e.preventDefault();
            $(this).closest('.mfn-header').toggleClass('mfn-element-menu-opened');
        });
    }
}

/**
 * Introduction slider
 */

var introduction = {

  overlay: $('.mfn-intro-overlay'),

  options: {

    // introduction.options.get()

    get: function(){

      return $('#mfn-visualbuilder').hasClass('intro');

    },

    // introduction.options.set()

    set: function( value ){

        if( mfn.view == 'demo' ) return;

      $.ajax( mfnajaxurl, {

        type : "POST",
        data : {
          'mfn-builder-nonce': wpnonce,
          action: 'mfn_builder_settings',
          option: 'intro',
          value: value, // 0 - hide intro, 1 - show intro
        }

      });

    }

  },

  // introduction.open()

  open: function(){
    // do not open, when disabled support
    if ( parseInt( $('#mfn-visualbuilder').attr('data-tutorial') ) ) {
      return false;
    }

    var $slider = $('.mfn-intro-container ul');

    var slidesAmount = $('.mfn-intro-container ul li').size() - 1;

    // slider do not exists, ie. white label mode
    if( ! $slider.length ){
      return false;
    }

    // slider has been skipped before
    if( ! introduction.options.get() ){
      return false;
    }

    // FIX: wpbakery - dp not show introduction when page options closed
    if( $('#mfn-meta-page').hasClass('closed') ){
      return false;
    }

    $('body').addClass('mfn-modal-open');

    introduction.overlay.show();

    // slick has been initialized before so skip steps below
    if( $slider.hasClass('slick-slider') ){
      return false;
    }

    $slider.slick({
      cssEase: 'ease-out',
      dots: false,
      fade: true,
      infinite: false
    });

    $slider.on('afterChange', function(event, slick, currentSlide, nextSlide){
      if ( currentSlide === slidesAmount ){
        introduction.options.set(0);
      }
    });

    // close once on overlay click

    introduction.overlay.on('click', function(e){
      e.preventDefault();
      if ( $(e.target).hasClass('mfn-intro-overlay') ){
        introduction.close();
      }
    });

    // close permanently on X or 'skip' click

    $('.mfn-intro-close').on('click', function(e){
      e.preventDefault();
      introduction.options.set(0);
      introduction.close();
    });

  },

  // introduction.reopen()

  reopen: function(){
    introduction.options.set(1);
    $('#mfn-visualbuilder').addClass('intro');
    introduction.open();
  },

  // introduction.close()

  close: function(){
    $('body').removeClass('mfn-modal-open');
    $('#mfn-visualbuilder').removeClass('intro');
    introduction.overlay.fadeOut(200);
  }

};

introduction.open();

$('.introduction-reopen').on('click', function(e) {
  introduction.reopen();
});

// Global Wraps //

const GlobalWraps = {
    selectedWrapTemplate: '',
    selectedUid: '',
    uidsToRemove: [],
    regex: /(mcb-wrap-).([a-zA-Z0-9]*)/g, // to catch class name of wrap
    wrapTriggered: '',
    loadedPostsId: [], // prevent loading CSS files twice, just perf

    convertToGlobal: function(uid) {

        // GlobalWraps.convertToGlobal()

        $('.mfn-ui').addClass('mfn-modal-open').append('<div class="mfn-modal modal-confirm show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-preset"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Convert to Global Wrap</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"><div class="mfn-form-row"><input placeholder="Name it" type="text" class="mfn-form-control mfn-global-section-name"></div><a class="mfn-btn mfn-btn-blue btn-modal-confirm" '+( mfn.view == 'demo' ? 'data-tooltip="Unavailable in Demo"' : '' )+' href="#"><span class="btn-wrapper">Save</span></a> <a class="mfn-btn btn-modal-close" href="#"><span class="btn-wrapper">Cancel</span></a> </div></div></div>');

        $('.btn-modal-close').on('click', function(e) {
            e.preventDefault();
            $('.mfn-ui').removeClass('mfn-modal-open');
            $('.modal-confirm.show').remove();
        });

        $('.btn-modal-confirm').on('click', function(e) {
            e.preventDefault();
            let $button = $(this);
            $('.mfn-global-section-name').removeClass('error');

            if( $('.mfn-global-section-name').val() != '' ) {

                if( $button.hasClass('loading') ) return;
                $button.addClass('loading');

                prepareForm.save = true;
                prepareForm.is_global_wrap = true;

                let pf = prepareForm.get( uid );

                $.ajax({
                    url: mfnajaxurl,
                    data: {
                        action: 'mfnconverttoglobal',
                        'mfn-builder-nonce': wpnonce,
                        name: $('.mfn-global-section-name').val(),
                        sections: pf,
                        type: 'wrap',
                        uid: uid,
                        obj: JSON.stringify(prepareForm.object)
                    },
                    type: 'POST',
                    success: function(response) {
                        /*console.log(response);
                        console.log(mfn);*/

                        $button.removeClass('loading');

                        if( typeof mfn['global_wraps'] !== 'undefined' && mfn['global_wraps'].length < 2 ) {
                            mfn['global_wraps'] = { '0': '- Default -' };
                        }

                        mfn['global_wraps'][response.key] = response.title;

                        GlobalWraps.selectedWrapTemplate = response.key;
                        GlobalWraps.wrapTriggered = $content.find(`.wrap[data-uid=${GlobalWraps.selectedUid}]`);

                        if( mfn.pagedata.filter((x) => x.uid == GlobalWraps.selectedUid).length ) {

                            mfn.pagedata.filter((x) => x.uid == GlobalWraps.selectedUid)[0]['attr']['global_wraps_select'] = response.key;

                            const wrap_helpr = mfn.pagedata.filter((x) => x.uid == GlobalWraps.selectedUid)[0];

                            if( wrap_helpr.attr ) {
                                Object.keys(wrap_helpr.attr).forEach(key => {
                                  if (key.startsWith('css_')) {
                                    delete wrap_helpr.attr[key];
                                  }
                                });
                            }

                            if( wrap_helpr.items ) {
                                wrap_helpr.items.forEach(item => {
                                    if( !item.attr ) return;
                                    Object.keys(item.attr).forEach(key => {
                                        if (key.startsWith('css_')) {
                                          delete item.attr[key];
                                        }
                                    });
                                });
                            }

                        }

                        //$edited_div = $content.find(`.wrap[data-uid=${GlobalWraps.selectedUid}]`);

                        GlobalWraps.getGlobalWrap();

                        $('.mfn-ui').removeClass('mfn-modal-open');
                        $('.modal-confirm.show').remove();

                        //GlobalWraps.selectedUid = false;

                    }
                });

            }else{
                $('.mfn-global-section-name').addClass('error');
            }
        });


    },

    getGlobalWrap: function () {
        // Replace actual wrap with global wrap | => void
        const that = this;
        that.wrapTriggered.addClass('mfn-global-wrap').attr('data-wrap', that.selectedUid);
        let tmp_uid = that.selectedUid;

        $.ajax({
            url: mfnajaxurl,
            data: {
                action: 'importtemplate_wraponly',
                'mfn-builder-nonce': wpnonce,
                isGlobalWrap: true,
                id: that.selectedWrapTemplate,
                count: $(that.wrapTriggered).attr('data-order')
            },
            type: 'POST',
            success: function(response) {
                if ( response === '0' ) return that.resetWrapToDefaults();

                if( $builder.find('.mfn-current-editing-global').length ) $builder.find('.mfn-current-editing-global').removeClass('mfn-current-editing-global');

                that.wrapTriggered.replaceWith(response.html);
                $builder.find('.mfn-current-editing-global').attr('data-uid', that.selectedUid);

                // CSS related stuff
                that.injectStylesheet();

                // Remaining Lukas stuff
                blink();
                mfnChart();
                historyStorage.add();
                runAjaxElements();

                setTimeout(function() {
                    if( $('body').hasClass('mfn-navigator-active') ) be_navigator.show( $(response.html).attr('data-uid') );
                    sidebar_form.open($builder.find('.mfn-current-editing-global'), false);
                    GlobalWraps.selectedUid = false;
                }, 100);

                /*let retrieve_uid = false;

                if( $content.find('.mfn-current-editing').length ) $content.find('.mfn-current-editing').removeClass('mfn-current-editing');
                if( $content.find('.mfn-current-editing-global').length ) $content.find('.mfn-current-editing-global').removeClass('mfn-current-editing-global'); */

                // Imported content, insert it
                // that.wrapTriggered.replaceWith(response.html);

                // if( !$builder.find('.mfn-global-wrap.vb-item[data-uid="'+tmp_uid+'"]').length ) mfn.pagedata = mfn.pagedata.filter((i) => i.uid != tmp_uid );

                /*response.form.forEach(it => {
                  if( _.has(it, 'jsclass') && it.jsclass == 'wrap' ){
                    if( !mfn.pagedata.filter( (x) => x.uid == it.uid ).length ) {
                        mfn.pagedata.push(it);
                    }else{
                        mfn.pagedata.filter( (x) => x.uid == it.uid )[0] = it;
                    }
                    console.log(it);
                    retrieve_uid = it.uid;
                  }
                });

                

                setTimeout(function() {
                    console.log(retrieve_uid);
                    if( $('body').hasClass('mfn-navigator-active') ) be_navigator.show( $(response.html).attr('data-uid') ); 
                    sidebar_form.open($builder.find('.mcb-wrap[data-mfn-global="'+that.selectedWrapTemplate+'"]'), false);
                    //$builder.find('.mfn-current-editing .mcb-wrap-inner').html($(response.html).find('.mcb-wrap-inner').html());
                    GlobalWraps.selectedUid = false;
                }, 100);*/

            },
        });
    },

    injectStylesheet: function ( ) {
        // While loading the stylesheet again, prevent loading CSS once more | => void
        if( !this.loadedPostsId.includes( this.selectedWrapTemplate ) ) {
            this.loadedPostsId.push( this.selectedWrapTemplate );
            $content.find('head').append(`<link rel="stylesheet" type="text/css" href='${mfn.site_url}/wp-content/uploads/betheme/css/post-${this.selectedWrapTemplate}.css' />`);
        }
    },

    resetWrapToDefaults: function() {
        // Create new wrap, replace the global wrap | => void
        const newWrap = elements.wrap(this.wrapTriggered.attr(`data-${screen}-size`));
        this.wrapTriggered.replaceWith(newWrap.html);
        this.wrapTriggered = $content.find(`.wrap[data-uid=${newWrap.uid}]`);

        // Replace navigator ID to new
        /*const navigatorWrap = $navigator.find('.navigator-tree').find(`[data-uid=${this.selectedUid}]`).attr('data-uid', newWrap.uid);
        navigatorWrap[0].firstChild.nodeValue = 'Wrap';
        navigatorWrap[0].setAttribute('data-uid', newWrap.uid);
        navigatorWrap.closest('li').removeClass().addClass(`navigator-wrap nav-${newWrap.uid}`);*/

        blink();
        historyStorage.add();

        queueMicrotask(() => sidebar_form.open( this.wrapTriggered ));
    },
}

$(document).on('change', '.global_wraps_select .mfn-field-value', function() {
    /*const wrapClass = $(this).closest('.mfn-element-fields-wrapper').attr('data-element'); // mcb-wrap-uid
    const uidSelected = wrapClass.substring(9, wrapClass.length); //cut mcb-wrap, get the uid only
    const templateSelected = $(e.target); //dropdown, select template*/

    GlobalWraps.selectedUid = edited_item.uid;

    //GlobalWraps.fillWrapInfo(wrapClass, templateSelected);

    if( !$(this).val().length ) {
        return GlobalWraps.resetWrapToDefaults();
    }

    GlobalWraps.selectedWrapTemplate = $(this).val();
    GlobalWraps.wrapTriggered = $content.find(`.mfn-current-editing`).length ? $content.find(`.mfn-current-editing`) : $content.find(`.vb-item[data-uid="${edited_item.uid}"]`);

    GlobalWraps.getGlobalWrap();
})

// Global Sections  //

const GlobalSections = {
    selectedSectionTemplate: '',
    selectedUid: '',
    uidsToRemove: [],
    regex: /(mcb-section-).([a-zA-Z0-9]*)/g, // to catch class name of wrap
    sectionTriggered: '',
    loadedPostsId: [], // prevent loading CSS files twice, just perf

    convertToGlobal: function(uid) {

        //GlobalSections.convertToGlobal()

        $('.mfn-ui').addClass('mfn-modal-open').append('<div class="mfn-modal modal-confirm show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-preset"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Convert to Global Section</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"><div class="mfn-form-row"><input placeholder="Name it" type="text" class="mfn-form-control mfn-global-section-name"></div><a class="mfn-btn mfn-btn-blue btn-modal-confirm" '+( mfn.view == 'demo' ? 'data-tooltip="Unavailable in Demo"' : '' )+' href="#"><span class="btn-wrapper">Save</span></a> <a class="mfn-btn btn-modal-close" href="#"><span class="btn-wrapper">Cancel</span></a> </div></div></div>');

        $('.btn-modal-close').on('click', function(e) {
            e.preventDefault();
            $('.mfn-ui').removeClass('mfn-modal-open');
            $('.modal-confirm.show').remove();
        });

        $('.btn-modal-confirm').on('click', function(e){
            e.preventDefault();
            let $button = $(this);
            $('.mfn-global-section-name').removeClass('error');
            if( $('.mfn-global-section-name').val() != '' ) {

                if( $button.hasClass('loading') ) return;
                $button.addClass('loading');

                prepareForm.save = true;

                let pf = prepareForm.get( uid );

                $.ajax({
                url: mfnajaxurl,
                data: {
                    action: 'mfnconverttoglobal',
                    'mfn-builder-nonce': wpnonce,
                    name: $('.mfn-global-section-name').val(),
                    sections: pf,
                    type: 'section',
                    obj: JSON.stringify(prepareForm.object)
                },
                type: 'POST',
                success: function(response){
                    /*console.log(response);
                    console.log(mfn);*/

                    $button.removeClass('loading');

                    if( typeof mfn['global_sections'] !== 'undefined' && mfn['global_sections'].length < 2 ){
                        mfn['global_sections'] = { '0': '- Default -' };
                    }

                    mfn['global_sections'][response.key] = response.title;

                    GlobalSections.selectedUid = uid;
                    GlobalSections.selectedSectionTemplate = response.key;
                    GlobalSections.sectionTriggered = $content.find(`.section[data-uid=${uid}]`);


                    if( mfn.pagedata.filter((x) => x.uid == GlobalSections.selectedUid).length ) {

                        const section_helpr = mfn.pagedata.filter((x) => x.uid == GlobalSections.selectedUid)[0];

                        console.log(section_helpr);

                        if( section_helpr.attr ) {
                            Object.keys(section_helpr.attr).forEach(key => {
                              if (key.startsWith('css_')) {
                                delete section_helpr.attr[key];
                              }
                            });
                        }


                        if( section_helpr.wraps ) {
                             section_helpr.wraps.forEach(wrap => {

                                if( wrap.items ){
                                    wrap.items.forEach(item => {
                                        if( !item.attr ) return;
                                        Object.keys(item.attr).forEach(key => {
                                            if (key.startsWith('css_')) {
                                              delete item.attr[key];
                                            }
                                          });
                                    });
                                }


                                if( !wrap.attr ) return;
                                Object.keys(wrap.attr).forEach(key => {
                                    if (key.startsWith('css_')) {
                                      delete wrap.attr[key];
                                    }
                                  });
                              });
                        }


                    }


                    $edited_div = $content.find(`.section[data-uid=${uid}]`);

                    GlobalSections.getGlobalSection();

                    $('.mfn-ui').removeClass('mfn-modal-open');
                    $('.modal-confirm.show').remove();

                }
            });

            }else{
                $('.mfn-global-section-name').addClass('error');
            }
        });


    },

    setSidebarClass: function() {
        // Set sidebar class, hide options not dedicated for globals | => void

        if ( $(this.sectionTriggered).hasClass('mfn-global-section') ) {
            $('.sidebar-panel').addClass('mfn-global-section-edit');
            $('#global_sections_select').find(`option[value="${ $(this.sectionTriggered).attr('data-mfn-global')}"]`).attr('selected', 'selected');
        } else {
            $('#global_sections_select').find(`option:first-child`).attr('selected', 'selected');
            $('.sidebar-panel').removeClass('mfn-global-section-edit');
        }
    },

    getGlobalSection: function () {
        // Replace actual wrap with global wrap | => void
        const that = this;
        that.sectionTriggered.addClass('mfn-global-section').attr('data-section', that.selectedUid);

        $.ajax({
            url: mfnajaxurl,
            data: {
                action: 'importtemplate',
                'mfn-builder-nonce': wpnonce,
                isGlobalSection: true,
                id: that.selectedSectionTemplate //template id
            },
            type: 'POST',
            success: function(response) {
                // Imported content, insert it
                if ( response === '0' ) return that.resetSectionToDefaults();

                $.each(response.form, function(i, el) {
                    if( _.has(el, 'jsclass') && el.jsclass == 'section' ) {
                        el['ver'] = elements_ver;
                        response.html = response.html.replaceAll('mfn-default-section', 'mfn-'+elements_ver+'-section');
                    }
                    mfn.pagedata.push(el);
                });

                that.sectionTriggered = $(that.sectionTriggered).replaceWith(response.html);

                // Find and bind the newly inserted section
                let newClass = response.html.match(that.regex)[0];
                that.sectionTriggered = $content.find(`.${newClass}`);

                // CSS related
                that.injectStylesheet();

                // Force display of lists
                backToWidgets();

                // Remaining Lukas stuff
                blink();
                mfnChart();
                historyStorage.add();
                runAjaxElements();

                setTimeout(function() { if( $('body').hasClass('mfn-navigator-active') ) be_navigator.show( $(response.html).attr('data-uid') ); }, 100);
            }
        });
    },

    injectStylesheet: function () {
        // While loading the stylesheet again, prevent loading CSS once more | => void
        if( !this.loadedPostsId.includes( this.selectedSectionTemplate ) ) {
            this.loadedPostsId.push( this.selectedSectionTemplate );
            $content.find('head').append(`<link rel="stylesheet" type="text/css" href='${mfn.site_url}/wp-content/uploads/betheme/css/post-${this.selectedSectionTemplate}.css' />`);
        }
    },

    fillSectionInfo: function( sectionClass, target ) {
        // Fill wrap info to be able to edit it | => void
        this.selectedUid = sectionClass.substring(12, sectionClass.length);
        this.selectedSectionTemplate = $(target).val();
        this.sectionTriggered = $content.find(`.section[data-uid=${this.selectedUid}]`);
    },

    fillSectionInfoWithoutCut: function(sectionUid, target) {
        // Fill wrap info to be able to edit it | => void
        this.selectedUid = sectionUid;
        this.selectedSectionTemplate = target;
        this.sectionTriggered = $content.find(`.section[data-uid=${this.selectedUid}]`);
    },

    resetSectionToDefaults: function() {
        // Create new wrap, replace the global wrap | => void
        const newWrap = elements.section();

        this.sectionTriggered.replaceWith(newWrap.html);
        this.sectionTriggered = $content.find(`.section[data-uid=${newWrap.uid}]`);

        blink();
        historyStorage.add();

        queueMicrotask(() => sidebar_form.open( this.sectionTriggered ));
    },
}


$editpanel.on('change', '.global_sections_select', function(e) {
    const sectionClass = $(this).closest('.mfn-element-fields-wrapper').attr('data-element'); // mcb-wrap-uid
    const uidSelected = sectionClass.substring(9, sectionClass.length); //cut mcb-wrap, get the uid only
    const templateSelected = $(e.target); //dropdown, select template

    $edited_div = $content.find(`.section[data-uid=${uidSelected}]`);

    GlobalSections.fillSectionInfo(sectionClass, templateSelected);

    if( !templateSelected.val() ) {
        return GlobalSections.resetSectionToDefaults();
    }

    GlobalSections.getGlobalSection();
})

$('.shortcutsinfo-open').on('click', function(e) {
    e.preventDefault();
    $('.modal-shortcuts').addClass('show');
});

$('.dynamicdatainfo-open').on('click', function(e) {
    e.preventDefault();
    $('.modal-dynamic-data-info').addClass('show');
    $('.modal-dynamic-data-info .modalbox-content li').removeClass('copied');
});

$('.modal-dynamic-data-info .modalbox-content a').on('click', function(e) {
    e.preventDefault();
    const {target} = e;
    const dynamicDataCodeLocation = $(target).closest('li').find('.mfn-dd-label');

    var code = dynamicDataCodeLocation.text();
    navigator.clipboard.writeText( code );

    $(target).closest('li').attr('data-tooltip', 'Copied');

    setTimeout(function() {
        $(target).closest('li').attr('data-tooltip', 'Click to copy');
    }, 2000);
});

$('.mfn-option-dropdown.btn-save-action a').on('click', function(e) {e.preventDefault();});

// export / import

$('.mfn-export-import-opt').on('click', function(e) {
    e.preventDefault();
    $('.mfn-export-import-opt').removeClass('active');
    $(this).addClass('active');
    $(".panel").hide();
    $('.export-import-current').text($(this).text());
    let filtr = $(this).attr('data-filter');
    if( filtr == 'panel-export-import-presets' ){
        $('#export-presets-data-textarea').val( JSON.stringify(mfn.presets.filter( (it) => it.type == 'custom' )) );
    }
    if( filtr == 'panel-export-import-classes' ){
        $('#export-classes-data-textarea').val( JSON.stringify(mfn.classes) );
    }
    $('.'+filtr).show();
});

$('.mfn-export-button').on('click', function(e) {
    e.preventDefault();

    if(!$(this).hasClass('mfn-icon-check-blue')){
        $('.mfn-export-field').select();
        document.execCommand("copy");
        $(this).find('span').text('Copied').addClass('mfn-icon-check-blue');
        localStorage.setItem( 'mfn-builder', JSON.stringify({
          clipboard: $('.mfn-export-field').val()
        }) );
    }
});

$('.mfn-items-import-template li').on('click', function() {
    $('.mfn-items-import-template li').removeClass('active');
    $(this).addClass('active');
});

$('.mfn-export-cancel').on('click', function(e) {
    e.preventDefault();
    backToWidgets();
});

function handlePaste (e) {
    var clipboardData, pastedData;

    // Stop data actually being pasted into div
    e.stopPropagation();
    e.preventDefault();

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');

    if( !pastedData && JSON.parse(localStorage.getItem('mfn-builder')).clipboard ){
        pastedData = JSON.parse(localStorage.getItem('mfn-builder')).clipboard;
    }

    $('#import-data-textarea').val(pastedData);
}

if( $('#import-data-textarea').length ) document.getElementById('import-data-textarea').addEventListener('paste', handlePaste);

// pre built sections

$('.pre-built-opt').on('click', function(e) {
    e.preventDefault();
    $('.pre-built-opt').removeClass('active');
    $(this).addClass('active');
    $('.header-prebuilt-sections .pre-built-current').text($(this).text());
    let filtr = $(this).data('filter');

    $('.mfn-visualbuilder .sidebar-panel-content ul.prebuilt-sections-list li').hide();
    $('.mfn-visualbuilder .sidebar-panel-content ul.prebuilt-sections-list li.'+filtr).show();
});

function escapeHtml(value) {
  return value
    .replaceAll('&', '')
    .replaceAll('<', '')
    .replaceAll('>', '')
    .replaceAll('"', '')
    .replaceAll('=', ' ')
    .replaceAll("'", '');
}

// header preview

var headerTmpl = {
    confirm: '<div class="mfn-modal modal-confirm modal-header-sticky show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-delete"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Sticky Header</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close btn-modal-abort" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"> <h3>Building mode</h3> <p>By default, sticky header is same as the default one. If you want to customize it, please choose one of the following options:</p><a class="mfn-btn btn-wide btn-modal-duplicate" href="#"><span class="btn-wrapper">Copy default</span></a> <a class="mfn-btn btn-wide btn-modal-build-new" href="#"><span class="btn-wrapper">Create from scratch</span></a> </div></div></div>',
    init: function() {

        var pageopts = mfn.page_options;

        if( typeof pageopts['header_sticky'] != 'undefined' && pageopts['header_sticky'] == 'enabled' ) $('.mfn-header-type-preview a[data-preview="header-sticky"]').removeClass('disabled');
        if( typeof pageopts['header_mobile'] != 'undefined' && pageopts['header_mobile'] == 'enabled' ) $('.mfn-header-type-preview a[data-preview="header-mobile"]').removeClass('disabled');

        $('.mfn-preview-opt-header').on('click', function(e) {
            e.preventDefault();
            var opt = $(this).attr('data-preview');

            if( opt == 'header-default' ){
                headerTmpl.clickDefault();
            }else if( opt == 'header-sticky' && !$(this).hasClass('disabled') ){
                headerTmpl.clickSticky();
            }else if( opt == 'header-mobile' && !$(this).hasClass('disabled') ){
                headerTmpl.clickMobile();
            }
        });
    },
    clickDefault: function() {
        headerTmpl.resetEmpty();
        $('.mfn-preview-opt-header').removeClass('btn-active');
        elements_ver = 'default';
        $('.mfn-preview-opt-header[data-preview="header-default"]').addClass('btn-active');

        if( $content.find('.mfn-header-tmpl').hasClass('mfn-hasMobile') ){
            $('.mfn-preview-opt[data-preview="desktop"]').trigger('click');
        }

        if( !$('.mfn-header-type-preview a[data-preview="header-sticky"]').hasClass('btn-active') ) $content.find('body').removeClass('mfn-header-scrolled');
        $content.find('.mfn-header-tmpl').removeClass('mfn-hasMobile');

        be_layout.emptys.page();
    },
    clickSticky: function() {
        headerTmpl.resetEmpty();

        if( $('.mfn-preview-opt-header[data-preview="header-mobile"]').hasClass('btn-active') ){
            $('.sidebar-panel-footer .mfn-preview-opt[data-preview="desktop"]').trigger('click');
        }

        $('.mfn-preview-opt-header').removeClass('btn-active');
        elements_ver = 'header-sticky';
        $('.mfn-preview-opt-header[data-preview="header-sticky"]').addClass('btn-active');
        $content.find('body').addClass('mfn-header-scrolled');
        $content.find('.mfn-header-tmpl').addClass('mfn-hasSticky');
        $content.find('.mfn-header-tmpl').removeClass('mfn-hasMobile');
        //$('.sidebar-panel-footer .mfn-preview-opt[data-preview="desktop"]').trigger('click');

        if( !$content.find('.mfn-header-tmpl .mfn-header-sticky-section').length ){
            headerTmpl.beforeSticky();
        }
    },
    clickMobile: function() {
        headerTmpl.resetEmpty();
        $('.mfn-preview-opt-header').removeClass('btn-active');
        elements_ver = 'header-mobile';
        $('.mfn-preview-opt-header[data-preview="header-mobile"]').addClass('btn-active');
        $content.find('body').removeClass('mfn-header-scrolled');
        $content.find('.mfn-header-tmpl').addClass('mfn-hasMobile');
        $('.mfn-preview-opt[data-preview="mobile"]').trigger('click');
        be_layout.emptys.page();
    },
    beforeSticky: function() {
        $('.mfn-ui').addClass('mfn-modal-open').append(headerTmpl.confirm);

        $('.modal-header-sticky').on('click', '.btn-modal-abort', function(e) {
            e.preventDefault();
            $('.mfn-ui').removeClass('mfn-modal-open');
            $('.modal-header-sticky').remove();
            headerTmpl.clickDefault();
        });

        $('.modal-header-sticky').on('click', '.btn-modal-build-new', function(e) {
            e.preventDefault();
            $('.mfn-ui').removeClass('mfn-modal-open');
            $('.modal-header-sticky').remove();
            be_layout.emptys.page();
        });

        $('.modal-header-sticky').on('click', '.btn-modal-duplicate', function(e) {
            e.preventDefault();
            $('.mfn-ui').removeClass('mfn-modal-open');
            $('.modal-header-sticky').remove();
            headerTmpl.duplicate();
        });
    },
    duplicate: function(){
        if( $content.find('.mfn-header-tmpl .vb-item.mcb-section.mfn-default-section').length ){
            $content.find('.mfn-header-tmpl .vb-item.mcb-section.mfn-default-section').each(function() {
                var uid = $(this).attr('data-uid');
                copypaste.copy(uid, $content.find('.mfn-header-tmpl-builder'));
            });
        }
        be_layout.emptys.page();
    },
    resetEmpty: function() {
        if( $('.mfn-header-tmpl .mfn-section-start').length ){
            $('.mfn-header-tmpl .mfn-section-start').remove();
        }
    }
};


// preview

$('.mfn-preview-opt').on('click', function(e) {
    e.preventDefault();
    let preview_type = $(this).data('preview');
    if(!$('body').hasClass('mfn-preview-mode')){ $('body').addClass('mfn-preview-mode'); }
    switchPreview(preview_type);
});

$('.mfn-preview-mode-close').on('click', function(e) {
    e.preventDefault();
    $('body').removeClass('mfn-preview-mode');
    switchPreview('desktop');
    screen = 'desktop';
    $('.mfn-visualbuilder').removeClass('preview-mobile preview-tablet preview-desktop preview-laptop');
});

$editpanel.on('click', '.responsive-switcher li', function() {
    if( $(this).hasClass('active') ) return;
    let preview_type = $(this).find('span').attr('data-device');
    switchPreview(preview_type);
    if(preview_type != 'desktop'){ if( !$('body').hasClass('mfn-preview-mode') ) { $('body').addClass('mfn-preview-mode'); } }else{ $('body').removeClass('mfn-preview-mode'); $('.mfn-visualbuilder').removeClass('preview-mobile preview-tablet preview-desktop preview-laptop'); }
});

// another pages modal

var anotherPagesModal = {
    init: function() {

        $(document).on('click', '.mfn-show-another-pages', function(e) {
            e.preventDefault();
            if( !$('.modal-another-pages .modalbox-content div').length ) anotherPagesModal.get();
            $('.modal-another-pages').addClass('show');
        });

        $(document).on('click', '.modal-another-pages .mfn-another-pages-list li a', function() {
            $('.modal-another-pages').removeClass('show');
        });

        anotherPagesModal.search();
    },
    get: function() {

        if( $('.modal-another-pages .modalbox-content').hasClass('loading') ) return;
        $('.modal-another-pages .modalbox-content').addClass('loading');

        $.ajax({
            url: mfnajaxurl,
            data: {
                'mfn-builder-nonce': wpnonce,
                action: 'getpageslist',
                pageid: pageid
            },
            type: 'POST',
            success: function(response){
                $('.modal-another-pages .modalbox-content').removeClass('loading');
                $('.modal-another-pages .modalbox-content').html(response);
            }
        });

    },

    search: function() {
        $editpanel.on('keyup paste change', '.modal-another-pages .modalbox-header .mfn-search', function() {
            var val = $(this).val().toLowerCase();

            if( val.length && val.length > 2 ){
                $(".modal-another-pages").addClass('mfn-another-pages-searching');

                $('.modal-another-pages .modalbox-content ul li').hide();
                $('.modal-another-pages .modalbox-content ul li[data-name*="'+val+'"]').show();

            }else{
                $(".modal-another-pages").removeClass('mfn-another-pages-searching');
                $('.modal-another-pages .modalbox-content ul li').removeAttr('style');
            }
        });
    }

}

// dynamic_data dynamic data

var dynamicData = {
    id: false,
    post_type: 'page',
    type: '',
    ls: function() {
        return localStorage.getItem('mfn-navigator') ? localStorage.getItem(`mfn-navigator`) : false;
    },
    init: function() {

        $(document).on('click', '.is_dynamic_data .mfn-button-dynamic-data', function(e) {
            e.preventDefault();
            dynamicData.id = $(this).closest('.mfn-form-row').attr('data-id');
            dynamicData.type = $(this).closest('.mfn-form-row').attr('data-dynamic');
            dynamicData.post_type = mfn.preview_post_type;
            dynamicData.open();
        });

        $editpanel.on('click', '.modal-dynamic-data:not(.mfn-dd-element-column, .mfn-dd-element-visual) .modalbox-content ul li a', function(e) {
            e.preventDefault();
            let dd_code = $(this).find('.mfn-dd-code').text();
            let type = $(this).attr('data-type');
            let this_val = $editpanel.find('.mfn-form-row[data-id="'+dynamicData.id+'"] .mfn-field-value').val();

            $('.modal-dynamic-data').removeClass('show');
            if($editpanel.find('.mfn-form-row[data-id="'+dynamicData.id+'"] .mfn-field-value').length) {

                if( type == 'featured_image' ){
                    $editpanel.find('.mfn-form-row[data-id="'+dynamicData.id+'"] .mfn-field-value').val(dd_code).trigger('change');
                }else{
                    $editpanel.find('.mfn-form-row[data-id="'+dynamicData.id+'"] .mfn-field-value').val(this_val+dd_code).trigger('change');
                }
            }
        });

        $editpanel.on('click', '.modal-dynamic-data .modalbox-content ul li .mfn-dd-copy', function(e) {
            e.preventDefault();
            let $el = $(this);
            let text = $el.siblings('a').find('.mfn-dd-code').html();

            navigator.clipboard.writeText(text);

            $el.attr('data-tooltip', 'Copied!');
            setTimeout(function() {
                $el.attr('data-tooltip', 'Copy');
            }, 1000);
        });

        dynamicData.search();
    },

    open: function() {

        let it = $('.mfn-element-fields-wrapper').attr('data-element');

        let label_prefix = 'Page';

        let $queried = $content.find('.'+it).closest('.mfn-looped-items');

        let dd_query_type = 'posts';
        let dd_posttype = mfn.post_type;
        label_prefix = dd_posttype;

        let dd_fields = [];

        // reset classes
        $('.modal-dynamic-data').attr('class', 'mfn-modal modal-dynamic-data');

        $('.modal-dynamic-data .mfn-dd-dynamic-ul').empty();
        $('.modal-dynamic-data .mfn-dd-global-ul').empty();
        $('.modal-dynamic-data .mfn-dd-user-ul').empty();
        $('.modal-dynamic-data .mfn-dd-author-ul').empty();

        $('.modal-dynamic-data .mfn-dd-type-wrapper-cleared').remove();

        if( $queried.length ) {
            $('.modal-dynamic-data').addClass('mfn-dd-looped-item');
        }

        $('.modal-dynamic-data').addClass('mfn-dd-'+dynamicData.type);
        $('.modal-dynamic-data').addClass('mfn-dd-element-'+edited_item.jsclass);

        if( $queried.length ) {
            let queried_obj = mfn.pagedata.filter( (item) => item.uid == $queried.attr('data-uid') )[0];

            dd_query_type = typeof queried_obj['attr']['query_type'] !== 'undefined' ? queried_obj['attr']['query_type'] : 'posts';

            if( dd_query_type == 'terms' ){
                dynamicData.post_type = false;
                dd_posttype = typeof queried_obj['attr']['query_terms_taxonomy'] !== 'undefined' ? queried_obj['attr']['query_terms_taxonomy'] : 'category';
                label_prefix = _.has(dynamic_data.labels, dd_posttype) ? dynamic_data.labels[dd_posttype] : 'Term';
            }else{
                dd_posttype = typeof queried_obj['attr']['query_post_type'] !== 'undefined' && queried_obj['attr']['query_post_type'] ? queried_obj['attr']['query_post_type'] : 'post';
                label_prefix = dd_posttype;
                dynamicData.post_type = dd_posttype;
            }
        }

        $('.modal-dynamic-data').addClass('mfn-dd-'+dd_query_type);

        // set dynamic options
        dd_fields = dynamic_data.dynamic[dd_query_type][dynamicData.type];

        if( typeof dynamic_data.dynamic[dd_query_type] !== 'undefined' && typeof dynamic_data.dynamic[dd_query_type][edited_item.type] !== 'undefined' && typeof dynamic_data.dynamic[dd_query_type][edited_item.type][dynamicData.type] !== 'undefined' ) {
            dd_fields = dd_fields.concat( dynamic_data.dynamic[dd_query_type][edited_item.type][dynamicData.type] );
        }

        if( dd_posttype != '' && typeof dynamic_data.dynamic[dd_query_type][dd_posttype] !== 'undefined' ) {

            if( typeof dynamic_data.dynamic[dd_query_type][dd_posttype][dynamicData.type] !== 'undefined' && dynamic_data.dynamic[dd_query_type][dd_posttype][dynamicData.type].length ) {
                // dynamic_data.dynamic[dd_query_type][dd_posttype][dynamicData.type].map( (el, i) => $('.modal-dynamic-data .mfn-dd-dynamic-ul').append('<li><span class="mfn-dd-copy" data-tooltip="Copy"><i class="far fa-copy"></i></span><a data-type="'+type+'" href="#"><span class="mfn-dd-label">'+label_prefix+' '+el.label+'</span><span class="mfn-dd-code">{'+el.key+'}</span></a></li>') );
                dd_fields = dd_fields.concat(dynamic_data.dynamic[dd_query_type][dd_posttype][dynamicData.type]);
            }

        }



        if( dd_fields.length ) {
            dd_fields.sort((a,b)=> (a.key > b.key ? 1 : -1));
            dd_fields.map( (el, i) => $('.modal-dynamic-data .mfn-dd-dynamic-ul').append('<li class="mfn-dd-li-'+el.key.replaceAll(':', '-').replaceAll('_', '-')+'" data-name="'+label_prefix+' '+el.label+' '+el.key+'"><span class="mfn-dd-copy" data-tooltip="Copy"><i class="far fa-copy"></i></span><a data-type="'+dynamicData.type+'" href="#"><span class="mfn-dd-label">'+label_prefix+' '+el.label+'</span><span class="mfn-dd-code">{'+el.key+'}</span></a></li>') );
        }

        if( typeof dynamic_data.user[dynamicData.type] != 'undefined' ) {
            dynamic_data.user[dynamicData.type].map( (el, i) => $('.modal-dynamic-data .mfn-dd-user-ul').append('<li><span class="mfn-dd-copy" data-tooltip="Copy"><i class="far fa-copy"></i></span><a data-type="'+dynamicData.type+'" href="#"><span class="mfn-dd-label">'+el.label+'</span><span class="mfn-dd-code">{'+el.key+'}</span></a></li>') );

        }

        if( dd_query_type == 'posts' && typeof dynamic_data.author[dynamicData.type] != 'undefined' ) {
            dynamic_data.author[dynamicData.type].map( (el, i) => $('.modal-dynamic-data .mfn-dd-author-ul').append('<li><span class="mfn-dd-copy" data-tooltip="Copy"><i class="far fa-copy"></i></span><a data-type="'+dynamicData.type+'" href="#"><span class="mfn-dd-label">'+el.label+'</span><span class="mfn-dd-code">{'+el.key+'}</span></a></li>') );
        }

        if( typeof dynamic_data.global[dynamicData.type] != 'undefined' ) {
            dynamic_data.global[dynamicData.type].map( (el, i) => $('.modal-dynamic-data .mfn-dd-global-ul').append('<li><span class="mfn-dd-copy" data-tooltip="Copy"><i class="far fa-copy"></i></span><a data-type="'+dynamicData.type+'" href="#"><span class="mfn-dd-label">'+el.label+'</span><span class="mfn-dd-code">{'+el.key+'}</span></a></li>') );
        }

        let content_html = '';

        

        if( dynamicData.post_type ){
            dynamicData.ajax(dynamicData.post_type, 'postmeta');
            content_html += `
              <div class="mfn-dd-notbg mfn-dd-type-wrapper mfn-dd-type-wrapper-cleared mfn-dd-type-wrapper-${dynamicData.post_type}-postmeta mfn-dd-type-wrapper-custom-fields">
                <h5>Custom fields</h5>
                <ul>
                </ul>
              </div>`;
        }



        if( mfn.post_types.length && !$queried.length ) {
          mfn.post_types.forEach(pt => {

            // get posts ajax

            dynamicData.ajax(pt.name, 'posts');
            
            content_html += `
              <div class="mfn-dd-notbg mfn-dd-type-wrapper mfn-dd-type-wrapper-cleared mfn-dd-dynamic-set mfn-dd-type-wrapper-${pt.name}-posts">
                <h5>${pt.label}</h5>
                <ul></ul>
              </div>`;

            if( _.has(pt, 'mfn_tax') ) {
              _.map(pt['mfn_tax'], function(tx) {
                if( _.has(tx, 'items') && tx.items.length ) {
                  content_html += `
                    <div class="mfn-dd-notbg mfn-dd-type-wrapper mfn-dd-type-wrapper-cleared mfn-dd-type-wrapper-${pt.name}-terms">
                      <h5>${tx.label}</h5>
                      <ul>
                        ${ _.map(tx.items, (i) => `
                          <li data-name="${escapeHtml(i.name.toLowerCase())}">
                            <span class="mfn-dd-copy" data-tooltip="Copy">
                              <i class="far fa-copy"></i>
                            </span>
                            <a href="#" data-subtype=":${i.term_id}:term" data-type="${dynamicData.type}">
                              <span class="mfn-dd-label">${i.name}</span>
                              <span class="mfn-dd-code">{${dynamicData.type}:${i.term_id}:term}</span>
                            </a>
                          </li>` ).join('') }
                      </ul>
                    </div>`;
                }
              });
            }
          });
        }

        $('.modal-dynamic-data .modalbox-content').append(content_html);

        //console.log(type);

        
        $('.modal-dynamic-data').addClass('show');


        // static options dynamic set
        $('.modal-dynamic-data .modalbox-content .mfn-dd-dynamic-set ul li a').each(function() {
            let subtype = $(this).attr('data-subtype');
            $(this).attr('data-type', dynamicData.type);
            $(this).find('.mfn-dd-code').text('{'+dynamicData.type+subtype+'}');

            if( $(this).closest('.mfn-dd-type-wrapper').hasClass('mfn-dd-type-wrapper-global') && label == 'image' ){
                // exception for logo
                $(this).find('.mfn-dd-label span').text('logo');
            }else{
                $(this).find('.mfn-dd-label span').text(dynamicData.type);
            }

        });

    },

    search: function() {

        $(document).on('keyup paste change', '.modal-dynamic-data .modalbox-header .mfn-search', function() {
            var val = $(this).val().toLowerCase();

            if( val.length ) {
                if( val.length > 2 ) {
                    $(".modal-dynamic-data").addClass('mfn-dynamic-searching');
                    $('.mfn-dd-type-wrapper').addClass('dd-type-hidden');

                    $('.modal-dynamic-data .modalbox-content ul li').hide();
                    $('.modal-dynamic-data .modalbox-content ul li[data-name*="'+val+'"]').closest('.mfn-dd-type-wrapper').show();
                    $('.modal-dynamic-data .modalbox-content ul li[data-name*="'+val+'"]').show();

                    $('.modal-dynamic-data .modalbox-content ul li[data-name*="'+val+'"]').closest('.mfn-dd-type-wrapper').removeClass('dd-type-hidden');

                }else{
                    $(".modal-dynamic-data").removeClass('mfn-dynamic-searching');
                    $('.mfn-dd-type-wrapper').removeClass('dd-type-hidden');

                    $('.modal-dynamic-data .modalbox-content ul li').removeAttr('style');
                    $('.modal-dynamic-data .modalbox-content .mfn-dd-type-wrapper').removeAttr('style');
                }
            }else{
                $(".modal-dynamic-data").removeClass('mfn-dynamic-searching');
                $('.mfn-dd-type-wrapper').removeClass('dd-type-hidden');

                $('.modal-dynamic-data .modalbox-content ul li').removeAttr('style');
                $('.modal-dynamic-data .modalbox-content .mfn-dd-type-wrapper').removeAttr('style');
            }
        });

    },

    ajax: function(post_type, data_type) {
        $.ajax({
            url: mfnajaxurl,
            data: {
                action: 'mfn_dynamic_get_items',
                'mfn-builder-nonce': wpnonce,
                type: data_type,
                post_type: post_type,
                search: $('.modal-dynamic-data .modalbox-header .mfn-search').val()
            },
            type: 'POST',
            success: function(response) {

                let obj_to_loop = _.has(response, post_type) && _.has(response[post_type], 'options') ? response[post_type]['options'] : response;

                if( obj_to_loop.length ) {
                    _.map( obj_to_loop, function(pt) {
                        if( data_type != 'postmeta' || ( !pt.startsWith('_') || ( pt.startsWith('_') && !response.includes(pt.slice(1)) ) ) ){

                        $('.modal-dynamic-data .mfn-dd-type-wrapper-'+post_type+'-'+data_type+' ul').append(`<li data-name="${ data_type == 'postmeta' ? escapeHtml(pt) : escapeHtml(pt.title.toLowerCase()) }">
                            <span class="mfn-dd-copy" data-tooltip="Copy">
                              <i class="far fa-copy"></i>
                            </span>
                            <a href="#" data-subtype=":${ data_type == 'postmeta' ? pt : pt.id }" data-type="${ data_type == 'postmeta' ? 'postmeta' : dynamicData.type }">
                              <span class="mfn-dd-label">${ data_type == 'postmeta' ? pt : pt.title }</span>
                              <span class="mfn-dd-code">{${ data_type == 'postmeta' ? 'postmeta' : dynamicData.type }:${ data_type == 'postmeta' ? pt : pt.id }}</span>
                            </a>
                          </li>`);
                        }
                    }).join('');
                }else{
                    $('.modal-dynamic-data .mfn-dd-type-wrapper-'+post_type+'-'+data_type).remove();
                }
            }

        });
    }
}





function switchPreview(preview_type) {
    $('.mfn-preview-toolbar .mfn-preview-opt').removeClass('btn-active');
    $('.mfn-preview-toolbar .mfn-preview-opt[data-preview="'+preview_type+'"]').addClass('btn-active');
    $('.mfn-visualbuilder').removeClass('preview-mobile preview-tablet preview-desktop preview-laptop');

    if(preview_type != 'desktop') {
        $('.mfn-visualbuilder').addClass('preview-'+preview_type)
    }

    screen = preview_type;

    if( sidebar_form.is_themeoptions ){
        sidebar_themeoptions.render();
    }else if( sidebar_form.is_pageoptions ){
        page_options_tab.render();
    }else{
        sidebar_form.render();
    }
    
    setSizeLabels();

    $('.sidebar-panel-footer .btn-change-resolution > a span:first-child').attr('class', 'mfn-icon mfn-icon-'+preview_type);

    if( $content.find('.mfn-current-editing').length && builder_type != 'header' ){
        setTimeout(function() {
            $content.find('html, body').animate({ scrollTop: $edited_div.offset().top - 50 }, 500);
        }, 100);
    }

    if( builder_type == 'header' && elements_ver == 'header-mobile' && screen !== 'mobile' ){
        //$('.mfn-preview-opt-header[data-preview="header-default"]').trigger('click');
        $('.mfn-preview-opt-header[data-preview="header-default"]').addClass('btn-active');
        $('.mfn-preview-opt-header[data-preview="header-mobile"]').removeClass('btn-active');
        elements_ver = 'default';
    }else if( screen == 'mobile' && elements_ver != 'header-mobile' && builder_type == 'header' && !$('.mfn-preview-opt-header[data-preview="header-mobile"]').hasClass('disabled') ){
        $('.mfn-preview-opt-header[data-preview="header-mobile"]').trigger('click');
    }else if( builder_type == 'header' && elements_ver == 'header-sticky' && screen !== 'mobile' ){
        headerTmpl.clickSticky();
    }

    if( $builder.find('.mfn-looped-items-slider-wrapper').length ){
        $builder.find('.mfn-looped-items-slider-wrapper').each(function() {
            re_render($(this).closest('.mcb-section').attr('data-uid'));
        });
    }

    be_layout.emptys.page();
}



let cart_tmpl = {
    init: function() {

        $('.mfn-cart-type-preview .mfn-preview-opt-cart').on('click', function(e) {
            e.preventDefault();
            if( $(this).hasClass('btn-active') ) return;

            let preview = $(this).attr('data-preview');

            $(this).siblings('a').removeClass('btn-active');
            $(this).addClass('btn-active');
            $builder.removeClass('mfn-cart-tmpl-not-empty mfn-cart-tmpl-empty');

            if( preview == 'cart-empty' ) {
                $builder.addClass('mfn-cart-tmpl-empty');
            }else{
                $builder.addClass('mfn-cart-tmpl-not-empty');
            }

            elements_ver = preview;
            be_layout.emptys.page();

        });

    }
}































let be_navigator = {
    width: 280,
    left: 0,
    border: function() {
        return (winW - be_navigator.width - 20)
    },

    ls: function() {
        return localStorage.getItem('mfn-navigator') ? JSON.parse(localStorage.getItem(`mfn-navigator`)) : false;
    },

    init: function() {
        // be_navigator.init()

        //console.log(be_navigator.ls());

        if( typeof be_navigator.ls() === 'object' ){
            be_navigator.open();
        }

        $('.btn-navigator-switcher').on('click', function(e) {
            e.preventDefault();
            if( $('body').hasClass('mfn-navigator-active') ){
                be_navigator.hide();
            }else{
                be_navigator.open();
            }
        });

        $(document).on('click', '.btn-navigator-hide', function(e) {
            e.preventDefault();
            be_navigator.hide();
        });

        $(document).on('click', '.btn-navigator-toggle-all', function(e) {
            e.preventDefault();
            if( $('.mfn-navigator').hasClass('mfn-navigator-toggled-all') ){
                $('.mfn-navigator').removeClass('mfn-navigator-toggled-all');
                $(this).children('span').attr('class', 'mfn-icon mfn-icon-list-collapsed');
                $(this).attr('data-tooltip', 'Expand');
            }else{
                $('.mfn-navigator').addClass('mfn-navigator-toggled-all');
                $(this).children('span').attr('class', 'mfn-icon mfn-icon-list-expanded');
                $(this).attr('data-tooltip', 'Collapse');
            }
        });

        be_navigator.ui();
        be_navigator.search();
    },

    show: function(uid, click = false) {
        //be_navigator.show()

        //console.log('nav show');

        if( !click ) be_navigator.open();

            if( $navigator.find('li.nav-'+uid+' > a').hasClass('active-element') ) return;

            $navigator.find('.active-element').removeClass('active-element');

            if( !$('.mfn-navigator').hasClass('mfn-navigator-toggled-all') ) {

                $navigator.find('li.nav-'+uid).siblings('li').removeClass('active');
                $navigator.find('li.nav-'+uid).closest('li.navigator-wrap').siblings('li').removeClass('active');

                if( $navigator.find('li.nav-'+uid).closest('li.navigator-wrap').closest('li.navigator-wrap').length )$navigator.find('li.nav-'+uid).closest('li.navigator-wrap').closest('li.navigator-wrap').siblings('li').removeClass('active');

                $navigator.find('li.nav-'+uid).closest('li.navigator-section').siblings('li').removeClass('active');

                if( $navigator.find('li.nav-'+uid).find('li.active').length ) {
                    $navigator.find('li.nav-'+uid).find('li').removeClass('active');
                }

                if( $navigator.find('li.nav-'+uid).closest('li.active').length ) {
                    $navigator.find('li.nav-'+uid).closest('li.active').removeClass('active');
                }

                //be_navigator.reset();

                $navigator.find('li.nav-'+uid).closest('li.navigator-section:not(.active)').addClass('active');
                $navigator.find('li.nav-'+uid).closest('li.navigator-wrap:not(.active)').addClass('active');
                $navigator.find('li.nav-'+uid).closest('li.navigator-wrap:not(.active)').closest('li.navigator-wrap:not(.active)').addClass('active')/*.children('ul').slideDown()*/;

                $navigator.find('li.nav-'+uid).addClass('active');

            }

            $navigator.find('li.nav-'+uid+' > a').addClass('active-element');

    },

    reset: function() {
        $('.mfn-navigator .navigator-tree li.active').find('ul').slideUp();
        $('.mfn-navigator .navigator-tree li.active').removeClass('active');
        $('.mfn-navigator .navigator-tree li .active-element').removeClass('active-element');
    },

    search: function() {
        $('.mfn-navigator-search-input').on('keyup paste change', function() {
            var val = $(this).val().replace(/ /g, '_').toLowerCase();
            if( val.length && val.length > 2 ){
                $(".mfn-navigator").addClass('mfn-nav-searching');
                $navigator.find('li').hide();
                $navigator.find('li.navitemtype[data-name*="'+val+'"]').closest('.navigator-section').show();
                $navigator.find('li.navitemtype[data-name*="'+val+'"]').closest('.navigator-wrap').show();
                $navigator.find('li.navitemtype[data-name*="'+val+'"]').parents('.mfn-sub-nav').show();
                $navigator.find('li.navitemtype[data-name*="'+val+'"]').show();
            }else{
                $navigator.find('li.navigator-section').show();
                $(".mfn-navigator").removeClass('mfn-nav-searching');
                $navigator.find('li').removeAttr('style');
                $navigator.find('li:not(.active) > .mfn-sub-nav').removeAttr('style');
            }
        });
    },

    open: function() {

        $('.mfn-navigator .navigator-tree').html('');

        if( $builder.find('.section.vb-item').length ){
            $builder.find('.section.vb-item').each(function() {
                let $section = $(this);
                var sect_attr = '';
                if( typeof $section.attr('id') !== 'undefined' ) sect_attr = $section.attr('id');
                if( $section.hasClass('mfn-global-section') ) sect_attr = 'Global';
                $('.mfn-navigator .navigator-tree').append( be_navigator.item('Section', $section.attr('data-uid'), sect_attr ));
                if( !$section.hasClass('mfn-global-section') && $section.find('.wrap.vb-item').length ) {
                    $('.mfn-navigator .navigator-tree li.nav-'+$section.attr('data-uid')).append('<ul class="mfn-sub-nav mfn-sub-nav-modules mfn-sub-nav-wraps"></ul>');

                    let $submenu_section = $('.mfn-navigator .navigator-tree li.nav-'+$section.attr('data-uid')+' .mfn-sub-nav');
                    $section.find('.wrap.vb-item:not(.mfn-nested-wrap)').each(function() {
                        let $wrap = $(this);

                        if( $wrap.hasClass('divider') ) {
                            $submenu_section.append( be_navigator.item('Divider', $wrap.attr('data-uid'), '') );
                        }else{

                            let wrap_label = 'Wrap';
                            //if( typeof $wrap.attr('id') !== 'undefined' ) wrap_label += '#'+$wrap.attr('id');

                            const metaLabel = $wrap.hasClass('mfn-global-wrap')
                              ? 'Global'
                              : (
                                  typeof $wrap.attr('id') !== 'undefined'
                                    ? '#' + $wrap.attr('id')
                                    : $wrap.attr('data-desktop-size')
                                );

                            $submenu_section.append(
                              be_navigator.item(
                                wrap_label,
                                $wrap.attr('data-uid'),
                                metaLabel
                              )
                            );

                            if( !$wrap.hasClass('mfn-global-wrap') ) {

                                $('.mfn-navigator .navigator-tree li.nav-'+$wrap.attr('data-uid')).append('<ul class="mfn-sub-nav mfn-sub-nav-modules mfn-sub-nav-items"></ul>');

                                if( $wrap.find('.mfn-module.vb-item').length ) {

                                    let $submenu_wrap = $('.mfn-navigator .navigator-tree li.nav-'+$wrap.attr('data-uid')+' .mfn-sub-nav');

                                    let $wrap_childs = $wrap.children('.mcb-wrap-inner');

                                    if( !$wrap_childs.children('.mfn-module.vb-item').length ) {
                                        $wrap_childs = $wrap_childs.children('div');
                                    }

                                    if( !$wrap_childs.children('.mfn-module.vb-item').length ) {
                                        $wrap_childs = $wrap_childs.children('div');
                                    }

                                    $wrap_childs.children('.mfn-module.vb-item').each(function() {
                                        let $item = $(this);
                                        let itemObj = mfn.pagedata.filter( (item) => item.uid == $item.attr('data-uid') )[0];

                                        if( $item.hasClass('mcb-column') ) {
                                            $submenu_wrap.append( be_navigator.item(itemObj.jsclass.replace('_2', ''), $item.attr('data-uid'), $item.attr('data-desktop-size')) );
                                        }else{

                
                                            const metaLabel = $item.hasClass('mfn-global-wrap')
                                              ? 'Global'
                                              : (
                                                  typeof $item.attr('id') !== 'undefined'
                                                    ? '#' + $item.attr('id')
                                                    : $item.attr('data-desktop-size')
                                                );

                                            $submenu_wrap.append( be_navigator.item('Wrap', $item.attr('data-uid'), metaLabel) );

                                            $('.mfn-navigator .navigator-tree li.nav-'+$item.attr('data-uid')).append('<ul class="mfn-sub-nav mfn-sub-nav-modules mfn-sub-nav-items"></ul>');
                                            if( $item.find('.vb-item').length ){

                                                let $submenu_nested_wrap = $('.mfn-navigator .navigator-tree li.nav-'+$item.attr('data-uid')+' .mfn-sub-nav');

                                                 $item.find('.vb-item').each(function() {

                                                    let $nested_item = $(this);
                                                    
                                                    if( !mfn.pagedata.filter( (item) => item.uid == $nested_item.attr('data-uid') ).length ) return;

                                                    let n_itemObj = mfn.pagedata.filter( (item) => item.uid == $nested_item.attr('data-uid') )[0];

                                                    $submenu_nested_wrap.append( be_navigator.item(n_itemObj.jsclass.replace('_2', ''), $nested_item.attr('data-uid'), $nested_item.attr('data-desktop-size')) );

                                                 });

                                            }

                                        }

                                    });
                                }
                            }
                        }

                    });
                }
            });
        }

        $('body').addClass('mfn-navigator-active');

        if( !be_navigator.ls() ){
            localStorage.setItem( 'mfn-navigator', JSON.stringify({'left': '50%', 'top': '50%'}) );
        }else if( typeof be_navigator.ls() === 'object' ){
            $('.mfn-navigator').css( be_navigator.ls() );
        }

        be_navigator.sortable.init();
    },

    sortable: {

        // be_navigator.sortable.init();

        connect_with: ".mfn-navigator .mfn-sub-nav-modules",

        timer: false,

        init: function() {
            be_navigator.sortable.section();
            // be_navigator.sortable.modules();

            $('.mfn-navigator .navigator-tree li a').on('mouseenter', function() {

                $('.mfn-navigator ul.mfn-sub-nav-last-level').removeClass('mfn-sub-nav-last-level');

                if( $(this).parent('li').hasClass('navigator-item') ) {
                    be_navigator.sortable.connect_with = ".mfn-navigator .navigator-wrap .mfn-sub-nav-modules";
                }else if( ($(this).parent('li').hasClass('navigator-wrap') && builder_type == 'header') || ($(this).parent('li').hasClass('navigator-wrap') && $(this).parent('li.navigator-wrap').find('.navigator-wrap').length) ) {
                    be_navigator.sortable.connect_with = ".mfn-navigator .mfn-sub-nav-wraps";
                }else if( $(this).parent('li').hasClass('navigator-wrap') ) {
                    $('.mfn-navigator ul li.navigator-wrap li.navigator-wrap ul').each(function() { $(this).addClass('mfn-sub-nav-last-level'); });
                    be_navigator.sortable.connect_with = ".mfn-navigator .mfn-sub-nav-modules:not(.mfn-sub-nav-last-level)";
                }

                //if( !$(".mfn-navigator").hasClass('mfn-sortable-modules-started') && $(this).closest('ul').attr('style') === 'undefined' ) $(this).closest('ul').css('min-height', $(this).closest('ul').outerHeight());

                setTimeout(function() { be_navigator.sortable.modules(); }, 5);

            });
        },

        section: function() {
            $(".mfn-navigator .navigator-tree").sortable({
                axis: 'y',
                //placeholder: "mfn-nav-sortable-placeholder",
                forcePlaceholderSize: true,
                containment: ".mfn-navigator",
                update: function( event, ui ) {

                    if( ui.sender ) return;

                    let $section = $builder.find('.mcb-section-'+ui.item.children('a').attr('data-uid'));

                    if( ui.item.prev('li').length ){
                        let target = ui.item.prev('li').children('a').attr('data-uid');
                        let $section_target = $builder.find('.mcb-section-'+target);
                        $section_target.after( $section.clone(true) );
                    }else{
                        let target = ui.item.next('li').children('a').attr('data-uid');
                        let $section_target = $builder.find('.mcb-section-'+target);
                        $section_target.before( $section.clone(true) );
                    }

                    //$section.find('.mfn-header').first().find('.mfn-element-edit').trigger('click');
                    $section.remove();
                    historyStorage.add()
                }
            });
        },

        modules: function() {
            $(".mfn-navigator .mfn-sub-nav-modules").sortable({
                axis: 'y',
                //placeholder: "ui-sortable-placeholder",
                forcePlaceholderSize: true,
                connectWith: be_navigator.sortable.connect_with,
                containment: ".mfn-navigator",

                start: function( event, ui ) {
                    $(".mfn-navigator").addClass('mfn-sortable-modules-started');
                },

                stop: function( event, ui ) {
                    $(".mfn-navigator").removeClass('mfn-sortable-modules-started');
                    $('.mfn-navigator .navigator-section.hover').removeClass('hover');
                    be_navigator.sortable.timer = false;
                },

                over: function( event, ui ) {

                    $('.mfn-navigator .hover').removeClass('hover');

                    be_navigator.sortable.timer = false;

                    if( !ui.placeholder.closest('.navigator-section').hasClass('active') ) ui.placeholder.closest('.navigator-section').addClass('hover');
                    if( !ui.placeholder.closest('ul').closest('li').hasClass('active') ) ui.placeholder.closest('ul').closest('li').addClass('hover');
                    //if( !ui.placeholder.closest('ul').closest('li').hasClass('hover') ) ui.placeholder.closest('ul').closest('li').addClass('hover')

                    if( !$('.mfn-navigator').hasClass('mfn-navigator-toggled-all') && !ui.placeholder.closest('ul').closest('li').hasClass('active') ) {

                        be_navigator.sortable.timer = setTimeout(function() {
                            if( !ui.placeholder.closest('.navigator-section').hasClass('active') ) ui.placeholder.closest('.navigator-section').addClass('active');
                            ui.placeholder.closest('ul').closest('li').addClass('active');
                            $('.mfn-navigator .hover').removeClass('hover');

                            setTimeout(function() { $(".mfn-navigator .mfn-sub-nav-modules").sortable('refreshPositions'); },200);

                        }, 1000);

                    }
                },

                out: function( event, ui ) {
                    be_navigator.sortable.timer = false;
                },

                update: function( event, ui ) {

                    if( ui.sender ) return;

                    $(".mfn-navigator").removeClass('mfn-sortable-modules-started');
                    //$('.mfn-navigator ul').removeAttr('style');

                    be_navigator.sortable.timer = false;

                    //ui.item.children('a').trigger('click');
                    let $item = $builder.find('.vb-item[data-uid="'+ui.item.children('a').attr('data-uid')+'"]');

                    if( ui.item.prev('li').length ) {
                        let target = ui.item.prev('li').children('a').attr('data-uid');
                        let $item_target = $builder.find('.vb-item[data-uid="'+target+'"]');
                        $item_target.after( $item.clone(true) );
                    }else if( ui.item.next('li').length ){
                        let target = ui.item.next('li').children('a').attr('data-uid');
                        let $item_target = $builder.find('.vb-item[data-uid="'+target+'"]');
                        $item_target.before( $item.clone(true) );
                    }else{
                        let target = ui.item.closest('ul').closest('li').children('a').attr('data-uid');
                        let $wrap_target = $builder.find('.vb-item[data-uid="'+target+'"] > .mfn-module-wrapper').length ? $builder.find('.vb-item[data-uid="'+target+'"] > .mfn-module-wrapper') : $builder.find('.vb-item[data-uid="'+target+'"] > .mfn-wrapper-for-wraps') ;
                        $wrap_target.append( $item.clone(true) );
                    }

                    if( $item.closest('.mcb-section').hasClass('mfn-section-tabber') ) {

                        setTimeout(function() {
                            re_render($item.closest('.mfn-section-tabber').attr('data-uid'));
                        }, 200);
                        
                    }
                      
                    //$item.find('.mfn-element-edit').trigger('click');

                    $item.remove();
                    historyStorage.add()

                    be_layout.emptys.sections();
                    be_layout.emptys.wraps();
                }

            });
        }
    },

    ui: function() {

        let screen_border = be_navigator.border();

        $(".mfn-navigator").draggable({
            handle: ".modalbox-header",
            start: function( event, ui ) {
                $('body').removeClass('mfn-navigator-fixed');
                $('.mfn-ui').addClass('mfn-navigator-dragging');
            },
            stop: function( event, ui ) {
                $('.mfn-visualbuilder').removeClass('mfn-navigator-placeholder');
                $('.mfn-ui').addClass('mfn-navigator-dragging-end');

                setTimeout(function() {
                    $('.mfn-ui').removeClass('mfn-navigator-dragging-end');
                    $('.mfn-ui').removeClass('mfn-navigator-dragging');
                }, 300);

                localStorage.setItem( 'mfn-navigator', JSON.stringify({left: ui.position.left, top: ui.position.top}) );

                if( be_navigator.left >= screen_border ) {
                    $('body').addClass('mfn-navigator-fixed');
                    settings.save('navigator-position', '1');
                    $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="navigator-position"] li:last-child').addClass('active').siblings().removeClass('active');
                }else{
                    $('body').removeClass('mfn-navigator-fixed');
                    settings.save('navigator-position', '');
                    $('.mfn-ui .panel-settings .mfn-form .settings .form-control[data-option="navigator-position"] li:first-child').addClass('active').siblings().removeClass('active');
                }

            },
            drag: function( event, ui ) {

                be_navigator.left = ui.position.left;

                if( be_navigator.left >= screen_border ) {
                    $('.mfn-visualbuilder').addClass('mfn-navigator-placeholder');
                }else{
                    $('.mfn-visualbuilder').removeClass('mfn-navigator-placeholder');
                }

            }

        });

        $( ".mfn-navigator" ).resizable({
            maxHeight: winH,
            maxWidth: 600,
            minHeight: 300,
            minWidth: 250
        });

        $(document).on('click', '.mfn-navigator .navigator-tree .navigator-arrow', function(e) {
            var $li = $(this).closest('li');

            if( $('.mfn-navigator').hasClass('mfn-navigator-toggled-all') ) return;

            $li.toggleClass('active');

            if( $navigator.hasClass('mfn-nav-searching') ) {
                $navigator.find('li').removeAttr('style');
                $navigator.find('li:not(.active) > .mfn-sub-nav').removeAttr('style');
                $navigator.removeClass('mfn-nav-searching');
            }

        });

        $(document).on('click', '.mfn-navigator .navigator-tree li > a', function(e) {
            e.preventDefault();

            if( $(this).hasClass('active-element') ) return;
            sidebar_form.is_class = false;

            let uid = $(this).attr('data-uid');

            let this_el = $builder.find('.vb-item[data-uid="'+uid+'"]');

            this_el.find('.mfn-header').first().find('.mfn-element-edit').trigger('click');

            $content.find('html, body').stop();
            if( builder_type != 'header' ) $content.find('html, body').animate({ scrollTop: this_el.offset().top - 50 }, 500);

            /*$content.find('html, body').stop();

            var uid = $(this).attr('data-uid');
            $edited_div = $content.find('.vb-item[data-uid="'+uid+'"]');

            if( $('.mfn-navigator .navigator-tree li a.active-element').length ) {
                $('.mfn-navigator .navigator-tree li a.active-element').removeClass('active-element');
            }

            sidebar_form.is_class = false;

            //Global section, prevent opening edit form, leave scroll only
            if( !$(this).closest('.toggle-disabled').length ) {
                sidebar_form.open($edited_div, true);
            } else {
                backToWidgets();
            }

            if( builder_type != 'header' ) $content.find('html, body').animate({ scrollTop: $edited_div.offset().top - 50 }, 500);

            $(this).addClass('active-element');
            if( !$(this).parent('li').hasClass('active') ) $(this).parent('li').addClass('active');*/

        });

    },

    hide: function() {
        $('body').removeClass('mfn-navigator-active');
        localStorage.removeItem('mfn-navigator');
    },

    item: function(type, uid, size = false) {
        //navigatorHtml();
        // be_navigator.item()

        let el = mfn.pagedata.filter( (item) => item.uid == uid )[0];

        if( typeof el === 'undefined' ) return;

        if( type == 'Section' ) {

            $html = '<li class="'+(size && size == 'Global' ? 'navigator-section navigator-section-global' : 'navigator-section')+' nav-'+uid+'"><a data-uid="'+uid+'" href="#"><span class="navigator-link-label">'+(size && size !== '' ? '#'+size : 'Section');

            if( size && size == 'Global' ){
                $html += '<span class="navigator-section-id">Global</span>';
            }

            $html += '</span></a>';

            $html += '<div class="nav-item-tools">';

            if( (!size || size != 'Global') && _.has(el, 'attr') ){

                if( _.has(el['attr'], 'visibility') ){
                    $html += be_navigator.responsive(el['attr']['visibility'], uid);
                }

                if( _.has(el['attr'], 'hide') && el.attr.hide ) $html += '<span class="mfn-icon mfn-icon-hide"></span>';
                $html += '<span class="navigator-arrow"><i class="icon-down-open-big"></i></span>';

            }

            $html += '</div>';

            $html += '</li>';
        }else if( type == 'Wrap'){
            $html = '<li class="'+(size && size == 'Global' ? 'navigator-wrap navigator-wrap-global' : 'navigator-wrap')+' nav-'+uid+'"><a data-uid="'+uid+'" href="#"><span class="navigator-link-label">'+type+'</span> <span class="navigator-size-label">'+size+'</span></a><div class="nav-item-tools">';

            if( _.has(el['attr'], 'visibility') ){
                $html += be_navigator.responsive(el['attr']['visibility'], uid);
            }

            $html += '<span class="navigator-arrow"><i class="icon-down-open-big"></i></span></div></li>';
        }else{
            $html = '<li data-name="'+type.replace('_', '-')+'" class="navigator-item nav-'+uid+' navitemtype"><a data-uid="'+uid+'" href="#"><span class="mfn-icon mfn-icon-'+type.replaceAll('_', '-').replaceAll(' ', '-')+'"></span><span class="navigator-link-label">'+type.replaceAll('thankyou', '').replaceAll('_', ' ')+'</span></a>';

            $html += '<div class="nav-item-tools">';

            if( _.has(el['attr'], 'visibility') ){
                $html += be_navigator.responsive(el['attr']['visibility'], uid);
            }

            $html += '</div>';

            $html += '</li>';
        }

        return $html;

    },
    responsive: function( resp, uid, append = false ){

        let html = '';

        let visi = resp.split(' ');

        if( visi.length ){
            _.map(visi, function(opt) {
                if( opt.length ) html += '<span class="mfn-nav-responsive-icon mfn-icon mfn-icon-'+opt.replace('hide-', '')+'"></span>';
            });
        }

        if( !append ){
            return html;
        }else{
            $('.mfn-navigator .navigator-tree li.nav-'+uid+' > .nav-item-tools .mfn-nav-responsive-icon').remove();
            $('.mfn-navigator .navigator-tree li.nav-'+uid+' > .nav-item-tools').prepend(html);
        }


    }
}






























// end preview

// revisions

$('.mfn-revisions-opt').on('click', function(e) {
    e.preventDefault();
    $('.mfn-revisions-opt').removeClass('active');
    $(this).addClass('active');
    $(".panel").hide();
    $('.revisions-current').text($(this).text());
    let filtr = $(this).data('filter');
    $('.'+filtr).show();
});


$('.sidebar-panel #mfn-widgets-list .mfn-search').on('focus', function() {
    //$('.mfn-visualbuilder .sidebar-panel-content ul.items-list li').show();
    $('.mfn-filter-items').removeClass('active');
    $('.mfn-filter-items[data-filter="all"]').addClass('active');
    $('.filter-items-current').text($('.mfn-filter-items[data-filter="all"]').text());
});

$('.sidebar-panel #mfn-widgets-list .mfn-search').on('keyup change', function() {
    let val = $(this).val().toLowerCase();

    if( val.length ){
        $('.mfn-visualbuilder .sidebar-panel .sidebar-panel-content #mfn-widgets-list .mfn-widgets-group').hide();
        $('.mfn-visualbuilder .sidebar-panel .sidebar-panel-content #mfn-widgets-list ul li').hide();
        if($('.mfn-visualbuilder .sidebar-panel .sidebar-panel-content #mfn-widgets-list ul li[data-tags*="'+val+'"]').closest('.mfn-widgets-group').length) $('.mfn-visualbuilder .sidebar-panel .sidebar-panel-content #mfn-widgets-list ul li[data-tags*="'+val+'"]').closest('.mfn-widgets-group').show();
        $('.mfn-visualbuilder .sidebar-panel .sidebar-panel-content #mfn-widgets-list ul li[data-tags*="'+val+'"]').show();
    }else{
        $('.mfn-visualbuilder .sidebar-panel .sidebar-panel-content #mfn-widgets-list .mfn-widgets-group').show();
        $('.mfn-visualbuilder .sidebar-panel .sidebar-panel-content #mfn-widgets-list ul li').show();
    }

});


// filter items

$('.mfn-filter-items').on('click', function(e) {
    e.preventDefault();
    $('.mfn-filter-items').removeClass('active');
    $(this).addClass('active');
    $('.filter-items-current').text($(this).text());
    let filtr = $(this).attr('data-filter');

    $('.sidebar-panel #mfn-widgets-list .mfn-search').val('').trigger('change');

    if(filtr == 'all'){
        $('.mfn-visualbuilder .sidebar-panel-content ul.items-list li').show();
    }else{
        $('.mfn-visualbuilder .sidebar-panel-content ul.items-list li').hide();
        $('.mfn-visualbuilder .sidebar-panel-content ul.items-list li.'+filtr).show();
    }
});

// back to widgets

$("li.menu-items a ").on('click', function(e) {
    e.preventDefault();
    backToWidgets();
});
$('.back-to-widgets').on('click', function(e) {
    e.preventDefault();
    backToWidgets();
});

// close modal icon

$editpanel.on('click', '.mfn-modal .btn-modal-close', function(e) {
    e.preventDefault();
    $(this).closest('.mfn-modal').removeClass('show');
    if( !$('.mfn-modal.show').length ){
        $('.mfn-ui').removeClass('.mfn-modal-open');
        $('body').removeClass('.mfn-modal-open');
    }
});

// modal icon

$(document).on('change', '.mfn-ui .modal-select-icon .modalbox-search .mfn-form-select', function() {
    let choosed = $(this).val();
    if( $('.mfn-ui .modal-select-icon .modalbox-search .mfn-search').val() != '' ){
        $('.mfn-ui .modal-select-icon .modalbox-search .mfn-search').val('');
        iconsList.search();
    }
    $('.mfn-ui .modal-select-icon .modalbox-content ul.mfn-items-list li').hide();
    $('.mfn-ui .modal-select-icon .modalbox-content ul.mfn-items-list li.'+choosed).show();
});

$(document).on('keyup', '.modal-select-icon .mfn-search', function() {
    let val = $(this).val().toLowerCase();

    if( !val.length ) {
        $('.modal-select-icon .mfn-items-list li').removeAttr('style');
        return;
    }

    $('.modal-select-icon .mfn-items-list li').hide();
    $('.modal-select-icon .mfn-items-list li[data-rel*="'+val+'"]').show();

});


// show prebuilts

$("li.menu-sections a ").on('click', function(e) {
    e.preventDefault();
    showPrebuilts();
    // resetSaveButton();
});

// show revisions

$(".mfn-visualbuilder ul li.menu-revisions a ").on('click', function(e) {
    e.preventDefault();
    if( mfn.view == 'demo' ) return;

    $(".panel").hide();
    $(".header").hide();
    $(".panel-revisions").show();
    $(".header-revisions").show();
    $('.mfn-revisions-opt').removeClass('active');

    if( ui_mode == 'dev' ){
        $(this).closest('li').siblings('li').removeClass('active');
        $(this).closest('li').addClass('active');
    }

    $('.mfn-revisions-opt').first().trigger('click');
    // resetSaveButton();
});

// show import export
$(".mfn-export-get").on('click', function(e) {
    e.preventDefault();
    if( mfn.view == 'demo' ) return;
    $('.mfn-export-import-opt').removeClass('active');
    updateExportInput();
    $(".panel").hide();
    $(".header").hide();
    $('.export-import-current').text($('.mfn-export-import-opt').first().text());
    $('.mfn-export-import-opt').first().addClass('active');
    $(".panel-export-import").show();
    $(".header-export-import").show();

    if( ui_mode == 'dev' ){
        $(this).closest('li').siblings('li').removeClass('active');
        $(this).closest('li').addClass('active');
    }

    // resetSaveButton();
});



// show single page import
$("li.menu-page a ").on('click', function(e) {
    e.preventDefault();
    if( mfn.view == 'demo' ) return;
    $('.mfn-export-import-opt').removeClass('active');
    $(".panel").hide();
    $(".header").hide();
    $('.export-import-current').text($('.mfn-export-import-opt[data-filter="panel-export-import-single-page"]').text());
    $('.mfn-export-import-opt[data-filter="panel-export-import-single-page"]').addClass('active');
    $(".panel-export-import-single-page").show();
    $(".header-export-import").show();

    if( ui_mode == 'dev' ){
        $(this).closest('li').siblings('li').removeClass('active');
        $(this).closest('li').addClass('active');
    }
    // resetSaveButton();
});

// show settings
$('.mfn-settings-tab').on('click', function(e) {
    e.preventDefault();
    if (mfn.view == 'demo') return;

    $('.mfn-ui').addClass('mfn-sidebar-hidden-footer');

    $(".panel").hide();
    $(".header").hide();
    $(".panel-settings").show();
    $(".header-settings").show();

    if( ui_mode == 'dev' ){
        $('.topbar-nav #main-menu li').removeClass('active');
        $('.topbar-nav li.menu-settings').addClass('active');
    }

    if( $builder.find('.mfn-current-editing').length ) $builder.find('.mfn-current-editing').removeClass('mfn-current-editing');
    if( $('.mfn-ui').hasClass('mfn-class-editor') ) $('.mfn-ui').removeClass('mfn-class-editor');
    if( $content.find('body').hasClass('mfn-class-editor-preview') ) $content.find('body').removeClass('mfn-class-editor-preview');
    if( $('.mfn-ui').hasClass('mfn-class-editor-full') ) $('.mfn-ui').addClass('mfn-class-editor-full');

    // resetSaveButton();
});



let page_options_tab = {
    init: function() {
        $(document).on('click', '.mfn-view-options-tab', function(e) {
            e.preventDefault();
            if (mfn.view == 'demo') return;

            /*if( sidebar_form.wyswig_active && !copypaste.uid ) {
                if( $editpanel.find( '.mfn-form .html-editor' ).length ) MfnFieldTextarea.destroy();
                if( $editpanel.find( '.mfn-form .visual-editor' ).length ) tinymce.execCommand( 'mceRemoveEditor', false, 'mfn-editor' );
            }*/

            if( sidebar_form.wyswig_active && !copypaste.uid ) {
                if( $editpanel.find( '.sidebar-panel .mfn-form .html-editor' ).length ) MfnFieldTextarea.destroy();
                if( $editpanel.find( '.sidebar-panel .mfn-form .visual-editor' ).length ) tinymce.execCommand( 'mceRemoveEditor', false, 'mfn-editor' );
            }

            sidebar_form.wyswig_active = false;

            $(".panel").hide();
            $(".header").hide();
            $(".panel-view-options").show();
            $(".header-view-options").show();
            if( $builder.find('.mfn-current-editing').length ) $builder.find('.mfn-current-editing').removeClass('mfn-current-editing');
            edited_item = mfn.page_options;
            //$('.mfn-ui .panel-view-options .mfn-form.mfn-form-options').html( mfnDbLists.pageoptions( edited_item ) );

            //console.log(edited_item);

            if( ui_mode == 'dev' ){
                $('.topbar-nav #main-menu li').removeClass('active');
                $('.topbar-nav li.menu-settings').addClass('active');
            }

            sidebar_form.is_themeoptions = false;
            sidebar_form.is_class = false;
            sidebar_form.is_pageoptions = true;

            page_options_tab.render();

            $('style.mfn-fields-switcher-normal-hover').remove();
            $('body').append('<style class="mfn-builder-fields-css mfn-fields-switcher-normal-hover">.mfn-ui .mfn-form .mfn-sft-nav li:first-child a{background: var(--mfn-ui-sft-nav-tab-bg-active); color: var(--mfn-ui-sft-nav-tab-color-active);} .mfn-ui .mfn-form .mfn-sft.mfn-sft-normal{display: block;}</style>');

        });
    },

    render: function() {
        if( sidebar_form.no_render ) return;
        //console.log('page option render');

        $('.mfn-ui .panel-view-options .mfn-form.mfn-form-options').html('');

        const mfn_form_po = new MfnForm( mfn.pageoptions );
        let form_html = mfn_form_po.render();

        $('.mfn-ui .panel-view-options .mfn-form.mfn-form-options').html('<div class="page-options-form-wrapper">'+form_html+'</div>');

        sidebar_form.after();
        mfnoptsinputs.start();
        MfnFieldTextarea.initForCSSandJS();

        /**
         * Slider bar
        * */

        if( $('.panel-view-options .mfn-form .mfn-form-row .sliderbar:not(.mfn-initialized)').length ) {
            $('.panel-view-options .mfn-form .mfn-form-row .sliderbar:not(.mfn-initialized)').each(function() {
                sliderInput.init($(this));
            });
        }
        
    }
}


$(document).on('click', '.mfn-copytoclipboard', function(e) {
    e.preventDefault();

    if( typeof $(this).attr('data-clipboard') === 'undefined' ) return;
    let cb = $(this).attr('data-clipboard');
    let $link = $(this);
    navigator.clipboard.writeText(cb);
    $link.attr('data-tooltip', 'Copied');

    setTimeout(function() {
        $link.attr('data-tooltip', 'Click to copy to clipboard');
    }, 3000);
});

$(document).on('click', '.sidebar-menu-inner ul li:not(.menu-wordpress) a', function() {

    if( $(this).hasClass('mfn-settings-tab') ){
        $('.mfn-ui').addClass('mfn-sidebar-hidden-footer');
    }else{
        $('.mfn-ui').removeClass('mfn-sidebar-hidden-footer');
    }

    if( $builder.find('.mfn-current-editing').length ) $builder.find('.mfn-current-editing').removeClass('mfn-current-editing');
    if( $('.mfn-ui').hasClass('mfn-class-editor') ) $('.mfn-ui').removeClass('mfn-class-editor');
    if( $content.find('body').hasClass('mfn-class-editor-preview') ) $content.find('body').removeClass('mfn-class-editor-preview');
    if( $('.mfn-ui').hasClass('mfn-class-editor-full') ) $('.mfn-ui').addClass('mfn-class-editor-full');
});

/**
* Inlimited custom fonts
* mfnNewFont()
*/

var mfnNewFont = {

    hiddenInput: $('.mfn-form-themeoptions .themeoption.font-custom-fields input'),

    getCardsAmount: () => $('.mfn-form-themeoptions #themeoptions-font-custom').find('h5').length,

    html: function() {

        let i = mfnNewFont.getCardsAmount();

        return `<div class="mfn-form-row mfn-form-row themeoption"><h5 class="row-header-title">Font ${i}</h5></div>

            <div class="mfn-form-row mfn-form-row themeoption font-custom${i}" data-id="font-custom${i}" data-name="font-custom${i}">
                <label class="form-label form-label-wrapper">Name<a class="mfn-option-btn mfn-option-blank mfn-fr-help-icon" target="_blank" data-tooltip="Toggle description" href="#"><span class="mfn-icon mfn-icon-desc"></span></a></label>
            <div class="desc-group"><span class="description">Name for Custom Font uploaded below.<br>Font will show on fonts list after <b>click the Save Changes</b> button.</span></div>
            <div class="form-group">
                <div class="form-control">
                    <input name="font-custom${i}" class="mfn-form-control mfn-form-input mfn-field-value preview-font-custom${i}input" type="text" placeholder="" value="" autocomplete="off">
                </div>
            </div>
        </div>

        <div class="mfn-form-row mfn-form-row themeoption font-custom${i}-woff" data-id="font-custom${i}-woff" data-name="font-custom${i}-woff">
                    <label class="form-label form-label-wrapper">.woff<a class="mfn-option-btn mfn-option-blank mfn-fr-help-icon" target="_blank" data-tooltip="Toggle description" href="#"><span class="mfn-icon mfn-icon-desc"></span></a></label>
                    <div class="desc-group"><span class="description">WordPress 5.0 blocks .woff upload. Please use <a target="_blank" href="plugin-install.php?s=Disable+Real+MIME+Check&amp;tab=search&amp;type=term">Disable Real MIME Check</a> plugin.</span></div>
                    <div class="form-content has-icon has-icon-right"><div class="form-group browse-image has-addons has-addons-append empty">
        <div class="form-control">
            <input class="mfn-form-control mfn-field-value mfn-form-input preview-font-custom${i}-woffinput" type="text" name="font-custom${i}-woff" value="" data-type="font">

            <a class="mfn-option-btn mfn-button-delete" title="Delete" href="#"><span class="mfn-icon mfn-icon-delete"></span></a>
        </div>

        <div class="form-addon-append browse-image-single">
            <a href="#" class="mfn-button-upload"><span class="label">Browse</span></a>
        </div>

        <div class="break"></div>
        <div class="selected-image">

        </div>
    </div></div>
    </div>

    <div class="mfn-form-row mfn-form-row themeoption font-custom${i}-ttf" data-id="font-custom${i}-ttf" data-name="font-custom${i}-ttf">
                    <label class="form-label form-label-wrapper">.ttf<a class="mfn-option-btn mfn-option-blank mfn-fr-help-icon" target="_blank" data-tooltip="Toggle description" href="#"><span class="mfn-icon mfn-icon-desc"></span></a></label>
                    <div class="desc-group"><span class="description">WordPress 5.0 blocks .ttf upload. Please use <a target="_blank" href="plugin-install.php?s=Disable+Real+MIME+Check&amp;tab=search&amp;type=term">Disable Real MIME Check</a> plugin.</span></div>
                    <div class="form-content has-icon has-icon-right"><div class="form-group browse-image has-addons has-addons-append empty">
        <div class="form-control">
            <input class="mfn-form-control mfn-field-value mfn-form-input preview-font-custom${i}-ttfinput" type="text" name="font-custom${i}-ttf" value="" data-type="font">

            <a class="mfn-option-btn mfn-button-delete" title="Delete" href="#"><span class="mfn-icon mfn-icon-delete"></span></a>
        </div>

        <div class="form-addon-append browse-image-single">
            <a href="#" class="mfn-button-upload"><span class="label">Browse</span></a>
        </div>

        <div class="break"></div>
        <div class="selected-image">

        </div>
    </div></div>
                </div>

                `;
    },

    init: function() {
        $(document).on('click', '.mfn-form-themeoptions .mfn_new_font.themeoption a', function(e) {
            e.preventDefault();
            $(this).closest('.themeoption').before(mfnNewFont.html());
        });
    }
}

mfnNewFont.init();

$(document).on('click', '.mfn-checkbox', function(e) {
    e.preventDefault();
    let opt = $(this);
    if( opt.hasClass('active') ) {
        opt.removeClass('active');
        if( opt.find('input[type="checkbox"]').length ) opt.find('input[type="checkbox"]').prop('checked', false).trigger('change');
        if( opt.closest('.mfn-publication-opt-wrapper').length ) {
            opt.closest('.mfn-publication-opt-wrapper').removeClass('mfn-opt-active'); // popup publication dates
            opt.closest('.mfn-publication-opt-wrapper').find('.mfn-form-control').val('').trigger('change');
        }

    }else{
        opt.addClass('active');
        if( opt.find('input[type="checkbox"]').length ) opt.find('input[type="checkbox"]').prop('checked', true).trigger('change');
        if( opt.closest('.mfn-publication-opt-wrapper').length ) opt.closest('.mfn-publication-opt-wrapper').addClass('mfn-opt-active'); // popup publication dates
    }
});

// theme options [themeoptions]

var sidebar_themeoptions = {
    tab: false,
    // theme options theme_options theme-options
    init: function() {

        $(document).on('click', 'li.menu-themeoptions a', function(e) {
            e.preventDefault();

            if( mfn.view == 'demo' ) return;
            if( !_.has(renderMfnFields, 'themeoptions') ) return;

            sidebar_form.is_themeoptions = true;
            sidebar_form.is_class = false;
            sidebar_form.is_pageoptions = false;

            if( $builder.find('.mfn-current-editing').length ) $builder.find('.mfn-current-editing').removeClass('mfn-current-editing');
            if( $('.mfn-ui').hasClass('mfn-class-editor') ) $('.mfn-ui').removeClass('mfn-class-editor');
            if( $content.find('body').hasClass('mfn-class-editor-preview') ) $content.find('body').removeClass('mfn-class-editor-preview');
            if( $('.mfn-ui').hasClass('mfn-class-editor-full') ) $('.mfn-ui').addClass('mfn-class-editor-full');

            $('.mfn-ui .panel-view-themeoptions .mfn-form.mfn-form-themeoptions').empty();
            let $tabler = $('.panel-view-themeoptions .vb-themeoptions');
            $(".panel").hide();
            $(".header").hide();
            $(".panel-view-themeoptions").show();
            $(".header-themeoptions").show();

            if( ui_mode == 'dev' ) {
                $('.topbar-nav #main-menu li').removeClass('active');
                $('.topbar-nav li.menu-settings').addClass('active');
            }

            sidebar_themeoptions.startView();

            edited_item = mfn.themeoptions;
            edited_item['jsclass'] = 'themeoption';

            $('.mfn-ui .panel-view-themeoptions .mfn-form.mfn-form-themeoptions').html( renderMfnFields.themeoptions( edited_item ) );

            // console.log(edited_item);

        });

        $editpanel.on('click', '.header-themeoptions .header-to-back a', function(e) {
            e.preventDefault();
            if( $('.vb-themeoptions .vb-to.active').length ){
                //$('.vb-themeoptions .vb-to.active').removeClass('active');
                $('.vb-themeoptions').removeClass('vb-to-form-view');
                $('.header-to-back').hide();
                if( $('.vb-themeoptions .vb-to-content.vb-to-active').length ) $('.vb-themeoptions .vb-to-content.vb-to-active').removeClass('vb-to-active');
                if($('.vb-themeoptions .vb-to-li-active').length) $('.vb-themeoptions .vb-to-li-active').removeClass('vb-to-li-active');
            }
        });

        $editpanel.on('click', '.vb-themeoptions .vb-to-header a', function(e) {
            e.preventDefault();
            sidebar_themeoptions.tab = $(this).closest('.vb-to');
            var $tabler = $(this).closest('.vb-themeoptions');
            var href = $(this).attr('href');
            var id = href.replace('#themeoptions-', '');

            if( $(this).hasClass('vb-themeoptions-link-expander') ){
                if( sidebar_themeoptions.tab.hasClass('active') ){
                    sidebar_themeoptions.tab.removeClass('active');
                    $tabler.removeClass('vb-to-form-view');
                    if( $tabler.find('.vb-to-content.vb-to-active').length ) $tabler.find('.vb-to-content.vb-to-active').removeClass('vb-to-active');
                }else{
                    sidebar_themeoptions.tab.addClass('active');
                    if( href == '#themeoptions-gdpr' && $('.mfn-form-themeoptions .themeoption.gdpr input:checked').val() == '1' ){
                        if( $content.find('#mfn-gdpr').length ) $content.find('#mfn-gdpr').addClass('show');
                    }

                    if( sidebar_themeoptions.tab.find('.vb-to-content').length ) sidebar_themeoptions.render();

                }
            }else if( $(this).hasClass('vb-themeoptions-form-link') ) {
                if($tabler.hasClass('vb-to-form-view')) {
                    $tabler.removeClass('vb-to-form-view');
                    $('.header-to-back').hide();
                    if($tabler.find('.vb-to-li-active').length) $tabler.find('.vb-to-li-active').removeClass('vb-to-li-active');
                    if( $tabler.find('.vb-to-content.vb-to-active').length ) $tabler.find('.vb-to-content.vb-to-active').removeClass('vb-to-active');
                }else{
                    if($tabler.find('.vb-to-active').length) $tabler.find('.vb-to-active').removeClass('vb-to-active');
                    if($tabler.find('.vb-to-li-active').length) $tabler.find('.vb-to-li-active').removeClass('vb-to-li-active');
                    $('.header-to-back').show();
                    $tabler.addClass('vb-to-form-view');
                    sidebar_themeoptions.tab.find(href).addClass('vb-to-active');

                    mfnoptsinputs.start();
                    if( $('.panel-view-themeoptions .mfn-form .mfn-form-row .sliderbar:not(.mfn-initialized)').length ) {
                        $('.panel-view-themeoptions .mfn-form .mfn-form-row .sliderbar:not(.mfn-initialized)').each(function() {
                            sliderInput.init($(this));
                        });
                    }

                    initSocialSorting(sidebar_themeoptions.tab);
                    initFontSelect(sidebar_themeoptions.tab);
                    if( !$tabler.find('.CodeMirror').length ) MfnFieldTextarea.initForCSSandJS();
                    $(this).parent('li').addClass('vb-to-li-active');
                    $(this).parent('li').addClass('vb-to-li-active');
                }
            }

        });
    },

    render: function() {
        sidebar_themeoptions.tab.find('.vb-to-content').each(function(i, el) {
            let tab_id = $(el).attr('id').replace('themeoptions-', '');

            const mfn_form_to = new MfnForm( renderMfnFields['themeoptions_fields'][tab_id] );
            let form_html_to = mfn_form_to.render();

            $(this).html(form_html_to);
        });
    },
    startView: function() {
        let $tabler = $('.panel-view-themeoptions .vb-themeoptions');

        if( $tabler.find('.vb-to.active') ) $tabler.find('.vb-to.active').removeClass('active');
        if( $tabler.hasClass('vb-to-form-view') ) $tabler.removeClass('vb-to-form-view');
        if( $tabler.find('.vb-to-li-active').length ) $tabler.find('.vb-to-li-active').removeClass('vb-to-li-active');
        if( $tabler.find('.vb-to-content.vb-to-active').length ) $tabler.find('.vb-to-content.vb-to-active').removeClass('vb-to-active');
    }
}

if( mfn.current_user_roles.includes('administrator')  ) sidebar_themeoptions.init();


/**
 * MEGA MENU
 * */

$editpanel.on('change', '.mfn-be-megamenu-builder .panel-view-options .preview-megamenu_custom_widthinput', function() {
    $content.find('.mfn-megamenu-wrapper').css('width', $(this).val());
});

$editpanel.on('change', '.mfn-be-megamenu-builder .panel-view-options .preview-megamenu_widthinput', function() {
    var val = $(this).val();
    $content.find('.mfn-megamenu-wrapper').removeClass('mfn-megamenu-full-width');
    if( val == 'custom-width' ) {
        $content.find('.mfn-megamenu-wrapper').css('width', $('.mfn-be-megamenu-builder .panel-view-options .preview-megamenu_custom_widthinput').val());
    }else if( val == 'full-width' ) {
        $content.find('.mfn-megamenu-wrapper').removeAttr('style');
        $content.find('.mfn-megamenu-wrapper').addClass('mfn-megamenu-full-width')
    }else{
        $content.find('.mfn-megamenu-wrapper').removeAttr('style');
    }
});

/**
 * END MEGA MENU
 * */

function updateExportInput(){
    if( mfn.view == 'demo' ) return;
    var formData = prepareForm.get();

    $('.panel-export-import .mfn-export-field').val(formData);
}

/*$(document).ajaxComplete(function() {
    runAjaxElements();
});*/

function runAjaxElements(){

    var iframeWin = document.getElementById('mfn-vb-ifr').contentWindow;
    iframeWin.jQuery(iframeWin.document).trigger('mfn:ajax:refresh');

    mfnCurrencySwitcher.init();

    if( $builder.find('.mcb-wrap-inner .bars_list:not(.hover)') ) { $builder.find('.mcb-wrap-inner .bars_list:not(.hover)').addClass('hover'); }

    // query loop masonry
    if( $content && $content.find('.mfn-query-loop-masonry:not(.mfn-initialized)').length ){
      // queryLoopMasonry();
        iframe.queryLoopMasonry();
    }

    if( $content && $content.find('.column_banner_box').length ){
        mfnBannerBox();
    }

    // blog slider
    if($content && $content.find('.blog_slider .blog_slider_ul:not(.slick-initialized)').length){
        mfnSliderBlog();
    }
    // clients slider
    if($content && $content.find('.clients_slider_ul').length){
        mfnSliderClients();
    }

    // gallery
    if($content && $content.find('.sections_group .gallery, .mcb-section .gallery').not('.mfn-initialized').length){
        //mfnGalleryInit();
        iframe.msnryGalleryInit();
    }

    // countdown
    if($content && $content.find('.downcount').length){
        mfnCountDown();
    }

    // chart
    if($content && $content.find('.chart_box:not(.mfn-initialized)').length){
        mfnChart();
    }

    // counter

    if($content && $content.find('.animate-math .number').length){
        mfnAnimateMath();
    }

    // slider

    if($content && $content.find('.content_slider_ul').length){
        sliderSlider();
    }

    // accordion
    if($content && $content.find('.mfn-acc').length){
        accordionifaqs();
    }

    if($content && $content.find('.woocommerce-product-attributes').length){
        spanToAdditionalInfo();
    }

    if( $content && $content.find('.promo_bar_slider:not(.mfn-initialized)').length ){
      promoBarSlider();
    }

    // feature list

    if($content && $content.find('.feature_list').length){
        mfnFeatureList();
    }

    // hover box

    if($content && $content.find('.tooltip, .hover_box').length){
        mfnHoverBox();
    }
    // slider offer full

    if($content && $content.find('.offer_ul').length){
        mfnSliderOffer();
    }

    if($content && $content.find('.blog_wrapper .isotope:not( .masonry ), .portfolio_wrapper .isotope:not( .masonry-flat, .masonry-hover, .masonry-minimal').length){
        portfolioIsotope();
    }

    if( $content && $content.find('.mfn-language-switcher-dropdown:not(.mfn-initialized)').length ) {
        wpmlLangSwitcher();
    }

    if($content && $content.find('.isotope.masonry, .isotope.masonry-hover, .isotope.masonry-minimal').length){
        blogPortfolioMasonry();
    }

    // slider testimonials

    if($content && $content.find('.testimonials_slider_ul').length){
        sliderTestimonials();
    }

    // slider offer thumb

    if($content && $content.find('.offer_thumb_ul:not(.slick-initialized)').length){
        mfnSliderOfferThumb();
    }

    if($content && $content.find('.shop_slider_ul').length){
        mfnSliderShop();
    }

    // product gallery

    if( $content && $content.find('.mcb-item-product_images-inner .woocommerce-product-gallery:not(.mfn-initialized)').length ){
        productgallery.start( $content.find('.mcb-item-product_images-inner .woocommerce-product-gallery:not(.mfn-initialized)') );
    }

    // portfolio slider

    if($content && $content.find('.portfolio_slider_ul').length){
        sliderPortfolio();
    }

    if( $content.find('.mfn-advanced-filters').length ) {
        mfnAdvancedFilters.init();
    }

    // before after

    if($content && $content.find('.before_after.twentytwenty-container').length){

        $content.find('.before_after.twentytwenty-container .twentytwenty-overlay').remove();
        $content.find('.before_after.twentytwenty-container .twentytwenty-after-label').remove();
        $content.find('.before_after.twentytwenty-container .twentytwenty-handle').remove();

        $content.find('.before_after.twentytwenty-container').imagesLoaded(function() {
            $content.find('.before_after.twentytwenty-container').twentytwenty();
            $content.find('.before_after.twentytwenty-container').not('mfn-initialized').addClass('mfn-initialized');
        });
    }

    // tabs
    if($content && $content.find('.jq-tabs:not(.ui-tabs)').length){
        $content.find('.jq-tabs:not(.ui-tabs) ul li a').each(function() { $(this).attr("href", location.href.toString().replace('#', '')+$(this).attr("href")); }); // prevents tab reload iframe from jquery 1.9, 1.8 is ok
        $content.find('.jq-tabs:not(.ui-tabs)').tabs();
    }
}




let mfnAdvancedFilters = {
    form: false,
    init: function() {
      if( !$content.find('.mfn-advanced-filters').length ) return;

      $content.find('.mfn-advanced-filters:not(.initialized)').each(function(i, el) {
        mfnAdvancedFilters.form = $(el);
        mfnAdvancedFilters.form.addClass('initialized');

        if( mfnAdvancedFilters.form.find('.mfn-advanced-filters-slider').length ){
          mfnAdvancedFilters.slider();
        }

        if( mfnAdvancedFilters.form.find('.mfn-advanced-filters-range-slider').length ){
          mfnAdvancedFilters.slider_range();
        }
      });

    },

    slider: function() {
      mfnAdvancedFilters.form.find('.mfn-advanced-filters-slider').each(function(i, slider) {

        let input = $(this).closest('.mfn-form-row-wrapper').find('input.mfn-ui-slider-input');

        let min = input.attr('min').length ? input.attr('min') : '0';
        let max = input.attr('max').length ? input.attr('max') : '500';

        let val = input.val().length ? input.val() : '';

        $(this).slider({
          step: 1,
          min: parseFloat(min),
          max: parseFloat(max),
          range: "min",
          value: val,
          create: function () {
            $(this).find(".ui-slider-handle").append('<span class="mfn-ui-tip"></span>');
            $(this).find(".mfn-ui-tip").text($(this).slider("value"));
          },
          slide: function( event, ui ) {
            input.val(ui.value);
            $(this).find(".mfn-ui-tip").text(ui.value);
          },
          stop: function() {
            input.trigger('change');
          }
        });

      });
    },

    slider_range: function() {
      mfnAdvancedFilters.form.find('.mfn-advanced-filters-range-slider').each(function(i, slider) {

        let input_min = $(this).closest('.mfn-form-row-wrapper').find('input.mfn-ui-slider-input-min');
        let input_max = $(this).closest('.mfn-form-row-wrapper').find('input.mfn-ui-slider-input-max');

        let min = input_min.attr('min').length ? input_min.attr('min') : '0';
        let max = input_max.attr('max').length ? input_max.attr('max') : '500';

        let val_min = input_min.val().length ? input_min.val() : min;
        let val_max = input_max.val().length ? input_max.val() : max;

        $(this).slider({
          range: true,
          step: 1,
          min: parseFloat(min),
          max: parseFloat(max),
          values: [ val_min, val_max ],
          create: function (event, ui) {
            $(this).find(".ui-slider-handle").append('<span class="mfn-ui-tip"></span>');
            $(this).find(".mfn-ui-tip").first().text(val_min);
            $(this).find(".mfn-ui-tip").last().text(val_max);
          },
          slide: function( event, ui ) {
            $(ui.handle).closest('.mfn-form-row-wrapper').find('input.mfn-ui-slider-input-min').val(ui.values[ 0 ]);
            $(ui.handle).closest('.mfn-form-row-wrapper').find('input.mfn-ui-slider-input-max').val(ui.values[ 1 ]);
            $(ui.handle).find(".mfn-ui-tip").text(ui.value);
          },
          stop: function() {
            input_min.trigger('change');
          }
        });

      });
    }
  }





// reinit js


let mfnCurrencySwitcher = {
  selector: false,
  init: function() {
    if( !$content.find('.column_header_currency_switcher .mfn-currency-switcher-wrapper:not(.initialized)').length ) return;

    $content.find('.column_header_currency_switcher .mfn-currency-switcher-wrapper:not(.initialized)').each(function() {

      mfnCurrencySwitcher.selector = $(this);
      mfnCurrencySwitcher.selector.addClass('initialized');

      if( mfnCurrencySwitcher.selector.hasClass('mfn-currency-switcher-flags') ) mfnCurrencySwitcher.attach_flags();

      if( mfnCurrencySwitcher.selector.hasClass('mfn-currency-switcher-dropdown mfn-currency-switcher-dropdown-icon') ) mfnCurrencySwitcher.dropdown_icon();

      if( mfnCurrencySwitcher.selector.hasClass('mfn-currency-switcher-dropdown') ) mfnCurrencySwitcher.dropdown();

      mfnCurrencySwitcher.selector = false;

    });
  },
  attach_flags: function() {
    let flag_path = mfnCurrencySwitcher.selector.attr('data-themepath');
    mfnCurrencySwitcher.selector.find('li a').each(function() {
      let code = $(this).attr('rel');
      let flag_uri = `${flag_path}/${code}.svg`;
      $(this).prepend('<img class="mfn-wcml-flag" src="'+flag_uri+'" alt="">');
    });
  },
  dropdown_icon: function() {
    let icon = mfnCurrencySwitcher.selector.attr('data-path');
    mfnCurrencySwitcher.selector.find('li.wcml-cs-active-currency > a').each(function() {
      $(this).append('<i class="mfn-arrow-icon '+icon+'"></i>')
    });
  },
  dropdown: function() {
    let clone = mfnCurrencySwitcher.selector.find('ul').clone();
    let active = mfnCurrencySwitcher.selector.find('ul li.wcml-cs-active-currency').clone();

    mfnCurrencySwitcher.selector.find('ul').before('<ul class="mfn-wcml-dropdown-ready"></ul>');
    mfnCurrencySwitcher.selector.find('ul.mfn-wcml-dropdown-ready').append(active);
    mfnCurrencySwitcher.selector.find('ul:not(.mfn-wcml-dropdown-ready)').remove();
    mfnCurrencySwitcher.selector.find('ul.mfn-wcml-dropdown-ready li').append(clone);
  }
}



// accordion & faq


function accordionifaqs(){
    $content.find('.mfn-acc').each(function() {
      var el = $(this);

      if (el.hasClass('openAll')) {

        // show all
        el.find('.question')
          .addClass("active")
          .children(".answer")
          .show();

      } else {

        // show one
        var activeTab = el.attr('data-active-tab');
        if (el.hasClass('open1st')) activeTab = 1;

        if (activeTab) {
          el.find('.question').eq(activeTab - 1)
            .addClass("active")
            .children(".answer")
            .show();
        }

      }
    });
}

// chart

function mfnChart(){
    $content.find('.chart_box:not(.mfn-initialized)').each(function() {
        var chart_html = $(this).html();

        var $box = $(this).closest('.mcb-column');

        $(this).html(chart_html);

        var $el = $(this).children('.chart');

        var line_width = $el.data('line-width');
        var line_percent = $el.data('percent');


        $el.easyPieChart({
          animate: 1000,
          lineCap: 'circle',
          lineWidth: line_width,
          size: 140,
          scaleColor: false
        });


        if($(this).find('canvas').length > 1){ $(this).find('canvas').first().remove(); }

        $(this).addClass('mfn-initialized');

    });
}

// counter, Quick Fact

function mfnAnimateMath(){
    $content.find('.animate-math .number').waypoint({

      offset: '100%',
      triggerOnce: true,
      handler: function() {

        var el = $(this.element).length ? $(this.element) : $(this);
        var duration = Math.floor((Math.random() * 1000) + 1000);
        var to = el.attr('data-to');

        $({
          property: 0
        }).animate({
          property: to
        }, {
          duration: duration,
          easing: 'linear',
          step: function() {
            el.text(Math.floor(this.property));
          },
          complete: function() {
            el.text(this.property);
          }
        });

        if (typeof this.destroy !== 'undefined' && $.isFunction(this.destroy)) {
          this.destroy();
        }
      }

    });
}

// hover box

function mfnHoverBox(){
    $content.find('.tooltip, .hover_box')
      .on('touchstart', function() {
        $(this).toggleClass('hover');
      })
      .on('touchend', function() {
        $(this).removeClass('hover');
      });
}

// feature list

function mfnFeatureList(){
    $content.find('.feature_list').each(function() {
    $(this).find('hr').remove();
      var col = $(this).attr('data-col') ? $(this).attr('data-col') : 4;
      $(this).find('li:nth-child(' + col + 'n):not(:last-child)').after('<hr />');
    });
}

// countdown
function mfnCountDown(){
    $content.find('.downcount').each(function() {
      var el = $(this);
      el.downCount({
        date: el.attr('data-date'),
        offset: el.attr('data-offset')
      });
    });
}

// Slider | Testimonials

function sliderTestimonials() {

var pager = function(el, i) {
  var img = $(el.$slides[i]).find('.single-photo-img').html();
  return '<a>' + img + '</a>';
};

$content.find('.testimonials_slider_ul').each(function() {

  var slider = $(this);

  slider.not('.slick-initialized').slick({
    cssEase: 'ease-out',
    dots: true,
    infinite: true,
    touchThreshold: 10,
    speed: 300,

    prevArrow: '<a class="button the-icon slider_prev" href="#" aria-label="previous slide"><i class="icon-left-open-big"></i></a>',
        nextArrow: '<a class="button the-icon slider_next" href="#" aria-label="next slide"><i class="icon-right-open-big"></i></a>',

    adaptiveHeight: true,
    appendDots: slider.siblings('.slider_pager'),
    customPaging: pager,

    rtl: rtl ? true : false,
    autoplay: mfn.slider.testimonials ? true : false,
    autoplaySpeed: mfn.slider.testimonials ? mfn.slider.testimonials : 5000,

    slidesToShow: 1,
    slidesToScroll: 1
  });

});
}
// header promo bar | Slider

function promoBarSlider() {
    $content.find('.promo_bar_slider').not('.mfn-initialized').each(function() {
        var speed = parseInt($(this).attr('data-speed')) * 1000;

        var $slider = $(this);
        $slider.find( '.pbs_one' ).first().addClass('pbs-active');
        $slider.addClass('mfn-initialized');

        function changeSlide() {
            var $current = $slider.find( '.pbs_one.pbs-active' );
            var $next = $slider.find( '.pbs_one.pbs-active' ).next();
            if( !$next.length ) $next = $slider.find( '.pbs_one' ).first();

            $current.fadeOut(300, function() {
                $next.fadeIn(300);
            });

            //$slider.css('height', $next.outerHeight());
            $current.removeClass('pbs-active');
            $next.addClass('pbs-active');
        }

        if( $slider.find( '.pbs_one' ).length > 1 ){
            setInterval(changeSlide, speed);
        }

    });
}

// Slider | Shop

function mfnSliderShop() {

var pager = function(el, i) {
  return '<a>' + i + '</a>';
};

$content.find('.shop_slider_ul').each(function() {

  var slider = $(this);
  var slidesToShow = 4;

  var count = slider.closest('.shop_slider').data('order');
  if (slidesToShow > count) {
    slidesToShow = count;
    if (slidesToShow < 1) {
      slidesToShow = 1;
    }
  }

  slider.not('.slick-initialized').slick({
    cssEase: 'ease-out',
    dots: true,
    infinite: true,
    touchThreshold: 10,
    speed: 300,

    prevArrow: '<a class="button the-icon slider_prev" href="#" aria-label="previous slide"><i class="icon-left-open-big"></i></a>',
        nextArrow: '<a class="button the-icon slider_next" href="#" aria-label="next slide"><i class="icon-right-open-big"></i></a>',
    appendArrows: slider.siblings('.blog_slider_header').children('.slider_navigation'),

    appendDots: slider.siblings('.slider_pager'),
    customPaging: pager,

    rtl: rtl ? true : false,
    autoplay: mfn.slider.shop ? true : false,
    autoplaySpeed: mfn.slider.shop ? mfn.slider.shop : 5000,

    slidesToShow: slickAutoResponsive(slider, slidesToShow),
    slidesToScroll: slickAutoResponsive(slider, slidesToShow)
  });

  // ON | debouncedresize

  $(window).on('debouncedresize', function() {
    slider.slick('slickSetOption', 'slidesToShow', slickAutoResponsive(slider, slidesToShow), false);
    slider.slick('slickSetOption', 'slidesToScroll', slickAutoResponsive(slider, slidesToShow), true);
  });

});
}

// Slider | Offer Thumb

function mfnSliderOfferThumb() {

var pager = function(el, i) {
    var img = $content.find( el.$slides[i] ).find('.thumbnail').html();
    return '<a>' + img + '</a>';
};

$content.find('.offer_thumb_ul:not(.slick-initialized)').each(function() {

  var slider = $(this);

  slider.slick({
    cssEase: 'ease-out',
    arrows: false,
    dots: true,
    infinite: true,
    touchThreshold: 10,
    speed: 300,

    adaptiveHeight: true,
    appendDots: slider.siblings('.slider_pagination'),
    customPaging: pager,

    rtl: rtl ? true : false,
    autoplay: mfn.slider.offer ? true : false,
    autoplaySpeed: mfn.slider.offer ? mfn.slider.offer : 5000,

    slidesToShow: 1,
    slidesToScroll: 1
  });

});
}

// Slider | Portfolio

function sliderPortfolio() {

$content.find('.portfolio_slider_ul').each(function() {

  var slider = $(this);
  var size = 380;
  var scroll = 5;

  if (slider.closest('.portfolio_slider').data('size')) {
    size = slider.closest('.portfolio_slider').data('size');
  }

  if (slider.closest('.portfolio_slider').data('size')) {
    scroll = slider.closest('.portfolio_slider').data('scroll');
  }

  slider.not('.slick-initialized').slick({
    cssEase: 'ease-out',
    dots: false,
    infinite: true,
    touchThreshold: 10,
    speed: 300,

    prevArrow: '<a class="slider_nav slider_prev themebg" href="#"><i class="icon-left-open-big"></i></a>',
    nextArrow: '<a class="slider_nav slider_next themebg" href="#"><i class="icon-right-open-big"></i></a>',

    rtl: rtl ? true : false,
    autoplay: mfn.slider.portfolio ? true : false,
    autoplaySpeed: mfn.slider.portfolio ? mfn.slider.portfolio : 5000,

    slidesToShow: slickAutoResponsive(slider, 5, size),
    slidesToScroll: slickAutoResponsive(slider, scroll, size)
  });

  // ON | debouncedresize
  $(window).on('debouncedresize', function() {
    slider.slick('slickSetOption', 'slidesToShow', slickAutoResponsive(slider, 5, size), false);
    slider.slick('slickSetOption', 'slidesToScroll', slickAutoResponsive(slider, scroll, size), true);
  });

});
}

// Slider | Offer

function mfnSliderOffer() {
$content.find('.offer_ul').each(function() {

  var slider = $(this);

  slider.not('.slick-initialized').slick({
    cssEase: 'ease-out',
    dots: false,
    infinite: true,
    touchThreshold: 10,
    speed: 300,

    prevArrow: '<a class="slider_prev" href="#"><span class="button_icon"><i class="icon-up-open-big"></i></span></a>',
    nextArrow: '<a class="slider_next" href="#"><span class="button_icon"><i class="icon-down-open-big"></i></span></a>',

    adaptiveHeight: true,
    //customPaging  : pager,

    rtl: rtl ? true : false,
    autoplay: mfn.slider.offer ? true : false,
    autoplaySpeed: mfn.slider.offer ? mfn.slider.offer : 5000,

    slidesToShow: 1,
    slidesToScroll: 1
  });

  // Pagination | Show (css)

  slider.siblings('.slider_pagination').addClass('show');

  // Pager | Set slide number after change

  slider.on('afterChange', function(event, slick, currentSlide, nextSlide) {
    slider.siblings('.slider_pagination').find('.current').text(currentSlide + 1);
  });

});
}

// Slider | Slider

function sliderSlider() {

var pager = function(el, i) {
  return '<a>' + i + '</a>';
};

$content.find('.content_slider_ul').each(function() {

  var slider = $(this);
  var count = 1;
  var centerMode = false;

  if (slider.closest('.content_slider').hasClass('carousel')) {
    count = slickAutoResponsive(slider);

    $(window).on('debouncedresize', function() {
      slider.slick('slickSetOption', 'slidesToShow', slickAutoResponsive(slider), false);
      slider.slick('slickSetOption', 'slidesToScroll', slickAutoResponsive(slider), true);
    });
  }

  if (slider.closest('.content_slider').hasClass('center')) {
    centerMode = true;
  }

  slider.not('.slick-initialized').slick({
    cssEase: 'cubic-bezier(.4,0,.2,1)',
    dots: true,
    infinite: true,
    touchThreshold: 10,
    speed: 300,

    centerMode: centerMode,
    centerPadding: '20%',

    prevArrow: '<a class="button the-icon slider_prev" href="#" aria-label="previous slide"><i class="icon-left-open-big"></i></a>',
        nextArrow: '<a class="button the-icon slider_next" href="#" aria-label="next slide"><i class="icon-right-open-big"></i></a>',

    adaptiveHeight: true,
    appendDots: slider.siblings('.slider_pager'),
    customPaging: pager,

    rtl: rtl ? true : false,
    autoplay: mfn.slider.slider ? true : false,
    autoplaySpeed: mfn.slider.slider ? mfn.slider.slider : 5000,

    slidesToShow: count,
    slidesToScroll: count
  });

  // Lightbox | disable on dragstart

  var clickEvent = false;

  slider.on('dragstart', '.slick-slide a[rel="lightbox"]', function(event) {
    if (lightboxAttr) {
      var events = $._data(this,'events');
      if( events && Object.prototype.hasOwnProperty.call(events, 'click') ){
        clickEvent = events.click[0];
        $(this).addClass('off-click').off('click');
      }
    }
  });

  // Lightbox | enable after change

  slider.on('afterChange', function(event, slick, currentSlide, nextSlide) {
    if (lightboxAttr) {
      $content.find('a.off-click[rel="lightbox"]', slider).removeClass('off-click').on('click', clickEvent);
    }
  });

});
}

// WPML language switcher

function wpmlLangSwitcher() {
    if( $content.find('.mfn-language-switcher-dropdown:not(.mfn-initialized)').length ) {
      $content.find('.mfn-language-switcher-dropdown:not(.mfn-initialized)').each(function() {
        let that = $(this);
        that.addClass('mfn-initialized');

        let $ul = that.find('ul');
        let $current = $ul.find('li.wpml-ls-current-language');

        $current.append($ul.clone());

        $ul.children('li:not(.wpml-ls-current-language)').remove();

        $current.find('ul li.wpml-ls-current-language').remove();

        if( that.hasClass('mfn-language-switcher-dropdown-icon') ){
          let icon_html = '';
          if( that.attr('data-icon') == 'image' ){
            icon_html = '<span class="mfn-arrow-icon"><img src="'+that.attr('data-path')+'" alt=""></span>';
          }else if( that.attr('data-icon') == 'icon' ){
            icon_html = '<span class="mfn-arrow-icon"><i class="'+that.attr('data-path')+'"></i></span>';
          }

          $current.children('a').append(icon_html);
        }

      });
    }
}

 // Portfolio - Isotope

function portfolioIsotope() {

    $content.find('.blog_wrapper .isotope:not( .masonry ), .portfolio_wrapper .isotope:not( .masonry-flat, .masonry-hover, .masonry-minimal').each(function() {

        var $el = $(this);

        if( !$el.hasClass('mfn-initialized') ){
            $el.addClass('mfn-initialized');

            $el.imagesLoaded( function() {
                $el.isotope({
                  itemSelector: '.isotope-item',
                  layoutMode: 'fitRows',
                  isOriginLeft: rtl ? false : true
                });
                $('.preview-wrapper').css({'margin-left': $('.sidebar-wrapper').width()-1});
                setTimeout(function () { $('.preview-wrapper').css({'margin-left': $('.sidebar-wrapper').width() }); },500);
            });

        }

    });

}

// inline eeditor

function inlineEditor() {

    //rangy.init();

    if( $builder.find('.vb-item.mcb-column .mfn-inline-editor:not(.mfn-initialized)').length ){

        var iframe = $('iframe#mfn-vb-ifr').get(0);

        var ToolsSwitchMore = MediumEditor.extensions.button.extend({
            name: 'switchMore',
            action: 'switchMore',
            aria: 'More options',
            contentDefault: '&#8286;',
            contentFA: '<i class="fas fa-ellipsis-h"></i>',
            hasForm: false,
            handleClick: function( event ) {
                event.preventDefault();
                event.stopPropagation();
                $("iframe#mfn-vb-ifr").contents().find('body').toggleClass('mfn-inline-editor-toolbar-more');
                return false;
            },
        });

        var ToolsMfnRemoveFormat = MediumEditor.extensions.button.extend({
            name: 'mfnRemoveFormat',
            action: 'mfnRemoveFormat',
            aria: 'Remove format',
            contentDefault: '&#8286;',
            contentFA: '<i class="fas fa-eraser"></i>',
            hasForm: false,
            init: function() {
                MediumEditor.extensions.form.prototype.init.apply( this, arguments );
            },

            handleClick: function( event ) {
                var nodes          = MediumEditor.selection.getSelectedElements( this.document ),
                    selectionRange = MediumEditor.selection.getSelectionRange( this.document ),
                    parentEl       = MediumEditor.selection.getSelectedParentElement( selectionRange ),
                    element = MediumEditor.selection.getSelectionElement( this.document );

                event.preventDefault();
                event.stopPropagation();

                if ( ! nodes.length && parentEl ) {
                    nodes = [ parentEl ];
                }

                nodes.forEach(function( el ) {
                    $(el).removeAttr( 'data-font-family' );
                    $(el).removeAttr( 'data-line-height' );
                    $(el).removeAttr( 'data-letter-spacing' );
                    $(el).removeAttr( 'data-font-size' );
                    $(el).removeAttr( 'data-font-weight' );
                    $(el).removeAttr( 'style' );

                    if( $(el).find('.highlight-word').length ){
                        $(el).replaceWith($(el).find('.highlight-word').text());
                    }

                    if(el.tagName.toLowerCase() == 'span'){

                        if( $(el).closest('.highlight').length ) {
                            $(el).closest('.highlight').replaceWith( $(el).text() );
                        }else{
                            $(el).replaceWith( $(el).text() );
                        }
                    }
                });

                this.execAction( 'removeFormat', { skipCheck: true } );
                this.triggerUpdate( element );

                return false;

            },

            triggerUpdate: function( element ) {
                this.base.trigger( 'editableInput', {}, element );
            },
        });

        var ToolsColorPicker = MediumEditor.extensions.form.extend({
            name: 'colorPicker',
            action: 'colorPicker',
            aria: 'colorPicker',
            contentDefault: '&#9775;',
            contentFA: '<i class="fas fa-palette"></i><span></span>',
            hasForm: true,
            override: false,
            parentCid: false,

            init: function() {
                MediumEditor.extensions.form.prototype.init.apply( this, arguments );
                this.classApplier = rangy.createClassApplier( 'mfn-inline-txt-editing', {
                    elementTagName: 'span',
                    tagNames: [ 'span', 'b', 'strong', 'a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
                    normalize: true
                } );

            },

            getForm: function() {
                if ( ! this.form ) {
                    this.form = this.createForm();
                }
                this.on( this.form, 'click', this.handleFormClick.bind( this ) );
                return this.form;
            },

            checkState: function( node ) {
                var nodes = MediumEditor.selection.getSelectedElements( this.document ),
                    color = this.getExistingValue( nodes );

                if ( 'undefined' !== typeof color ) {
                    this.button.querySelector( 'span' ).style.backgroundColor = color;
                }
            },

            createForm: function() {
                var self   = this,
                    doc    = this.document,
                    form   = doc.createElement( 'div' ),
                    input  = doc.createElement( 'input' ),
                    close  = doc.createElement( 'a' );

                this.on( form, 'click', this.handleFormClick.bind( this ) );
                form.className = 'medium-editor-toolbar-form mfn-medium-editor-color-picker';
                form.id        = 'mfn-medium-editor-cp-' + this.getEditorId();

                input.className = 'medium-editor-toolbar-input mfn-medium-editor-color-picker-input';
                input.setAttribute( 'type', 'text' );
                input.setAttribute( 'data-alpha', true );
                form.appendChild( input );

                close.className = 'medium-editor-toolbar-close';
                close.innerHTML = '<i class="fas fa-check"></i>';
                form.appendChild( close );

                this.on( close, 'click', this.handleSaveClick.bind( this ), true );

                return form;
            },

            isDisplayed: function() {
                return this.getForm().classList.contains( 'mfn-visible' );
            },

            handleClick: function( event ) {
                var nodes,
                    txt;

                event.preventDefault();
                event.stopPropagation();

                if ( ! this.isDisplayed() ) {
                    nodes = MediumEditor.selection.getSelectedElements( this.document );
                    txt  = this.getExistingValue( nodes );
                    txt  = 'undefined' !== typeof txt ? txt : '';

                    this.showForm( txt );
                }

                return false;
            },

            getInput: function() {
                return this.getForm().querySelector( 'input.medium-editor-toolbar-input' );
            },

            showForm: function( fontColor ) {
                var self  = this,
                    input = this.getInput(),
                    form  = this.getForm();

                this.base.saveSelection();
                form.classList.add( 'mfn-visible' );

                $content.find('#medium-editor-toolbar-'+this.getEditorId()+' .medium-editor-toolbar-actions').hide();
                //medium-editor-toolbar-2

                input.value = fontColor || '';

                $( input ).wpColorPicker( {
                    palettes: true,
                    mode : 'hex',
                    hide: true,
                    change: function( event, ui ) {
                        if ( 'none' !== $( input ).closest( '.mfn-medium-editor-color-picker' ).find( '.iris-picker' ).css( 'display' ) ) {
                            self.handleColorChange( ui.color.toString() );
                        }
                    },
                    clear: function( event, ui ) {
                        self.clearFontColor();
                    }
                } );

                $( input ).iris( 'color', input.value );
                $( input ).iris( 'option', 'palettes', color_palette.slice(0, 7) );
                $( input ).iris( 'show' );

                this.setToolbarPosition();
            },

            getExistingValue: function( nodes ) {
                var nodeIndex,
                    color,
                    el;

                if ( ! nodes.length ) {
                    nodes = this.base.elements;
                }

                for ( nodeIndex = 0; nodeIndex < nodes.length; nodeIndex++ ) {
                    el    = nodes[ nodeIndex ];
                    color = $( el ).css( 'color' );
                }

                return color;
            },

            handleFormClick: function( event ) {
                event.stopPropagation();
            },

            handleSaveClick: function( event ) {
                event.preventDefault();
                this.hideForm();
            },

            hideForm: function() {
                var self         = this,
                    form         = this.getForm();

                $(form).removeClass( 'mfn-visible' );
                $content.find('#medium-editor-toolbar-'+this.getEditorId()+' .medium-editor-toolbar-actions').show();

                this.getInput().value = '';

                this.base.restoreSelection();
                self.setToolbarPosition();

            },

            clearFontColor: function() {
                this.base.restoreSelection();

                MediumEditor.selection.getSelectedElements( this.document ).forEach( function( el ) {
                    if ( 'undefined' !== typeof el.style && 'undefined' !== typeof el.style.color ) {
                        el.style.color = '';
                    }
                } );

                this.base.trigger( 'editableInput', {}, MediumEditor.selection.getSelectionElement( this.document ) );
            },

            handleColorChange: function( color ) {

                var iframeWin = rangy.dom.getIframeWindow( iframe ),
                        element,
                        self = this,
                        color = 'undefined' === color || 'undefined' === typeof color ? this.getInput().value : color;

                    this.base.restoreSelection();

                    element = MediumEditor.selection.getSelectionElement( this.document );

                    if ( ! element ) {
                        return;
                    }

                    this.classApplier.applyToSelection( iframeWin );

                    element.querySelectorAll( '.mfn-inline-txt-editing' ).forEach( function( el ) {
                        if ( el.classList.contains( 'mfn-inline-txt-editing' ) ) {
                            $( el ).css( { color: color } );
                            self.button.classList = 'medium-editor-button-active';
                            el.classList.remove( 'mfn-inline-txt-editing' );

                            if ( 0 === el.classList.length ) {
                                el.removeAttribute( 'class' );
                            }
                        }
                    } );

                    this.triggerUpdate( element );

            },

            triggerUpdate: function( element ) {
                this.base.trigger( 'editableInput', {}, element );
            },
        });

        var ToolsTypography = MediumEditor.extensions.form.extend({
            name: 'typography',
            action: 'typography',
            aria: 'typography',
            contentDefault: '&#9775;',
            contentFA: '<i class="fas fa-font"></i>',
            hasForm: true,
            override: false,
            parentCid: false,

            init: function() {
                MediumEditor.extensions.form.prototype.init.apply( this, arguments );
                this.classApplier = rangy.createClassApplier( 'mfn-inline-txt-editing', {
                    elementTagName: 'span',
                    tagNames: [ 'span', 'b', 'strong', 'a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
                    normalize: true
                } );

            },

            getForm: function() {
                if ( ! this.form ) {
                    this.form = this.createForm();
                }
                this.on( this.form, 'click', this.handleFormClick.bind( this ) );
                return this.form;
            },

            checkState: function( node ) {
                var nodes = MediumEditor.selection.getSelectedElements( this.document ),
                    typo = this.getExistingValue( nodes, true );

                if ( typo ) {
                    this.button.classList = 'medium-editor-button-active';
                }
            },

            createForm: function() {
                var self   = this,
                    doc    = this.document,
                    close  = doc.createElement( 'a' ),
                    form   = doc.createElement( 'div' );

                this.on( form, 'click', this.handleFormClick.bind( this ) );
                form.className = 'medium-editor-toolbar-form mfn-medium-editor-typography';
                form.id        = 'mfn-medium-editor-typo-' + this.getEditorId();

                $('<div class="mfn-medium-editor-form-row"><label>Font size</label><input data-style="font-size" class="medium-editor-toolbar-input mfn-medium-editor-font-size-input" /></div>').appendTo(form);
                $('<div class="mfn-medium-editor-form-row"><label>Line height</label><input data-style="line-height" class="medium-editor-toolbar-input mfn-medium-editor-line-height-input" /></div>').appendTo(form);
                $('<div class="mfn-medium-editor-form-row"><label>Letter spacing</label><input data-style="letter-spacing" class="medium-editor-toolbar-input mfn-medium-editor-letter-spacing-input" /></div>').appendTo(form);
                $('<div class="mfn-medium-editor-form-row"><label>Font family</label><select data-style="font-family" class="medium-editor-toolbar-input mfn-medium-editor-font-family-input"><optgroup label="System"><option value="" selected>Default</option><option value="Arial">Arial</option><option value="Georgia">Georgia</option><option value="Tahoma">Tahoma</option><option value="Times">Times</option><option value="Trebuchet">Trebuchet</option><option value="Verdana">Verdana</option></optgroup></select></div>').appendTo(form);
                $('<div class="mfn-medium-editor-form-row"><label>Font weight</label><select data-style="font-weight" class="medium-editor-toolbar-input mfn-medium-editor-font-weight-input"><option value="" selected>Default</option><option value="normal">Normal</option><option value="bold">Bold</option><option value="100">100</option><option value="200">200</option><option value="300">300</option><option value="400">400</option><option value="500">500</option><option value="600">600</option><option value="700">700</option><option value="800">800</option><option value="900">900</option></select></div>').appendTo(form);

                close.className = 'medium-editor-toolbar-close';
                close.innerHTML = '<i class="fas fa-check"></i>';
                form.appendChild( close );

                this.on( close, 'click', this.handleSaveClick.bind( this ), true );

                return form;
            },

            isDisplayed: function() {
                return this.getForm().classList.contains( 'mfn-visible' );
            },

            handleClick: function( event ) {
                var nodes,
                    txt;

                event.preventDefault();
                event.stopPropagation();

                if ( ! this.isDisplayed() ) {
                    nodes = MediumEditor.selection.getSelectedElements( this.document );
                    txt  = this.getExistingValue( nodes );
                    txt  = 'undefined' !== typeof txt ? txt : '';

                    this.showForm( txt );

                }else{
                    this.hideForm();
                }

                return false;
            },

            getInput: function() {
                var inputs = {
                    fontsize: this.getForm().querySelector( 'input.mfn-medium-editor-font-size-input' ),
                    lineheight: this.getForm().querySelector( 'input.mfn-medium-editor-line-height-input' ),
                    letterspacing: this.getForm().querySelector( 'input.mfn-medium-editor-letter-spacing-input' ),
                    fontfamily: this.getForm().querySelector( 'select.mfn-medium-editor-font-family-input' ),
                    fontweight: this.getForm().querySelector( 'select.mfn-medium-editor-font-weight-input' ),
                };
                return inputs;
            },

            showForm: function( typo ) {
                var self  = this,
                    input = this.getInput(),
                    form  = this.getForm();

                this.base.saveSelection();
                form.classList.add( 'mfn-visible' );

                $content.find('#medium-editor-toolbar-'+this.getEditorId()+' .medium-editor-toolbar-actions').hide();

                form.classList.remove( 'hidden' );

                // google fonts
                if( !$(input.fontfamily).find('optgroup[label="Google"]').length ){
                    var g_fonts = '';
                    mfn.mfn_google_fonts.map((value) => {
                      g_fonts += '<option value="'+value+'">'+value+'</option>';
                    });
                    $(input.fontfamily).append( $('<optgroup label="Google">'+g_fonts+'</optgroup>') );
                }

                $( input.fontsize ).val( typo.fontsize || '' ).on('change', function() {
                    self.handleTypoChange( $(this).attr('data-style'), $(this).val() );
                });
                $( input.lineheight ).val( typo.lineheight || '' ).on('change', function() {
                    self.handleTypoChange( $(this).attr('data-style'), $(this).val() );
                });
                $( input.letterspacing ).val( typo.letterspacing || '' ).on('change', function() {
                    self.handleTypoChange( $(this).attr('data-style'), $(this).val() );
                });
                $( input.fontfamily ).val( typo.fontfamily.replaceAll('"', '') || '' )
                    .on('change', function() {
                        var style_attr = $(this).attr('data-style');
                        var val = $(this).val().replace('&quot;', '');
                        var fonts_group = $(this).find(':selected').closest('optgroup').attr('label');

                        if( fonts_group == 'Google' ){
                            WebFont.load({
                                google: {
                                  families: [val]
                                },
                                context: window.frames[0].frameElement.contentWindow,
                                fontactive: function(familyName,fvd){
                                    self.handleTypoChange( style_attr, familyName );
                                    return;
                                },
                            });
                        }else{
                            self.handleTypoChange( style_attr, val, true );
                        }

                    });
                $( input.fontweight ).val( typo.fontweight || '' ).on('change', function() {
                    self.handleTypoChange( $(this).attr('data-style'), $(this).val() );
                });

                this.setToolbarPosition();

            },

            getExistingValue: function( nodes, active = false ) {
                var nodeIndex,
                    typo,
                    el;

                if ( ! nodes.length ) {
                    nodes = this.base.elements;
                }

                for ( nodeIndex = 0; nodeIndex < nodes.length; nodeIndex++ ) {
                    el    = nodes[ nodeIndex ];

                    if( active ){
                        typo = false;
                        if (typeof $( el ).attr('data-font-size') !== 'undefined' && $( el ).attr('data-font-size') !== false) typo = true;
                        if (typeof $( el ).attr('data-line-height') !== 'undefined' && $( el ).attr('data-line-height') !== false) typo = true;
                        if (typeof $( el ).attr('data-letter-spacing') !== 'undefined' && $( el ).attr('data-letter-spacing') !== false) typo = true;
                        if (typeof $( el ).attr('data-font-family') !== 'undefined' && $( el ).attr('data-font-family') !== false) typo = true;
                        if (typeof $( el ).attr('data-font-weight') !== 'undefined' && $( el ).attr('data-font-weight') !== false) typo = true;
                        return typo;
                    }

                    typo = {
                        fontsize: $( el ).css( 'font-size' ),
                        lineheight: $( el ).css( 'line-height' ),
                        letterspacing: $( el ).css( 'letter-spacing' ),
                        fontfamily: $( el ).css( 'font-family' ),
                        fontweight: $( el ).css( 'font-weight' ),
                    };
                }

                return typo;
            },

            handleFormClick: function( event ) {
                event.stopPropagation();
            },

            handleSaveClick: function( event ) {
                event.preventDefault();
                this.hideForm();
            },

            hideForm: function() {
                var self         = this,
                    form         = this.getForm();

                $(form).removeClass( 'mfn-visible' );

                $content.find('#medium-editor-toolbar-'+this.getEditorId()+' .medium-editor-toolbar-actions').show();

                this.base.restoreSelection();
                self.setToolbarPosition();
            },

            handleTypoChange: function( key, value, data = false ) {
                var iframeWin = rangy.dom.getIframeWindow( iframe ),
                        element,
                        self = this;

                    this.base.restoreSelection();

                    element = MediumEditor.selection.getSelectionElement( this.document );

                    if ( ! element ) {
                        return;
                    }

                    this.classApplier.applyToSelection( iframeWin );

                    element.querySelectorAll( '.mfn-inline-txt-editing' ).forEach( function( el ) {
                        if ( el.classList.contains( 'mfn-inline-txt-editing' ) ) {
                            if( value.length ){
                                $( el ).css( key, value )
                                if( !data ) {
                                    $( el ).attr('data-'+key, $( el ).css( key ));
                                }else{
                                    $( el ).removeAttr('data-'+key);
                                }
                                self.button.classList = 'medium-editor-button-active';
                            }else{
                                $( el ).removeAttr('data-'+key);
                            }

                            el.classList.remove( 'mfn-inline-txt-editing' );

                            if ( 0 === el.classList.length ) {
                                el.removeAttribute( 'class' );
                            }
                        }
                    } );

                    this.triggerUpdate( element );

            },

            triggerUpdate: function( element ) {
                this.base.trigger( 'editableInput', {}, element );
            },

        });

        var ToolsHighlighter = MediumEditor.extensions.form.extend({
            name: 'mfnHghter',
            action: 'mfnHghter',
            aria: 'mfnHghter',
            contentDefault: '&#9775;',
            contentFA: '<i class="fas fa-highlighter"></i><span></span>',
            hasForm: true,
            override: false,
            parentCid: false,

            init: function() {
                MediumEditor.extensions.form.prototype.init.apply( this, arguments );
                this.classApplier = rangy.createClassApplier( 'mfn-inline-txt-editing', {
                    elementTagName: 'span',
                    tagNames: [ 'span', 'b', 'strong', 'a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
                    normalize: true
                } );

            },

            getForm: function() {
                if ( ! this.form ) {
                    this.form = this.createForm();
                }
                this.on( this.form, 'click', this.handleFormClick.bind( this ) );
                return this.form;
            },

            checkState: function( node ) {
                var nodes = MediumEditor.selection.getSelectedElements( this.document ),
                    mfnhighlighter = this.getExistingValue( nodes, true );

                if ( mfnhighlighter.check ) {
                    this.button.classList = 'medium-editor-button-active';
                }
            },

            createForm: function() {
                var self   = this,
                    doc    = this.document,
                    close  = doc.createElement( 'a' ),
                    form   = doc.createElement( 'div' );

                this.on( form, 'click', this.handleFormClick.bind( this ) );
                form.className = 'medium-editor-toolbar-form mfn-medium-editor-mfnhighlighter';
                form.id        = 'mfn-medium-editor-mfnhighlighter-' + this.getEditorId();

                $('<div class="mfn-medium-editor-form-row"><label>Color</label><input type="text" data-alpha="true" class="medium-editor-toolbar-input mfn-medium-editor-mfnhighlighter-color-input" /></div>').appendTo(form);
                $('<div class="mfn-medium-editor-form-row"><label>Background</label><input type="text" data-alpha="true" class="medium-editor-toolbar-input mfn-medium-editor-mfnhighlighter-background-input" /></div>').appendTo(form);
                $('<div class="mfn-medium-editor-form-row"><label>Style</label><select class="medium-editor-toolbar-input mfn-medium-editor-mfnhighlighter-style-input"><option value="" selected>Default</option><option value="underline">Underline</option></select></div>').appendTo(form);

                close.className = 'medium-editor-toolbar-close';
                close.innerHTML = '<i class="fas fa-check"></i>';
                form.appendChild( close );

                this.on( close, 'click', this.handleSaveClick.bind( this ), true );

                return form;
            },

            isDisplayed: function() {
                return this.getForm().classList.contains( 'mfn-visible' );
            },

            handleClick: function( event ) {
                var nodes,
                    txt;

                event.preventDefault();
                event.stopPropagation();

                if ( ! this.isDisplayed() ) {
                    nodes = MediumEditor.selection.getSelectedElements( this.document );
                    txt  = this.getExistingValue( nodes );
                    txt  = 'undefined' !== typeof txt ? txt : '';

                    this.showForm( txt );
                }else{
                    this.hideForm();
                }

                return false;
            },

            getInput: function() {
                var inputs = {
                    color: this.getForm().querySelector( 'input.mfn-medium-editor-mfnhighlighter-color-input' ),
                    background: this.getForm().querySelector( 'input.mfn-medium-editor-mfnhighlighter-background-input' ),
                    style: this.getForm().querySelector( 'select.mfn-medium-editor-mfnhighlighter-style-input' ),
                };
                return inputs;
            },

            showForm: function( mfnhighlighter ) {
                var self  = this,
                    input = this.getInput(),
                    form  = this.getForm();

                this.base.saveSelection();

                $content.find('#medium-editor-toolbar-'+this.getEditorId()+' .medium-editor-toolbar-actions').hide();
                form.classList.add( 'mfn-visible' );

                var color_val = mfnhighlighter.check ? mfnhighlighter.color : '';
                var bg_val = mfnhighlighter.check ? mfnhighlighter.background : '';
                var style_val = mfnhighlighter.check ? mfnhighlighter.style : '';

                $( input.color ).wpColorPicker( {
                    palettes: false,
                    mode : 'hsl',
                    change: function( event, ui ) {
                        self.handleHighlighterChange( ui.color.toString(), input.background.value, input.style.value );
                    },
                } );

                $( input.background ).wpColorPicker( {
                    palettes: false,
                    mode : 'hsl',
                    change: function( event, ui ) {
                        self.handleHighlighterChange( input.color.value, ui.color.toString(), input.style.value );
                    },
                } );

                this.setToolbarPosition();

                $( input.color ).iris( 'color', color_val );
                $( input.background ).iris( 'color', bg_val );

                $( input.color ).iris( 'hide' );
                $( input.background ).iris( 'hide' );

                $( input.color ).on('click', function() {
                    $( input.background ).iris( 'hide' );
                    $( input.color ).iris( 'show' );
                    return false;
                });

                $( input.background ).on('click', function() {
                    $( input.color ).iris( 'hide' );
                    $( input.background ).iris( 'show' );
                    return false;
                });

                $( input.style ).val(style_val).on('change', function() {
                    self.handleHighlighterChange( input.color.value, input.background.value, $(this).val() );
                });

            },

            getExistingValue: function( nodes, active = false ) {
                var nodeIndex,
                    mfnhighlighter,
                    el, check;

                if ( ! nodes.length ) {
                    nodes = this.base.elements;
                }

                check = false;

                for ( nodeIndex = 0; nodeIndex < nodes.length; nodeIndex++ ) {
                    el    = nodes[ nodeIndex ];

                    mfnhighlighter = {
                        check:      $( el ).hasClass('highlight') || $( el ).parent().hasClass('highlight') || $( el ).children().hasClass('highlight') ? true : false,
                        color:      $( el ).css( 'color' ),
                        background: $( el ).css( 'background-color' ),
                        style:      $( el ).hasClass('highlight-underline') ? 'highlight-underline' : ''
                    };

                }

                return mfnhighlighter;
            },

            handleFormClick: function( event ) {
                event.stopPropagation();
            },

            handleSaveClick: function( event ) {
                event.preventDefault();
                this.hideForm();
            },

            hideForm: function() {
                var self         = this,
                    form         = this.getForm();

                $content.find('#medium-editor-toolbar-'+this.getEditorId()+' .medium-editor-toolbar-actions').show();
                form.classList.remove( 'mfn-visible' );

                //this.base.restoreSelection();
                this.setToolbarPosition();
            },

            handleHighlighterChange: function( color, bg, style ) {
                var iframeWin = rangy.dom.getIframeWindow( iframe ),
                        self = this,
                        element;

                    this.base.restoreSelection();

                    element = MediumEditor.selection.getSelectionElement( this.document );

                    if ( ! element ) {
                        return;
                    }

                    this.classApplier.applyToSelection( iframeWin );

                    var txt_content = false;


                    element.querySelectorAll( '.mfn-inline-txt-editing' ).forEach( function( el ) {
                        if ( el.classList.contains( 'mfn-inline-txt-editing' ) ) {

                            if( !txt_content ){
                                // get clear txt
                                if( $(el).find('.highlight-word').length ){
                                    txt_content = $(el).find('.highlight-word').text();
                                }else{
                                    txt_content = $(el).text();
                                }

                                var $wrapper;

                                if( $(el).closest('.highlight').length ){
                                    $wrapper = $(el).closest('.highlight');
                                }else{
                                    $wrapper = $(el);
                                }

                                $wrapper.empty();
                                $wrapper.text(txt_content).removeClass('highlight highlight-underline');

                                if( style != '' ){
                                    $wrapper.addClass('highlight highlight-underline').css('color', color).css('background-color', bg).html('<span class="highlight-word">'+txt_content+'<span class="highlight-border" style="background-color:'+bg+'; color:'+color+';"></span></span>');
                                }else{
                                    $wrapper.addClass('highlight').css('color', color).css('background-color', bg).text(txt_content);
                                }

                                self.button.classList = 'medium-editor-button-active';
                            }

                            el.classList.remove( 'mfn-inline-txt-editing' );

                            if ( 0 === el.classList.length ) {
                                el.removeAttribute( 'class' );
                            }
                        }
                    } );

                    this.triggerUpdate( element );

            },

            triggerUpdate: function( element ) {
                this.base.trigger( 'editableInput', {}, element );
            },

        });

        $builder.find('.vb-item.mcb-column .mfn-inline-editor:not(.mfn-initialized)').each(function(i) {
            $iframeCont = $(this);

            $iframeCont.addClass('mfn-initialized').attr('data-mfnindex', inlineIndex);

            inlineEditors[inlineIndex] = new MediumEditor( $(this).get(0), {
                buttonLabels: 'fontawesome',
                contentWindow: iframe.contentWindow,
                ownerDocument: iframe.contentWindow.document,
                elementsContainer: iframe.contentWindow.document.body,
                anchorPreview: false,
                previewValueSelector: 'a',
                anchor: {
                    customClassOption: null,
                    customClassOptionText: 'Button',
                    linkValidation: false,
                    placeholderText: 'Paste or type a link',
                    targetCheckbox: true,
                    targetCheckboxText: 'Open in new window'
                },
                extensions: {
                    switchMore: new ToolsSwitchMore(),
                    colorPicker: new ToolsColorPicker(),
                    //mfnHghter: new ToolsHighlighter(),
                    typography: new ToolsTypography(),
                    mfnRemoveFormat: new ToolsMfnRemoveFormat(),
                },
                toolbar: {
                    buttons: ['typography', 'bold', 'italic', 'underline', 'strikethrough', 'colorPicker', 'anchor', 'quote', 'subscript', 'superscript', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'orderedlist', 'unorderedlist', 'indent', 'outdent', 'mfnRemoveFormat',  'switchMore'],
                },
                paste: {
                    forcePlainText: false,
                    cleanPastedHTML: false
                }
            });

            inlineIndex++;
        })
    }
}


// Blog & Portfolio - Masonry

function blogPortfolioMasonry() {

    $content.find('.isotope.masonry, .isotope.masonry-hover, .isotope.masonry-minimal').each(function() {

    var $el = $(this);

    if( !$el.hasClass('mfn-initialized') ){
        $el.addClass('mfn-initialized');
    $el.imagesLoaded( function() {

    $el.isotope({
      itemSelector: '.isotope-item',
      layoutMode: 'masonry',
      isOriginLeft: rtl ? false : true
    });

            $('.preview-wrapper').css({'margin-left': $('.sidebar-wrapper').width()-1});
            setTimeout(function () { $('.preview-wrapper').css({'margin-left': $('.sidebar-wrapper').width() }); },500);
        });

}

});

}

// Append spans to additional info table

function spanToAdditionalInfo(){
    $content.find('.woocommerce-product-attributes td, .woocommerce-product-attributes th').each(function() {
      $(this).html('<span>'+$(this).html()+'</span>');
    });
}


var scrollTicker, lightboxAttr, sidebar,
    rtl = $('body').hasClass('rtl'),
    simple = $('body').hasClass('style-simple'),
    topBarTop = '61px',
    headerH = 0,
    mobileInitW = (mfn.mobileInit) ? mfn.mobileInit : 1240;

    // Slick Slider | Auto responsive

    function slickAutoResponsive(slider, max, size, round = false) {

      if (!max){
        max = 5;
      }
      if (!size){
        size = 380;
      }

      var width = slider.width() || 0;
      var count;

      if ( round ) {
        count = Math.floor(width / size);
      } else {
        count = Math.ceil(width / size);
      }

      if (count < 1) count = 1;
      if (count > max) count = max;

      return count;
    }

// banner box 

function mfnBannerBox() {

    if( !$content.find('.column_banner_box .hidden-desc').length ) return;

      if( $content.find(".mfn-banner-box .last-visible-el").length ) {
          $content.find(".mfn-banner-box .last-visible-el").removeClass('last-visible-el');
          $content.find('.hidden-wrapper .hidden-desc').removeAttr('style');
      }

      $content.find(".mfn-banner-box").each( function() {

        let container = $(this);

              if( container.find('.hidden-desc').length ) {
                if( container.find('.hidden-desc').prev().length ) container.find('.hidden-desc').prev().addClass("last-visible-el");

                var hd_h = container.find('.hidden-wrapper').outerHeight();

                container.find('.hidden-desc').css( { '--mfn-banner-box-height': hd_h + 'px' } );

              }

      });
    
}

// Slider | Blog

  function mfnSliderBlog() {

    var pager = function(el, i) {
      return '<a>' + i + '</a>';
    };

    $content.find('.blog_slider .blog_slider_ul:not(.slick-initialized)').each(function() {

    var slider = $(this);
    var slidesToShow = 4;

    var count = slider.closest('.blog_slider').attr('count');
    var singlePostMode = slider.closest('.blog_slider').hasClass('single_post_mode');

    if (slidesToShow > count) {
      slidesToShow = count;
      if (slidesToShow < 1) {
        slidesToShow = 1;
      }
    }

    if (singlePostMode) {
      slidesToShow = 1;
    }

    slider.slick({
      cssEase: 'ease-out',
      dots: true,
      infinite: true,
      touchThreshold: 10,
      speed: 300,

      prevArrow: '<a class="button the-icon slider_prev" href="#"><span class="button_icon"><i class="icon-left-open-big"></i></span></a>',
      nextArrow: '<a class="button the-icon slider_next" href="#"><span class="button_icon"><i class="icon-right-open-big"></i></span></a>',
      appendArrows: slider.siblings('.blog_slider_header').children('.slider_navigation'),

      appendDots: slider.siblings('.slider_pager'),
      customPaging: pager,

      rtl: rtl ? true : false,
      autoplay: mfn.slider.blog ? true : false,
      autoplaySpeed: mfn.slider.blog ? mfn.slider.blog : 5000,

      slidesToShow: slickAutoResponsive(slider, slidesToShow),
      slidesToScroll: slickAutoResponsive(slider, slidesToShow)
    });


  });


}

  // Slider | Clients

function mfnSliderClients() {
$content.find('.clients_slider_ul').each(function() {

  var slider = $(this);

  var clientsPerSlide = slider.closest('.clients_slider').attr('data-client-per-slide') ? parseInt(slider.closest('.clients_slider').attr('data-client-per-slide')) : 4;

  var navigationPosition = slider.closest('.clients_slider').attr('data-navigation-position') || false;
    var appendArrows = ( navigationPosition == 'content' ) ? slider : slider.siblings('.blog_slider_header').children('.slider_navigation');

  var size = 400;

  var calc = () => slickAutoResponsive(slider, clientsPerSlide, size - (clientsPerSlide * 40), true);

  slider.not('.slick-initialized').slick({
    cssEase: 'ease-out',
    dots: false,
    infinite: true,
    touchThreshold: 10,
    speed: 300,

    prevArrow: '<a class="button the-icon slider_prev" href="#" aria-label="previous slide"><i class="icon-left-open-big"></i></a>',
        nextArrow: '<a class="button the-icon slider_next" href="#" aria-label="next slide"><i class="icon-right-open-big"></i></a>',
    appendArrows: appendArrows,

    rtl: rtl ? true : false,
    autoplay: mfn.slider.clients ? true : false,
    autoplaySpeed: mfn.slider.clients ? mfn.slider.clients : 5000,

    slidesToShow: calc(),
    slidesToScroll: calc()
  });

  // ON | debouncedresize

  $(window).on('debouncedresize', function() {
    slider.slick('slickSetOption', 'slidesToShow', calc(), false);
    slider.slick('slickSetOption', 'slidesToScroll', calc(), true);
  });

});
}


var templatesPostType = {

    count: $('.mfn-df-row:not(.clone)').length ? $('.mfn-df-row:not(.clone)').length : 0,

    beforeUpdate: function() {
        $('.woo-display-conditions').on('click', function(e) {
          e.preventDefault();
          // resetSaveButton();
          $('.modal-display-conditions').addClass('show');
        });

        $('.df-add-row').on('click', function(e) {
          e.preventDefault();
          var $cloned = $('.mfn-df-row.clone').clone();
          $cloned.find('.df-input').each(function() {
            $(this).attr('name', $(this).attr('data-name').replace("mfn_template_conditions[0]", "mfn_template_conditions["+templatesPostType.count+"]"));
            $(this).removeAttr('data-name');
          })
          $cloned.removeClass('clone').appendTo( $('.mfn-dynamic-form') );
          templatesPostType.count++;
        });

        $('.modal-display-conditions').on('click', '.df-remove', function(e) {
          e.preventDefault();
          $(this).closest('.mfn-df-row').remove();
        });

        $('.modal-display-conditions').on('change', '.df-input-rule', function() {
          if( $(this).val() == 'exclude' ){
            $(this).addClass('minus');
          }else{
            $(this).removeClass('minus');
          }
        });

        $('.modal-display-conditions').on('change', '.df-input-var', function() {
          $(this).siblings('.df-input-opt').removeClass('show');
          if( $(this).val() != 'shop' && $(this).siblings('.df-input-'+$(this).val()).length ) {
            $(this).siblings('.df-input-'+$(this).val()).addClass('show');
          }
        });

        templatesPostType.closeModal();
    },

    closeModal: function() {
        // close
        $('.modal-display-conditions .btn-modal-close').on('click', function(e) {
          e.preventDefault();
          $('.modal-display-conditions').removeClass('show');
        });
    }

};

if($('.modal-display-conditions').length){
    templatesPostType.beforeUpdate();
}

/**
 *
 * NEW ACM start
 *
 * */

$editpanel.on('click', '.panel-edit-item .row-header.toggled_header', function(e) {
    e.preventDefault();
    var header = $(this);
    let component = header.closest('.mfn-component-wrapper');

    if( $('style.mfn-fields-switcher-'+component.attr('data-id')).length ) {
        $('style.mfn-builder-fields-css:not(.mfn-fields-switcher-normal-hover)').remove();
    }else{
        $('style.mfn-builder-fields-css:not(.mfn-fields-switcher-normal-hover)').remove();
        $('body').append('<style class="mfn-builder-fields-css mfn-fields-switcher mfn-fields-switcher-'+component.attr('data-id')+'">.mfn-ui .mfn-form .mfn-section-is-tabber .mfn-component-wrapper-'+component.attr('data-id')+' .mfn-form-row.mfn-alert{ display: flex; } .mfn-ui .mfn-form .mfn-component-wrapper-'+component.attr('data-id')+' .mfn-form-row.conditionally-show{ display: block; } .mfn-class-editor .mfn-element-fields-wrapper .modalbox-card-style .mfn-component-wrapper-'+component.attr('data-id')+' .mfn-form-row.mfn-class-editor-form-row-visible{display: block;} .mfn-element-fields-wrapper .mfn-component-wrapper-'+component.attr('data-id')+' .mfn-toggled{display: block;} .mfn-element-fields-wrapper .mfn-component-wrapper-'+component.attr('data-id')+' .toggled_header h5:before{ transform: rotate(180deg); color: var(--mfn-ui-heading-arrow-active); }</style>');
    }
});

var mfn_label_fields = {
    id: false,
    class: '',
    init: function() {
        $(document).on('mousedown', '.mfn-form-row.toggle_fields > label > .mfn-vb-label-button', function(e) {
            e.preventDefault();

            var box = $(this).closest('.mfn-form-row');
            mfn_label_fields.id = box.attr('data-id');
            mfn_label_fields.class = mfn_label_fields.id.replaceAll(' ', '.');

            initFontSelect(box);

            $('body').append('<style class="mfn-builder-fields-css mfn-builder-label-fields mfn-builder-fields-css-'+ mfn_label_fields.id.replaceAll(' ', '')+'">.mfn-ui .mfn-form .mfn-form-row[data-id="'+mfn_label_fields.class+'"] > label .mfn-vb-label-button {background-color: #72a5d8;} .mfn-ui .mfn-form .mfn-form-row[data-id="'+mfn_label_fields.class+'"] > label .mfn-vb-label-button .mfn-icon-edit { background-image: url('+mfn.themepath+'/visual-builder/assets/svg/options/edit-light.svg); }.mfn-ui .mfn-form .mfn-form-row[data-id="'+mfn_label_fields.class+'"] .mfn-toggle-fields-wrapper{display: block;}</style>');
            $('.sidebar-wrapper').addClass('mfn-vb-sidebar-overlay');
            $(document).bind('mousedown', mfn_label_fields.hide);

        });
    },
    hide: function(e) {
        var div = $('.mfn-element-fields-wrapper .mfn-form-row[data-id="'+mfn_label_fields.class+'"] .mfn-toggle-fields-wrapper');
        var tools_switcher = $('.mfn-element-fields-wrapper .mfn-form-row[data-id="'+mfn_label_fields.class+'"] .mfn-vb-label-button');

        if ( (!div.is(e.target) && div.has(e.target).length === 0 ) || tools_switcher.is(e.target) ) {
            $('style.mfn-builder-label-fields').remove();
            $('.sidebar-wrapper').removeClass('mfn-vb-sidebar-overlay');

            $(document).unbind('mousedown', mfn_label_fields.hide);
        }
    }
}

mfn_label_fields.init();

function initFontSelect(box) {
    let options = '';
    if( box.find('.form-group.font-family-select select').length ) {
        box.find('.form-group.font-family-select select').each(function() {
            var $select = $(this);

            if( typeof mfn.mfn_google_fonts !== 'undefined' ) {
              mfn.mfn_google_fonts.forEach((entry) => {
                options += '<option value="'+ entry +'">'+ entry +'</option>';
              });
              if( $select.find('optgroup[data-type="google-fonts"] option').length == 1 ) {
                $select.find('optgroup[data-type="google-fonts"]').html(options);
              }
            }

            let value = $select.attr('data-value');
            if( typeof value !== 'undefined' ) {
                if( $select.find('option[value="'+value+'"]').length ) {
                    $select.val(value);
                }else if($select.find('option[value="#'+value+'"]').length) {
                    $select.val('#'+value);
                }
            }
        });
    }
}

function initSocialSorting($box) {
    if( $box.find('.social-link .social-wrapper:not(.mfn-initialized)').length ) {

        let $wrapper = $box.find('.social-link .social-wrapper:not(.mfn-initialized)');
        let $input = $box.find('input.social-order');

        $wrapper.sortable({
            axis: "y",
            handle: ".drag",
            stop: function(event, elem) {
                var arr = [];
                $wrapper.find('li').each(function() {
                    arr.push( $(this).attr('data-key') );
                });
                $input.val(arr.join(',')).trigger('change');
            }
        });

        $wrapper.addClass('mfn-initialized');
    }
}

// Reset CSS Filters to default
$editpanel.on('click', '.mfn-form-row.toggle_fields > label > a.reset-big-field', function(e) {
    e.preventDefault();

    var $editrow = $(this).closest('.mfn-form-row');
    let id = $editrow.attr('data-id');

    if( !_.has(edited_item, 'attr') || !_.has(edited_item['attr'], id) ) return;

    delete(edited_item.attr[id]);

    setTimeout(function() {
        sidebar_form.render();
        loopAllStyleFields(edited_item.uid);
    },1);

});





$editpanel.on('click', '.mfn-form-row.mfn-sidebar-fields-tabs > ul.mfn-sft-nav li a', function(e) {
    e.preventDefault();
    var tab = $(this).attr('data-tab');
    var li = $(this).closest('li');

    var index = li.index()+1;

    $('style.mfn-fields-switcher-normal-hover').remove();
    $('body').append('<style class="mfn-builder-fields-css mfn-fields-switcher-normal-hover">.mfn-ui .mfn-form .mfn-sft-nav li:nth-child('+index+') a{background: var(--mfn-ui-sft-nav-tab-bg-active); color: var(--mfn-ui-sft-nav-tab-color-active);} .mfn-ui .mfn-form .mfn-sft.mfn-sft-'+tab+'{display: block;}</style>');


    /*$box.find('ul.mfn-sft-nav li').removeClass('active');
    $box.find('.mfn-sft').removeClass('mfn-tabs-fields-active');
    $box.find('.mfn-sft .mfn-form-row').addClass('mfn-toggled');

    $box.find('.mfn-sft-'+tab).addClass('mfn-tabs-fields-active');
    $box.find('.mfn-sft-'+tab+' .mfn-form-row').removeClass('mfn-toggled');

    if( !$box.find('.mfn-sft-'+tab+' .mfn-form-row.mfn-fields-switcher .segmented-options li.active').length ){
        $box.find('.mfn-sft-'+tab+' .mfn-form-row.mfn-fields-switcher .segmented-options li:first-child a').trigger('click');
    }

    $(this).parent().addClass('active');*/
});

$editpanel.on('click', '.panel-edit-item ul.sidebar-panel-content-tabs > li', function(e) {
    e.preventDefault();

    var tab = $(this).attr('data-tab');
    $('.mfn-ui').removeClass('modalbox-card-active-content modalbox-card-active-style modalbox-card-active-advanced').addClass('modalbox-card-active-'+tab);


    if( !$(this).hasClass('active') ) {

        $(this).addClass('active');
        $(this).siblings().removeClass('active');

        if( $(this).hasClass('spct-li-advanced') || $(this).hasClass('spct-li-style') ){
            let fid = $('.mfn-element-fields-wrapper .modalbox-card.modalbox-card-'+tab+' .mfn-component-wrapper:first-child');

            if( !fid.find('.toggled_header:not(.conditionally-hide)').length ){
                fid = $('.mfn-element-fields-wrapper .modalbox-card.modalbox-card-'+tab+' .mfn-component-wrapper:nth-child(2)');
            }

            if( !fid.find('.toggled_header:not(.conditionally-hide)').length ){
                fid = $('.mfn-element-fields-wrapper .modalbox-card.modalbox-card-'+tab+' .mfn-component-wrapper:nth-child(3)');
            }

            if( $('.mfn-element-fields-wrapper .modalbox-card.modalbox-card-'+tab+' .mfn-component-wrapper').length ){
                if( !$('style.mfn-fields-switcher-'+fid.attr('data-id')).length ){
                    fid.find('.toggled_header:not(.conditionally-hide)').trigger('click');
                }
            }
        }

    }

    return;

});

/* CSS */

$('.body_offset_header .mfn-form-control').on('change', function() {
    var val = $(this).val();
    if(val == 'active') {
        var header_height = $builder.outerHeight()+'px';
        $('.body-offset-header-value .mfn-form-control').val(header_height);
    }
});

$editpanel.on('change', '.has-default-unit.mfn-field-value', function() {
    var $field = $(this);
    var val = $field.val();
    var units_check = false;

    if( val.includes('--') ) return;

    if( $field.val().length ) {
        $.each( units, function( i, el ) {
            if( val == 'initial' || val == 'auto' || val == 'unset' || val.includes(el) || val.includes('--') ){
                units_check = true;
            }
        });

        if(units_check == false) $field.val(val+$field.attr('data-unit')).trigger('change');
    }
    
});


$editpanel.on('change', '.inline-style-input .mfn-field-value, .inline-style-input input[type="checkbox"]', function() {
    var $field = $(this);
    var it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');
    var val = $field.val();
    var units_check = false;
    var fonts = [];


    if( $field.closest('.font-family').length && $field.val().length ){
        fonts.push( $field.val() );
    }

    // web font load
    if( fonts.length ){
        WebFont.load({
            google: {
              families: fonts
            },
            context: window.frames[0].frameElement.contentWindow,
        });
    }

    if( $field.closest('.mfn-form-row').hasClass('custom-background-size-section') && val == 'cover-ultrawide' ) {
        $content.find('.'+it).addClass('bg-cover-ultrawide');
    }else if( $field.closest('.mfn-form-row').hasClass('custom-background-size-section') && val != 'cover-ultrawide' ) {
        $content.find('.'+it).removeClass('bg-cover-ultrawide');
    }

    setTimeout(function() { grabFieldStyle( $field ); }, 20);
});


function prepareCss(csspath, cssstyle, val, uid, rwd) {

    //console.log(uid);

    if( typeof val === 'object' ) {
        var filter = '';
        var backdrop = '';
        $.each(val, function(k, v) {

            if( cssstyle.includes('typography') ){
                addLocalStyle(csspath, v, k, rwd, uid);
            }else if( cssstyle.includes('backdrop-filter') && v.length ){
                if( k == 'string' ) backdrop = v;
            }else if( cssstyle.includes('filter') && v.length ){
                if( k == 'string' ) filter = v;
            }else if( cssstyle.includes('gradient') ){

                if( k == 'string' && v.length ) {
                    addLocalStyle(csspath, v, 'background-image', rwd, uid);
                }else if( k == 'string' && !v.length ) {
                    addLocalStyle(csspath, '', 'background-image', rwd, uid);
                }

            }else if( cssstyle === 'transform'){
                addLocalStyle(csspath, `matrix(${val.scaleX}, ${val.skewY}, ${val.skewX}, ${val.scaleY}, ${val.translateX}, ${val.translateY}) rotate(${val.rotate}deg)`, 'transform', rwd, uid);
            }else{
                addLocalStyle(csspath, v, cssstyle+'-'+k, rwd, uid);
            }

        });

        if( filter.length ) {
            addLocalStyle(csspath, filter, 'filter', 'desktop', uid);
        }

        if( backdrop.length ) {
            addLocalStyle(csspath, backdrop, 'backdrop-filter', 'desktop', uid);
        }

        return;

    }

    if( (cssstyle == 'flex' || cssstyle == 'flex_laptop' || cssstyle == 'flex_tablet' || cssstyle == 'flex_mobile') && val.length ){
        cssstyle = 'width';
    }

    /*
    if( val == '' && (cssstyle == 'flex' || cssstyle == 'flex_tablet' || cssstyle == 'flex_laptop' || cssstyle == 'flex_mobile') ){
        addLocalStyle(csspath, 'unset', 'max-width', rwd, uid);
    }*/

    if( cssstyle == 'transformtranslatex' ){
        addLocalStyle(csspath, 'translateX('+val+')', 'transform', rwd, uid);
        return;
    }

    if( cssstyle == 'transformtranslatey' ){
        addLocalStyle(csspath, 'translateY('+val+')', 'transform', rwd, uid);
        return;
    }

    if( (cssstyle == 'background-image' || cssstyle == 'background-image_tablet' || cssstyle == 'background-image_laptop' || cssstyle == 'background-image_mobile' || cssstyle == '-webkit-mask-image') && val.length ){

        if( val == '{featured_image}' ){
            val = 'var(--mfn-featured-image)';
        }else if( val != 'none' ){
            val = 'url('+val+')';
        }

    }

    if( (cssstyle == 'background-size' || cssstyle == 'background-size_laptop' || cssstyle == 'background-size_tablet' || cssstyle == 'background-size_mobile') && val.length && val == 'custom' ) {
        val = '';
    }

    if( (cssstyle == 'background-position' || cssstyle == 'background-position_laptop' || cssstyle == 'background-position_tablet' || cssstyle == 'background-position_mobile') && val.length && val == 'custom' ) {
        val = '';
    }

    addLocalStyle(csspath, val, cssstyle, rwd, uid);
}

function grabFieldStyle($field){
    // to remove after tests
    let $box = $field.closest('.mfn-form-row');
    let val = $field.attr('type') == 'checkbox' && !$field.prop('checked') ? '' : $field.val();
    let it =  $box.closest('.mfn-element-fields-wrapper').length ? $box.closest('.mfn-element-fields-wrapper').attr('data-element') : 'pageopt';
    //let uid = it == 'pageopt' ? mfn.pageid : $content.find('.'+it).attr('data-uid');
    let uid = edited_item.uid == 'pageoptions' ? mfn.pageid : edited_item.uid;
    let rwd = 'desktop';

    if( $box.hasClass('mfn_field_rwd') ) rwd = screen;

    if( $box.closest('.transform_field').length ){
        return;
    }

    if( $box.closest('.inline-style-input.gradient').length ) $box = $box.closest('.inline-style-input.gradient');

    let csspath = $box.attr('data-csspath');
    let cssstyle = $box.attr('data-name');
    let id = $box.attr('data-id');

    if( csspath && csspath.includes('dynamicelementhere') ) {
        csspath = csspath.replace('dynamicelementhere', val);
        val = $box.attr('data-dynamicvalue');

        loopAllStyleFields(edited_item.uid);
    }

    if( $box.closest('.typography').length ) {
        csspath = $box.closest('.typography').attr('data-csspath');
        cssstyle = $field.attr('data-key');
    }

    if( sidebar_form.is_class ) {
        it =  edited_item.uid;
        uid = edited_item.uid;
        csspath = csspath.replaceAll('mcb-item-mfnuidelement', uid).replaceAll('mcb-wrap-mfnuidelement', ''+uid).replaceAll('mcb-section-mfnuidelement', uid);
    }

    if( _.has( additional_css, id) ) {
        if( val.length && _.has( additional_css[id]['rewrites'], val) ) {
            addLocalStyle(additional_css[id]['selector'].replace('mfnuidelement', edited_item.uid), additional_css[id]['rewrites'][val], additional_css[id]['style'], rwd, uid);
        }else{
            addLocalStyle(additional_css[id]['selector'].replace('mfnuidelement', edited_item.uid), '', additional_css[id]['style'], rwd, uid);
        }
    }

    if($box.find('input.pseudo-field').length && !$field.hasClass('pseudo-field')){
        return;
    }

    if($box.find('input.pseudo-field').length){
        val = $box.find('input.pseudo-field').val();
    }

    if($box.find('.separated-fields').length){
        cssstyle = cssstyle+'-'+$field.attr('data-key');
    }

    if( val == 'cover-ultrawide' ){
        val = '';
    }

    if( csspath == '.mcb-section .mcb-wrap .mcb-item-mfnuidelement' && cssstyle == 'width' ) {
        if($('body').hasClass('mfn-navigator-active') ) be_navigator.show(edited_item.uid);
    }

    if( cssstyle == 'font-family' && val.includes('#') ) {
        val = val.replace('#', '');
    }

    if( ( cssstyle == 'background-image' || cssstyle == '-webkit-mask-image' ) && val.length && !$box.hasClass('gradient') && !$builder.find('.'+it).closest('.mfn-looped-items').length ) {
        if( val == '{featured_image}' && ( $box.hasClass('section') || $box.hasClass('wrap') ) && $box.hasClass('background-image') ) {
            val = 'var(--mfn-featured-image)';
        }else if( val != 'none' ) {
            val = 'url('+val+')';
        }
    }

    if( cssstyle == 'background-size' && val.length && val == 'custom' ) {
        val = '';
    }
    
    if( cssstyle == 'background-position' && val.length && val == 'custom' ) {
        val = '';
    }

    if( cssstyle == 'transformtranslatex' ) {
        addLocalStyle(csspath, 'translateX('+val+')', 'transform', rwd, uid);
    }

    if( cssstyle == 'transformtranslatey' ) {
        addLocalStyle(csspath, 'translateY('+val+')', 'transform', rwd, uid);
    }

    /*if( sidebar_form.is_class ){
        setTimeout(function() {
            mfn_classes.has_changed = edited_item;
        }, 100);
    }*/

    addLocalStyle(csspath, val, cssstyle, rwd, uid);

}

// set size labels

function setSizeLabels() {
    $content.find('.mfn-size-label .mfn-element-size-label').each(function() {
        let uid = $(this).closest('.vb-item').attr('data-uid');

        let curr_object = mfn.pagedata.filter( (item) => item.uid == uid )[0];

        if( typeof curr_object !== 'undefined' && typeof curr_object['attr'] !== 'undefined' ) {

            if( typeof curr_object['attr']['width_switcher'] !== 'undefined' && curr_object['attr']['width_switcher'] == 'custom' ) {
                $(this).text('Custom');
                if( curr_object.jsclass == 'wrap' && $('body').hasClass('mfn-navigator-active') ) $('.navigator-tree .navigator-wrap.nav-'+curr_object.uid+' > a > .navigator-size-label').text('Custom');
            }else{
                let curr_size = $(this).closest('.vb-item').attr('data-'+screen+'-size');
                $(this).text(curr_size);
                if( curr_object.jsclass == 'wrap' && $('body').hasClass('mfn-navigator-active') ) $('.navigator-tree .navigator-wrap.nav-'+curr_object.uid+' > a > .navigator-size-label').text(curr_size);
            }

        }

        setTimeout(function() {
            resetBeforeAfter();
        }, 1100);

    });
}

// woocomemrce product gallery

var productgallery = {
    start: function( $container ) {

        $container.imagesLoaded( function() {

            if(!$container.find('.flex-viewport').length) {
                iframe.window.jQuery('.woocommerce-product-gallery:not(.mfn-initialized)').wc_product_gallery();
                $container.addClass('mfn-initialized');
            }

            if($container.find('.flex-viewport').length) {
                $loup = $container.find('.woocommerce-product-gallery__trigger').clone(true).empty().appendTo('.flex-viewport');
                $container.find('.woocommerce-product-gallery__trigger').remove();

                if($container.find('.mfn-wish-button').length){
                    $container.find('.mfn-wish-button').clone(true).appendTo('.flex-viewport');
                    $container.find('.mfn-wish-button').remove();
                }
            }else if( $container.find('.woocommerce-product-gallery__trigger').length ) {
                $container.find('.woocommerce-product-gallery__trigger').empty();
            }

            if($container.find('.flex-control-thumbs').length) {
                $container.find('.flex-control-thumbs').wrap('<div class="mfn-flex-control-thumbs-wrapper"></div>');
            }

            $container.imagesLoaded( function() {
                if( $container.hasClass('.mfn-thumbnails-left') || $container.hasClass('.mfn-thumbnails-right') ){
                    setTimeout(function() { productgallery.verticalThumbs($container); }, 300);
                }else if( $container.hasClass('.mfn-thumbnails-bottom') ){
                    productgallery.horizontalThumbs($container);
                }
            });

            iframe.window.jQuery('body').trigger('resize');

        });

    },
    horizontalThumbs: function($container) {
        //var $container = $container.find('.mfn-product-gallery');
        var containerW = $container.outerWidth();
        var $scroller = $container.find('.flex-control-thumbs');
        var scrollerW = 0;

        $scroller.find('li').each(function() {
          $(this).addClass('swiper-slide');
          scrollerW += $(this).outerWidth();
        });

        if( !$container.length || !$scroller.length ){
          return;
        }

        if( scrollerW > containerW ){
          //return;
          $scroller.css({ 'justify-content': 'flex-start', 'width': '100%' });
          $container.find('.mfn-flex-control-thumbs-wrapper').addClass('mfn-scroller-active');
        }

        $scroller.addClass('swiper-wrapper');

    },
    verticalThumbs: function($container) {
        //var $container = $container.find('.mfn-product-gallery)');
        var containerH = $container.find('.woocommerce-product-gallery__image').first().outerHeight();
        var $scroller = $container.find('.flex-control-thumbs');
        var scrollerH = 0;
        var mimgm = 0; // main image margin
        var overlay = mfnwoovars.productthumbsover ? mfnwoovars.productthumbsover : 0;

        $scroller.find('li img').css({ 'height': 'auto' });
        $scroller.find('li').css({ 'height': 'auto' });

        $scroller.find('li').each(function() {
          $(this).addClass('swiper-slide').css({ 'margin-bottom': parseInt(mfnwoovars.productthumbs) });
          scrollerH += $(this).outerHeight()+parseInt(mfnwoovars.productthumbs);
          $(this).css({ 'opacity': '1' });
        });

        if(mfnwoovars.mainimgmargin == 'mfn-mim-2'){
          mimgm = 4;
        }else if(mfnwoovars.mainimgmargin == 'mfn-mim-5'){
          mimgm = 10;
        }else if(mfnwoovars.mainimgmargin == 'mfn-mim-10'){
          mimgm = 20;
        }else if(mfnwoovars.mainimgmargin == 'mfn-mim-15'){
          mimgm = 30;
        }else if(mfnwoovars.mainimgmargin == 'mfn-mim-20'){
          mimgm = 40;
        }else if(mfnwoovars.mainimgmargin == 'mfn-mim-25'){
          mimgm = 50;
        }else if(mfnwoovars.mainimgmargin == 'mfn-mim-30'){
          mimgm = 60;
        }

        if( !$container.length || !$scroller.length ){
          return;
        }

        $container.find('.flex-viewport').css({'height': 'auto'});

        if( scrollerH > containerH ){
          if(overlay == 'mfn-thumbnails-overlay'){
            $container.find('.mfn-flex-control-thumbs-wrapper').height( (containerH-mimgm) );
          }else{
            $container.find('.mfn-flex-control-thumbs-wrapper').height(containerH);
          }

          $scroller.css({ 'align-items': 'flex-start' });
          $container.find('.mfn-flex-control-thumbs-wrapper').addClass('mfn-scroller-active');


          $scroller.addClass('swiper-wrapper');

          /*var swiper = new Swiper(".mfn-flex-control-thumbs-wrapper", {
            slidesPerView: 4,
            spaceBetween: parseInt(mfnwoovars.productthumbs),
            direction: "vertical",
            mousewheel: true,
          });*/

          $scroller.find('li').each(function() {
            $(this).find('img').css({ 'height': $(this).outerHeight() });
            $(this).css({ 'opacity': '1' });
          });

        }
    }
  };

/**
 * Conditions
 * mfnoptsinputs()
 */

var mfnoptsinputs = {

    condition: {},
    relation: 'AND',

  start: function() {

    var prepareValues = false;

    let items = $('.mfn-ui .mfn-form .activeif:not(.mfn-initialized)');

    if( items.length ) {
        items.each(function() {

            mfnoptsinputs.condition = JSON.parse( $(this).attr('data-condition') );

            if( Array.isArray(mfnoptsinputs.condition) && typeof mfnoptsinputs.condition[0] == 'string' ) {
                mfnoptsinputs.relation = mfnoptsinputs.condition[0];
                mfnoptsinputs.condition.splice(0, 1);
            }

            if (Array.isArray(mfnoptsinputs.condition)) {

                mfnoptsinputs.condition.map( (c) => {
                    if( !$('.mfn-ui .mfn-form #'+c.id+'.watchChanges').length ){
                        $(this).addClass('conditionally-hide');
                        $('.mfn-ui .mfn-form  #'+c.id).addClass('watchChanges');
                        prepareValues = true;
                    }
                });

            }else{
                if( !$('.mfn-ui .mfn-form #'+mfnoptsinputs.condition.id+'.watchChanges').length ){
                    $(this).addClass('conditionally-hide');
                    $('.mfn-ui .mfn-form  #'+mfnoptsinputs.condition.id).addClass('watchChanges');
                    prepareValues = true;
                }
            }

            $(this).addClass('mfn-initialized');
        });
    }

    if( prepareValues ) mfnoptsinputs.startValues();

  },

  startValues: function() {
    $('.mfn-ui .mfn-form .watchChanges').each(function() {
        var id = $(this).attr('id');
        mfnoptsinputs.getField(id);
    });
  },

  watchChanges: function() {
    // segmented options is in segmented click function
    $(document).on('change', '.watchChanges .mfn-field-value, .watchChanges .condition-field, .watchChanges .field-to-object', function() {
        var formrow = $(this).closest('.watchChanges');
        var id = formrow.attr('id');
        mfnoptsinputs.getField(id);
    });
  },

  getField: function(id) {
    $('.mfn-ui .mfn-form .activeif-'+id).each(function() {
      var formrow = $(this);
      mfnoptsinputs.showhidefields(formrow);
    });
  },

  showhidefields: function(formrow) {

    var val = '';

    mfnoptsinputs.condition = JSON.parse( formrow.attr('data-condition') );


    if( Array.isArray(mfnoptsinputs.condition) && typeof mfnoptsinputs.condition[0] == 'string' ) {
        mfnoptsinputs.relation = mfnoptsinputs.condition[0];
        mfnoptsinputs.condition.splice(0, 1);
    }

    const regex = /\{featured_image:(\d+):badge\}/;

    if (Array.isArray(mfnoptsinputs.condition)) {

        let show = 0;
        let c_l = mfnoptsinputs.condition.length;

        mfnoptsinputs.condition.map( (c) => {

            if( $('#'+c.id+'.mfn-form-row .single-segmented-option.segmented-options').length || $('#'+c.id+'.mfn-form-row .visual-options').length || $('#'+c.id+'.mfn-form-row .mfn-switch').length ) {
                val = $('#'+c.id+'.mfn-form-row input:checked').val();
            }else{
                val = $('#'+c.id+'.mfn-form-row .mfn-field-value, #'+c.id+'.mfn-form-row .condition-field, #'+c.id+'.mfn-form-row .field-to-object').val();
            }

            if( c.opt == 'is' && ( (val != '' && (c.val.includes(val) || regex.test(val) )) || (val == '' && c.val == '') ) ) {
                show++;
            }else if( c.opt == 'isnt' && ( (c.val == '' && val != '') || (val == '' && c.val != '') || val != c.val ) ) {
                show++;
            }else{
                if( mfnoptsinputs.relation == 'OR' ){
                    show--;
                }else{
                    show = 0;
                    return true;
                }
            }
        });

        if( mfnoptsinputs.relation == 'OR' && show >= 0 ){
            formrow.addClass('conditionally-show').removeClass('conditionally-hide');
        }else if( show == c_l ){
            formrow.addClass('conditionally-show').removeClass('conditionally-hide');
        }else{
            formrow.addClass('conditionally-hide').removeClass('conditionally-show');
        }

    }else{

        if( $('#'+mfnoptsinputs.condition.id+'.mfn-form-row .single-segmented-option.segmented-options').length || $('#'+mfnoptsinputs.condition.id+'.mfn-form-row .visual-options').length || $('#'+mfnoptsinputs.condition.id+'.mfn-form-row .mfn-switch').length ){
            val = $('#'+mfnoptsinputs.condition.id+'.mfn-form-row input:checked').val();
        }else{
            val = $('#'+mfnoptsinputs.condition.id+'.mfn-form-row .mfn-field-value, #'+mfnoptsinputs.condition.id+'.mfn-form-row .condition-field, #'+mfnoptsinputs.condition.id+'.mfn-form-row .field-to-object').val();
        }

        if( mfnoptsinputs.condition.opt == 'is' && ( (val != '' && (mfnoptsinputs.condition.val.includes(val) || regex.test(val) )) || (val == '' && mfnoptsinputs.condition.val == '') ) ) {
            formrow.addClass('conditionally-show').removeClass('conditionally-hide');
        }else if( mfnoptsinputs.condition.opt == 'isnt' && ( (mfnoptsinputs.condition.val == '' && val != '') || (val == '' && mfnoptsinputs.condition.val != '') || val != mfnoptsinputs.condition.val ) ) {
            formrow.addClass('conditionally-show').removeClass('conditionally-hide');
        }else{
            formrow.addClass('conditionally-hide').removeClass('conditionally-show');
        }

    }    

  },

};

/**
 * Transforms function
*/

const Transforms = {
    // DOM RELATED
    sidebarMenu: '',  // Sidemenu from BeBuilder
    insertSidebarMenu( sidebarMenu ){
        if ( !sidebarMenu.closest('.transform_field') ) return console.error('Wrong DOM location of transform inputs');
        this.sidebarMenu = sidebarMenu;
        return this;
    },

    // CREATION OF TRANSFORM STRING & OBJECT
    readyString: '',              // for BeBuilder preview
    readyStringWithoutRotate: '', // for BeBuilder preview
    transformDuration: 0,         // for BeBuilder preview
    readyObject: {},              // for BeBuilder update info
    createOrExtendObject( queriedValue, transform ) {
        this.readyObject = {...this.readyObject, [transform.key]: queriedValue}
        return this;
    },
    createOrExtendString( queriedValue, transform ) {

        // console.log(queriedValue);
        // First conditional is for ROTATE only

        if (transform.key === this.inputs[this.inputs.length-1].key) {
            this.readyString += queriedValue;
        } else {
            this.readyString += `${queriedValue},`;
        }

        return this;
    },
    createStringWithoutRotate(){
        if (!this.readyString || this.readyString === '') return console.error('String of transforms is not created!');

        let last_index = this.readyString.split(",");

        this.readyStringWithoutRotate = last_index.slice(0, last_index.length - 1).join(",");
        return this;
    },
    createTransformDuration(){
        if (!this.sidebarMenu || this.sidebarMenu === '') return console.error('The sidebar menu DOM is not inserted!');

        transformDuration = $(this.sidebarMenu).closest('.mfn-form-row').siblings('*[data-name="transition"]');
        if (transformDuration) {
            this.transformDuration = $(transformDuration).find('input.mfn-field-value').val();
        }

        return this;
    },

    // INPUTS HANDLER
    inputs: [
        // Matrix array in proper order
        { key: 'scaleX',      domLocation_value: 'input.mfn-field-value[data-key="scaleX"]', defaultValue: 1 },
        { key: 'skewY',       domLocation_value: 'input.mfn-field-value[data-key="skewY"]',  defaultValue: 0  },
        { key: 'skewX',       domLocation_value: 'input.mfn-field-value[data-key="skewX"]',  defaultValue: 0  },
        { key: 'scaleY',      domLocation_value: 'input.mfn-field-value[data-key="scaleY"]', defaultValue: 1  },
        { key: 'translateX',  domLocation_value: 'input.mfn-field-value[data-key="translateX"]', defaultValue: 0  },
        { key: 'translateY',  domLocation_value: 'input.mfn-field-value[data-key="translateY"]', defaultValue: 0  },

        // Not in matrix array, should be always last arr element!
        { key: 'rotate',      domLocation_value: 'input.mfn-field-value[data-key="rotate"]', defaultValue: 0  },
    ],

    loopThrouInputs() {
        this.readyString = ''; //every loop this needs to be refreshed

        for(let transform of this.inputs) {
            let queriedDOM = $(this.sidebarMenu).find('.transform_field ' + transform['domLocation_value']);

            let queriedValue = !!queriedDOM.val() ? parseFloat(queriedDOM.val()) : parseFloat(transform.defaultValue);

            this.createOrExtendObject( queriedValue, transform )
            this.createOrExtendString( queriedValue, transform )
        }

        return this;
    },

    // BEBUILDER UI RELATED
    attachInitialMargins(){
        $transforms = $builder.find('.mfn-transformed').find('.mfn-header-transform:not([data-initMarginLeft])');

        $transforms.each(function(index, item){
            const transformSibling = jQuery(item).siblings('.mcb-column-inner').length ? jQuery(item).siblings('.mcb-column-inner') : jQuery(item).siblings('.mcb-wrap-inner');

            jQuery(item).attr('data-initMarginLeft', jQuery(transformSibling).css('marginLeft')).css('marginLeft', jQuery(transformSibling).css('marginLeft'));
            jQuery(item).attr('data-initMarginTop', jQuery(transformSibling).css('marginTop')).css('marginTop', jQuery(transformSibling).css('marginTop'));
        })
    },
    attachNewMargins(){
        if($content && $content.find('.mfn-transformed').length){
            $transforms = $builder.find('.mfn-header-transform[data-initMarginLeft]');

            $transforms.each(function(index, item){
                const transformSibling = jQuery(item).siblings('.mcb-column-inner').length ? jQuery(item).siblings('.mcb-column-inner') : jQuery(item).siblings('.mcb-wrap-inner');

                jQuery(item).css('marginLeft', `${jQuery(transformSibling).css('marginLeft')}`);
                jQuery(item).css('marginTop', `${jQuery(transformSibling).css('marginTop')}`);
            })
        }
    },

    // BEBUILDER PREVIEW OF TRANSFORM
    renderTransforms(){

        const tempInnerClass = $($edited_div).hasClass('wrap') ? `.mcb-wrap-inner` : `.mcb-column-inner`; //left for wrap transforms!
        const uidEdited = edited_item.uid;
        const domLocation = this.sidebarMenu.closest('.transform').attr('data-csspath');
        let id = this.sidebarMenu.closest('.transform').attr('data-id');

        // If has no transform class, add it and attach initial value!
        if( !$($edited_div).hasClass('mfn-transformed') ) {
            $($edited_div).addClass('mfn-transformed');
            this.attachInitialMargins();
        }

        var style = 'transform';
        addLocalStyle(`${domLocation}`, `matrix(${this.readyStringWithoutRotate}) rotate(${this.readyObject.rotate}deg)`, style, screen, uidEdited);

        if( typeof edited_item['attr'][id] === 'undefined' ) edited_item['attr'][id] = {};
        if( typeof edited_item['attr'][id]['val'] === 'undefined' ) edited_item['attr'][id]['val'] = {};
        if( typeof edited_item['attr'][id]['val'][screen] === 'undefined' ) edited_item['attr'][id]['val'][screen] = {};

        edited_item['attr'][id]['selector'] = domLocation;
        edited_item['attr'][id]['style'] = style;

        edited_item['attr'][id]['val'][screen] = {
            ...this.readyObject,
            ...{'string': this.readyString}
        };

        setTimeout(function() {
            sidebar_form.render();
        }, 10);
        
        return this;
    },

    // EVENTS
    addInputsListener() {

        const that = this;

        $editpanel.on('change', '.transition .mfn-field-value', function(){
            $editpanel.trigger('change', '.transform input.mfn-field-value');
        })

        $editpanel.on('change', '.transform .mfn-field-value', function(){
          const sidebarMenu = $(this).closest('.transform').closest('.mfn-form-row.transform');

          that
          .insertSidebarMenu($(sidebarMenu))
          .loopThrouInputs()
          .createStringWithoutRotate()
          .createTransformDuration()
          .renderTransforms();

        })
    },

    // RETURNS
    get() {
        return {readyString: this.readyString, readyObject: this.readyObject, stringWithoutRotate: this.readyStringWithoutRotate, transformDuration: this.transformDuration};
    }
}

/* FIELDS */
$(document).on('change', '.panel-edit-item .mfn-form .field-to-object, .panel-edit-item .mfn-form .mfn-field-value', function() {
    if( $(this).val() && $(this).val().startsWith('--') && !$(this).val().includes('var(') && $(this).val() != '--' ){
        $(this).val('var('+$(this).val()+')');
    }

    updateObject($(this));
}).on('focus', '.panel-edit-item .mfn-form .field-to-object, .panel-edit-item .mfn-form .mfn-field-value', function() {
    sidebar_form.focus = '[name="'+$(this).attr('name')+'"]';
    if( typeof $(this).attr('data-key') != 'undefined' ) sidebar_form.focus += '[data-key="'+$(this).attr('data-key')+'"]';
}).on('blur', '.panel-edit-item .mfn-form .field-to-object, .panel-edit-item .mfn-form .mfn-field-value', function() {
    sidebar_form.focus = false;
});


$(document).on('change', '.mfn-component-wrapper .tabber_animation .mfn-field-value', function() {
    let val = $(this).val();
    var it = $(this).closest('.mfn-element-fields-wrapper').attr('data-element');

    $content.find('.'+it).removeClass('mfn-tabber-animation-fade-in mfn-tabber-animation-fade-in-left mfn-tabber-animation-fade-in-right mfn-tabber-animation-fade-in-up mfn-tabber-animation-fade-in-down mfn-tabber-animation-zoom-in');

    if( val.length ) $content.find('.'+it).addClass('mfn-tabber-animation-'+val);

});


$(document).on('change', '.mfn-element-fields-wrapper .query_post_type .mfn-field-value', function() {
    mfn['current_post_type'] = $(this).val();
});

$(document).on('change', '.mfn-element-fields-wrapper .filters.post_type .mfn-field-value', function(e) {

    if( edited_item?.attr?.filters_fields && _.has(edited_item?.attr?.post_type) ) {

        $('.mfn-ui').addClass('mfn-modal-open').append('<div class="mfn-modal modal-confirm show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-delete"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Post type change detected</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close btn-modal-abort" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"> <img class="icon" alt="" src="'+mfn.themepath+'/muffin-options/svg/warning.svg"> <h3>Post type conflict</h3> <p>You’re using taxonomies in your filters that aren’t assigned to the newly selected post type. If you continue, these filters will be removed. You can also cancel this action and keep your current filters.</p><a class="mfn-btn btn-modal-abort" href="#"><span class="btn-wrapper">Cancel</span></a> <a class="mfn-btn mfn-btn-red btn-wide btn-modal-confirm" href="#"><span class="btn-wrapper">Continue</span></a> </div></div></div>');

        $('.btn-modal-abort').on('click', function(e) {
            e.preventDefault();
            $('.mfn-ui').removeClass('mfn-modal-open');
            $('.modal-confirm.show').remove();

            $('.mfn-element-fields-wrapper .filters.post_type .mfn-field-value').val(mfn['current_post_type']);

            edited_item.attr.post_type = mfn['current_post_type'];
        });

        $('.btn-modal-confirm').on('click', function(e) {
            e.preventDefault();
            $('.modal-confirm.show').remove();
            $('.mfn-ui').removeClass('mfn-modal-open');
            mfn['current_post_type'] = $(this).val();

            delete(edited_item.attr.filters_fields);

            sidebar_form.render();
            re_render();
        });


    }else{
        mfn['current_post_type'] = $(this).val();
        sidebar_form.render();
    }
    
});

$(document).on('change', '.mfn-element-fields-wrapper .query_terms_taxonomy .mfn-field-value', function() {
    mfn['current_tax'] = $(this).val();
});

$(document).on('click', '.mfn-reset-val-icon', function(e) {
    e.preventDefault();
    let id = $(this).closest('.mfn-form-row').attr('data-id');
    if( _.has(edited_item['attr'], id) ) delete(edited_item['attr'][id]);
    
    setTimeout(function() {
        loopAllStyleFields(edited_item.uid);
        if( _.has(edited_item, 'be_classes') && edited_item.be_classes.length ) loopAllStyleFields(edited_item.be_classes[0]);
        if( !id.includes('css_') ) re_render();
        sidebar_form.render();
    },10);

});

function updateObject( $field ){
    var it = $field.closest('.mfn-element-fields-wrapper').attr('data-element');
    var $editrow = $field.closest('.mfn-form-row');
    var $box = $field.closest('.mfn_input_wrapper');

    if( $editrow.hasClass('themeoption') ) return;
    if( $editrow.hasClass('pageoption') ) return;
    if( $editrow.hasClass('css_advanced_transform') || $editrow.hasClass('css_advanced_transform_hover') ) return;
    if( $editrow.find('.checkboxes.pseudo').length ) return;

    if( !_.has(edited_item, 'attr') ) edited_item['attr'] = {};

    if( Array.isArray(edited_item['attr']) ) edited_item['attr'] = Object.assign({}, edited_item['attr']);

    var field_name = typeof $field.attr('name') !== 'undefined' ? $field.attr('name') : $field.attr('data-name');
    var selector = '';
    var style = '';
    var key = null;
    var order = 0; // for tabs
    var val = $field.is(':checkbox') && !$field.prop('checked') ? '' : $field.val(); // checkbox unclickable
    var has_updated = false;

    /*console.log('**************************');
    console.trace('re_render caller');
    console.log(val);
    console.log('**************************');*/

    if( $editrow.hasClass('object-css-input') && !$editrow.closest('.mfn-hotspot-point').length ) {
        selector = $editrow.attr('data-csspath');
        style = $editrow.attr('data-name');

        if( !_.has(edited_item['attr'], field_name) || typeof edited_item['attr'][field_name] == 'string' ) edited_item['attr'][field_name] = {};
        if( !_.has(edited_item['attr'][field_name], 'val') || typeof edited_item['attr'][field_name]['val'] == 'string' ) edited_item['attr'][field_name]['val'] = {};
        if( $field.closest('.mfn-form-row.mfn_field_rwd').length && !_.has(edited_item['attr'][field_name]['val'], screen) ) edited_item['attr'][field_name]['val'][screen] = {};
        if( $field.closest('.mfn-form-row.mfn_field_rwd').length && _.has(edited_item['attr'][field_name]['val'], screen) && Array.isArray(edited_item['attr'][field_name]['val'][screen])) edited_item['attr'][field_name]['val'][screen] = Object.assign({}, edited_item['attr'][field_name]['val'][screen]);
    
        if( selector && selector.includes('dynamicelementhere') ) {
            selector = selector.replace('dynamicelementhere', val);
            val = $editrow.attr('data-dynamicvalue');
        }

    }

    if( $field.closest('.typography').length && typeof $field.attr('data-key') !== 'undefined' ) {
        key = $field.attr('data-key');
        selector = $field.closest('.typography').attr('data-csspath');
        style = 'typography';
        if( key.includes('font-family') && val.length ) val = val.replace('#', '');
    }else if( $editrow.closest('.inline-style-input.gradient').length || $editrow.hasClass('backdrop-filter') || $editrow.hasClass('filter') ) {
        key = $field.attr('data-key');
        selector = $editrow.closest('.inline-style-input').attr('data-csspath');
        style = $editrow.closest('.inline-style-input').attr('data-name');
    }else if( $editrow.find('.separated-fields').length && typeof $field.attr('data-key') !== 'undefined' ){
        key = $field.attr('data-key');
    }else if( $editrow.hasClass('mfn-tabs-row') && $field.closest('li.tab').length ){

        if( field_name.includes('tabs[') ) field_name = 'tabs';

        key = $field.attr('data-label');
        order = $field.attr('data-order');
        if( !_.has(edited_item['attr'][field_name], order) ) edited_item['attr'][field_name][order] = {};
        if( !_.has(edited_item['attr'][field_name][order], key) ) edited_item['attr'][field_name][order][key] = {};

        if( val.length ){
            edited_item['attr'][field_name][order][key] = val;
        }else if( typeof edited_item['attr'][field_name][order][key] != 'undefined' ) {
            delete(edited_item['attr'][field_name][order][key]);
        }

        has_updated = true;
    }else if( $editrow.closest('.mfn-multifield-point').length ) {

        let field_id = $editrow.closest('.mfn-multifield-point').closest('.mfn-form-row').attr('data-name');
        let point_hash = $editrow.closest('.mfn-multifield-point').attr('id');

        if( edited_item['attr'][field_id].filter(item => item.hash == point_hash ).length ) {

            let ht = edited_item['attr'][field_id].filter(item => item.hash == point_hash )[0];

            if( field_name.includes('css_') ) {

                if( typeof ht['val'] == 'undefined' ) ht['val'] = {};

                if( _.has(ht['val'], field_name) ) {
                    if( $editrow.hasClass('mfn_field_rwd') ){
                        ht['val'][field_name]['val'][screen] = val;
                    }else{
                        ht['val'][field_name]['val'] = val;
                    }
                }else{
                    var tmp_val = {};
                    tmp_val['style'] = $editrow.attr('data-name');
                    tmp_val['selector'] = $editrow.attr('data-csspath');

                    if( $field.closest('.mfn-form-row').hasClass('mfn_field_rwd') ){
                        if( !_.has(tmp_val, 'val') ) tmp_val['val'] = {};
                        tmp_val['val'][screen] = val;
                    }else{
                        tmp_val['val'] = val;
                    }

                    ht['val'][field_name] = tmp_val;
                }
            }else{
                if( $field.closest('.mfn-form-row').hasClass('mfn_field_rwd') ){
                    if( !_.has(ht, field_name) || typeof ht[field_name] == 'string' ) ht[field_name] = {};
                    ht[field_name][screen] = val;
                }else{
                    ht[field_name] = val;
                }
                
            }

        }

        has_updated = true;
    
    }

    if( !has_updated ) {
        if( !_.isEmpty(val) || $field.closest('.mfn-placeholder-inherited-class').length ) {

            if( $editrow.hasClass('object-css-input') ) {

                edited_item['attr'][field_name]['selector'] = selector;
                edited_item['attr'][field_name]['style'] = style;

                if( key && key.length ) {
                    if( $editrow.hasClass('mfn_field_rwd') ){
                        edited_item['attr'][field_name]['val'][screen][key] = val;
                    }else{
                        edited_item['attr'][field_name]['val'][key] = val;
                    }
                }else{
                    if( $editrow.hasClass('mfn_field_rwd') ){
                        edited_item['attr'][field_name]['val'][screen] = val;
                    }else{
                        edited_item['attr'][field_name]['val'] = val;
                    }
                }
                
            }else{

                if( $editrow.hasClass('mfn_field_rwd') ) {
                    if( !_.has(edited_item['attr'], field_name ) || typeof edited_item['attr'][field_name] == 'string' || ( typeof edited_item['attr'][field_name] == 'object' && Array.isArray(edited_item['attr'][field_name]) ) ) edited_item['attr'][field_name] = {};
                    edited_item['attr'][field_name][screen] = val;
                }else{
                    edited_item['attr'][field_name] = val;
                }

            }

            if( $field.closest('.mfn-placeholder-inherited-rwd').length || $field.closest('.mfn-placeholder-inherited-class').length || $field.closest('.mfn-placeholder-inherited-std').length ) {
                $field.closest('.mfn-placeholder-inherited-rwd').removeClass('mfn-placeholder-inherited-rwd');
                $field.closest('.mfn-placeholder-inherited-std').removeClass('mfn-placeholder-inherited-std');
                $field.closest('.mfn-placeholder-inherited-class').removeClass('mfn-placeholder-inherited-class');
                if( ($field.closest('.segmented-options').length || $field.hasClass('mfn-form-select')) && !$editrow.find('.mfn-reset-val-icon').length) {
                    $editrow.find('label').first().addClass('form-label-wrapper').append('<a href="#" class="mfn-option-btn mfn-option-blank mfn-reset-val-icon"><span class="mfn-icon mfn-icon-reset"></span></a>');
                }
            }

        }else if( _.isEmpty(val) && (_.has(edited_item['attr'], field_name) || $editrow.hasClass('mfn-placeholder-inherited-class')) ) {

            if( $editrow.hasClass('object-css-input') ) {

                if( key && key.length ){
                    if( $editrow.hasClass('mfn_field_rwd') ){
                        delete(edited_item['attr'][field_name]['val'][screen][key]);
                    }else{
                        delete(edited_item['attr'][field_name]['val'][key]);
                    }
                }else{
                    if( $editrow.hasClass('mfn_field_rwd') ){
                        delete(edited_item['attr'][field_name]['val'][screen]);
                    }else{
                        delete(edited_item['attr'][field_name]);
                    }
                }

                if( _.has(edited_item['attr'], field_name) && _.has(edited_item['attr'][field_name], 'val') && _.isEmpty( edited_item['attr'][field_name]['val'] ) ) delete(edited_item['attr'][field_name]);

            }else{
                if( $editrow.hasClass('mfn_field_rwd') ){
                    delete(edited_item['attr'][field_name][screen]);
                }else{
                    delete(edited_item['attr'][field_name]);
                }
            }

            setTimeout(sidebar_form.render, 50);
            
        }

    }

    if( typeof $field.attr('data-pointobj') !== 'undefined' && $content.find('.'+it+' .mfn-hotspot-style-line .hotspot-image').length ) {
        var c_id = $content.find('.'+it+' .mfn-hotspot-style-line .hotspot-image').attr('id').replace('wrapper', '');
        mfn_multifield_field.refresh(c_id, $field);
    }

    var iframeWin = document.getElementById('mfn-vb-ifr').contentWindow;

    setTimeout( function() {

        if( ($content.find('.'+it).hasClass('mfn-section-tabber') && $content.find('.'+it).find('.mfn-tabber-nav-hover-sliding').length) || $editrow.has('iframe_resize_trigger') ) {
            iframeWin.jQuery(iframeWin.document).trigger('mfn:ajax:refresh');
        }

        if( $field.val() && $field.val().length && $field.val().includes('{') ) {

            // re render whole loop wrapper
            if( $content.find('.'+it).closest('.mfn-looped-items').length || $content.find('.'+it).find('.mfn-looped-items').length || $content.find('.'+it).closest('.mfn-section-tabber').length ) {
                re_render( $content.find('.'+it).closest('.mcb-section.vb-item').attr('data-uid') );
            }else{
                re_render( edited_item.uid );
            }

            $editrow.addClass('mfn-field-loading');

        }else if( $editrow.hasClass('re_render') || $editrow.hasClass('mfn-tabs-row') ) {

            if( $content.find('.'+it).closest('.mfn-looped-items').length || $content.find('.'+it).find('.mfn-looped-items').length || $content.find('.'+it).hasClass('mfn-nested-wrap') ) {
                re_render( $content.find('.'+it).closest('.mcb-section.vb-item').attr('data-uid') );
            }else{
                re_render( edited_item.uid );
            }

            $editrow.addClass('mfn-field-loading');

        }

        if( !$editrow.hasClass('re_render') && !$editrow.hasClass('disable-history') && !$content.find('.'+it).closest('.mfn-looped-items').length && !$editrow.find('.multiple-inputs').length ) historyStorage.add();

        if( $editrow.hasClass('banner_box') ) mfnBannerBox();

    }, 50);

    if( $editrow.hasClass('mfn_field_render_sidebar_form') ) {
        setTimeout( function() {
             sidebar_form.render();
        }, 60);
    }

    enableBeforeUnload();

}



$editpanel.on('change paste', '.panel-view-options .mfn-form .mfn-field-value, .panel-view-options .mfn-form .mfn-form-checkbox', function() {
    
    let editrow = $(this).closest('.mfn-form-row');
    let name = editrow.attr('data-name');
    let id = editrow.attr('data-id');
    let val = $(this).val();
    let key = typeof $(this).attr('data-key') !== 'undefined' ? $(this).attr('data-key') : false;

    if( editrow.find('.checkboxes:not(.pseudo)').length && !$(this).is(':checked') ) val = '';

    if( editrow.hasClass('object-css-input') ) {

        if( typeof edited_item[id] == 'undefined' || typeof edited_item[id] != 'object' ) edited_item[id] = {};
        if( !_.has(edited_item[id], 'val') || typeof edited_item[id]['val'] == 'string' ) edited_item[id]['val'] = {}; 

        edited_item[id]['selector'] = editrow.attr('data-csspath');
        edited_item[id]['style'] = name;

        if( editrow.hasClass('mfn_field_rwd') ) {
            if( !_.has(edited_item[id]['val'], screen) ) {

                if( !_.isEmpty(edited_item[id]['val']) ) {

                    if( !_.has( edited_item[id]['val'], 'desktop' ) && !_.has( edited_item[id]['val'], 'laptop' ) && !_.has( edited_item[id]['val'], 'tablet' ) && !_.has( edited_item[id]['val'], 'mobile' ) ){
                        let tmp_val = JSON.parse( JSON.stringify(edited_item[id]['val']) );
                        edited_item[id]['val'] = {};
                        edited_item[id]['val'][screen] = tmp_val;
                    }

                }else{
                    edited_item[id]['val'][screen] = {};
                }

            }
            
            if( key ) {
                if( !_.has(edited_item[id]['val'], screen) ) edited_item[id]['val'][screen] = {};
                edited_item[id]['val'][screen][key] = val;
            }else{
                edited_item[id]['val'][screen] = val;
            }
            
        }else{
            if( key ){
                edited_item[id]['val'][key] = val;
            }else{
                edited_item[id]['val'] = val;
            }
        }
    
        val = edited_item[id];
    }else{
        edited_item[id] = val;
    }



    if( id == 'mfn-post-layout' ) {
        $('.panel-view-options .mfn-form .mfn-post-sidebar .mfn-field-value').trigger('change');
        $('.panel-view-options .mfn-form .mfn-post-sidebar2 .mfn-field-value').trigger('change');
    }

    // header options
    if( builder_type == 'header' ) {

        if( editrow.hasClass('header_mobile') && val == 'enabled' ) {
            $('.mfn-be-header-builder .mfn-header-type-preview a[data-preview="header-mobile"]').removeClass('disabled');
        }else if( editrow.hasClass('header_mobile') ) {
            $('.mfn-be-header-builder .mfn-header-type-preview a[data-preview="header-mobile"]').addClass('disabled');
            $('.mfn-be-header-builder .mfn-header-type-preview a[data-preview="header-default"]').trigger('click');
        }

        if( editrow.hasClass('header_sticky') && val == 'enabled' ) {
            $('.mfn-be-header-builder .mfn-header-type-preview a[data-preview="header-sticky"]').removeClass('disabled');
        }else if( editrow.hasClass('header_sticky') ) {
            $('.mfn-be-header-builder .mfn-header-type-preview a[data-preview="header-sticky"]').addClass('disabled');
            $('.mfn-be-header-builder .mfn-header-type-preview a[data-preview="header-default"]').trigger('click');
        }

        if( editrow.hasClass('body_offset_header') ) {
            if( val == 'active' ) {
                $content.find('.mfn-header-tmpl').removeClass('mfn-header-tmpl-absolute');
            }else if(!$content.find('.mfn-header-tmpl').hasClass('mfn-header-tmpl-absolute')) {
                $content.find('.mfn-header-tmpl').addClass('mfn-header-tmpl-absolute');
            }
        }

        if( editrow.hasClass('header_position') ) {
            if( val == 'default' ) {
                $content.find('.mfn-header-tmpl').removeClass('mfn-header-tmpl-absolute');
            }else if( !$('.body_offset_header .preview-body_offset_headerinput').val().length ) {
                $content.find('.mfn-header-tmpl').addClass('mfn-header-tmpl-absolute');
            }
        }

        if( editrow.hasClass('option header_width') ) {
            if( val == 'inherited' ) {
                $content.find('.mfn-header-tmpl').addClass('mfn-header-layout-width');
            }else{
                $content.find('.mfn-header-tmpl').removeClass('mfn-header-layout-width');
            }
        }

        if( editrow.hasClass('option header_sticky_width') ) {
            if( val == 'inherited' ) {
                $content.find('.mfn-header-tmpl').addClass('mfn-sticky-layout-width');
            }else{
                $content.find('.mfn-header-tmpl').removeClass('mfn-sticky-layout-width');
            }
        }

    }

    if( mfn.view == 'demo' ) return;

    updatePageOpt(id, val);    
});


function updatePageOpt(name, value){

    if( _.has(value, 'val') && _.has(value['val'], 'val') ){
        delete(value['val']['val']);
    }
    if( _.has(value, 'val') && _.has(value['val'], 'selector') ){
        delete(value['val']['selector']);
    }
    if( _.has(value, 'val') && _.has(value['val'], 'style') ){
        delete(value['val']['style']);
    }

    //page_options_tab.render();

    $.ajax( mfnajaxurl, {
        type : "POST",
        data : {
          'mfn-builder-nonce': wpnonce,
          action: 'mfn_post_option',
          id: pageid,
          option: name,
          value: value,
        },
        success: function() {
            if( mfn_live_css.pending ){
                mfn_live_css.pending = false;
                mfn_live_css.backup();
                if( $('.mfn-live-css-editor .btn-live-css-editor-save').hasClass('loading') ) $('.mfn-live-css-editor .btn-live-css-editor-save').removeClass('loading disabled');
                $('.mfn-live-css-editor .btn-live-css-editor-history-undo').removeClass('loading');
            }
        }

    });
}

// transform events

Transforms.addInputsListener();

/* THEME OPTIONS */

$editpanel.on('keyup paste change', '.themeoption.logo-text .mfn-field-value', function() {
    let val = $(this).val();
    if( val.length ){
        $content.find('#Top_bar .logo, #Header_creative .logo').addClass('text-logo');
        $content.find('#Top_bar .logo #logo, #Header_creative .logo #logo').html(val);
    }else{
        $content.find('#Top_bar .logo, #Header_creative .logo').removeClass('text-logo');
        $content.find('#Top_bar .logo #logo, #Header_creative .logo #logo').html('<img class="logo-main scale-with-grid " src="'+mfn.themepath+'/images/logo/logo.png" alt="Luk test"><img class="logo-sticky scale-with-grid" src="'+mfn.themepath+'/images/logo/logo.png" alt="Luk test"><img class="logo-mobile scale-with-grid " src="https://muffingroup.com/dev8624/lukas/woo/wp-content/uploads/2021/08/clothingstore-mobile.webp" alt="Luk test"><img class="logo-mobile-sticky scale-with-grid " src="'+mfn.themepath+'/images/logo/logo.png" alt="Luk test">');
    }
});

$editpanel.on('keyup paste change', '.themeoption.header-slogan .mfn-field-value', function() {
    let val = $(this).val();
    if( !$content.find('#Action_bar').length ) return;

    if( val.length ){
        if( $content.find('#Action_bar .contact_details .slogan').length ){
            $content.find('#Action_bar .contact_details .slogan').html(val);
        }else{
            $content.find('#Action_bar .contact_details').prepend('<li class="slogan">'+val+'</li>');
        }
    }else{
        $content.find('#Action_bar .contact_details .slogan').remove();
    }
});

$editpanel.on('keyup paste change', '.themeoption.header-phone .mfn-field-value', function() {
    let val = $(this).val();
    if( !$content.find('#Action_bar').length ) return;

    if( val.length ){
        if( $content.find('#Action_bar .contact_details .phone-1 a').length ){
            $content.find('#Action_bar .contact_details .phone-1 a').html(val);
        }else{
            $content.find('#Action_bar .contact_details').append('<li class="phone phone-1"><i class="icon-phone" aria-label="phone icon"></i><a href="#">'+val+'</a></li>');
        }
    }else{
        $content.find('#Action_bar .contact_details .phone-1').remove();
    }
});

$editpanel.on('keyup paste change', '.themeoption.header-phone-2 .mfn-field-value', function() {
    let val = $(this).val();
    if( !$content.find('#Action_bar').length ) return;

    if( val.length ){
        if( $content.find('#Action_bar .contact_details .phone-2 a').length ){
            $content.find('#Action_bar .contact_details .phone-2 a').html(val);
        }else{
            $content.find('#Action_bar .contact_details').append('<li class="phone phone-2"><i class="icon-phone" aria-label="phone icon"></i><a href="#">'+val+'</a></li>');
        }
    }else{
        $content.find('#Action_bar .contact_details .phone-2').remove();
    }
});

$editpanel.on('keyup paste change', '.themeoption.header-email .mfn-field-value', function() {
    let val = $(this).val();
    if( !$content.find('#Action_bar').length ) return;

    if( val.length ){
        if( $content.find('#Action_bar .contact_details .mail a').length ){
            $content.find('#Action_bar .contact_details .mail a').html(val);
        }else{
            $content.find('#Action_bar .contact_details').append('<li class="mail"><i class="icon-mail-line" aria-label="mail icon"></i><a href="#">'+val+'</a></li>');
        }
    }else{
        $content.find('#Action_bar .contact_details .mail').remove();
    }
});

$editpanel.on('keyup paste change', '.themeoption.footer-copy .mfn-field-value', function() {
    let val = $(this).val();
    if( !$content.find('#Footer .footer_copy .copyright').length ) return;

    if( val.length ){
        $content.find('#Footer .footer_copy .copyright').html(val);
    }else{
        $content.find('#Footer .footer_copy .copyright').html('&copy; '+new Date().getFullYear()+' Betheme by <a href="https://muffingroup.com" target="_blank">Muffin group</a> | All Rights Reserved | Powered by <a href="https://wordpress.org" target="_blank">WordPress</a>');
    }
});

$editpanel.on('keyup paste change', '.themeoption.header-menu-text .mfn-field-value', function() {
    let val = $(this).val();
    if( !$content.find('.mobile-header-mini #Top_bar a.responsive-menu-toggle').length ) return;

    if( val.length ){
        $content.find('.mobile-header-mini #Top_bar a.responsive-menu-toggle').html('<span>'+val+'</span>');
    }else{
        $content.find('.mobile-header-mini #Top_bar a.responsive-menu-toggle').html('<i class="icon-menu-fine" aria-hidden="true"></i>');
    }
});

$editpanel.on('keyup paste change', '.themeoption.footer-call-to-action .mfn-field-value', function() {
    let val = $(this).val();
    if( !$content.find('#Footer').length ) return;

    if( val.length ) {
        if( $content.find('#Footer .footer_action .mcb-column-inner').length ){
            $content.find('#Footer .footer_action .mcb-column-inner').html(val);
        }else{
            $content.find('#Footer').prepend('<div class="footer_action"><div class="container"><div class="column one mobile-one"><div class="mcb-column-inner">'+val+'</div></div></div></div>');
        }
    }else{
        $content.find('#Footer .footer_action').remove();
    }
});

$editpanel.on('keyup paste change', '.themeoption.header-action-title .mfn-field-value', function() {
    let val = $(this).val();
    if( !$content.find('#Header_wrapper .top_bar_right_wrapper').length ) return;

    if( val.length ){
        if( $content.find('#Header_wrapper .top_bar_right_wrapper .action_button.top-bar-right-button').length ){
            $content.find('#Header_wrapper .top_bar_right_wrapper .action_button.top-bar-right-button').html(val);
        }else{
            $content.find('#Header_wrapper .top_bar_right_wrapper').append('<a href="#" class="action_button top-bar-right-button ">'+val+'</a>');
        }
    }else{
        $content.find('#Header_wrapper .top_bar_right_wrapper .action_button.top-bar-right-button').remove();
    }
});

$editpanel.on('keyup paste change', '.themeoption.gdpr-content .mfn-field-value', function() {
    let val = $(this).val();
    if( !$content.find('#mfn-gdpr').length ) return;

    $content.find('#mfn-gdpr .mfn-gdpr-content').html(val);
});

$editpanel.on('keyup paste change', '.themeoption.gdpr-content-button_text .mfn-field-value', function() {
    let val = $(this).val();
    if( !$content.find('#mfn-gdpr').length ) return;

    $content.find('#mfn-gdpr .mfn-gdpr-button').html(val);
});

$editpanel.on('keyup paste change', '.themeoption.gdpr-content-more_info_text .mfn-field-value', function() {
    let val = $(this).val();
    if( !$content.find('#mfn-gdpr').length ) return;

    $content.find('#mfn-gdpr .mfn-gdpr-readmore').html(val);
});


$editpanel.on('click', '.themeoption .ajax a', function(e) {
    e.preventDefault();
    //console.log('randomize');
});


let to_been_aborted = false;

$editpanel.on('change paste', '.panel-view-themeoptions .mfn-form input:not(.mfn-prevent-change), .panel-view-themeoptions .mfn-form .mfn-field-value', function() {
    var $editrow = $(this).closest('.mfn-form-row');
    var name = $(this).attr('name');
    var value = $(this).val();

    if( $editrow.find('.multiple-inputs').length ) {

        let data_name = $editrow.attr('data-name');

        if( $editrow.find('.multiple-inputs .pseudo-field').length && $editrow.find('.multiple-inputs .pseudo-field').val().length ) {
            edited_item[data_name] = $editrow.find('.multiple-inputs .pseudo-field').val();
            value = $editrow.find('.multiple-inputs .pseudo-field').val();
        } else {
            let data_key = typeof $(this).attr('data-key') !== 'undefined' ? $(this).attr('data-key') : 'color';

            if( value.length ) {
                if( typeof edited_item[data_name] !== 'undefined' && typeof edited_item[data_name] !== 'string' ) {
                    edited_item[data_name][data_key] = value;
                }else{
                    edited_item[data_name] = {};
                    edited_item[data_name][data_key] = value;
                }
            }else{
                delete(edited_item[data_name][data_key]);
            }
        }        

    }else if( $editrow.find('.checkboxes').length ){

        let data_name = $(this).attr('name');
        let data_key = $(this).attr('data-key');

        if( $(this).is(':checked') ){
            if( typeof edited_item[data_name] !== 'undefined' && typeof edited_item[data_name] !== 'string' ) {
                edited_item[data_name][data_key] = value;
            }else{
                edited_item[data_name] = {};
                edited_item[data_name][data_key] = value;
            }
        }else{
            delete(edited_item[data_name][data_key]);
        }

    }else if( $editrow.find('.added-sidebars').length ){
        name = $(this).attr('name');

        if( !value.length ) {
            delete( edited_item[name][$(this).attr('data-key')] );
        }else{

            if( typeof edited_item[name] === 'undefined' && typeof edited_item[name] !== 'array' ){
                edited_item[name] = [];
            }

            edited_item[name].push(value);
        }

    }else if( $editrow.find('.social-icons').length ){
        let data_key = $(this).closest('li').length ? $(this).closest('li').attr('data-key') : $(this).attr('data-key');
        let data_name = $editrow.attr('data-name');

        if( typeof edited_item[data_name] !== 'undefined' && typeof edited_item[data_name] !== 'string' ) {
            edited_item[data_name][data_key] = value;
        }else{
            edited_item[data_name] = {};
            edited_item[data_name][data_key] = value;
        }

    }else if( $editrow.find('.color-picker.multi').length ){
        let data_name = $(this).attr('name');
        let data_key = $(this).attr('data-key');

        if( value.length ){

            if( typeof edited_item[data_name] !== 'undefined' && typeof edited_item[data_name] !== 'string' ) {
                edited_item[data_name][data_key] = value;
            }else{
                edited_item[data_name] = {};
                edited_item[data_name][data_key] = value;
            }

        }else{
            delete(edited_item[data_name][data_key]);
        }

    }else if( $editrow.find('.form-group.typography').length ){

        let data_name = $(this).attr('name');
        let data_key = $(this).attr('data-obj');

        if( value.length ){

            if( typeof edited_item[data_name] !== 'undefined' && typeof edited_item[data_name] !== 'string' ) {
                edited_item[data_name][data_key] = value;
            }else{
                edited_item[data_name] = {};
                edited_item[data_name][data_key] = value;
            }

        }else{
            delete(edited_item[data_name][data_key]);
        }

    }else{
        edited_item[name] = value;
    }


    if( $editrow.hasClass('themeoption') && ($editrow.hasClass('img-page-bg') || $editrow.hasClass('img-subheader-bg') || $editrow.hasClass('top-bar-bg-img') || $editrow.hasClass('subheader-image') || $editrow.hasClass('footer-bg-img') ) ) {
        // themeoption background image

        var field_class = 'img-page-bg';
        var style_path = 'html';

        if( $editrow.hasClass('img-subheader-bg') ){
            field_class = 'img-subheader-bg';
            style_path = 'body:not(.template-slider) #Header_wrapper';
        }else if( $editrow.hasClass('top-bar-bg-img') ){
            field_class = 'top-bar-bg-img';
            style_path = '#Top_bar, #Header_creative';
        }else if( $editrow.hasClass('subheader-image') ){
            field_class = 'subheader-image';
            style_path = '#Subheader';
        }else if( $editrow.hasClass('footer-bg-img') ){
            field_class = 'footer-bg-img';
            style_path = '#Footer';
        }

        if( $content.find('style#themeoption'+field_class).length ) $content.find('style#themeoption'+field_class).remove();
        $content.find('body').append('<style id="themeoption'+field_class+'">'+style_path+'{background-image: '+( value.length ? 'url('+value+')' : 'none' )+'; }</style>');
    }else if($editrow.hasClass('themeoption') && ( $editrow.hasClass('position-page-bg') || $editrow.hasClass('img-subheader-attachment') || $editrow.hasClass('top-bar-bg-position') || $editrow.hasClass('subheader-position') || $editrow.hasClass('footer-bg-img-position') ) ){
        // themeoptions bg position | repeat
        var val_helper = value.split(';');
        var val_string = '';
        var field_class = 'position-page-bg';
        var style_path = 'html';

        if( $editrow.hasClass('img-subheader-attachment') ) {
            field_class = 'img-subheader-attachment';
            style_path = 'body:not(.template-slider) #Header_wrapper';
        }else if( $editrow.hasClass('top-bar-bg-position') ) {
            field_class = 'top-bar-bg-position';
            style_path = '#Top_bar, #Header_creative';
        }else if( $editrow.hasClass('subheader-position') ) {
            field_class = 'subheader-position';
            style_path = '#Subheader';
        }else if( $editrow.hasClass('footer-bg-img-position') ) {
            field_class = 'footer-bg-img-position';
            style_path = '#Footer';
        }

        if( val_helper[0] != '' ) val_string += 'background-repeat: '+val_helper[0]+';';
        if( val_helper[1] != '' ) val_string += 'background-position: '+val_helper[1]+';';
        if( val_helper[2] != '' ) val_string += 'background-attachment: '+val_helper[2]+';';
        if( val_helper[3] != '' ) val_string += 'background-size: '+val_helper[3]+';';

        if( $content.find('style#'+field_class).length ){
            $content.find('style#'+field_class).html(style_path+'{ '+val_string+' }');
        }else{
            $content.find('body').append('<style id="'+field_class+'">'+style_path+'{'+val_string+'}</style>');
        }
    }else if( $editrow.hasClass('themeoption') && ( $editrow.hasClass('size-page-bg') || $editrow.hasClass('size-subheader-bg') || $editrow.hasClass('subheader-size') || $editrow.hasClass('footer-bg-img-size') ) ){
        // theme options bg image size

        var field_class = 'size-page-bg';
        var style_path = 'html';

        if( $editrow.hasClass('size-subheader-bg') ) {
            field_class = 'size-subheader-bg';
            style_path = 'body:not(.template-slider) #Header_wrapper';
        }else if( $editrow.hasClass('subheader-size') ) {
            field_class = 'subheader-size';
            style_path = '#Subheader';
        }else if( $editrow.hasClass('footer-bg-img-size') ) {
            field_class = 'footer-bg-img-size';
            style_path = '#Footer';
        }

        if( $content.find('style#themeoption'+field_class+'').length ){
            $content.find('style#themeoption'+field_class+'').html(style_path+'{background-size: '+value+'; }');
        }else{
            $content.find('body').append('<style id="themeoption'+field_class+'">'+style_path+'{background-size: '+value+'; }</style>');
        }
    }else if($editrow.hasClass('themeoption favicon-img')){
        // favicon
        var link = document.querySelector("link[rel~='icon']");
        if (!link) {
            link = document.createElement('link');
            link.rel = 'icon';
            document.getElementsByTagName('head')[0].appendChild(link);
        }
        if( value.length ){
            link.href = value;
        }else{
            link.href = mfn.themepath+'/images/favicon.ico';
        }
    }else if($editrow.hasClass('themeoption logo-vertical-padding')){
        // logo vertical padding
        if( $content.find('style#themeoptionlogo-vertical-padding').length ) $content.find('style#themeoptionlogo-vertical-padding').remove();
        if( value.length ) $content.find('body').append('<style id="themeoptionlogo-vertical-padding">#Top_bar #logo, .header-fixed #Top_bar #logo, .header-plain #Top_bar #logo, .header-transparent #Top_bar #logo{padding: '+(value.length ? value : '15')+'px 0px;}</style>');
    }else if($editrow.hasClass('themeoption logo-vertical-align')){
        // logo vertical align
        $content.find('body').removeClass('logo-valign-top logo-valign-bottom');
        if( value.length ) $content.find('body').addClass('logo-valign-'+value);
    }else if($editrow.hasClass('themeoption button-style')){
        // logo height
        $content.find('body').removeClass('button-default button-flat button-flat button-round button-stroke button-custom');
        if( value.length ) { $content.find('body').addClass('button-'+value); } else{ $content.find('body').addClass('button-default'); }
    }else if($editrow.hasClass('themeoption header-fw')){
        // header options
        $content.find('body').removeClass('header-fw header-boxed');
        $editrow.find('ul li input').each(function() {
            if( $(this).is(':checked') ){
                if( $(this).val() == 'full-width' ){
                    $content.find('body').addClass('header-fw');
                }else{
                    $content.find('body').addClass( $(this).val() );
                }
            }
        });
    }else if($editrow.hasClass('themeoption logo-advanced')){
        // logo advanced
        $content.find('body').removeClass('logo-no-margin logo-overflow logo-no-sticky-padding logo-sticky-width-auto');
        $editrow.find('ul li input').each(function() {
            if( $(this).is(':checked') ){
                $content.find('body').addClass( 'logo-'+$(this).val() );
            }
        });
    }else if($editrow.hasClass('themeoption transparent')){
        $content.find('body').removeClass('tr-header tr-menu tr-content tr-footer');
        $editrow.find('ul li input').each(function() {
            if( $(this).is(':checked') ){
                $content.find('body').addClass('tr-'+$(this).val());
            }
        });
    }else if($editrow.hasClass('themeoption menu-options')){
        // menu options
        $content.find('body').removeClass('menuo-right menuo-arrows menuo-no-borders menuo-sub-active menuo-last');
        $editrow.find('ul li input').each(function() {
            if( $(this).is(':checked') ){
                if( $(this).val() == 'align-right' ){
                    $content.find('body').addClass('menuo-right');
                }else if( $(this).val() == 'menu-arrows' ){
                    $content.find('body').addClass('menuo-arrows');
                }else if( $(this).val() == 'hide-borders' ){
                    $content.find('body').addClass('menuo-no-borders');
                }else if( $(this).val() == 'submenu-active' ){
                    $content.find('body').addClass('menuo-sub-active');
                }else if( $(this).val() == 'last' ){
                    $content.find('body').addClass('menuo-last');
                }
            }
        });
    }else if($editrow.hasClass('themeoption sticky-header-style')){
        // themeoption sticky header style
        $content.find('body').removeClass('sticky-tb-color sticky-white sticky-dark');
        $content.find('body').addClass('sticky-'+value);
    }else if($editrow.hasClass('themeoption subheader-style')){
        // themeoption sticky header style
        $content.find('body').removeClass('subheader-title-left subheader-both-center subheader-both-left subheader-both-right subheader-title-right');
        if( value.length ) { $content.find('body').addClass('subheader-'+value); }else{ $content.find('body').addClass('subheader-title-left'); }
    }else if($editrow.hasClass('themeoption subheader-padding')){
        // themeoption subheader padding
        if( $content.find('style#themeoptionsubheader-padding').length ) $content.find('style#themeoptionsubheader-padding').remove();
        $content.find('body').append('<style id="themeoptionsubheader-padding">#Subheader{padding: '+( value.length ? value : '60px 0 45px' )+' }</style>');
    }else if($editrow.hasClass('themeoption subheader-title-tag')){
        // themeoption title tag
        if( $content.find('#Subheader .title').length ){
            $content.find('#Subheader .title').replaceWith('<'+value+' class="title">'+$content.find('#Subheader .title').html()+'</'+value+'>');
        }
    }else if($editrow.hasClass('themeoption shop-align')){
        // themeoption shop txt align
        $content.find('.woocommerce ul.products li.product').removeClass('align-left align-right align-center');
        $content.find('.woocommerce ul.products li.product').addClass('align-'+(value.length ? value : 'center'));
    }else if($editrow.hasClass('themeoption shop-title-tag')){
        // themeoption title tag
        if( $content.find('.woocommerce ul.products li.product .desc .mfn-woo-product-title').length ){
            $content.find('.woocommerce ul.products li.product .desc .mfn-woo-product-title').each(function() {
                $(this).replaceWith('<'+(value.length ? value : 'h4')+' class="mfn-woo-product-title">'+$(this).html()+'</'+(value.length ? value : 'h4')+'>');
            });
        }
    }else if($editrow.hasClass('themeoption related-style')){
        // themeoption related posts
        if( !$content.find('.section-related-adjustment').length ) return;
        $content.find('.section-related-adjustment').removeClass('simple');
        if( value.length ) $content.find('.section-related-adjustment').addClass('simple');
    }else if($editrow.hasClass('themeoption subheader-title-tag')){
        // themeoption title tag
        if( $content.find('#Intro .intro-title').length ){
            $content.find('#Intro .intro-title').replaceWith('<'+value+' class="intro-title">'+$content.find('#Intro .intro-title').html()+'</'+value+'>');
        }
    }else if($editrow.hasClass('themeoption blog-title-tag')){
        // themeoption title tag blog
        if( $content.find('.post-item .entry-title').length ){
            $content.find('.post-item .entry-title').each(function() {
                $(this).replaceWith('<h'+value+' class="entry-title">'+$(this).html()+'</h'+value+'>');
            });
        }
    }else if($editrow.hasClass('themeoption sidebar-width')){
        // themeoption sidebar width
        if( $content.find('style#themeoptionsidebar-width').length ) $content.find('style#themeoptionsidebar-width').remove();
        $content.find('body').append('<style id="themeoptionsidebar-width">.with_aside .sidebar.columns{width: '+( value.length ? value+'%' : '23%' )+' }.with_aside .sections_group{width:'+( value.length ? (100-value)+'%' : '75%' )+'}</style>');
    }else if($editrow.hasClass('themeoption sidebar-style')){
        // themeoption sidebar style
        if( !$content.find('.sidebar').length ) return;
        $content.find('.sidebar').removeClass('style-simple style-classic');
        if( value.length ) $content.find('.sidebar').addClass('style-'+value);
    }else if($editrow.hasClass('themeoption sidebar-lines')){
        // themeoption sidebar style
        if( !$content.find('.sidebar').length ) return;
        $content.find('.sidebar').removeClass('lines-hidden lines-boxed has-lines');
        if( value.length && value == 'lines-hidden'){
            $content.find('.sidebar').addClass('lines-hidden')
        }else{
            if(value == 'lines-boxed') $content.find('.sidebar').addClass('lines-boxed');
            $content.find('.sidebar').addClass('has-lines')
        }
    }else if($editrow.hasClass('themeoption footer-align')){
        // themeoption footer text align
        if( !$content.find('#Footer .widgets_wrapper').length ) return;
        $content.find('#Footer .widgets_wrapper').removeClass('center');
        if( value.length && value == 'center' ) $content.find('#Footer .widgets_wrapper').addClass('center');
    }else if($editrow.hasClass('themeoption mobile-header-height')){
        // themeoption mobile header height
        if( $content.find('style#themeoptionmobile-header-height').length ) $content.find('style#themeoptionmobile-header-height').remove();
        $content.find('body').append('<style id="themeoptionmobile-header-height">@media only screen and (max-width: 767px){body:not(.template-slider) #Header{min-height: '+( value.length ? value+'px' : ( $('.panel-view-themeoptions .themeoption.header-height .mfn-field-value').val().length ? $('.panel-view-themeoptions .themeoption.header-height .mfn-field-value').val()+'px' : '250px' ) )+' }}</style>');
    }else if($editrow.hasClass('themeoption mobile-header-height')){
        // themeoption mobile header height
        if( $content.find('style#themeoptionmobile-header-height').length ) $content.find('style#themeoptionmobile-header-height').remove();
        $content.find('body').append('<style id="themeoptionmobile-header-height">@media only screen and (max-width: 767px){body:not(.template-slider) #Header{min-height: '+( value.length ? value+'px' : ( $('.panel-view-themeoptions .themeoption.header-height .mfn-field-value').val().length ? $('.panel-view-themeoptions .themeoption.header-height .mfn-field-value').val()+'px' : '250px' ) )+' }}</style>');
    }else if($editrow.hasClass('themeoption mobile-subheader-padding')){
        // themeoption mobile header subheader padding
        if( $content.find('style#themeoptionmobile-subheader-padding').length ) $content.find('style#themeoptionmobile-subheader-padding').remove();
        $content.find('body').append('<style id="themeoptionmobile-subheader-padding">@media only screen and (max-width: 767px){body:not(.template-slider) #Subheader{padding: '+( value.length ? value+'px' : ( $('.panel-view-themeoptions .themeoption.subheader-padding .mfn-field-value').val().length ? $('.panel-view-themeoptions .themeoption.header-height .mfn-field-value').val() : '30px 0' ) )+' }}</style>');
    }else if( $editrow.hasClass('themeoption layout-boxed-padding') ){
        // themeoption boxed layout padding
        if( $content.find('style#themeoptionlayout-boxed-padding').length ) $content.find('style#themeoptionlayout-boxed-padding').remove();
        $content.find('body').append('<style id="themeoptionlayout-boxed-padding">@media only screen and (min-width: 768px){.layout-boxed #Subheader .container, .layout-boxed:not(.with_aside) .section:not(.full-width), .layout-boxed.with_aside .content_wrapper, .layout-boxed #Footer .container{padding-left: '+( value.length ? value : '0' )+';padding-right: '+( value.length ? value : '0' )+'}}</style>');
    }else if( $editrow.hasClass('themeoption content-remove-padding') ){
        // themeoption content top padding
        if( $content.find('style#themeoptioncontent-remove-padding').length ) $content.find('style#themeoptioncontent-remove-padding').remove();
        $content.find('body').append('<style id="themeoptioncontent-remove-padding">#Content{padding-top: '+( value.length && value == '1' ? '0px' : '30px' )+';}</style>');
    }else if($editrow.hasClass('themeoption layout-options')){
        // menu options
        $content.find('body').removeClass('no-shadows boxed-no-margin');
        $editrow.find('ul li input').each(function() {
            if( $(this).is(':checked') ){
                $content.find('body').addClass($(this).val());
            }
        });
    }else if($editrow.hasClass('themeoption sticky-header-style')){
        // theme option sticky header style
        $content.find('body').removeClass('sticky-tb-color sticky-white sticky-dark');
        $content.find('body').addClass('sticky-'+value);
    }else if($editrow.hasClass('themeoption shop-icon-wishlist')){
        // theme option icon wishlist shop
        if( value == '' ){
            $content.find('a#wishlist_button').html('<svg width="26" viewBox="0 0 26 26" aria-label="wishlist icon"><defs><style>.path{fill:none;stroke:#333;stroke-width:1.5px;}</style></defs><path class="path" d="M16.7,6a3.78,3.78,0,0,0-2.3.8A5.26,5.26,0,0,0,13,8.5a5,5,0,0,0-1.4-1.6A3.52,3.52,0,0,0,9.3,6a4.33,4.33,0,0,0-4.2,4.6c0,2.8,2.3,4.7,5.7,7.7.6.5,1.2,1.1,1.9,1.7H13a.37.37,0,0,0,.3-.1c.7-.6,1.3-1.2,1.9-1.7,3.4-2.9,5.7-4.8,5.7-7.7A4.3,4.3,0,0,0,16.7,6Z"></path></svg>');
        }else{
            $content.find('a#wishlist_button').html('<i class="'+value+'"></i>');
        }
    }else if($editrow.hasClass('themeoption shop-cart')){
        // theme option icon cart shop
        $content.find('a.header-cart svg').remove();
        $content.find('a.header-cart i').remove();
        if( value == '' ){
            $content.find('a.header-cart').prepend('<svg width="26" viewBox="0 0 26 26" aria-label="cart icon"><defs><style>.path{fill:none;stroke:#333;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs><polygon class="path" points="20.4 20.4 5.6 20.4 6.83 10.53 19.17 10.53 20.4 20.4"></polygon><path class="path" d="M9.3,10.53V9.3a3.7,3.7,0,1,1,7.4,0v1.23"></path></svg>');
        }else{
            $content.find('a.header-cart').prepend('<i class="'+value+'"></i>');
        }
    }else if($editrow.hasClass('themeoption gdpr')){
        if( value.length && value == '1' ){
            if( !$content.find('#mfn-gdpr').length ) $content.find('body').append(renderMfnFields.gdpr);
            if( !$content.find('#mfn-gdpr').hasClass('show') ) $content.find('#mfn-gdpr').addClass('show');
        }else{
            $content.find('#mfn-gdpr').removeClass('show');
        }
    }else if( $editrow.hasClass('themeoption gdpr-settings-position') ){
        if( value == 'top' ){
            $content.find('#mfn-gdpr').attr('data-aligment', 'top').attr('data-direction', 'horizontal');
        }else if( value == 'bottom' ){
            $content.find('#mfn-gdpr').attr('data-aligment', 'bottom').attr('data-direction', 'horizontal');
        }else if( value == 'left' ){
            $content.find('#mfn-gdpr').attr('data-aligment', 'left').attr('data-direction', 'vertical');
        }else if( value == 'right' ){
            $content.find('#mfn-gdpr').attr('data-aligment', 'right').attr('data-direction', 'vertical');
        }
    }else if( $editrow.hasClass('to-inline-style') ){

        //console.log('test 2');

        let std = typeof $editrow.attr('data-std') !== 'undefined' ? $editrow.attr('data-std') : $(this).attr('data-std');
        let csspath = $editrow.attr('data-csspath');
        let resp = $editrow.attr('data-responsive');
        let mediaq = '';
        let unit = typeof $editrow.attr('data-unit') !== 'undefined' ? $editrow.attr('data-unit') : $(this).attr('data-unit');
        let style = typeof $editrow.attr('data-style') !== 'undefined' ? $editrow.attr('data-style') : $(this).attr('data-style');
        let style_id = 'themeoption'; if( typeof $editrow.attr('data-name') !== 'undefined' ) style_id += $editrow.attr('data-name'); if( typeof $(this).attr('data-key') !== 'undefined' ) style_id += $(this).attr('data-key');

        if( $editrow.find('.color-picker.multi').length && typeof $(this).attr('data-key') !== 'undefined' && $(this).attr('data-key') == 'hover' ){
            csspath = csspath.replaceAll(', ', ',').replaceAll(',', ':hover,')+':hover';
        }

        if( $editrow.hasClass('button-font') ) { 
            style = $(this).attr('data-style');
            unit = $(this).attr('data-unit');
        }

        if( $editrow.find('.multiple-inputs.separated-fields').length ){

            value = '';

            $editrow.find('.multiple-inputs input.mfn-field-value').each(function(i) {
                var units_check = false;
                var val = $(this).val();

                if( i > 0 ) value += ' ';

                if( val.length ){

                    $.each( units, function( i, el ) {
                        if( val.includes(el) ){
                            units_check = true;
                        }
                    });

                    if(units_check == false){
                        value += val+unit;
                        $(this).val(val+unit);
                    }else{
                        value += val;
                    }

                }

            });
        }

        if( $content.find('style#'+style_id).length ) $content.find('style#'+style_id).remove();

        if( value.length ) {
            var units_check = false;

            $.each( units, function( i, el ) {
                if( value.includes(el) ){
                    units_check = true;
                }
            });

            if(units_check == false){
                value += unit;
            }

        }else if( std.length ){
            value = std;
        }

        if( resp == 'laptop' ) mediaq = '@media only screen and (max-width: 1200px) {';
        if( resp == 'tablet' ) mediaq = '@media only screen and (max-width: 959px) {';
        if( resp == 'mobile' ) mediaq = '@media only screen and (max-width: 767px) {';

        if( resp == 'desktop' ){
            $content.find('head').append('<style id="'+style_id+'">'+csspath+'{'+style+': '+( value.length ? value : 'inherit' )+';}</style>');
        }else if( resp == 'tablet' ){
            $content.find('body').prepend('<style id="'+style_id+'">'+mediaq+csspath+'{'+style+': '+( value.length ? value : 'inherit' )+';}}</style>');
        }else if( resp == 'laptop' ){
            $content.find('body').prepend('<style id="'+style_id+'">'+mediaq+csspath+'{'+style+': '+( value.length ? value : 'inherit' )+';}}</style>');
        }else{
            $content.find('body').append('<style id="'+style_id+'">'+mediaq+csspath+'{'+style+': '+( value.length ? value : 'inherit' )+';}}</style>');
        }

        if( style == 'font-family' && value.length ){
            var fonts_group = $(this).find(':selected').closest('optgroup').attr('label');
            if( fonts_group == 'Google Fonts' ){
                WebFont.load({
                    google: {
                      families: [value]
                    },
                    context: window.frames[0].frameElement.contentWindow,
                    /*fontactive: function(familyName,fvd){
                        self.handleTypoChange( style_attr, familyName );
                        return;
                    },*/
                });
            }
        }
    }

    if( mfn.view == 'demo' ) return;

    $.ajax( mfnajaxurl, {
    type : "POST",
    data : {
      'mfn-builder-nonce': wpnonce,
      action: 'mfn_vb_themeoptions',
      betheme: edited_item
    },
    success: function(response){

        // re render content for few options
        if($editrow.hasClass('re_render_to themeoption')) {

            // check if element is in iframe
            if( $editrow.hasClass('re_render_if') ) {
                var re_type = $editrow.attr('data-retype');
                var re_elem = $editrow.attr('data-reelement');

                if( re_type == 'div' && !$content.find(re_elem).length ) {
                    return;
                }

                if( typeof window.onbeforeunload !== 'function' ) {
                    refreshIframe();
                    return;
                }else{

                   if( to_been_aborted != false ) return; 

                    $('.mfn-ui').addClass('mfn-modal-open').append('<div class="mfn-modal modal-confirm show"> <div class="mfn-modalbox mfn-form mfn-shadow-1"> <div class="modalbox-header"> <div class="options-group"> <div class="modalbox-title-group"> <span class="modalbox-icon mfn-icon-delete"></span> <div class="modalbox-desc"> <h4 class="modalbox-title">Confirm preview</h4> </div></div></div><div class="options-group"> <a class="mfn-option-btn mfn-option-blank btn-large btn-modal-close btn-modal-abort" title="Close" href="#"><span class="mfn-icon mfn-icon-close"></span></a> </div></div><div class="modalbox-content"> <img class="icon" alt="" src="'+mfn.themepath+'/muffin-options/svg/warning.svg"> <h3>Confirm preview</h3> <p>Unsaved changes. Continue?</p><a class="mfn-btn btn-modal-abort" href="#"><span class="btn-wrapper">Let me save first</span></a> <a class="mfn-btn mfn-btn-red btn-wide btn-modal-confirm" href="#"><span class="btn-wrapper">Refresh</span></a> </div></div></div>');

                    $('.btn-modal-abort').on('click', function(e) {
                        e.preventDefault();
                        $('.mfn-ui').removeClass('mfn-modal-open');
                        $('.modal-confirm.show').remove();
                        to_been_aborted = true;
                    });

                    $('.btn-modal-confirm').on('click', function(e) {
                        e.preventDefault();
                        refresh = true;
                        $('.modal-confirm.show').remove();
                        $('body').addClass('mfn-preloader-active');
                        $('.mfn-preloader').fadeIn(300);
                        $('.mfn-preloader .loading-text').text('Please wait...');
                        scroll_top = $content.find("html, body").scrollTop();
                        refreshIframe();
                        return;

                    });

                }

            }

        }else{
            $content.find('body').removeClass('mfn-loading');
        }

    }

});

});



function refreshIframe(){
    $content = false;
    $builder = false;
    iframe = false;

    document.getElementById('mfn-preview-wrapper').innerHTML = '<iframe id="mfn-vb-ifr" src="'+mfn.permalink+'" allowfullscreen="1"></iframe>';
    jQuery('iframe#mfn-vb-ifr').on('load', function() {

        $content = jQuery("iframe#mfn-vb-ifr").contents();
        $builder = $content.find('.mfn-default-content-buider');
        iframe = document.getElementById("mfn-vb-ifr").contentWindow;

        iframeReady();

        $('body').removeClass('mfn-preloader-active');
        $('.mfn-preloader').hide();
        $content.find("html, body").scrollTop(scroll_top);

        //initWyswig();

    });
}

/**
 *
 * NEW ACM end
 *
 **/

mfnoptsinputs.watchChanges();

return {
  init: init,
  addHistory: historyStorage.add,
  wpnonce: wpnonce,
  re_render: re_render,
  dynamicData:dynamicData,
  settings: settings,
  changeInlineStyles: changeInlineStyles,
  enableBeforeUnload: enableBeforeUnload
};

})(jQuery);

MfnVbApp.settings.detectOsTheme();

function loadIframe() {

    if(mfn.permalink == 'mfn_update_db_required') {

        document.getElementById('mfn-preview-wrapper-holder').innerHTML = '<div class="mfn-bebuilder-iframe-error"><h3>BeBuilder Data Updater</h3><p>Click the button to start the update. <br><strong>Important!</strong> Create a backup of database before starting.</p><a href="#" class="button button-primary mfn-btn-blue mfn-btn mfn-be-css-db-update-action-button">Update Database</a></div>';
        console.error('BeBuilder: Database update required.');
        jQuery('body').removeClass('mfn-preloader-active');

    }else if(mfn.permalink == 'shop_page_id') {

        document.getElementById('mfn-preview-wrapper-holder').innerHTML = '<div class="mfn-bebuilder-iframe-error">Make sure SHOP page is not in DRAFT mode and set in <a href="admin.php?page=wc-settings&tab=products">WooCommerce settings</a>.</div>';
        console.error('BeBuilder: Set shop page in Woocommerce settings to build shop template.');

        jQuery('body').removeClass('mfn-preloader-active');

    }else if( mfn.permalink == 'portfolio_post_type_missing' ) {

        document.getElementById('mfn-preview-wrapper-holder').innerHTML = '<div class="mfn-bebuilder-iframe-error">Please enable portfolio post type in <a href="admin.php?page=be-options#advanced">theme settings</a>.</div>';
        jQuery('body').removeClass('mfn-preloader-active');
    
    }else if( mfn.permalink == 'shop_order_missing' ) {
        document.getElementById('mfn-preview-wrapper-holder').innerHTML = '<div class="mfn-bebuilder-iframe-error">To edit Thank You template, at least one <a href="edit.php?post_type=shop_order">completed order</a> is required.</div>';
        jQuery('body').removeClass('mfn-preloader-active');
    }else{

        document.getElementById('mfn-preview-wrapper').innerHTML = '<iframe id="mfn-vb-ifr" src="'+mfn.permalink+'" allowfullscreen="1"></iframe>';
        jQuery('iframe#mfn-vb-ifr').on('load', function() {

            $content = jQuery("iframe#mfn-vb-ifr").contents();
            $builder = $content.find('.mfn-default-content-buider');
            iframe = document.getElementById("mfn-vb-ifr").contentWindow;

            //Templates!
            if( jQuery('body').hasClass('mfn-template-section') ) {
              jQuery(this).contents().find('body').addClass('mfn-template-section')
            } else if( jQuery('body').hasClass('mfn-template-wrap') ) {
              jQuery(this).contents().find('body').addClass('mfn-template-wrap')
            }

            MfnVbApp.init();

            //Global wraps
            if( jQuery('body').hasClass('mfn-template-wrap') && $content.find('.mfn-section-start').length ) {
              const sectionButton = $content.find('#Content').find('.mfn-builder-content').find('a.mfn-btn.mfn-section-add');
              sectionButton.trigger('click');

              setTimeout(function(){
                const wrapButton = $content.find('#Content').find('.mfn-builder-content').find('.wrap-11');
                wrapButton.trigger('click');
              }, 1000);
            }

        });

    }
}

(function($) {
$(document).ready(function() {

    $('.mfn-preloader .loading-text').fadeOut(function() {
        $('.mfn-preloader .loading-text').html('Loading page content <div class="dots"></div>');
    }).fadeIn();

    loadIframe();

});
}(jQuery));

/**
* Clone fix
* Fixed native clone function for textarea and select fields
*/

(function(original) {
jQuery.fn.clone = function() {
  var result = original.apply(this, arguments),
    my_textareas = this.find('textarea:not(.editor), select'),
    result_textareas = result.find('textarea:not(.editor), select');

  for (var i = 0, l = my_textareas.length; i < l; ++i) {
    jQuery(result_textareas[i]).val(jQuery(my_textareas[i]).val());
  }

  return result;
};
})(jQuery.fn.clone);


