(function($){
    "use strict";

    const { __, _x, sprintf } = wp.i18n;

    // postMessage : receive status from iframe window
    window.addEventListener('message', function(e){
        if( e.origin == window.location.origin && e.data.host == 'pixe' ){

            // events from iframe window
            switch( e.data.event ){
                case 'pixeData':
                    if( e.data.action == 'set' ){
                        for( var slug in e.data.value ){
                            pixeData[slug] = e.data.value[slug];

                            switch(slug){
                                
                                // update typo from iframe
                                case 'typoPreset':
                                    if( e.data.isChanged ){
                                        $.pixeTypoSettings.updateData();
                                    }else{
                                        $.pixeTypoStyle.setPresetStyle();
                                        $.pixeTypoStyle.includeGoogleFont();
                                    }
                                    break;
                                
                                // update color from iframe
                                case 'colorPreset':
                                    if( e.data.isChanged ){
                                        $.pixeColorSettings.updateData();
                                    }else{
                                        $.pixeColorStyle.updateStyle();
                                    }
                                    break;

                                // update variable from iframe
                                case 'variablePreset':
                                    $.pixeVariablePreset.updateStyle();
                                    break;

                                // update control from iframe
                                case 'controlPreset':
                                    if( e.data.isChanged ){
                                        $.pixeControlSettings.updateData();
                                    }
                                    break;

                                // update button from iframe
                                case 'buttonPreset':
                                    if( e.data.isChanged && $.pixeButtonSettings.updateData ){
                                        $.pixeButtonSettings.updateData();
                                    }
                                    break;

                                // update value ( for history )
                                case 'editorSettings':
                                    if( $.pixeBuilder.currentType == 'page-settings' ){
                                        $.pixeBuilder.displaySettingsByType('page-settings');
                                    }
                                    break;

                                // post title
                                case 'postTitle':
                                    if( $.pixeBuilder.topBar ){
                                        $.pixeBuilder.topBar.postTitle();
                                    }
                                    break;
                            }
                        }
                    }else if( e.data.action == 'get'){
                        $.pixeBuilder.setIframeData(e.data.value);
                    }
                    break;
                case 'navigator':
                    if( e.data.action == 'init' && e.data.value ){
                        $.pixeSettingsNavigation.init(e.data.value, e.data.target);
                    }
                    break;
                case 'publish':
                    var topBar = $.pixeBuilder.topBar;
                    var button = topBar.publishButton;
                    if( e.data.action == 'loading' ){
                        button.addClass('pixe-loading');
                    }else if( e.data.action == 'success' ){
                        var instance = e.data.revision;
                        var deletedInstance = e.data.deletedRevision;

                        if( e.data.status == 'autosave' ){
                            if( pixeData.autosave != 'off' ){
                                pixeData.autosave = instance;
                            }
                            button.removeClass('pixe-loading');
                        }else{
                            button.removeClass('pixe-loading').addClass('pixe-disable');
                            if( pixeData.autosave != 'off' ){
                                pixeData.autosave = undefined;
                            }
                            
                            // manage revision if enabled
                            if( pixeData.revisions != 'off' ){

                                // add new revision
                                if( !pixeData.revisions ){ pixeData.revisions = []; }
                                pixeData.revisions.unshift(instance);

                                // remove deleted revisions
                                if( deletedInstance && deletedInstance.length ){
                                    pixeData.revisions = pixeData.revisions.filter(function(value, index){
                                        return deletedInstance.indexOf(value.id.toString()) == -1;
                                    });
                                }
                            }

                            // notice message
                            if( instance ){
                                var noticeMessage = 'Published On ' + $.pixeFormatDate(new Date(instance.time + ' UTC')) + ' by ' + instance.author;
                                topBar.publishNotice(noticeMessage);
                            }

                            // update post status & display message & button text
                            pixeData.postStatus = e.data.status;
                            topBar.updatePublishStatus();
                        }
                        
                    }else if( e.data.action == 'failed' ){
                        button.removeClass('pixe-loading');

                        // display message
                        topBar.publishNotice(e.data.message);
                    }else if( e.data.action == 'edited' ){
                        button.removeClass('pixe-disable');
                    }
                    break;
                case 'history':
                    if( e.data.action == 'show' ){
                        $.pixeBuilder.topBar.historyDropdown(e.data.value);
                    }
                    break;
                case 'previewToggle':
                    $.pixeBuilder.togglePreview();
                    break;
                case 'dragElement':
                    if( e.data.action == 'mouseup' ){
                        $(document.body).trigger('iframedragstop');
                    }else if( e.data.action == 'mousemove' ){
                        if( $.pixeBuilder.handler ){
                            $.pixeBuilder.handler.css({
                                'left': e.data.clientX + $.pixeBuilder.iframe.offset().left, 
                                'top': e.data.clientY + $.pixeBuilder.iframe.offset().top
                            });
                        }
                    }
                    break;
                case 'hidePanel':
                    if( !$(document.body).hasClass('pixe-settings-lock') ){
                        $.pixeBuilder.settingsPanel.close();
                    }
                    break;
                case 'newBlock':
                    $.pixeBlockSettings.init();
                    break;
                case 'newTemplate':
                    $.pixeTemplateSettings.init({ 
                        activeTab: 'template-part',
                        activeSubtab: e.data.type
                    });
                    break;
                case 'newElement':
                    $.pixeSettingsEdit.clear();
                    $.pixeBuilder.displaySettingsByType('element');
                    break;
                case 'newContainer':
                    $.pixeSettingsEdit.clear();
                    $.pixeBuilder.displaySettingsByType('container');  
                    break;
                case 'edit':
                    if( e.data.action == 'update' ){
                        $.pixeSettingsEdit.updateSection(e.data.id, e.data.slug, e.data.value);
                    }else if( e.data.value ){
                        var isOpenPanel = (e.data.isOpenPanel == undefined || e.data.isOpenPanel === true)? true: false;
                        $.pixeSettingsEdit.clear();
                        $.pixeBuilder.displaySettings($.pixeSettingsEdit.getContent(e.data.value, e.data.activeTab), isOpenPanel);  
                    }
                    break;
                case 'save-block':
                    if( e.data.type == 'download' ){
                        if( e.data.title && e.data.data ){
                            $.pixeDownloadFile(e.data.data, e.data.title);
                        }
                    }else if( e.data.type == 'block' ){
                        pixeData.customBlocks.unshift({
                            'id': e.data.id,
                            'title': e.data.title,
                            'content-type': e.data['content-type']
                        });
                    }else if( e.data.type == 'page' ){
                        pixeData.customPages.unshift({
                            'id': e.data.id,
                            'title': e.data.title,
                            'content-type': e.data['content-type']
                        });
                    } 
                    break;

                // edit settings
                case 'icon':
                    if( e.data.action == 'edit' ){ $.pixeIconSettings.init(); }
                    break;
                case 'colors':
                    if( e.data.action == 'edit' ){ $.pixeColorSettings.init(); }
                    break;
                case 'variables':
                    if( e.data.action == 'edit' ){
                        $.pixeVariableSettings.init({
                            activeTab: e.data.activeTab,
                            activeSubTab: e.data.activeSubTab
                        });
                    }
                    break;
                case 'controls':
                    if( e.data.action == 'edit' ){ $.pixeControlSettings.init({ activeTab: e.data.tab }); }
                    break;
                case 'typo':
                    if( e.data.action == 'edit' ){ $.pixeTypoSettings.init({type: 'preset'}); }
                    break;
                case 'buttons':
                    if( e.data.action == 'edit' ){ $.pixeButtonSettings.init(); }
                    break;
                case 'template':
                    if( e.data.action == 'edit' ){ $.pixeTemplateSettings.init({ activeTab: 'template' }); }
                    break;
                default:
                    if( $.pixeDebug ){ console.log('parent post', e.data); }
                    break;
            }
        
        }
    });

    $.pixeBuilder = {

        viewport: 'desktop',

        init: function(){
            var t = this;

            t.iframe = $('#pixe-builder-iframe');
            if( !t.iframe.length ) return;

            // init top bar
            t.topBar = new $.pixeAdminTopBar();

            // init toolbar
            t.toolbar = new $.pixeAdminToolbar();

            // init settings panel
            t.settingsPanel = new $.pixeAdminSettingsPanel();

            // on focus iframe close popup
            $(window).on('blur', function(e){
                if( t.iframe.is(document.activeElement) ){
                    $(window).trigger('closepopup');
                }
            });
        },

        previewRevision: function(revisionId){
            var t = this;
            if( !t.revisionIframe ){
                t.revisionIframe = $('<iframe class="pixe-builder-iframe" ></iframe>');
                t.revisionIframe.get(0).name = 'pixerevision';
                t.revisionIframe.insertAfter(t.iframe);
                t.revisionIframe.parent().addClass('pixe-display-revision');
                
                // send color & typo data to revision iframe
                t.revisionIframe.on('load', function(){
                    if( pixeData.typoPreset ){
                        $.pixeBuilder.setRevisionIframeStatus({
                            event: 'typo',
                            action: 'update',
                            value: pixeData.typoPreset
                        });
                    }
                });

            }
            var revisionUrl = pixeData.revisionUrl.replace('#rid#', revisionId);
            t.revisionIframe.attr('src', revisionUrl);
        },

        closeRevision: function(){
            var t = this;
            if( t.revisionIframe ){
                t.revisionIframe.parent().removeClass('pixe-display-revision');
                t.revisionIframe.remove();
                delete t.revisionIframe;
            }
        },

        applyRevision: function(){
            var t = this;
            if( t.revisionIframe ){
                t.iframe.remove();
                t.iframe = t.revisionIframe;
                t.iframe.parent().removeClass('pixe-display-revision');
                delete t.revisionIframe;

                // apply autosave for new revision
                $.pixeBuilder.setIframeStatus({
                    event: 'autosave',
                    action: 'revision'
                });

                // allow saving
                $.pixeBuilder.topBar.publishButton.removeClass('pixe-disable');
            }
        },

        setRevisionIframeStatus: function(settings){
            settings = $.extend({
                host: 'pixe'
            }, settings);

            var t = this;
            t.revisionIframe.get(0).contentWindow.postMessage(settings, window.location.origin);
        },

        displaySettingsByType: function(type, isOpenPanel = true, args = {}){
            var t = this;

            if( !type ){
                type = t.currentType;
            }else{
                t.currentType = type;
            }

            if( type ){
                switch(type){
                    case 'element':
                        t.displaySettings($.pixeSettingsNew.getContent(), isOpenPanel);
                        break;
                    case 'container':
                        t.displaySettings($.pixeSettingsNew.getContent('container'), isOpenPanel);
                        break;
                    case 'block':
                        t.displaySettings($.pixeSettingsBlock.getContent(), isOpenPanel);
                        break;
                    case 'synced-block':
                        t.displaySettings($.pixeSettingsBlock.getContent('synced'), isOpenPanel);
                        break;
                    case 'custom-block':
                        t.displaySettings($.pixeSettingsBlock.getContent('custom', 'custom-blocks'), isOpenPanel);
                        break;
                    case 'page-settings':
                        t.displaySettings($.pixePageSettings.getContent(), isOpenPanel);
                        break;
                    case 'page-data':
                        t.displaySettings($.pixePageSettings.getSingleContent('page-data'), isOpenPanel);
                        break;
                    case 'ai-settings':
                        t.displaySettings($.pixeAISettings.getContent(), isOpenPanel);
                        break;
                }
                
            }
        },

        displaySettings: function(content, isOpenPanel = true){
            var t = this;
            t.settingsPanel.setContent(content);

            if( content && isOpenPanel ){
                t.settingsPanel.open();
            }
        },

        // sync pixe data with iframe
        setIframeData: function(values){
            var sentData = {};
            if( values ){
                for( var i in values ){
                    var slug = values[i];
                    sentData[slug] = pixeData[slug];
                }
            }

            $.pixeBuilder.setIframeStatus({ 
                event: 'pixeData',  
                action: 'set', 
                value: sentData
            });
        },
        getIframeData: function(values){
            $.pixeBuilder.setIframeStatus({ 
                event: 'pixeData',  
                action: 'get', 
                value: values
            });
        },

        // post message to iframe
        setIframeStatus: function(settings){
            settings = $.extend({
                host: 'pixe'
            }, settings);

            var t = this;
            t.iframe.get(0).contentWindow.postMessage(settings, window.location.origin);
        },

        togglePreview: function(){
            var action = $(document.body).hasClass('pixe-preview')? '.pixe-close-preview': '.pixe-preview';
            $('.pixe-preview-action').find(action).trigger('click');
        },

        changeViewport: function(device){
            var t = this;
            t.viewport = device;
            
            // body css
            if( device == 'desktop' ){
                $(document.body).attr('data-device', '');
            }else{
                $(document.body).attr('data-device', device);
            }

            // tell child iframe
            t.setIframeStatus({
                event: 'changeViewport',
                action: device
            })

            // event
            $(document.body).trigger('viewport-change');
            $(document.body).children('.pixe-popup').find('.pixe-device-selector').trigger('viewport-update');
            t.settingsPanel.panel.find('.pixe-device-selector').trigger('viewport-update');
        },

        updateBuilderStatus: function(slug, value){
            $.pixeSetData(pixeData.builderStatus, slug, value);

            var ajaxData = $.pixeGetAjaxData({
                action: 'pixe_save_builder_status',
                'builder-status': pixeData.builderStatus
            });

            $.pixeAjax({
                ajaxData: ajaxData,
                onSuccess: function(){
                    if( $.pixeDebug ){ console.log('update builder status'); }
                }
            });
        }
    
    };

    // settings area
    $.pixeAdminSettingsPanel = function(){
        var t = this;
        t.panel = $('#pixe-admin-settings-panel');
        if( !t.panel.length || t.panel.hasClass('pixe-init') ) return;
        t.panel.addClass('pixe-init');

        t.container = $('<div class="pixe-admin-settings-container" ></div>').appendTo(t.panel);
        t.handleArea = $('<div class="pixe-admin-settings-handle" ></div>').appendTo(t.panel);
        t.init();
    }
    $.pixeAdminSettingsPanel.prototype = {

        init: function(){
            var t = this;
            t.closeButton();
            t.lockButton();
            t.bindElements();
        },

        bindElements: function(){
            var t = this;

            function setStatusVal(status, elem){
                var slug = elem.data('value');

                if( slug ){
                    if( elem.attr('data-type') == 'element' ){

                        // element group
                        if( pixeData.elements[slug].data == 'composite' ){
                            if( pixeData.elements[slug].default ){
                                status.value = pixeData.elements[slug].default
                            }else{
                                console.log('Data for group element "' + slug + '" is not available.');
                            }

                        // normal element
                        }else{
                            var itemData = {
                                _type: 'element',
                                _element: slug
                            };
                            if( pixeData.elements[slug].default ){
                                itemData = $.extend(pixeData.elements[slug].default, itemData);
                            }
                            status.value = [itemData];
                        }

                    // non-elemnt
                    }else{
                        status.value = slug;
                    }
                }
            }

            // drag admin element to iframe
            t.container.on('mousedown', '.pixe-element:not(.pixe-locked):not(.pixe-disabled)', function(e){
                if( e.buttons != 1 ) return;
                e.preventDefault();

                var elem = $(this);
                var isClicked = true;
                var isInit = false;

                // display handler
                var handler = elem.clone(false);
                handler.addClass('pixe-handler');
                handler.css({'left': e.clientX, 'top': e.clientY});

                function initDragging(){
                    isInit = true;

                    // display handler
                    handler.appendTo($(document.body));
                    $.pixeBuilder.handler = handler;

                    // tell iframe that it's currently dragging
                    var status = { event: 'dragElement', action: 'start' };
                    setStatusVal(status, elem);
                    $.pixeBuilder.setIframeStatus(status);
                }
                
                // while drag element
                function dragElement(e){
                    e.preventDefault();
                    
                    // mouse up action
                    if( e.buttons != 1 ){

                        // click event
                        if( isClicked && !$(e.target).hasClass('pixe-action') && !elem.hasClass('pixe-no-click') ){
                            var status = { event: 'addNew' };
                            setStatusVal(status, elem);

                            // add item to iframe drop target
                            $.pixeBuilder.setIframeStatus(status);
                        }

                        // drag stop event
                        $.pixeBuilder.setIframeStatus({
                            event: 'dragElement',
                            action: 'stop'
                        });

                        // clear data
                        handler.remove();
                        delete $.pixeBuilder.handler;
                        $(document.body).off('mousemove mouseup iframedragstop', dragElement);

                    // drag action
                    }else{

                        // not click event
                        if( e.type == 'mousemove' ){ isClicked = false; }

                        // init handler & events
                        if( !isInit && !isClicked ){ initDragging() }
    
                        // move handler
                        handler.css({'left': e.clientX, 'top': e.clientY});
                    }
                }

                // dragging event
                $(document.body).on('mousemove mouseup iframedragstop', dragElement);

            });
        },

        closeButton: function(){
            var t = this;
            var close = $('<div class="pixe-close-action" ></div>');
            close.append('<svg width="7" height="11" viewBox="0 0 7 11" fill="none" ><path d="M6.00001 1.70711L2.41421 5.29295L6.00001 8.87865C6.39051 9.26925 6.39051 9.90235 6.00001 10.2929C5.60951 10.6834 4.97631 10.6834 4.58581 10.2929L0.29289 6.00005C0.10536 5.81245 0 5.55815 0 5.29295C0 5.02765 0.10536 4.77335 0.29289 4.58575L4.58581 0.292897C4.97631 -0.0976325 5.60951 -0.0976325 6.00001 0.292897C6.39051 0.683417 6.39051 1.31659 6.00001 1.70711Z" fill="#A2A6B3"/></svg>');
            close.append('<svg width="6" height="11" viewBox="0 0 6 11" fill="none" ><path d="M0.268485 8.87865L3.55547 5.29285L0.268485 1.70711C0.223743 1.65829 0.184582 1.60569 0.151023 1.55024C-0.0839004 1.16209 -0.0447491 0.634607 0.268485 0.292897C0.626443 -0.0976325 1.20688 -0.0976325 1.56483 0.292897L5.49999 4.58575C5.67187 4.77335 5.76849 5.02765 5.76849 5.29285C5.76849 5.55815 5.67187 5.81245 5.49999 6.00005L1.56483 10.2928C1.20688 10.6834 0.626443 10.6834 0.268485 10.2928C-0.0894916 9.90235 -0.0894916 9.26925 0.268485 8.87865Z" fill="#A2A6B2"/></svg>');
            close.appendTo(t.handleArea);

            close.on('click', function(){
                if( $(document.body).hasClass('pixe-settings-active') ){
                    t.close();
                }else{
                    t.open();
                }
            });
        },

        lockButton: function(){
            var t = this;
            var lock = $('<div class="pixe-lock-action" ></div>');
            lock.append('<svg width="15" height="16" viewBox="0 0 15 16" fill="none" ><path d="M2.25007 14.1665H10.7501V7.08319H2.25007V14.1665ZM6.50007 12.0415C6.88966 12.0415 7.22316 11.9028 7.50059 11.6254C7.77802 11.3479 7.91674 11.0144 7.91674 10.6249C7.91674 10.2353 7.77802 9.90177 7.50059 9.62434C7.22316 9.34691 6.88966 9.20819 6.50007 9.20819C6.11049 9.20819 5.77698 9.34691 5.49955 9.62434C5.22212 9.90177 5.0834 10.2353 5.0834 10.6249C5.0834 11.0144 5.22212 11.3479 5.49955 11.6254C5.77698 11.9028 6.11049 12.0415 6.50007 12.0415ZM2.25007 15.5832C1.86049 15.5832 1.52698 15.4445 1.24955 15.167C0.97212 14.8896 0.833405 14.5561 0.833405 14.1665V7.08319C0.833405 6.69361 0.97212 6.3601 1.24955 6.08267C1.52698 5.80524 1.86049 5.66652 2.25007 5.66652H7.20841V4.24986C7.20841 3.27 7.55372 2.43475 8.24434 1.74413C8.93497 1.0535 9.77021 0.708191 10.7501 0.708191C11.7299 0.708191 12.5652 1.0535 13.2558 1.74413C13.9464 2.43475 14.2917 3.27 14.2917 4.24986H12.8751C12.8751 3.65958 12.6685 3.15784 12.2553 2.74465C11.8421 2.33145 11.3403 2.12486 10.7501 2.12486C10.1598 2.12486 9.65806 2.33145 9.24486 2.74465C8.83167 3.15784 8.62507 3.65958 8.62507 4.24986V5.66652H10.7501C11.1397 5.66652 11.4732 5.80524 11.7506 6.08267C12.028 6.3601 12.1667 6.69361 12.1667 7.08319V14.1665C12.1667 14.5561 12.028 14.8896 11.7506 15.167C11.4732 15.4445 11.1397 15.5832 10.7501 15.5832H2.25007Z" fill="#999999"/></svg>');
            lock.append('<svg width="13" height="16" viewBox="0 0 13 16" fill="none" ><path d="M2.25007 15.5832C1.86049 15.5832 1.52698 15.4445 1.24955 15.167C0.97212 14.8896 0.833405 14.5561 0.833405 14.1665V7.08319C0.833405 6.69361 0.97212 6.3601 1.24955 6.08267C1.52698 5.80524 1.86049 5.66652 2.25007 5.66652H2.9584V4.24986C2.9584 3.27 3.30372 2.43475 3.99434 1.74413C4.68497 1.0535 5.52021 0.708191 6.50007 0.708191C7.47993 0.708191 8.31517 1.0535 9.0058 1.74413C9.69642 2.43475 10.0417 3.27 10.0417 4.24986V5.66652H10.7501C11.1397 5.66652 11.4732 5.80524 11.7506 6.08267C12.028 6.3601 12.1667 6.69361 12.1667 7.08319V14.1665C12.1667 14.5561 12.028 14.8896 11.7506 15.167C11.4732 15.4445 11.1397 15.5832 10.7501 15.5832H2.25007ZM2.25007 14.1665H10.7501V7.08319H2.25007V14.1665ZM6.50007 12.0415C6.88965 12.0415 7.22316 11.9028 7.50059 11.6254C7.77802 11.3479 7.91674 11.0144 7.91674 10.6249C7.91674 10.2353 7.77802 9.90177 7.50059 9.62434C7.22316 9.34691 6.88965 9.20819 6.50007 9.20819C6.11049 9.20819 5.77698 9.34691 5.49955 9.62434C5.22212 9.90177 5.0834 10.2353 5.0834 10.6249C5.0834 11.0144 5.22212 11.3479 5.49955 11.6254C5.77698 11.9028 6.11049 12.0415 6.50007 12.0415ZM4.37507 5.66652H8.62507V4.24986C8.62507 3.65958 8.41847 3.15784 8.00528 2.74465C7.59208 2.33145 7.09035 2.12486 6.50007 2.12486C5.90979 2.12486 5.40806 2.33145 4.99486 2.74465C4.58167 3.15784 4.37507 3.65958 4.37507 4.24986V5.66652Z" fill="#999999"/></svg>');
            lock.appendTo(t.handleArea);

            // init status
            if( pixeData.builderStatus['lock-settings-panel'] != 'no' ){
                $(document.body).addClass('pixe-settings-lock');
                t.open();
            }

            // change status
            lock.on('click', function(){
                var body = $(document.body);
                if( body.hasClass('pixe-settings-lock') ){
                    body.removeClass('pixe-settings-lock');
                    $.pixeBuilder.updateBuilderStatus('lock-settings-panel', 'no');
                }else{
                    body.addClass('pixe-settings-lock');
                    $.pixeBuilder.updateBuilderStatus('lock-settings-panel', 'yes');
                }
            });
            
        },

        setContent: function(content){
            var t = this;
            t.container.empty();
            t.container.append(content);
        },

        open: function(){
            $(document.body).addClass('pixe-settings-active');
        },
        
        close: function(){
            $(document.body).removeClass('pixe-settings-active');
        }

    };

    // toolbar
    $.pixeAdminToolbar = function(){
        var t = this;
        t.container = $('#pixe-admin-toolbar');
        if( !t.container.length || t.container.hasClass('pixe-init') ) return;
        t.container.addClass('pixe-init');

        t.topArea = $('<div class="pixe-admin-toolbar-top" ></div>').appendTo(t.container);
        t.bottomArea = $('<div class="pixe-admin-toolbar-bottom" ></div>').appendTo(t.container);

        t.init();
    }
    $.pixeAdminToolbar.prototype = {

        init: function(){
            var t = this;
            t.topArea.append('<div class="pixe-divider" ></div>');
            t.newButton();

            t.bottomArea.append('<div class="pixe-divider" ></div>');
            t.aiButton();
            t.infoButton();
            t.exitButton();

            t.container.on('mouseenter', function(){
                $.pixeBuilder.settingsPanel.panel.addClass('pixe-hover-toolbar');
            }).on('mouseleave', function(){
                $.pixeBuilder.settingsPanel.panel.removeClass('pixe-hover-toolbar');
            });
        },

        newButton: function(){
            // new component
            var t = this;
            var newButton = $('<a class="pixe-new-action pixe-action" title="Elements" ></a>');
            newButton.append('<svg width="16" height="16" viewBox="0 0 16 16" fill="none" ><path d="M7.16825 14.6667C7.16825 15.1269 7.54142 15.5 8.00158 15.5C8.46183 15.5 8.83492 15.1269 8.83492 14.6667V8.83325H14.6683C15.1285 8.83325 15.5016 8.46017 15.5016 7.99992C15.5016 7.53967 15.1285 7.16658 14.6683 7.16658H8.83492V1.33333C8.83492 0.8731 8.46183 0.5 8.00158 0.5C7.54142 0.5 7.16825 0.8731 7.16825 1.33333V7.16658H1.33496C0.874725 7.16658 0.501625 7.53967 0.501625 7.99992C0.501625 8.46017 0.874725 8.83325 1.33496 8.83325H7.16825V14.6667Z" fill="white"/></svg>');
            newButton.appendTo(t.topArea);

            newButton.on('click', function(){
                $.pixeSettingsEdit.clear();
                $.pixeBuilder.displaySettingsByType('element');
                $.pixeBuilder.setIframeStatus({ event: 'clearEditTarget' });
            });

            // template
            var blockButton = $('<a class="pixe-blocks-action pixe-action" title="Blocks" ></a>');
            blockButton.append('<svg width="16" height="16" viewBox="0 0 16 16" fill="none" ><path fill-rule="evenodd" clip-rule="evenodd" d="M2.16667 0.5C1.24619 0.5 0.5 1.24619 0.5 2.16667V13.8333C0.5 14.7538 1.24619 15.5 2.16667 15.5H13.8333C14.7538 15.5 15.5 14.7538 15.5 13.8333V2.16667C15.5 1.24619 14.7538 0.5 13.8333 0.5H2.16667ZM13.8333 5.5H2.16667V2.16667H13.8333V5.5ZM13.8333 13.8333H7.16667V7.16667H13.8333V13.8333ZM5.5 13.8333V7.16667H2.16667V13.8333H5.5Z" fill="white"/></svg>');
            blockButton.appendTo(t.topArea);
            blockButton.on('click', function(){
                $.pixeBuilder.displaySettingsByType('block');
                $.pixeBuilder.setIframeStatus({ event: 'clearEditTarget' });
            });

            var customBlockButton = $('<a class="pixe-blocks-action pixe-action" title="Custom Blocks" ></a>');
            customBlockButton.append('<svg width="20" height="20" viewBox="0 0 20 20" fill="none" ><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 4.16667C2.5 3.24619 3.24619 2.5 4.16667 2.5H7.5C8.4205 2.5 9.16667 3.24619 9.16667 4.16667V7.5C9.16667 8.4205 8.4205 9.16667 7.5 9.16667H4.16667C3.24619 9.16667 2.5 8.4205 2.5 7.5V4.16667ZM4.16667 4.16667H7.5V7.5H4.16667V4.16667Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.16667 10.8334C3.24619 10.8334 2.5 11.5795 2.5 12.5V15.8334C2.5 16.7539 3.24619 17.5 4.16667 17.5H7.5C8.4205 17.5 9.16667 16.7539 9.16667 15.8334V12.5C9.16667 11.5795 8.4205 10.8334 7.5 10.8334H4.16667ZM4.16667 12.5H7.5V15.8334H4.16667V12.5Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 2.5C11.5795 2.5 10.8333 3.24619 10.8333 4.16667V7.5C10.8333 8.4205 11.5795 9.16667 12.5 9.16667H15.8333C16.7538 9.16667 17.5 8.4205 17.5 7.5V4.16667C17.5 3.24619 16.7538 2.5 15.8333 2.5H12.5ZM12.5 4.16667H15.8333V7.5H12.5V4.16667Z" fill="white"/><path d="M14.1667 17.5C13.7064 17.5 13.3333 17.127 13.3333 16.6667V15H11.6667C11.2064 15 10.8333 14.627 10.8333 14.1667C10.8333 13.7065 11.2064 13.3334 11.6667 13.3334H13.3333V11.6667C13.3333 11.2065 13.7064 10.8334 14.1667 10.8334C14.6269 10.8334 15 11.2065 15 11.6667V13.3334H16.6667C17.1269 13.3334 17.5 13.7065 17.5 14.1667C17.5 14.627 17.1269 15 16.6667 15H15V16.6667C15 17.127 14.6269 17.5 14.1667 17.5Z" fill="white"/></svg>');
            customBlockButton.appendTo(t.topArea);
            customBlockButton.on('click', function(){
                $.pixeBuilder.displaySettingsByType('custom-block');
                $.pixeBuilder.setIframeStatus({ event: 'clearEditTarget' });
            });

            var syncedBlockButton = $('<a class="pixe-blocks-action pixe-action" title="Synced Blocks" ></a>');
            syncedBlockButton.append('<svg width="14" height="18" viewBox="0 0 14 18" fill="none" ><path d="M7 2.33332V0.841651C7 0.466651 6.55 0.283318 6.29166 0.549985L3.95833 2.87498C3.79166 3.04165 3.79166 3.29998 3.95833 3.46665L6.28333 5.79165C6.55 6.04998 7 5.86665 7 5.49165V3.99998C9.75833 3.99998 12 6.24165 12 8.99998C12 9.65832 11.875 10.3 11.6333 10.875C11.5083 11.175 11.6 11.5167 11.825 11.7417C12.25 12.1667 12.9667 12.0167 13.1917 11.4583C13.5 10.7 13.6667 9.86665 13.6667 8.99998C13.6667 5.31665 10.6833 2.33332 7 2.33332ZM7 14C4.24166 14 2 11.7583 2 8.99998C2 8.34165 2.125 7.69998 2.36666 7.12498C2.49166 6.82498 2.4 6.48332 2.175 6.25832C1.75 5.83332 1.03333 5.98332 0.808332 6.54165C0.499999 7.29998 0.333332 8.13332 0.333332 8.99998C0.333332 12.6833 3.31666 15.6667 7 15.6667V17.1583C7 17.5333 7.45 17.7167 7.70833 17.45L10.0333 15.125C10.2 14.9583 10.2 14.7 10.0333 14.5333L7.70833 12.2083C7.45 11.95 7 12.1333 7 12.5083V14Z" fill="white"/></svg>');
            syncedBlockButton.appendTo(t.topArea);
            syncedBlockButton.on('click', function(){
                $.pixeBuilder.displaySettingsByType('synced-block');
                $.pixeBuilder.setIframeStatus({ event: 'clearEditTarget' });
            });

            var templateButton = $('<a class="pixe-blocks-action pixe-action" title="Template" ></a>');
            templateButton.append('<svg width="20" height="20" viewBox="0 0 20 20" ><path fill-rule="evenodd" clip-rule="evenodd" d="M11.01 13.6055C10.4133 14.0601 9.58651 14.0601 8.98984 13.6055L2.98992 9.03408C2.11446 8.36708 2.11446 7.04967 2.98992 6.38266L8.98984 1.81128C9.58651 1.35669 10.4133 1.35669 11.01 1.81128L17.0099 6.38266C17.8853 7.04967 17.8853 8.36708 17.0099 9.03408L11.01 13.6055ZM9.99992 12.2797L15.9998 7.70837L9.99992 3.13701L4 7.70837L9.99992 12.2797Z" fill="white"/><path d="M16.4686 11.9466C16.7647 11.7209 17.175 11.721 17.471 11.9468C17.9049 12.2777 17.9049 12.9309 17.471 13.2617L11.0105 18.1879C10.4137 18.6429 9.58617 18.6429 8.98933 18.1879L2.52885 13.2617C2.09488 12.9309 2.09488 12.2777 2.52885 11.9468C2.56585 11.9185 2.60463 11.8939 2.64476 11.8727C2.92564 11.7245 3.27218 11.7492 3.53126 11.9466L9.99992 16.8751L16.4686 11.9466Z" fill="white"/></svg>');
            templateButton.appendTo(t.topArea);
            templateButton.on('click', function(){
                $.pixeTemplateSettings.init({ activeTab: 'template-part' });
            });
        },

        infoButton: function(){
            if( pixeData.type != 'post' ) return;

            var t = this;
            var info = $('<a class="pixe-info-action pixe-action" title="Info" ></a>');
            info.append('<svg width="16" height="14" viewBox="0 0 16 14" fill="none"><path d="M12.7917 13.875C11.9167 13.875 11.1771 13.5729 10.5729 12.9688C9.96875 12.3646 9.66666 11.625 9.66666 10.75C9.66666 9.875 9.96875 9.13542 10.5729 8.53125C11.1771 7.92708 11.9167 7.625 12.7917 7.625C13.6667 7.625 14.4062 7.92708 15.0104 8.53125C15.6146 9.13542 15.9167 9.875 15.9167 10.75C15.9167 11.625 15.6146 12.3646 15.0104 12.9688C14.4062 13.5729 13.6667 13.875 12.7917 13.875ZM12.7917 12.2083C13.1944 12.2083 13.5382 12.066 13.8229 11.7812C14.1076 11.4965 14.25 11.1528 14.25 10.75C14.25 10.3472 14.1076 10.0035 13.8229 9.71875C13.5382 9.43403 13.1944 9.29167 12.7917 9.29167C12.3889 9.29167 12.0451 9.43403 11.7604 9.71875C11.4757 10.0035 11.3333 10.3472 11.3333 10.75C11.3333 11.1528 11.4757 11.4965 11.7604 11.7812C12.0451 12.066 12.3889 12.2083 12.7917 12.2083ZM1.33333 11.5833V9.91667H8V11.5833H1.33333ZM3.20833 6.375C2.33333 6.375 1.59375 6.07292 0.989578 5.46875C0.385412 4.86458 0.0833282 4.125 0.0833282 3.25C0.0833282 2.375 0.385412 1.63542 0.989578 1.03125C1.59375 0.427083 2.33333 0.125 3.20833 0.125C4.08333 0.125 4.82291 0.427083 5.42708 1.03125C6.03125 1.63542 6.33333 2.375 6.33333 3.25C6.33333 4.125 6.03125 4.86458 5.42708 5.46875C4.82291 6.07292 4.08333 6.375 3.20833 6.375ZM3.20833 4.70833C3.61111 4.70833 3.95486 4.56597 4.23958 4.28125C4.5243 3.99653 4.66666 3.65278 4.66666 3.25C4.66666 2.84722 4.5243 2.50347 4.23958 2.21875C3.95486 1.93403 3.61111 1.79167 3.20833 1.79167C2.80555 1.79167 2.4618 1.93403 2.17708 2.21875C1.89236 2.50347 1.75 2.84722 1.75 3.25C1.75 3.65278 1.89236 3.99653 2.17708 4.28125C2.4618 4.56597 2.80555 4.70833 3.20833 4.70833ZM8 4.08333V2.41667H14.6667V4.08333H8Z" fill="white"/></svg>');
            info.appendTo(t.bottomArea);

            info.on('click', function(){
                $.pixeBuilder.displaySettingsByType('page-settings');
                $.pixeBuilder.setIframeStatus({ event: 'clearEditTarget' });
            });
        },

        aiButton: function(){
            if( !pixeData.beta ) return;

            var t = this;
            var info = $('<a class="pixe-info-action pixe-action" title="Info" >AI</a>');
            info.appendTo(t.bottomArea);

            info.on('click', function(){
                $.pixeBuilder.displaySettingsByType('ai-settings');
                $.pixeBuilder.setIframeStatus({ event: 'clearEditTarget' });
            });
        },

        settingsButton: function(){
            var t = this;
            var settings = $('<a class="pixe-settings-action pixe-action" title="Settings" ></a>');
            settings.append('<svg width="18" height="18" viewBox="0 0 18 18" fill="none" ><path fill-rule="evenodd" clip-rule="evenodd" d="M9.00015 12C10.6571 12 12.0002 10.6568 12.0002 9C12.0002 7.34314 10.6571 6 9.00015 6C7.34332 6 6.00017 7.34314 6.00017 9C6.00017 10.6568 7.34332 12 9.00015 12ZM9.00015 10.5C9.8286 10.5 10.5002 9.82845 10.5002 9C10.5002 8.17155 9.8286 7.5 9.00015 7.5C8.17178 7.5 7.50015 8.17155 7.50015 9C7.50015 9.82845 8.17178 10.5 9.00015 10.5Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.3386 1.39867L11.6402 3.61055C11.8856 3.73098 12.1216 3.86768 12.3467 4.01924L14.4139 3.17417C14.761 3.03225 15.1597 3.1686 15.3472 3.4934L16.9426 6.2566C17.1301 6.58141 17.0489 6.9948 16.7524 7.22449L14.9866 8.59245C14.9956 8.72715 15.0001 8.86305 15.0001 9C15.0001 9.13695 14.9956 9.27285 14.9866 9.40755L16.7524 10.7755C17.0489 11.0052 17.1301 11.4186 16.9426 11.7434L15.3472 14.5066C15.1597 14.8314 14.761 14.9677 14.4139 14.8258L12.3467 13.9808C12.1216 14.1323 11.8856 14.269 11.6402 14.3894L11.3386 16.6013C11.2879 16.9729 10.9705 17.25 10.5955 17.25H7.40485C7.02979 17.25 6.7124 16.9729 6.66173 16.6013L6.3601 14.3894C6.11472 14.269 5.87876 14.1323 5.65364 13.9808L3.58646 14.8258C3.2393 14.9677 2.84067 14.8314 2.65314 14.5066L1.05781 11.7434C0.870285 11.4186 0.951517 11.0052 1.24801 10.7755L3.01381 9.40755C3.00477 9.27285 3.00019 9.13695 3.00019 9C3.00019 8.86305 3.00477 8.72715 3.01381 8.59245L1.24801 7.22449C0.951517 6.9948 0.870285 6.58141 1.05781 6.2566L2.65314 3.4934C2.84066 3.1686 3.23929 3.03225 3.58646 3.17417L5.65364 4.01924C5.87876 3.86768 6.11472 3.73098 6.3601 3.61055L6.66173 1.39867C6.7124 1.02705 7.02979 0.75 7.40485 0.75H10.5955C10.9705 0.75 11.2879 1.02705 11.3386 1.39867ZM10.2619 4.60503L10.9794 4.95711C11.1631 5.04731 11.3401 5.14979 11.509 5.26354L12.1733 5.71067L14.3756 4.81036L15.3162 6.43964L13.4365 7.89585L13.49 8.69287C13.4967 8.79412 13.5001 8.89657 13.5001 9C13.5001 9.10343 13.4967 9.20588 13.49 9.30713L13.4365 10.1042L15.3162 11.5604L14.3756 13.1897L12.1733 12.2893L11.509 12.7365C11.3401 12.8502 11.1631 12.9526 10.9794 13.0429L10.2619 13.395L9.94088 15.75H8.0595L7.73835 13.395L7.02098 13.0429C6.83719 12.9526 6.66028 12.8502 6.49132 12.7365L5.82715 12.2893L3.62485 13.1897L2.68418 11.5604L4.5639 10.1042L4.51044 9.30713C4.50365 9.20588 4.50018 9.10343 4.50018 9C4.50018 8.89657 4.50365 8.79412 4.51044 8.69287L4.5639 7.89585L2.68418 6.43964L3.62484 4.81036L5.82715 5.71067L6.49132 5.26354C6.66028 5.14979 6.83719 5.04732 7.02098 4.95712L7.73835 4.60503L8.0595 2.25H9.94088L10.2619 4.60503Z" fill="white"/></svg>');
            settings.appendTo(t.bottomArea);

            settings.on('click', function(){
                $.pixeBuilder.displaySettingsByType('page-data');
                $.pixeBuilder.setIframeStatus({ event: 'clearEditTarget' });
            });
        },

        exitButton: function(){
            var t = this;
            var exit = $('<div class="pixe-exit-action pixe-action" ></div>');
            exit.append($.pixeBuilderElementIcon('exit'));
            exit.appendTo(t.bottomArea);
            
            var html  = '<div class="pixe-exit-popup">';
            if( typeof(pixePP) === 'undefined' || !pixePP.active ){
                html += $.pixeProUpgradeButton('upgrade', '?source=exit');
                html += '<a class="pixe-disabled" href="' + $.pixeEscAttr('#') + '" >' + $.pixeBuilderElementIcon('support') + 'Support Center' + $.pixeProBadge() + '</a>';
            }else{
                html += '<a href="https://support.pixebuilder.com/" target="_blank" >' + $.pixeBuilderElementIcon('support') + 'Support Center</a>';
            }
            html += '<a href="https://docs.pixebuilder.com/" target="_blank" >' + $.pixeBuilderElementIcon('document') + 'Documentation</a>';
            html += '<a href="https://pixebuilder.com/community" target="_blank" >' + $.pixeBuilderElementIcon('community') + 'Community Forum</a>';
            html += '<a href="' + $.pixeEscAttr(pixeData.adminUrl) + '?page=pixe_plugin_settings_main" target="_blank" >' + $.pixeBuilderElementIcon('gear2') + 'PixeBuilder Settings</a>';
            if( pixeData.returnPostsUrl ){
                html += '<a href="' + $.pixeEscAttr(pixeData.returnPostsUrl) + '" >' + $.pixeBuilderElementIcon('monitor') + 'Return to Dashboard</a>';
            }
            if( pixeData.returnUrl ){
                html += '<a href="' + $.pixeEscAttr(pixeData.returnUrl) + '" >' + $.pixeBuilderElementIcon('exit') + 'Exit</a>';
            }
            html += '</div>';
            exit.append(html);
        }

    };

    // top bar
    $.pixeAdminTopBar = function(){
        
        this.container = $('#pixe-admin-top-bar-item');
        if( !this.container.length || this.container.hasClass('pixe-init') ) return;
        this.container.addClass('pixe-init');

        this.leftArea = $('<div class="pixe-admin-top-bar-left" ></div>').appendTo(this.container);
        this.rightArea = $('<div class="pixe-admin-top-bar-right" ></div>').appendTo(this.container);
        
        this.init();
    }
    $.pixeAdminTopBar.prototype = {

        init: function(){
            var t = this;

            // left side
            t.navigationButton();
            t.presetButton();

            // right side
            t.postTitle();
            t.deviceButton();
            t.revisionButton();
            t.historyButton();
            t.upgradeButton();
            t.publishButton();
            t.previewButton();
        },

        navigationButton: function(){
            var t = this;

            t.leftArea.append('<div class="pixe-divider"></div>');

            var navigation = $('<a class="pixe-action pixe-navigation-action" title="Navigation" ><svg width="15" height="12" viewBox="0 0 15 12" fill="none"><path d="M0 10V8.33333C0 7.41667 0.75 6.66667 1.66667 6.66667H13.3333C14.25 6.66667 15 7.41667 15 8.33333V10C15 10.9167 14.25 11.6667 13.3333 11.6667H1.66667C0.75 11.6667 0 10.9167 0 10ZM0 1.66667V3.33333C0 4.25 0.75 5 1.66667 5H13.3333C14.25 5 15 4.25 15 3.33333V1.66667C15 0.75 14.25 0 13.3333 0H1.66667C0.75 0 0 0.75 0 1.66667Z" fill="var(--pixe--svg--color, white)"/></svg></a>');
            navigation.appendTo(t.leftArea);

            navigation.on('click', function(){
                $.pixeBuilder.setIframeStatus({
                    event: 'navigator',
                    action: 'init'
                });
            });
        },

        presetButton: function(){
            var t = this;

            t.leftArea.append('<div class="pixe-divider"></div>');

            var colorPreset = $('<a class="pixe-action pixe-color-preset-action" title="' + $.pixeEscAttr(pixei18n.preset.color) + '" ><svg width="17" height="17" viewBox="0 0 17 17" fill="none"><path d="M8.33333 0C3.74167 0 0 3.74167 0 8.33333C0 12.925 3.74167 16.6667 8.33333 16.6667C9.48333 16.6667 10.4167 15.7333 10.4167 14.5833C10.4167 14.075 10.225 13.5833 9.88333 13.1917C9.81666 13.1083 9.775 13.0167 9.775 12.9167C9.775 12.6833 9.95833 12.5 10.1917 12.5H11.6667C14.425 12.5 16.6667 10.2583 16.6667 7.5C16.6667 3.36667 12.925 0 8.33333 0ZM12.9167 9.16667C12.225 9.16667 11.6667 8.60833 11.6667 7.91667C11.6667 7.225 12.225 6.66667 12.9167 6.66667C13.6083 6.66667 14.1667 7.225 14.1667 7.91667C14.1667 8.60833 13.6083 9.16667 12.9167 9.16667ZM10.4167 5.83333C9.725 5.83333 9.16667 5.275 9.16667 4.58333C9.16667 3.89167 9.725 3.33333 10.4167 3.33333C11.1083 3.33333 11.6667 3.89167 11.6667 4.58333C11.6667 5.275 11.1083 5.83333 10.4167 5.83333ZM2.5 7.91667C2.5 7.225 3.05833 6.66667 3.75 6.66667C4.44167 6.66667 5 7.225 5 7.91667C5 8.60833 4.44167 9.16667 3.75 9.16667C3.05833 9.16667 2.5 8.60833 2.5 7.91667ZM7.5 4.58333C7.5 5.275 6.94167 5.83333 6.25 5.83333C5.55833 5.83333 5 5.275 5 4.58333C5 3.89167 5.55833 3.33333 6.25 3.33333C6.94167 3.33333 7.5 3.89167 7.5 4.58333Z" fill="var(--pixe--svg--color, white)"/></svg></a>');
            colorPreset.appendTo(t.leftArea);
            colorPreset.on('click', function(){
                $.pixeColorSettings.init();
            });

            var typoSettings = $('<a class="pixe-action pixe-typo-preset-action" title="' + $.pixeEscAttr(pixei18n.preset.typos) + '" ><svg width="17" height="19" viewBox="0 0 17 19" fill="none"><path d="M2.75 18.3333C1.98611 18.3333 1.33681 18.066 0.802083 17.5312C0.267361 16.9965 0 16.3472 0 15.5833V2.75C0 1.98611 0.267361 1.33681 0.802083 0.802083C1.33681 0.267361 1.98611 0 2.75 0H12.8333V14.6667H2.75C2.49028 14.6667 2.27272 14.7547 2.09733 14.9307C1.92194 15.1067 1.83394 15.3242 1.83333 15.5833C1.83272 15.8424 1.92072 16.0603 2.09733 16.2369C2.27394 16.4135 2.4915 16.5012 2.75 16.5H14.6667V1.83333H16.5V18.3333H2.75ZM2.75 12.8333H11V1.83333H2.75C2.49028 1.83333 2.27272 1.92133 2.09733 2.09733C1.92194 2.27333 1.83394 2.49089 1.83333 2.75V12.9937C1.98611 12.9479 2.13522 12.9097 2.28067 12.8792C2.42611 12.8486 2.58256 12.8333 2.75 12.8333ZM3.4375 10.5417H4.5375L5.13333 8.89167H7.72292L8.29583 10.5417H9.39583L6.98958 4.125H5.84375L3.4375 10.5417ZM5.45417 7.975L6.39375 5.31667H6.43958L7.37917 7.975H5.45417Z" fill="var(--pixe--svg--color, white)"/></svg></a>');
            typoSettings.appendTo(t.leftArea);
            typoSettings.on('click', function(){
                $.pixeTypoSettings.init();
            });

            var typoPreset = $('<a class="pixe-action pixe-typo-preset-action" title="' + $.pixeEscAttr(pixei18n.preset.typos) + '" ><svg width="17" height="17" viewBox="0 0 17 17" fill="none"><path d="M5.975 11.25H10.675L11.625 13.75H13.3667L9.10833 2.91667H7.55833L3.3 13.75H5.04167L5.975 11.25ZM8.33333 4.98333L10.0583 9.58333H6.60833L8.33333 4.98333ZM15 0H1.66667C0.75 0 0 0.75 0 1.66667V15C0 15.9167 0.75 16.6667 1.66667 16.6667H15C15.9167 16.6667 16.6667 15.9167 16.6667 15V1.66667C16.6667 0.75 15.9167 0 15 0ZM15 15H1.66667V1.66667H15V15Z" fill="var(--pixe--svg--color, white)"/></svg></a>');
            typoPreset.appendTo(t.leftArea);
            typoPreset.on('click', function(){
                $.pixeTypoSettings.init({type: 'preset'});
            });

            var buttonPreset = $('<a class="pixe-action pixe-button-preset-action" title="' + $.pixeEscAttr(pixei18n.preset.variable) + '" ><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M14.2 7.05005H4.3C2.78122 7.05005 1.55 8.28127 1.55 9.80005V13.1C1.55 14.6188 2.78122 15.85 4.3 15.85H14.2C15.7188 15.85 16.95 14.6188 16.95 13.1V9.80005C16.95 8.28127 15.7188 7.05005 14.2 7.05005Z" stroke="var(--pixe--svg--color, white)" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.1 13.1001L16.95 21.9001L18.6 18.0501L22.45 16.4001L13.1 13.1001Z" fill="var(--pixe--svg--color, white)"/></svg></a>');
            buttonPreset.appendTo(t.leftArea);
            buttonPreset.on('click', function(){
                $.pixeButtonSettings.init();
            });

            var iconPreset = $('<a class="pixe-action pixe-icon-preset-action" title="' + $.pixeEscAttr(pixei18n.preset.icon) + '" ><svg width="19" height="18" viewBox="0 0 19 18" fill="none"><path d="M8.33333 17.5C7.18056 17.5 6.09722 17.2812 5.08333 16.8438C4.06944 16.4062 3.1875 15.8125 2.4375 15.0625C1.6875 14.3125 1.09375 13.4306 0.65625 12.4167C0.21875 11.4028 0 10.3194 0 9.16667C0 8.01389 0.21875 6.93056 0.65625 5.91667C1.09375 4.90278 1.6875 4.02083 2.4375 3.27083C3.1875 2.52083 4.06944 1.92708 5.08333 1.48958C6.09722 1.05208 7.18056 0.833333 8.33333 0.833333C8.93056 0.833333 9.50695 0.892361 10.0625 1.01042C10.6181 1.12847 11.1528 1.29861 11.6667 1.52083V3.39583C11.1806 3.11806 10.6563 2.89931 10.0938 2.73958C9.53125 2.57986 8.94445 2.5 8.33333 2.5C6.48611 2.5 4.9132 3.14931 3.61458 4.44792C2.31597 5.74653 1.66667 7.31944 1.66667 9.16667C1.66667 11.0139 2.31597 12.5868 3.61458 13.8854C4.9132 15.184 6.48611 15.8333 8.33333 15.8333C10.1806 15.8333 11.7535 15.184 13.0521 13.8854C14.3507 12.5868 15 11.0139 15 9.16667C15 8.72222 14.9549 8.29167 14.8646 7.875C14.7743 7.45833 14.6528 7.05556 14.5 6.66667H16.2917C16.4167 7.06944 16.5104 7.47569 16.5729 7.88542C16.6354 8.29514 16.6667 8.72222 16.6667 9.16667C16.6667 10.3194 16.4479 11.4028 16.0104 12.4167C15.5729 13.4306 14.9792 14.3125 14.2292 15.0625C13.4792 15.8125 12.5972 16.4062 11.5833 16.8438C10.5694 17.2812 9.48611 17.5 8.33333 17.5ZM15 3.33333H14.1667C13.9306 3.33333 13.7326 3.25347 13.5729 3.09375C13.4132 2.93403 13.3333 2.73611 13.3333 2.5C13.3333 2.26389 13.4132 2.06597 13.5729 1.90625C13.7326 1.74653 13.9306 1.66667 14.1667 1.66667H15V0.833333C15 0.597222 15.0799 0.399306 15.2396 0.239583C15.3993 0.0798611 15.5972 0 15.8333 0C16.0694 0 16.2674 0.0798611 16.4271 0.239583C16.5868 0.399306 16.6667 0.597222 16.6667 0.833333V1.66667H17.5C17.7361 1.66667 17.934 1.74653 18.0938 1.90625C18.2535 2.06597 18.3333 2.26389 18.3333 2.5C18.3333 2.73611 18.2535 2.93403 18.0938 3.09375C17.934 3.25347 17.7361 3.33333 17.5 3.33333H16.6667V4.16667C16.6667 4.40278 16.5868 4.60069 16.4271 4.76042C16.2674 4.92014 16.0694 5 15.8333 5C15.5972 5 15.3993 4.92014 15.2396 4.76042C15.0799 4.60069 15 4.40278 15 4.16667V3.33333ZM11.25 8.33333C11.5972 8.33333 11.8924 8.21181 12.1354 7.96875C12.3785 7.72569 12.5 7.43056 12.5 7.08333C12.5 6.73611 12.3785 6.44097 12.1354 6.19792C11.8924 5.95486 11.5972 5.83333 11.25 5.83333C10.9028 5.83333 10.6076 5.95486 10.3646 6.19792C10.1215 6.44097 10 6.73611 10 7.08333C10 7.43056 10.1215 7.72569 10.3646 7.96875C10.6076 8.21181 10.9028 8.33333 11.25 8.33333ZM5.41667 8.33333C5.76389 8.33333 6.05903 8.21181 6.30208 7.96875C6.54514 7.72569 6.66667 7.43056 6.66667 7.08333C6.66667 6.73611 6.54514 6.44097 6.30208 6.19792C6.05903 5.95486 5.76389 5.83333 5.41667 5.83333C5.06945 5.83333 4.77431 5.95486 4.53125 6.19792C4.2882 6.44097 4.16667 6.73611 4.16667 7.08333C4.16667 7.43056 4.2882 7.72569 4.53125 7.96875C4.77431 8.21181 5.06945 8.33333 5.41667 8.33333ZM8.33333 13.75C9.13889 13.75 9.88195 13.5556 10.5625 13.1667C11.2431 12.7778 11.7917 12.25 12.2083 11.5833C12.2917 11.4167 12.2847 11.25 12.1875 11.0833C12.0903 10.9167 11.9444 10.8333 11.75 10.8333H4.91667C4.72222 10.8333 4.57639 10.9167 4.47917 11.0833C4.38195 11.25 4.375 11.4167 4.45833 11.5833C4.875 12.25 5.42708 12.7778 6.11458 13.1667C6.80208 13.5556 7.54167 13.75 8.33333 13.75Z" fill="var(--pixe--svg--color, white)"/></svg></a>');
            iconPreset.appendTo(t.leftArea);
            iconPreset.on('click', function(){
                $.pixeIconSettings.init();
            });

            var controlPreset = $('<a class="pixe-action pixe-control-preset-action" title="' + $.pixeEscAttr(pixei18n.preset.control) + '" ><svg width="15" height="14" viewBox="0 0 15 14" fill="none"><path d="M3.33333 13.3333L0 10L3.33333 6.66667L4.52083 7.83333L3.1875 9.16667H6.66667V10.8333H3.1875L4.5 12.1667L3.33333 13.3333ZM9.16667 10.8333C8.93056 10.8333 8.73264 10.7535 8.57292 10.5937C8.41319 10.434 8.33333 10.2361 8.33333 10C8.33333 9.76389 8.41319 9.56597 8.57292 9.40625C8.73264 9.24653 8.93056 9.16667 9.16667 9.16667C9.40278 9.16667 9.60069 9.24653 9.76042 9.40625C9.92014 9.56597 10 9.76389 10 10C10 10.2361 9.92014 10.434 9.76042 10.5937C9.60069 10.7535 9.40278 10.8333 9.16667 10.8333ZM12.5 10.8333C12.2639 10.8333 12.066 10.7535 11.9062 10.5937C11.7465 10.434 11.6667 10.2361 11.6667 10C11.6667 9.76389 11.7465 9.56597 11.9062 9.40625C12.066 9.24653 12.2639 9.16667 12.5 9.16667C12.7361 9.16667 12.934 9.24653 13.0938 9.40625C13.2535 9.56597 13.3333 9.76389 13.3333 10C13.3333 10.2361 13.2535 10.434 13.0938 10.5937C12.934 10.7535 12.7361 10.8333 12.5 10.8333ZM11.6667 6.66667L10.4792 5.5L11.8125 4.16667H8.33333V2.5H11.8125L10.5 1.16667L11.6667 0L15 3.33333L11.6667 6.66667ZM2.5 4.16667C2.26389 4.16667 2.06597 4.08681 1.90625 3.92708C1.74653 3.76736 1.66667 3.56944 1.66667 3.33333C1.66667 3.09722 1.74653 2.89931 1.90625 2.73958C2.06597 2.57986 2.26389 2.5 2.5 2.5C2.73611 2.5 2.93403 2.57986 3.09375 2.73958C3.25347 2.89931 3.33333 3.09722 3.33333 3.33333C3.33333 3.56944 3.25347 3.76736 3.09375 3.92708C2.93403 4.08681 2.73611 4.16667 2.5 4.16667ZM5.83333 4.16667C5.59722 4.16667 5.39931 4.08681 5.23958 3.92708C5.07986 3.76736 5 3.56944 5 3.33333C5 3.09722 5.07986 2.89931 5.23958 2.73958C5.39931 2.57986 5.59722 2.5 5.83333 2.5C6.06944 2.5 6.26736 2.57986 6.42708 2.73958C6.58681 2.89931 6.66667 3.09722 6.66667 3.33333C6.66667 3.56944 6.58681 3.76736 6.42708 3.92708C6.26736 4.08681 6.06944 4.16667 5.83333 4.16667Z" fill="var(--pixe--svg--color, white)"/></svg></a>');
            controlPreset.appendTo(t.leftArea);
            controlPreset.on('click', function(){
                $.pixeControlSettings.init();
            });

            t.leftArea.append('<div class="pixe-divider"></div>');

            var variablePreset = $('<a class="pixe-action pixe-variable-preset-action" title="' + $.pixeEscAttr(pixei18n.preset.variable) + '" ><svg width="17" height="19" viewBox="0 0 17 19" fill="none"><path d="M15.0625 4.55799C15.3486 4.72121 15.5862 4.95754 15.7509 5.24278C15.9157 5.52803 16.0016 5.85193 16 6.18132V12.2513C16 12.9255 15.6308 13.5472 15.035 13.8747L9.41 17.433C9.13111 17.586 8.81812 17.6663 8.5 17.6663C8.18188 17.6663 7.86889 17.586 7.59 17.433L1.965 13.8747C1.67376 13.715 1.43064 13.4802 1.26092 13.1947C1.09121 12.9092 1.00111 12.5835 1 12.2513V6.18049C1 5.50632 1.36917 4.88549 1.965 4.55799L7.59 1.24132C7.87711 1.08302 8.19964 1 8.5275 1C8.85536 1 9.17789 1.08302 9.465 1.24132L15.09 4.55799H15.0625Z" stroke="var(--pixe--svg--color, white)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 9.33301C6 9.99605 6.26339 10.6319 6.73223 11.1008C7.20107 11.5696 7.83696 11.833 8.5 11.833C9.16304 11.833 9.79893 11.5696 10.2678 11.1008C10.7366 10.6319 11 9.99605 11 9.33301C11 8.66997 10.7366 8.03408 10.2678 7.56524C9.79893 7.0964 9.16304 6.83301 8.5 6.83301C7.83696 6.83301 7.20107 7.0964 6.73223 7.56524C6.26339 8.03408 6 8.66997 6 9.33301Z" stroke="var(--pixe--svg--color, white)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>');
            variablePreset.appendTo(t.leftArea);
            variablePreset.on('click', function(){
                $.pixeVariableSettings.init();
            });
        },

        postTitle: function(){
            var t = this;

            // find/create html
            var postTitle = t.rightArea.children('.pixe-top-bar-title');
            if( !postTitle.length ){
                postTitle = $('<div class="pixe-top-bar-title" ></div>');

                t.rightArea.append('<div class="pixe-divider"></div>');
                t.rightArea.append(postTitle);
                t.rightArea.append('<div class="pixe-divider"></div>');

                // open page data panel
                // postTitle.on('click', function(){
                //     $.pixeBuilder.displaySettingsByType('page-data');
                //     $.pixeBuilder.setIframeStatus({ event: 'clearEditTarget' });
                // });
            }

            var postTitleDivider = postTitle.prev('.pixe-divider');

            // add data
            if( pixeData.postTitle ){
                postTitle.empty();
                postTitle.removeClass('pixe-disable');
                postTitleDivider.removeClass('pixe-disable');

                if( pixeData.postTitle.length > 40 ){
                    postTitle.append(pixeData.postTitle.slice(0, 40) + '...');
                }else{
                    postTitle.append(pixeData.postTitle);
                }
            }else{
                postTitle.empty().addClass('pixe-disable');
                postTitleDivider.addClass('pixe-disable');
            }

        },

        deviceButton: function(){
            var t = this;
            var devices = $($.pixeDeviceSelector());
            devices.appendTo(t.rightArea);
            
            t.rightArea.append('<div class="pixe-divider" ></div>');

            // event
            devices.on('click', '[data-device]', function(){
                var device = $(this).attr('data-device');
                $.pixeBuilder.changeViewport(device);
            });
            $(document.body).on('viewport-change', function(){
                var activeViewport = devices.find('[data-device="' + $.pixeBuilder.viewport + '"]');
                activeViewport.addClass('pixe-active').siblings().removeClass('pixe-active');
            });
        },

        revisionButton: function(){
            var t = this;
            if( pixeData.revisions == 'off' ) return;

            var revision = $('<a class="pixe-action pixe-revision-action" title="Revision" ><svg width="15" height="14" viewBox="0 0 15 14" ><path d="M7.00368 12.25C4.10417 12.25 1.75366 9.8995 1.75366 7C1.75366 4.10051 4.10417 1.75 7.00368 1.75C9.09798 1.75 10.9059 2.97633 11.7485 4.75008H9.85368C9.43945 4.75008 9.10368 5.08586 9.10368 5.50008C9.10368 5.9143 9.43945 6.25008 9.85368 6.25008H13.6037C13.8026 6.25008 13.9934 6.17103 14.134 6.0304C14.2746 5.88978 14.3537 5.69898 14.3537 5.50008V1.75008C14.3537 1.33586 14.0179 1.00008 13.6037 1.00008C13.1895 1.00008 12.8537 1.33586 12.8537 1.75008V3.63024C11.6873 1.60977 9.50425 0.25 7.00368 0.25C3.27574 0.25 0.253662 3.27208 0.253662 7C0.253662 10.728 3.27574 13.75 7.00368 13.75C9.88683 13.75 12.3478 11.9424 13.3151 9.39857C13.4861 8.9488 13.1283 8.5 12.6471 8.5H12.5955C12.2637 8.5 11.9764 8.7205 11.8482 9.02658C11.0553 10.9199 9.18483 12.25 7.00368 12.25Z" /></svg></a>');
            revision.appendTo(t.rightArea);
            
            revision.on('click', t.revisionDropdown);

        },
        
        revisionDropdown: function(){

            // close the popup if already opened
            if( $(this).hasClass('pixe-target-close') ){
                $(this).removeClass('pixe-target-close');
                return;
            }
            
            function revisionItem(revision, statusText, isCurrent = false){
                var date = new Date(revision.time + 'Z');
                var item = $('<div class="pixe-revision-item" ></div>');
                if( isCurrent ){ item.addClass('pixe-current'); }

                if( revision.thumbnail ){
                    var thumbnail = $('<img />');
                    thumbnail.attr('alt', 'avatar');
                    thumbnail.attr('src', revision.thumbnail);
                    thumbnail.appendTo(item);
                    thumbnail.wrap('<div class="pixe-thumbnail" ></div>');
                }
                item.append('<div class="pixe-head" >' + $.pixeDateDiff(date) + ' (' + $.pixeFormatDate(date) + ')' + '</div>');
                item.append('<div class="pixe-tail" >' + statusText + revision.author + ' (#' + revision.id + ')' + '</div>');
                item.attr('data-revision-id', revision.id);
                item.appendTo(items);

                return item;
            }

            var content = $('<div class="pixe-revision-popup-content pixe-box-sizing" ></div>');
            var titleWrap = $('<div class="pixe-title-wrap" ></div>');
            titleWrap.append('<div class="pixe-title">Revisions</div>');
            titleWrap.appendTo(content);

            var applyButton = $('<div class="pixe-revision-apply pixe-disable">Apply</div>');
            applyButton.appendTo(titleWrap);
            
            var items = $('<div class="pixe-revision-items pixe-scrollbar-dark"></div>');
            items.appendTo(content);

            var hasActive = false;

            // autosave
            if( pixeData.autosave && pixeData.autosave != 'off' ){
                items.append(revisionItem(pixeData.autosave, 'Autosave By ', true));
                hasActive = true;
            }

            // revision
            if( pixeData.revisions ){
                for( var i in pixeData.revisions ){
                    var revision = pixeData.revisions[i];
                    var statusText;
    
                    if( i == 0 ){
                        statusText = 'Current Version By ';
                    }else{
                        statusText = 'Updated By ';
                    }
    
                    items.append(revisionItem(revision, statusText, !hasActive));

                    hasActive = true;
                }
            }
            
            // popup
            var popup = new $.pixePopup({
                style: 'pixe-revision-popup pixe-dark',
                target: $(this),
                position: '',
                content: content,
                onClose: function(){
                    $.pixeBuilder.closeRevision();
                }
            });

            // event
            items.on('click', '.pixe-revision-item', function(){
                if( $(this).hasClass('pixe-current') ){
                    applyButton.removeAttr('data-revision-id');
                    $(this).siblings().removeClass('pixe-active');
                    $.pixeBuilder.closeRevision();
                }else{
                    var revisionId = $(this).attr('data-revision-id');
                    applyButton.attr('data-revision-id', revisionId);
                    $(this).addClass('pixe-active').siblings().removeClass('pixe-active');
                    $.pixeBuilder.previewRevision(revisionId);
                }
            });
            applyButton.on('click', function(){
                var revisionId = $(this).attr('data-revision-id');
                if( !revisionId ) return;
                $.pixeBuilder.applyRevision();
                popup.close();
            });
            

        },

        historyButton: function(){
            var t = this;

            // history
            var history = $('<a class="pixe-action pixe-history-action" title="History" ><svg width="15" height="16" viewBox="0 0 15 16" ><path d="M7.97504 13.2975C7.69004 13.5192 7.28629 13.5192 7.00129 13.2975L2.13254 9.51333C1.84754 9.29166 1.4517 9.29166 1.1667 9.51333C0.762954 9.83 0.762954 10.4396 1.1667 10.7562L6.51837 14.9204C7.08837 15.3637 7.88795 15.3637 8.46587 14.9204L13.8175 10.7562C14.2213 10.4396 14.2213 9.83 13.8175 9.51333L13.8096 9.50541C13.5246 9.28375 13.1288 9.28375 12.8438 9.50541L7.97504 13.2975ZM8.47379 10.9067L13.8255 6.7425C14.2292 6.42583 14.2292 5.80833 13.8255 5.49166L8.47379 1.3275C7.90379 0.884162 7.1042 0.884162 6.52629 1.3275L1.17462 5.49958C0.770871 5.81625 0.770871 6.43375 1.17462 6.75041L6.52629 10.9146C7.09629 11.3579 7.90379 11.3579 8.47379 10.9067Z"/></svg></a>');
            history.appendTo(t.rightArea);
            t.historyButton = history;
            
            t.rightArea.append('<div class="pixe-divider" ></div>');

            // undo
            var undo = $('<a class="pixe-action pixe-undo-action" title="Undo" ><svg width="18" height="11" viewBox="0 0 18 11" ><path d="M5.67394 2.01182L3.51913 4.16661H11.5073C14.729 4.16661 17.3406 6.77827 17.3406 9.99994C17.3406 10.4602 16.9675 10.8333 16.5073 10.8333C16.047 10.8333 15.674 10.4602 15.674 9.99994C15.674 7.69877 13.8085 5.83327 11.5073 5.83327H3.51912L5.67394 7.98811C5.99938 8.31352 5.99937 8.84119 5.67394 9.16661C5.3485 9.49202 4.82087 9.49202 4.49543 9.16661L0.918025 5.58919C0.592592 5.26377 0.592592 4.73611 0.918025 4.41069L4.49543 0.833315C4.82087 0.507873 5.3485 0.507873 5.67394 0.833315C5.71462 0.87399 5.75022 0.917831 5.78073 0.96404C5.99429 1.2875 5.9587 1.72706 5.67394 2.01182Z"/></svg></a>');
            undo.appendTo(t.rightArea);

            // redo
            var redo = $('<a class="pixe-action pixe-redo-action" title="Redo" ><svg width="18" height="11" viewBox="0 0 18 11" ><path d="M12.3406 2.01182L14.4955 4.16661H6.50728C3.28563 4.16661 0.67395 6.77827 0.67395 9.99994C0.67395 10.4602 1.04704 10.8333 1.50728 10.8333C1.96752 10.8333 2.34062 10.4602 2.34062 9.99994C2.34062 7.69877 4.20609 5.83327 6.50728 5.83327H14.4955L12.3406 7.98811C12.0152 8.31352 12.0152 8.84119 12.3406 9.16661C12.666 9.49202 13.1937 9.49202 13.5191 9.16661L17.0965 5.58919C17.422 5.26377 17.422 4.73611 17.0965 4.41069L13.5191 0.833315C13.1937 0.507873 12.666 0.507873 12.3406 0.833315C12.3 0.87399 12.2644 0.917831 12.2338 0.96404C12.0203 1.2875 12.0559 1.72706 12.3406 2.01182Z"/></svg></a>');
            redo.appendTo(t.rightArea);

            history.on('click', function(){
                // close the popup if already opened
                if( $(this).hasClass('pixe-target-close') ){
                    $(this).removeClass('pixe-target-close');
                    return;
                }

                $.pixeBuilder.setIframeStatus({
                    event: 'history',
                    action: 'get'
                });
            });
            undo.on('click', function(){
                $.pixeBuilder.setIframeStatus({
                    event: 'history',
                    action: 'undo'
                });
            });
            redo.on('click', function(){
                $.pixeBuilder.setIframeStatus({
                    event: 'history',
                    action: 'redo'
                });
            });
        },
        historyDropdown: function(data){
            var t = this;
            var content = $('<div class="pixe-history-popup-content pixe-box-sizing" ></div>');
            content.append('<div class="pixe-title">History</div>');

            var items = $('<div class="pixe-history-items pixe-scrollbar-dark"></div>');
            items.appendTo(content);

            // user action
            for( var i in data.actions ){
                
                var item = $('<div class="pixe-history-item" ></div>');
                item.attr('data-pointer', i);
                item.html(data.actions[i]);
                
                if( i > data.pointer ){
                    item.addClass('pixe-inactive');
                }else if( i == data.pointer ){
                    item.addClass('pixe-active');
                }

                items.prepend(item);
            }

            // history popup
            new $.pixePopup({
                style: 'pixe-history-popup pixe-dark',
                target: t.historyButton,
                position: '',
                content: content
            });

            // click event
            items.on('click', '.pixe-history-item', function(){
                var targetIndex = $(this).attr('data-pointer');

                // set active state
                items.find('.pixe-history-item').each(function(){
                    var item = $(this);
                    var index = item.attr('data-pointer');

                    if( index > targetIndex ){
                        item.addClass('pixe-inactive');
                        item.removeClass('pixe-active');
                    }else if( index == targetIndex ){
                        item.addClass('pixe-active');
                        item.removeClass('pixe-inactive');
                    }else{
                        item.removeClass('pixe-active pixe-inactive');
                    }
                });
                
                // send action to iframe
                $.pixeBuilder.setIframeStatus({
                    event: 'history',
                    action: 'doAt',
                    index: targetIndex
                });
            });
        },

        upgradeButton: function(){
            var t = this;
            if( typeof(pixePP) === 'undefined' || !pixePP.active ){
                var button = $.pixeProUpgradeButton('upgrade', '?utm_source=page_builder&utm_medium=top_bar_button&utm_campaign=upgrade', 'upgrade');
                t.rightArea.append(button);
            }
        },
        
        publishButton: function(){
            var t = this;

            var publishWrap = $('<div class="pixe-publish-button-wrap" ></div>');
            publishWrap.appendTo(t.rightArea);
 
            var publishButton = $('<div class="pixe-publish-action pixe-loading-icon" ></div>');
            publishButton.appendTo(publishWrap);
            if( !pixeData.autosave || pixeData.autosave == 'off' ){
                publishButton.addClass('pixe-disable');
            }
            t.publishButton = publishButton;
            t.updatePublishStatus();

            // click publish button
            publishButton.on('click', function(){
                if( $(this).hasClass('pixe-loading') || $(this).hasClass('pixe-disable') ) return;

                $.pixeBuilder.setIframeStatus({
                    event: 'publish',
                    action: 'publish'
                });
            });

            if( pixeData.type == 'post' ){
                var publishDropdown = $('<div class="pixe-publish-dropdown-action" ></div>');
                publishDropdown.append('<svg width="10" height="7" viewBox="0 0 10 7" fill="none" ><path d="M2.01183 1.12198L5.00002 4.11015L7.98818 1.12198C8.3136 0.79658 8.84118 0.79658 9.16668 1.12198C9.20735 1.16273 9.24293 1.20656 9.27343 1.25273C9.48702 1.57623 9.45143 2.01581 9.16668 2.30056L5.58927 5.87798C5.43293 6.03423 5.22102 6.12198 5.00002 6.12198C4.77893 6.12198 4.56702 6.03423 4.41077 5.87798L0.833308 2.30056C0.507875 1.97506 0.507875 1.44748 0.833308 1.12198C0.873992 1.08134 0.917833 1.04575 0.964042 1.01524C1.2875 0.801671 1.72707 0.837263 2.01183 1.12198Z" fill="white"/></svg>');
                publishDropdown.appendTo(publishWrap);
                publishDropdown.on('click', t.publishDropdown);
                publishWrap.addClass('pixe-with-dropdown');
            }
            
        },
        updatePublishStatus: function(){
            var t = this;
            if( pixeData.postStatus == 'draft' ){
                t.publishButton.html('Publish');
            }else{
                t.publishButton.html('Update');
            }
        },

        // display dropdown
        publishDropdown: function(){
            var button = $(this);

            // close the popup if already opened
            if( button.hasClass('pixe-target-close') ){
                button.removeClass('pixe-target-close');
                return;
            }

            var content = $('<div class="pixe-save-popup-content" ></div>');

            // switch to draft
            var draft = $('<div class="pixe-action" data-status="draft" ></div>');
            draft.append('<svg width="16" height="16" viewBox="0 0 16 16" ><path d="M4.955 2.84L3.8675 1.745C5.0525 0.9575 6.47 0.5 8 0.5C12.14 0.5 15.5 3.86 15.5 8C15.5 9.53 15.0425 10.9475 14.255 12.1325L13.16 11.0375C13.6925 10.145 14 9.11 14 8C14 4.6925 11.3075 2 8 2C6.89 2 5.855 2.3075 4.955 2.84ZM12.245 6.1475L11.1875 5.09L9.2 7.0775L10.2575 8.135L12.245 6.1475ZM13.835 15.9575L12.1325 14.255C10.9475 15.0425 9.53 15.5 8 15.5C3.86 15.5 0.5 12.14 0.5 8C0.5 6.47 0.9575 5.0525 1.745 3.8675L0.0424995 2.165L1.1 1.1075L14.885 14.8925L13.835 15.9575ZM11.045 13.16L8.135 10.25L6.9425 11.4425L3.7625 8.2625L4.82 7.205L6.9425 9.3275L7.0775 9.1925L2.84 4.955C2.3075 5.855 2 6.89 2 8C2 11.3075 4.6925 14 8 14C9.11 14 10.145 13.6925 11.045 13.16Z"/></svg>');
            if( pixeData.postStatus == 'publish' ){
                draft.append('<span>Switch to Draft</span>');
            }else if( pixeData.postStatus == 'draft' ){
                draft.append('<span>Save Draft</span>');
            }
            draft.appendTo(content);

            // save template
            var saveTemplate = $('<div class="pixe-action" data-status="save-template" ></div>');
            saveTemplate.append('<svg width="14" height="14" viewBox="0 0 14 14" ><path fill-rule="evenodd" clip-rule="evenodd" d="M0.25 12.25C0.25 13.0785 0.921572 13.75 1.75 13.75H12.25C13.0785 13.75 13.75 13.0785 13.75 12.25V4.62132C13.75 4.2235 13.592 3.84197 13.3106 3.56066L10.4394 0.689342C10.158 0.408032 9.7765 0.25 9.3787 0.25H1.75C0.921572 0.25 0.25 0.921572 0.25 1.75V12.25ZM1.75 1.75V12.25H3.25V10C3.25 9.17155 3.92157 8.5 4.75 8.5H9.25C10.0785 8.5 10.75 9.17155 10.75 10V12.25H12.25V4.62132L10 2.37132V4C10 4.82843 9.32845 5.5 8.5 5.5H4.75C3.92157 5.5 3.25 4.82843 3.25 4V1.75H1.75ZM4.75 1.75V4H8.5V1.75H4.75ZM9.25 12.25V10H4.75V12.25H9.25Z" /></svg>');
            saveTemplate.append('<span>Save Template</span>');
            saveTemplate.appendTo(content);
            if( typeof(pixePP) === 'undefined' || !pixePP.active ){ 
                saveTemplate.append($.pixeProBadge());
                saveTemplate.addClass('pixe-pro-locked'); 
            }

            // preview
            if( pixeData.autosave !== 'off' ){
                var preview = $('<a href="#"></a>');
                preview.append('<svg width="18" height="18" viewBox="0 0 18 18" ><path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 9C12.0001 10.6568 10.6569 12 9.00008 12C7.34323 12 6.00008 10.6568 6.00008 9C6.00008 7.34314 7.34323 6 9.00008 6C10.6569 6 12.0001 7.34314 12.0001 9ZM10.5001 9C10.5001 9.82845 9.82853 10.5 9.00008 10.5C8.17163 10.5 7.50008 9.82845 7.50008 9C7.50008 8.17155 8.17163 7.5 9.00008 7.5C9.82853 7.5 10.5001 8.17155 10.5001 9Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16.9544 9.58357C17.1559 9.21697 17.1559 8.78302 16.9544 8.41642C16.1258 6.90856 13.5401 3 9.00008 3C4.46008 3 1.87436 6.90856 1.04576 8.41642C0.844283 8.78302 0.844283 9.21697 1.04576 9.58357C1.87436 11.0914 4.46008 15 9.00008 15C13.5401 15 16.1258 11.0914 16.9544 9.58357ZM15.5621 9C15.1697 8.31105 14.4404 7.20864 13.3751 6.2662C12.2478 5.26887 10.8054 4.5 9.00008 4.5C7.19474 4.5 5.75236 5.26887 4.62508 6.2662C3.55983 7.20864 2.83049 8.31105 2.43803 9C2.83049 9.68895 3.55983 10.7914 4.62508 11.7338C5.75236 12.7311 7.19474 13.5 9.00008 13.5C10.8054 13.5 12.2478 12.7311 13.3751 11.7338C14.4404 10.7914 15.1697 9.68895 15.5621 9Z" /></svg>');
                preview.append('<span>Preview Changes</span>');
                preview.appendTo(content);

                // autosave before preview
                preview.on('click', function(){
                    $.pixeBuilder.setIframeStatus({
                        event: 'autosave',
                        action: 'preview'
                    });
                    return false;
                });
            }

            // view
            var view = $('<a target="_blank" ></a>');
            view.attr('href', pixeData.postUrl);
            view.append('<svg width="16" height="14" viewBox="0 0 16 14" ><path fill-rule="evenodd" clip-rule="evenodd" d="M1.625 0.25C0.796572 0.25 0.125 0.921572 0.125 1.75V9.25C0.125 10.0785 0.796572 10.75 1.625 10.75H7.25V12.25H5C4.58579 12.25 4.25 12.5858 4.25 13C4.25 13.4142 4.58579 13.75 5 13.75H11C11.4142 13.75 11.75 13.4142 11.75 13C11.75 12.5858 11.4142 12.25 11 12.25H8.75V10.75H14.375C15.2035 10.75 15.875 10.0785 15.875 9.25V1.75C15.875 0.921572 15.2035 0.25 14.375 0.25H1.625ZM1.625 1.75V9.25H14.375V1.75H1.625Z" /></svg>');
            view.append('<span>View Page</span>');
            view.appendTo(content);

            // status popup
            var popup = new $.pixePopup({
                style: 'pixe-save-popup pixe-dark pixe-box-sizing',
                target: button,
                position: '',
                content: content
            });

            // events
            content.on('click', '.pixe-action', function(){
                var action = $(this).attr('data-status');

                if( action == 'save-template' ){
                    if( $.pixeSavePageTemplate ){
                        $.pixeSavePageTemplate();
                    }
                }else{
                    $.pixeBuilder.setIframeStatus({
                        event: 'publish',
                        action: $(this).attr('data-status')
                    });
                }
                
                popup.close();
            });
        },

        // display notice message
        publishNotice: function(text){
            var t = this;
            var popup = $('<div class="pixe-popup pixe-save-notice-popup pixe-box-sizing" ></div>');
            popup.append(text);
            popup.appendTo(document.body);

            setTimeout(function(){
                popup.fadeOut(150, function(){ $(this).remove(); });
            }, 2000);
        },

        previewButton: function(){
            var t = this;
            var preview = $('<div class="pixe-preview-action" ></div>');
            var previewTitle = 'Preview (' + (/Mac|iPhone|iPad|iPod/.test(navigator.platform)? 'cmd+E': 'ctrl+E') + ')';
            preview.append('<a class="pixe-preview" title="' + previewTitle + '" ><svg width="20" height="20" viewBox="0 0 20 20" fill="none" ><path fill-rule="evenodd" clip-rule="evenodd" d="M13.3334 9.99996C13.3334 11.8409 11.841 13.3333 10.0001 13.3333C8.15914 13.3333 6.66675 11.8409 6.66675 9.99996C6.66675 8.15901 8.15914 6.66663 10.0001 6.66663C11.841 6.66663 13.3334 8.15901 13.3334 9.99996ZM11.6667 9.99996C11.6667 10.9205 10.9206 11.6666 10.0001 11.6666C9.07958 11.6666 8.33341 10.9205 8.33341 9.99996C8.33341 9.07946 9.07958 8.33329 10.0001 8.33329C10.9206 8.33329 11.6667 9.07946 11.6667 9.99996Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.8382 10.6485C19.062 10.2411 19.062 9.75896 18.8382 9.35162C17.9175 7.67622 15.0445 3.33337 10 3.33337C4.9556 3.33337 2.08259 7.67622 1.16192 9.35162C0.938052 9.75896 0.938052 10.2411 1.16192 10.6485C2.08259 12.3239 4.9556 16.6667 10 16.6667C15.0445 16.6667 17.9175 12.3239 18.8382 10.6485ZM17.2912 10C16.8551 9.23454 16.0448 8.00964 14.8611 6.96248C13.6086 5.85434 12.006 5.00004 10 5.00004C7.99411 5.00004 6.39147 5.85434 5.13893 6.96248C3.95533 8.00964 3.14495 9.23454 2.70888 10C3.14495 10.7655 3.95533 11.9905 5.13893 13.0376C6.39147 14.1457 7.99411 15 10 15C12.006 15 13.6086 14.1457 14.8611 13.0376C16.0448 11.9905 16.8551 10.7655 17.2912 10Z" fill="white"/></svg></a>');
            preview.append('<a class="pixe-close-preview" ><svg width="20" height="20" viewBox="0 0 20 20" fill="none" ><path fill-rule="evenodd" clip-rule="evenodd" d="M2.84522 2.50006C2.51979 2.17462 1.99214 2.17462 1.66671 2.50006C1.34128 2.8255 1.34128 3.35314 1.66671 3.67857L3.86 5.87186C2.49499 7.12962 1.60369 8.54769 1.16192 9.3516C0.938052 9.75902 0.938052 10.2411 1.16192 10.6485C2.08259 12.3239 4.9556 16.6668 10 16.6668C11.4289 16.6668 12.6835 16.3183 13.7689 15.7808L16.3215 18.3334C16.647 18.6589 17.1746 18.6589 17.5 18.3334C17.8255 18.0079 17.8255 17.4804 17.5 17.1549L15.2288 14.8837M2.70889 10C3.13265 9.2561 3.90991 8.0784 5.03966 7.05152L6.86182 8.87369C6.73552 9.22552 6.66671 9.60477 6.66671 10C6.66671 11.841 8.15909 13.3334 10 13.3334C10.3954 13.3334 10.7745 13.2646 11.1265 13.1383L12.508 14.5199C11.7533 14.8208 10.919 15.0001 10 15.0001C7.9941 15.0001 6.39147 14.1458 5.13893 13.0376C3.95533 11.9904 3.14495 10.7656 2.70889 10Z" fill="white"/><path d="M13.283 10.5808L9.41943 6.71715C9.60802 6.68402 9.80202 6.66675 10.0001 6.66675C11.841 6.66675 13.3334 8.15913 13.3334 10C13.3334 10.1981 13.3162 10.3922 13.283 10.5808Z" fill="white"/><path d="M15.3139 12.6116C16.2538 11.6726 16.9132 10.6637 17.2912 10C16.8552 9.23451 16.0448 8.00965 14.8612 6.96249C13.6087 5.85434 12.006 5.00005 10.0001 5.00005C9.28341 5.00005 8.61825 5.10909 8.00209 5.2998L6.70435 4.00205C7.6768 3.58979 8.77433 3.33337 10.0001 3.33337C15.0445 3.33337 17.9175 7.67622 18.8382 9.35159C19.0621 9.75901 19.0621 10.2411 18.8382 10.6485C18.4357 11.3811 17.6598 12.6236 16.4924 13.7901L15.3139 12.6116Z" fill="white"/></svg></div>');
            preview.appendTo(t.rightArea);
            
            preview.on('click', '.pixe-preview', function(){
                $(document.body).addClass('pixe-preview');
                $.pixeBuilder.setIframeStatus({
                    event: 'preview',
                    value: true
                });
            });
            preview.on('click', '.pixe-close-preview', function(){
                $(document.body).removeClass('pixe-preview');
                $.pixeBuilder.setIframeStatus({
                    event: 'preview',
                    value: false
                });
            });
            
        },

    };

    // settings edit
    $.pixeSettingsEdit = {

        content: undefined,
        settings: undefined,
        activeTab: undefined,
        activeData: undefined,

        getContent: function(value, activeTab){
            if( !value ) return;
            var t = this;

            // set current content
            t.content = $('<div class="pixe-admin-settings-area pixe-type-edit" ></div>');
            t.activeData = value;

            // find current settings
            var title = '';
            var isPro = false;
            if( t.activeData ){
                if( t.activeData._type == 'collection' ){
                    isPro = true;
                    if( t.activeData._subtype == 'carousel' ){
                        t.settings = $.pixeCollectionCarouselSettings;
                        title = 'Carousel'
                    }else if( t.activeData._subtype == 'slider' ){
                        t.settings = $.pixeCollectionSliderSettings;
                        title = 'Slider'
                    }
                }else if( t.activeData._type == 'wrapper' ){
                    if( t.activeData._subtype == 'mega-menu' ){
                        t.settings = $.pixeWrapperMenuSettings;
                    }else if( t.activeData._subtype == 'slider' ){
                        t.settings = $.pixeWrapperSliderSettings;
                    }else{
                        t.settings = $.pixeWrapperSettings;
                    }
                    title = 'Container';
                }else if( t.activeData._type == 'column' ){
                    if( t.activeData._subtype == 'carousel' ){
                        t.settings = $.pixeColumnCarouselSettings;
                    }else{
                        t.settings = $.pixeColumnSettings;
                    }
                    title = 'Column'; 
                }else if( t.activeData._type == 'element' ){
                    if( pixeData.elements[t.activeData._element] ){
                        t.settings = pixeData.elements[t.activeData._element].settings;
                        title = pixeData.elements[t.activeData._element].title;
                        isPro = pixeData.elements[t.activeData._element].isPro;
                    }else{
                        title = t.activeData._element;
                    }
                }
            }

            // item title
            var itemTitle = $('<div class="pixe-admin-settings-title" ></div>');
            itemTitle.append(title);
            itemTitle.appendTo(t.content);

            if( !t.settings || (isPro && (typeof(pixePP) === 'undefined' || !pixePP.active)) ){
                var elemSlug = t.activeData._type;
                if( elemSlug == 'element' ){
                    elemSlug = t.activeData._element;
                }

                if( isPro && (typeof(pixePP) === 'undefined' || !pixePP.active) ){
                    t.getRestrictContent('element', t.content, elemSlug);
                }
                
            }else{

                // create tab head
                var tabHead = $('<div class="pixe-admin-settings-tab-head" ></div>');
                for( var slug in t.settings ){
                    tabHead.append('<div data-tab="' + slug + '" >' + t.settings[slug].title + '</div>');
                }
                tabHead.appendTo(t.content);

                // tab content
                var tabContent = $('<div class="pixe-admin-settings-tab-content pixe-scrollbar" ></div>');
                tabContent.appendTo(t.content);
                
                // active tab
                var activeSection;
                if( activeTab && activeTab[0] ){
                    t.activeTab = activeTab[0];
                    activeSection = activeTab[1];

                    // check if section is active
                    if( !t.settings[t.activeTab] ){
                        t.activeTab = Object.keys(t.settings)[0];
                    }

                    tabHead.children('[data-tab="' + t.activeTab + '"]').addClass('pixe-active');
                }else{
                    t.activeTab = tabHead.children().first().addClass('pixe-active').attr('data-tab');
                }
                t.getTab(tabContent, activeSection);
                tabHead.on('click', '[data-tab]', function(){
                    t.activeTab = $(this).attr('data-tab');
                    $(this).addClass('pixe-active').siblings().removeClass('pixe-active');
                    t.getTab(tabContent);
                });

            }

            return t.content;
        },

        getRestrictContent: function(type, container, slug){
            var content = $('<div class="pixe-admin-settings-restrict-content" ></div>');
            content.appendTo(container);

            if( type == 'element' ){
                var headWrap = '<div class="pixe-head-wrap" >';
                headWrap += $.pixeGetAdminIcon('bolt-2');
                headWrap += '<div class="pixe-head" ><div class="pixe-title" >' + pixei18n.upgrade.renewTitle + '</div></div>';
                headWrap += '</div>';
                content.append(headWrap);
                content.append('<div class="pixe-content" >' + pixei18n.upgrade.renewContent + '</div>');
                content.append($.pixeProUpgradeButton('', '?source=builder-elem&elem=' + $.pixeEscAttr(slug), 'recycle'));
            }
        },

        getTab: function(tabContent, activeSection){
            var t = this;
            tabContent.off().empty();

            if( !t.settings || !t.settings[t.activeTab] ) return;
            var settings = t.settings[t.activeTab].section;

            // create section
            for( var slug in settings ){
                var sectionSettings = settings[slug];
                if( typeof(sectionSettings) == 'string' ){
                    sectionSettings = $.pixeBuilderInputSection[sectionSettings];
                    if( !sectionSettings ) continue;
                }

                var section = $('<div class="pixe-admin-settings-section" ></div>');
                section.attr('data-section-slug', slug);
                if( sectionSettings.slug ){
                    section.attr('data-refresh-slug', sectionSettings.slug);
                }
                if( sectionSettings['refresh-on-active'] ){
                    section.addClass('pixe-active-refresh');
                }

                // always on section
                if( sectionSettings['always-on'] ){
                    section.addClass('pixe-always-active');

                // active sectinon
                }else if( !activeSection || slug == activeSection ){
                    activeSection = slug;
                    section.addClass('pixe-active');
                }
                t.sectionContent(section, sectionSettings);
                section.appendTo(tabContent);
            }

            // toggle box
            tabContent.on('click', '.pixe-admin-settings-section > .pixe-head', function(){
                var parent = $(this).parent();

                if( parent.hasClass('pixe-always-active') ){
                    return;
                }else if( parent.hasClass('pixe-active') ){
                    parent.removeClass('pixe-active');
                }else{
                    parent.addClass('pixe-active').siblings().not('.pixe-always-active').removeClass('pixe-active');

                    if( parent.hasClass('pixe-active-refresh') ){
                        t.refreshActiveSection();
                    }
                }
            });
            
        },

        sectionContent: function(section, settings){
            var t = this;

            // section title
            section.append('<div class="pixe-head" >' + settings.title + '</div>');
            if( settings['tip-text'] ){
                var tip = $('<div class="pixe-svg-preset pixe-svg-info" ></div>');
                    tip.attr('data-tip-text', settings['tip-text']);
                section.find('.pixe-head').append(tip);
            }

            // section content
            var content = $('<div class="pixe-content" ></div>');
            content.appendTo(section);
                
            if( settings['is-pro'] && (typeof(pixePP) === 'undefined' || !pixePP.active) ){
                section.find('.pixe-head').append($.pixeProBadge());
                content = $.pixeProSectionFilter(content);
            }

            // normal input
            if( typeof(settings.options) == 'object' ){

                // device selector
                if( settings['device-selector'] || settings['pointer-state'] ){

                    var devicesClass = '';
                    var stateWrap = $('<div class="pixe-state-wrap" ></div>');
                    var typeContent = $('<div class="pixe-type-content" ></div>');
                    content.append(stateWrap);
                    content.append(typeContent);

                    // pointer state
                    if( settings['pointer-state'] ){
                        var pointers = $($.pixePointerState());
                        pointers.appendTo(stateWrap);
                        content.attr('data-pointer-state', 'normal');
                        devicesClass = 'pixe-minimize';

                        // on click
                        pointers.on('click', '[data-state]', function(){
                            $(this).addClass('pixe-active').siblings().removeClass('pixe-active');
                            content.attr('data-pointer-state', $(this).attr('data-state'));
                            t.getInputSection(content, settings, typeContent);
                        });
                    }

                    // device selector
                    if( settings['device-selector'] ){
                        var devices = $($.pixeDeviceSelector($.pixeBuilder.viewport, devicesClass));
                        devices.appendTo(stateWrap);
                        content.attr('data-device-selector', $.pixeBuilder.viewport);

                        // on click
                        devices.on('click', '[data-device]', function(){
                            var device = $(this).attr('data-device');
                            $.pixeBuilder.changeViewport(device);
                        });
                        devices.on('viewport-update', function(){
                            var activeViewport = devices.find('[data-device="' + $.pixeBuilder.viewport + '"]');
                            activeViewport.addClass('pixe-active').siblings().removeClass('pixe-active');
                            content.attr('data-device-selector', $.pixeBuilder.viewport);
                            t.getInputSection(content, settings, typeContent);
                        });
                    }

                    t.getInputSection(content, settings, typeContent);

                // normal input
                }else{
                    t.getInputSection(content, settings, content);
                }

                t.bindInput(content);

            // input set
            }else if( typeof(settings.options) == 'string' ){
                t.getInputSet(settings, content);
            }

        },

        getInputSection: function(content, settings, container){
            var t = this;
            var activeGroup = '';
            container.empty();

            function displayInput(area){
                area.empty();

                var device = content.attr('data-device-selector');
                var pointer = content.attr('data-pointer-state');
                var group = content.attr('data-group-input');

                // loop thorugh options
                for(var key in settings.options){

                    var value;
                    var options = settings.options[key];

                    // input data
                    if( options['input-group'] == 'disable' ){
                        value = $.pixeGetStateValue(t.activeData, key, device, pointer);
                    }else{
                        value = $.pixeGetStateValue(t.activeData, key, device, pointer, group);
                    }
                    
                    if( device != 'desktop' && options['device-selector'] === false ) continue;

                    if( typeof(options) == 'string' ){
                        options = $.pixeBuilderInputOption[options];
                    }

                    // input field
                    var input = $.pixeGetInput(key, value, options, area);

                    // init conditional
                    if( input && options.condition ){
                        input.pixeInputCondition(t.activeData, device, pointer, group);
                    }
                }
            }

            // input group
            if( settings.group ){
                if( Object.keys(settings.group).length == 1 ){
                    activeGroup = Object.keys(settings.group)[0];
                }else{

                    var inputGroup = $('<div class="pixe-input-group-selector"></div>');
                    var groupContent = $('<div class="pixe-group-content" ></div>');
                    container.append(inputGroup);
                    container.append(groupContent);
                    container = groupContent;

                    // group title
                    for( var slug in settings.group ){
                        var group = $('<span></span>');

                        if( !activeGroup ){
                            activeGroup = slug;
                            group.addClass('pixe-active');
                        }
                        
                        group.attr('data-group', slug);
                        group.html(settings.group[slug]);
                        group.appendTo(inputGroup);
                    }

                    // input group event
                    inputGroup.on('click', '[data-group]', function(){
                        if( $(this).hasClass('pixe-active') ) return;
                        $(this).addClass('pixe-active').siblings().removeClass('pixe-active');

                        activeGroup = $(this).attr('data-group');
                        content.attr('data-group-input', activeGroup);
                        displayInput(groupContent);
                    });
                }

                // set active group
                content.attr('data-group-input', activeGroup);
            }

            // display each input to container area
            displayInput(container);
        },

        bindInput: function(container){
            var t = this;

            // change event
            container.on('input change pickerchange', '[data-slug]', function(e){
                if( $(e.currentTarget).hasClass('pixe-picker-wrap') && e.type != 'pickerchange' ){ return; }
                
                var device = container.attr('data-device-selector');
                var pointer = container.attr('data-pointer-state');
                var group = container.attr('data-group-input');

                var slug = $(this).attr('data-slug');
                var newValue = $.pixeGetInputVal($(this));
                var editType = slug;
                var inputGroup = $(this).attr('data-input-group');

                // update data
                if( group && inputGroup != 'disable' ){
                    var groupSlug = $.pixeGetStateSlug(group, device, pointer);
                    editType = groupSlug;

                    // add
                    if( newValue ){
                        if( !t.activeData[groupSlug] ) t.activeData[groupSlug] = {};
                        t.activeData[groupSlug][slug] = newValue;     

                    // remove
                    }else{
                        if( t.activeData[groupSlug] ){
                            delete t.activeData[groupSlug][slug];
                            if( Object.keys(t.activeData[groupSlug]).length == 0 ) delete(t.activeData[groupSlug]);
                        }
                    }
                    
                }else{
                    var dataSlug = $.pixeGetStateSlug(slug, device, pointer);
                    editType = dataSlug;

                    // add
                    if( newValue ){
                        t.activeData[dataSlug] = newValue;
                    // remove
                    }else if( t.activeData[dataSlug] ){
                        delete t.activeData[dataSlug];
                    }
                }

                // conditional
                container.find('[data-condition]').each(function(){
                    $(this).pixeInputCondition(t.activeData, device, pointer, group);
                });

                // iframe event
                $.pixeBuilder.setIframeStatus({
                    event: 'edit',
                    type: editType,
                    value: t.activeData
                });

            });

            // button callback
            container.on('click', '.pixe-button-callback', function(){
                var button = $(this);
                var callback = button.attr('data-button-callback');
                if( callback && $.pixeCallback[callback] ){
                    $.pixeCallback[callback](button, undefined, t.activeData);
                }
            });

        },

        getInputSet: function(settings, container){
            var t = this;
            var type = settings.options;
            var value = t.activeData;
            var ssSettings = {
                obj: value,
                slug: settings.slug,
                type: type,
                display: 'html',
                device: $.pixeBuilder.viewport,
                callbackItem: value,
                onChange: function(v, subtype){
                    if( settings.slug ){
                        $.pixeBuilder.setIframeStatus({
                            event: 'edit',
                            type: settings.slug,
                            subtype: subtype,
                            value: value
                        });
                    }else{
                        $.pixeBuilder.setIframeStatus({
                            event: 'edit',
                            type: subtype,
                            value: value
                        });
                    }
                }
            };

            switch(type){
                case 'bg-media':
                    var ss = new $.pixeStyleSelector(ssSettings);
                    ss.bgMediaOption(container);
                    break;
                case 'gallery':
                    if( settings['gallery-filter'] ){
                        ssSettings['gallery-filter'] = true;
                    }
                    var ss = new $.pixeStyleSelector(ssSettings);
                    ss.getContent(container, type);
                    break;
                case 'typography':
                    if( settings.subslug ){
                        ssSettings.subslug = settings.subslug;
                    }
                    if( settings.hidePreset ){
                        ssSettings.hidePreset = settings.hidePreset;
                    }
                    var ss = new $.pixeStyleSelector(ssSettings);
                    ss.getContent(container, type);
                    break;
                default:
                    var ss = new $.pixeStyleSelector(ssSettings);
                    ss.getContent(container, type);
                    break;
            }
        },

        refreshActiveSection: function(){
            var t = this;
            var activeSection = t.content.find('.pixe-admin-settings-section.pixe-active');
            t.refreshSection(activeSection);
        },

        refreshSection: function(section){
            var t = this;

            section.empty();

            // for input preset
            var sectionSlug = section.attr('data-section-slug');
            var sectionSettings;
            if( t.settings && t.settings[t.activeTab] && t.settings[t.activeTab].section[sectionSlug] ){
                sectionSettings = t.settings[t.activeTab].section[sectionSlug];
                if( typeof(sectionSettings) == 'string' ){
                    sectionSettings = $.pixeBuilderInputSection[sectionSettings];
                }
            }

            // replace section content
            if( sectionSettings ){
                t.sectionContent(section, sectionSettings);
            }
        },

        updateSection: function(id, slug, value){
            var t = this;
            
            // if same element update value
            if( !t.activeData || t.activeData._id != id ) return;
            t.activeData[slug] = value;

            // update section
            var sections = t.content.find('.pixe-admin-settings-section');
            sections.filter('[data-refresh-slug~="' + slug + '"]').each(function(){
                t.refreshSection($(this));
            });

            var searchSlug = slug.replace('tablet-', '').replace('mobile-', '');
            sections.not('[data-refresh-slug]').find('[data-slug="' + searchSlug + '"]').each(function(){
                t.refreshSection($(this).closest('.pixe-admin-settings-section'));
            });

        },

        clear: function(){
            var t = this;
            t.content = undefined;
            t.settings = undefined;
            t.activeTab = undefined;
            t.activeData = undefined;
        },
    };

    // settings block
    $.pixeSettingsBlock = {
            
        getContent: function(type, activeTab){
            var t = this;
            var container = $('<div class="pixe-admin-settings-area pixe-type-blocks" ></div>');

            t.type = type;

            // create tab head
            var tabHead = $('<div class="pixe-admin-settings-tab-head" ></div>');
            if( !t.type ){
                tabHead.append('<div data-tab="blocks" >' + pixei18n.template.blocks + '</div>');
                tabHead.append('<div data-tab="sites">' + pixei18n.template.sites + '</div>');
                tabHead.append('<div data-tab="favourites">' + pixei18n.button.favourites + '</div>');
            }else if( t.type == 'custom' ){
                if(typeof(pixePP) !== 'undefined' && pixePP.active){
                    tabHead.append('<div data-tab="custom-blocks" >Custom Blocks</div>');
                    tabHead.append('<div data-tab="custom-pages">Custom Pages</div>');
                }
            }else if( t.type == 'synced' ){
                activeTab = 'synced-blocks';
                if(typeof(pixePP) !== 'undefined' && pixePP.active){
                    tabHead.append('<div data-tab="synced-blocks" class="pixe-lone" >Synced Blocks</div>');
                }
            }
            if( tabHead.children().length ){
                tabHead.appendTo(container);

                // set active tab
                if( activeTab ){
                    tabHead.children('[data-tab="' + activeTab + '"]').addClass('pixe-active');
                }else{
                    activeTab = tabHead.children().first().addClass('pixe-active').attr('data-tab');
                }
            }

            // tab content
            var tabContent = $('<div class="pixe-admin-settings-tab-content pixe-scrollbar" ></div>');
            tabContent.appendTo(container);
            t.getTab(tabHead, tabContent, activeTab);

            // change tab action
            tabHead.on('click', '[data-tab]', function(){
                var tab = $(this).attr('data-tab');
                
                if( $(this).hasClass('pixe-active') ) return;
                $(this).addClass('pixe-active').siblings().removeClass('pixe-active');

                activeTab = tab;
                t.getTab(tabHead, tabContent, activeTab);
            });

            return container;
        },

        getTab: function(tabHead, tabContent, activeTab){
            var t = this;
            tabHead.children().not('[data-tab]').remove();
            tabContent.removeClass('pixe-disable').off().empty();
            
            switch( activeTab ){
                case 'blocks':
                case 'pages':
                    t.getSearch(tabHead, activeTab);
                    t.getFullscreenButton(tabHead, activeTab);
                    t.getBlocksElements(tabHead, tabContent, activeTab);
                    break;
                case 'sites':
                    t.getFullscreenButton(tabHead, activeTab);
                    t.getBlocksElements(tabHead, tabContent, activeTab);
                    break;
                case 'favourites':
                    t.getFullscreenButton(tabHead, activeTab);
                    t.getFavouriteElements(tabHead, tabContent);
                    break;
                case 'custom-pages':
                case 'custom-blocks':
                case 'synced-blocks':
                    if(typeof(pixePP) === 'undefined' || !pixePP.active){
                        tabContent.addClass('pixe-disable');
                        t.getRestrictContent('custom-block', tabContent);
                    }else{
                        t.getFullscreenButton(tabContent, activeTab);
                        t.getCustomBlocksElements(tabContent, activeTab);
                    }
                    break;
            }
        },

        getRestrictContent: function(type, container){
            var content = $('<div class="pixe-admin-settings-restrict-content" ></div>');
            content.appendTo(container);

            if( type == 'custom-block' ){
                var html  = '<div class="pixe-head-wrap" >';
                    html += $.pixeGetAdminIcon('bolt-2');
                    html += '<div class="pixe-head" >';
                    html += '<div class="pixe-caption" >Reuse Tools</div>';
                    html += '<div class="pixe-title" >' + pixei18n.upgrade.titleSmall + '</div>';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="pixe-description" >Save your own blocks and pages, then reuse them across every project.</div>'
                    html += '<ul>';
                    html += '<li>' + $.pixeGetAdminIcon('check') + 'Save Custom Blocks</li>';
                    html += '<li>' + $.pixeGetAdminIcon('check') + 'Save Custom Pages</li>';
                    html += '<li>' + $.pixeGetAdminIcon('check') + 'Sync updates everywhere</li>';
                    html += '</ul>';
                    html += $.pixeProUpgradeButton('', '?utm_source=page_builder&utm_medium=synced_blocks&utm_campaign=upgrade', 'upgrade');
                content.append(html);
            }
        },

        getSearch: function(container, type){
            var t = this;
            var searchWrap = $('<div class="pixe-admin-settings-search-filter" ></div>');
            searchWrap.append($.pixeBuilderSearchBox());
            searchWrap.appendTo(container);

            var category = $('<div class="pixe-admin-settings-category pixe-select-box" ></div>');
            category.appendTo(searchWrap);

            var catCount = $.pixeBlockSettings.getPrebuiltTemplateCats(type);
            var categoryKeys = Object.keys(catCount).sort();
            var categoryList = {};
            for(var i in categoryKeys){
                var slug = categoryKeys[i];
                if( slug == 'all' ) continue;
                
                var label = '';
                if( $.pixeBlockSettings.blockCatLabels[slug] ){
                    label = $.pixeBlockSettings.blockCatLabels[slug];
                }else{  
                    label = slug.replace('-', ' ');
                    label = label.replace(/\b\w/g, c => c.toUpperCase());
                }
                categoryList[slug] = label;
            }

            var topSettings  = '<div class="pixe-admin-settings-tag" >';
                topSettings += '<span data-tag="light" class="pixe-active">Light Style</span>';
                topSettings += '<span data-tag="dark" >Dark Style</span>';
                topSettings += '</div>';

            var combobox = $($.pixeCombobox({
                options: $.pixeComboboxOption.object(categoryList, 'All'),
                top: $.pixeComboboxTab({
                    'light': 'Light Style', 
                    'dark': 'Dark Style'
                }),
                popupClass: 'pixe-type-prebuilt-block'
            }));
            combobox.data('tag', 'light');
            category.append(combobox);
            category.pixeCombobox({
                tabFilter: function(content, combobox, popup){

                    // init
                    var currentTag = combobox.data('tag') || 'light';
                    content.find('.pixe-combobox-tab [data-tab="' + currentTag + '"]').addClass('pixe-active').siblings().removeClass('pixe-active');

                    // change state
                    content.on('click', '.pixe-combobox-tab span', function(){
                        if( $(this).hasClass('pixe-active') ) return;
                        $(this).addClass('pixe-active').siblings().removeClass('pixe-active');

                        var tag = $(this).attr('data-tab');
                        combobox.data('tag', tag).trigger('change');
                    });
                },
                defaultFilter: true
            });
        },
        getFavouriteElements: function(header, container){
            var t = this;

            // header
            var type = 'blocks';
            var types  = '<div class="pixe-element-type">';
                types += '<div data-type="blocks" class="pixe-active" >' + pixei18n.template.blocks + '</div>';
                types += '<div data-type="sites" >' + pixei18n.template.sites + '</div>';
                types += '</div>';
                types = $(types);
            header.append(types);

            // elements
            var elements = $('<div class="pixe-elements" ></div>');
            elements.appendTo(container);
            
            function getElements(){
                var blockIds, blocks;
                
                switch(type){
                    case 'blocks':
                        blockIds = pixeData.favouriteBlock.blocks;
                        blocks = pixePbBlocks;
                        break;
                    case 'sites':
                        blockIds = pixeData.favouriteBlock.sites;
                        blocks = pixePbSites;
                        break;
                }

                elements.empty();

                if( blockIds && blockIds.length ){
                    for( var i in blockIds ){
                        var blockId = blockIds[i];
                        elements.append(t.getItem(blockId, type, blocks[blockId]));
                    }
                }else{
                    elements.append($.pixePreviewText(pixei18n.template.emptyFavouriteBlocks, pixei18n.template.emptyFavouriteBlocksTitle));
                }
            }

            function bindElements(){
                elements.off();
                $.pixeBlockSettings.bindPrebuiltActions(elements, type, {
                    onRemoveFavourite: function(){
                        getElements();
                    }
                });
            }
            
            // get elements list
            getElements();
            bindElements();
            
            types.on('click', '[data-type]', function(){
                if( $(this).hasClass('pixe-active') ) return;
                $(this).addClass('pixe-active').siblings().removeClass('pixe-active');

                type = $(this).attr('data-type');
                getElements();
                bindElements();
            });
        },
        getFullscreenButton: function(container, type){
            var fullScreen = $('<div class="pixe-admin-settings-block-expand" >' + $.pixeGetAdminIcon('expand') + 'Full Window Mode' + '</div>');
            fullScreen.on('click', function(){
                if( type == 'synced-blocks' ){
                    $.pixeTemplateSettings.init({ activeTab: 'template-part', activeSubtab: 'synced_block' });
                }else{
                    $.pixeBlockSettings.init({ activeTab: type });
                }
            });
            container.append(fullScreen);
        },
        getBlocksElements: function(header, container, type){
            var t = this;

            // elements
            var elements = $('<div class="pixe-elements" ></div>');
            elements.appendTo(container);

            var pbSettings = {
                loadMore: false, 
                offset: 0, 
                display: 20, 
                category: '',
                onAdd: function(id, settings){
                    elements.append(t.getItem(id, type, settings));
                }
            };
            if( type == 'blocks' ){
                pbSettings.tag = 'light';
            }
            
            $.pixeBlockSettings.getPrebuiltTemplateItems(pbSettings, type);

            // search
            header.find('.pixe-admin-settings-search input').on('input', $.pixeDebounce(function(){
                pbSettings.offset = 0;
                pbSettings.search = $(this).val();

                elements.empty();
                $.pixeBlockSettings.getPrebuiltTemplateItems(pbSettings, type);
            }));

            // category
            header.find('.pixe-admin-settings-category .pixe-combobox').on('change', function(){
                pbSettings.offset = 0;
                pbSettings.category = $(this).data('value');
                pbSettings.tag = $(this).data('tag');
                
                elements.empty();
                $.pixeBlockSettings.getPrebuiltTemplateItems(pbSettings, type);
            });

            // load more on scroll
            container.on('scroll', function(){
                if( pbSettings.loadMore ){
                    if( $(this).scrollTop() + $(this).innerHeight() + 30 > this.scrollHeight ){
                        $.pixeBlockSettings.getPrebuiltTemplateItems(pbSettings, type);
                    }
                }
            });
            
            // button action
            $.pixeBlockSettings.bindPrebuiltActions(container, type);
        },
        getItem: function(id, type, settings){
            if( !settings || !settings.i ) return '';

            var imageSize = settings.s? settings.s.split(':'): [];
            var image  = '<img src="' + $.pixeEscAttr($.pixeBlockSettings.getUrl(settings.i)) + '" ';
                image += (imageSize[0])? 'width="' + $.pixeEscAttr(imageSize[0]) + '" ': '';
                image += (imageSize[1])? 'height="' + $.pixeEscAttr(imageSize[1]) + '" ': '';
                image += ' />';

            var element = $('<div class="pixe-element pixe-template-thumbnail-item pixe-style-block pixe-no-click" ></div>');
            element.addClass(settings.g && settings.g.indexOf('dark') >= 0? 'pixe-dark': 'pixe-light');
            element.attr('data-id', id);
            element.data('value', [{ _type: 'block-dragging', type: 'wrapper', ID: id, _source: 'pixe' }]);

            if( type == 'sites' ){
                element.addClass('pixe-disabled');
            }
            if( !settings.f && (typeof(pixePP) === 'undefined' || !pixePP.active) ){
                element.addClass('pixe-locked');
            }

            var thumbnail = $('<div class="pixe-thumbnail" ></div>');
            thumbnail.append(image);
            thumbnail.append($.pixeBlockSettings.getPrebuiltTemplateOverlay(type, id, settings));
            thumbnail.appendTo(element);

            return element;
        },

        getCustomBlocksElements: function(container, type){
            var blocks;
            switch(type){
                case 'custom-blocks': blocks = pixeData.customBlocks; break;
                case 'synced-blocks': blocks = pixeData.syncedBlocks; break;
                case 'custom-pages': blocks = pixeData.customPages; break;
            }

            // elements
            var elements = $('<div class="pixe-elements" ></div>');
            elements.appendTo(container);
            if( blocks && blocks.length ){
                for( var i in blocks ){
                    var block = blocks[i];
                    var element = $('<div class="pixe-element pixe-style-custom-block" ></div>');
                    element.attr('data-keywords', block.title.toLowerCase());
                    if( type == 'synced-blocks' ){
                        element.data('value', [{ _type: 'element', _element: 'synced-block', 'template-id': block.id }]);
                    }else{
                        element.data('value', [{ _type: 'block-dragging', type: block['content-type'], ID: block.id }]);
                    }
                    element.append('<label>' + block.title + '</label>');
                    elements.append(element);
                }
            }else{
                switch(type){
                    case 'custom-blocks': elements.append($.pixePreviewText(pixei18n.template.emptyCustomBlocks, pixei18n.template.emptyCustomBlocksTitle)); break;
                    case 'synced-blocks': elements.append($.pixePreviewText(pixei18n.template.emptySyncedBlocks, 'No synced blocks yet')); break;
                    case 'custom-pages': elements.append($.pixePreviewText(pixei18n.template.emptyCustomPages, pixei18n.template.emptyCustomPagesTitle)); break;
                }
            }
        }
    }

    // ai settings
    $.pixeAISettings = {
        
        getContent: function(){
            var t = this;
            var container = $('<div class="pixe-admin-settings-area pixe-type-ai-settings" ></div>');

            if( t.getChatBox ){
                t.getChatBox(container);
            }
            
            return container;
        }
    };

    // page settings
    $.pixePageSettings = {
        
        getContent: function(activeTab = ''){
            var t = this;
            var container = $('<div class="pixe-admin-settings-area pixe-type-page-settings" ></div>');
            
            // create tab head
            var tabHead = $('<div class="pixe-admin-settings-tab-head" ></div>');
            tabHead.append('<div data-tab="layout" >Layout</div>');
            tabHead.append('<div data-tab="transition">Page Transition</div>');
            container.append(tabHead);

            // tab content
            var tabContent = $('<div class="pixe-admin-settings-tab-content pixe-scrollbar" ></div>');
            tabContent.appendTo(container);

            // set active tab
            if( activeTab ){
                tabHead.children('[data-tab="' + activeTab + '"]').addClass('pixe-active');
            }else{
                activeTab = tabHead.children().first().addClass('pixe-active').attr('data-tab');
            }
            t.getTab(tabContent, activeTab);

            // change tab action
            tabHead.on('click', '[data-tab]', function(){
                var tab = $(this).attr('data-tab');
                
                if( $(this).hasClass('pixe-active') ) return;
                $(this).addClass('pixe-active').siblings().removeClass('pixe-active');

                activeTab = tab;
                t.getTab(tabContent, activeTab);
            });

            return container;
        },

        getSingleContent: function(activeTab = ''){
            var t = this;
            var container = $('<div class="pixe-admin-settings-area pixe-type-page-settings" ></div>');

            var tabContent = $('<div class="pixe-admin-settings-tab-content pixe-scrollbar" ></div>');
            tabContent.appendTo(container);

            t.getTab(tabContent, activeTab);

            return container;
        },

        getTab: function(tabContent, activeTab){
            var t = this;
            tabContent.empty();
            tabContent.attr('data-tab', activeTab);
            
            switch( activeTab ){
                case 'layout':
                    t.getLayoutSettings(tabContent);
                    break;
                case 'transition':
                    t.getTransitionSettings(tabContent);
                    break;
                case 'page-data':
                    tabContent.append(123);
                    break;
            }
        },

        getTransitionSettings: function(container){
            $.pixeSettingsEdit.activeData = pixeData.editorSettings;

            var section = $('<div class="pixe-admin-settings-section pixe-active" ></div>');
            section.attr('data-section-slug', 'preloader');
            section.appendTo(container);
            $.pixeSettingsEdit.sectionContent(section, {
                title: 'Preloader Style',
                slug: 'transition',
                options: 'page-transition-preloader'
            });

            var section2 = $('<div class="pixe-admin-settings-section" ></div>');
            section2.attr('data-section-slug', 'overlay');
            section2.appendTo(container);
            $.pixeSettingsEdit.sectionContent(section2, {
                title: 'Preloader Overlay',
                slug: 'transition',
                options: 'page-transition-overlay'
            });

            // toggle box
            container.on('click', '.pixe-admin-settings-section > .pixe-head', function(){
                var parent = $(this).parent();

                if( parent.hasClass('pixe-always-active') ){
                    return;
                }else if( parent.hasClass('pixe-active') ){
                    parent.removeClass('pixe-active');
                }else{
                    parent.addClass('pixe-active').siblings().not('.pixe-always-active').removeClass('pixe-active');
                }
            });

            container.on('change', function(){
                $.pixeBuilder.setIframeStatus({
                    event: 'settings',
                    type: 'transition',
                    value: pixeData.editorSettings
                });
            });

        },

        getLayoutSettings: function(container){
            var t = this;
            var ssSlug = 'layout';

            // section content
            var content = $('<div class="pixe-admin-settings-content" ></div>');
            content.appendTo(container);

            var ssSettings = {
                obj: pixeData.editorSettings,
                slug: ssSlug,
                display: 'html',
                device: $.pixeBuilder.viewport,
                onChange: function(v, type){
                    $.pixeBuilder.setIframeStatus({
                        event: 'settings',
                        type: ssSlug,
                        subtype: type,
                        value: pixeData.editorSettings
                    });

                    if( type.includes("template") || type.includes("header") || type.includes("footer") ){
                        content.find('.pixe-refresh-area').slideDown(150);
                    }
                }
            };

            var ss = new $.pixeStyleSelector(ssSettings);
            ss.getContent(content, 'page-layout');

            content.on('click',  '.pixe-refresh-part', function(){
                if( $(this).hasClass('pixe-loading') ) return;

                var refreshButton = $(this);
                refreshButton.addClass('pixe-loading');

                $.pixeBuilder.setIframeStatus({
                    event: 'autosave',
                    action: 'refresh'
                });

                setTimeout(function(){
                    refreshButton.removeClass('pixe-loading');
                }, 3000);
            });
        }
    },

    // settings new
    $.pixeSettingsNew = {
        
        getContent: function(activeTab = ''){
            var t = this;
            var container = $('<div class="pixe-admin-settings-area pixe-type-new" ></div>');
            
            // create tab head
            var tabHead = $('<div class="pixe-admin-settings-tab-head" ></div>');
            tabHead.append('<div data-tab="elements" >Elements</div>');
            tabHead.append('<div data-tab="container">Container</div>');
            container.append(tabHead);

            // tab content
            var tabContent = $('<div class="pixe-admin-settings-tab-content pixe-scrollbar" ></div>');
            tabContent.appendTo(container);

            // set active tab
            if( activeTab ){
                tabHead.children('[data-tab="' + activeTab + '"]').addClass('pixe-active');
            }else{
                activeTab = tabHead.children().first().addClass('pixe-active').attr('data-tab');
            }
            t.getTab(tabContent, activeTab);

            // change tab action
            tabHead.on('click', '[data-tab]', function(){
                var tab = $(this).attr('data-tab');
                
                if( $(this).hasClass('pixe-active') ) return;
                $(this).addClass('pixe-active').siblings().removeClass('pixe-active');

                activeTab = tab;
                t.getTab(tabContent, activeTab);
            });

            // pro restrict action
            tabContent.on('click', '.pixe-locked', function(){
                var message = pixei18n.upgrade.builderCaption;
                    message += '<div class="pixe-button-wrap">';
                    message += $.pixeProUpgradeButton('', '?utm_source=page_builder&utm_medium=pro_items&utm_campaign=upgrade', 'upgrade');
                    message += '<input class="pixe-cancel" type="button" value="' + $.pixeEscHtml(pixei18n.button.cancel) + '">';
                    message += '</div>';

                $.pixeConfirmationBox({
                    icon: 'bolt',
                    title: pixei18n.upgrade.title,
                    message: message,
                    extraClass: 'pixe-confirmation-upgrade',
                    confirmText: false,
                    cancelText: false,
                    customButton: true
                });
            });

            return container;
        },

        getTab: function(tabContent, activeTab){
            var t = this;
            tabContent.empty();
            
            switch( activeTab ){
                case 'elements':
                    t.getSearch(tabContent);
                    t.getElements(tabContent);
                    break;

                case 'container':
                    t.getContainer(tabContent);
                    break;
            }
        },

        // search bar
        getSearch: function(container){
            var t = this;

            // search box
            var search = $.pixeBuilderSearchBox('Search Elements');
            search.appendTo(container);

            search.on('input change', 'input', function(){
                var text = $(this).val().toLowerCase();
                var elements = search.siblings('.pixe-elements');

                elements.each(function(){
                    if( !text ){
                        $(this).css('display', '');
                        $(this).children().css('display', '');
                        return;
                    }

                    // make a search
                    var match = $(this).children('[data-keywords*="' + text + '"]');
                    var notMatch = $(this).children('.pixe-element').not(match);
                    if( match.length ){
                        match.css('display', '');
                        notMatch.css('display', 'none');
                        $(this).css('display', '');
                    }else{
                        $(this).css('display', 'none');
                    }
                });
            });
        },

        // elements area
        getElements: function(container){
            var t = this;

            function getElement(slug){
                var element = $('<div class="pixe-element pixe-style-normal" data-type="element" ></div>');
                element.attr('data-keywords', pixeData.elements[slug].title.toLowerCase());
                element.append('<div class="pixe-icon" >' + $.pixeBuilderElementIcon(pixeData.elements[slug].icon) + '</div>');
                element.append('<label>' + pixeData.elements[slug].title + '</label>');
                element.data('value', slug);

                // pro version
                if( pixeData.elements[slug].isPro && (typeof(pixePP) === 'undefined' || !pixePP.active) ){
                    element.addClass('pixe-locked'); 
                    element.data('source', slug);
                    element.removeData('value');
                }

                return element;
            }
            function getElements(type, label){
                var elements = $('<div class="pixe-elements" ></div>');
                
                // title
                var order = [];
                if( type == 'basic' ){
                    order = ['title', 'text-box', 'button', 'image', 'gallery', 'gallery_carousel', 'gallery_featured', 'video', 'divider', 'icon', 'tab', 'accordion', 'spacer', 'social-share', 'post-list'];
                }

                // ordered elements
                for( var i in order ){
                    elements.append(getElement(order[i]));
                }

                // rest elements
                for( var slug in pixeData.elements ){
                    if( pixeData.elements[slug].type == type && order.indexOf(slug) == -1 ){
                        elements.append(getElement(slug));
                    }
                }

                if( elements.children().length ){
                    elements.prepend('<div class="pixe-title" >' + label + '</div>');
                    elements.appendTo(container);
                }
            }

            // render element
            for( var type in pixeData.elementOrder ){
                var label = pixeData.elementOrder[type];
                getElements(type, label);
            }
        },

        getContainer: function(container){

            function getItems( lists ){
                for( var i in lists ){
                    var slug = lists[i];

                    switch(slug){
                        case 'wrapper':
                            container.append('<div class="pixe-title" >Add Container</div>');
                            var wrapperElements = $('<div class="pixe-elements" ></div>');
                            wrapperElements.appendTo(container);
                
                            var wrapper = $('<div class="pixe-element pixe-style-wrapper" >Container</div>');
                            wrapper.data('value', [{_type: 'wrapper'}]);
                            wrapper.appendTo(wrapperElements);
                            break;
                        case 'slider': 
                            container.append('<div class="pixe-title" >Add Slider</div>');
                            var sliderElements = $('<div class="pixe-elements" ></div>');
                            sliderElements.appendTo(container);

                            var sliderWrapper = $('<div class="pixe-element pixe-style-collection" >Slider Container</div>');
                            sliderWrapper.data('value', [{_type: 'collection', _subtype: 'slider'}]);
                            sliderWrapper.appendTo(sliderElements);

                            var carouselWrapper = $('<div class="pixe-element pixe-style-collection" >Carousel Container</div>');
                            carouselWrapper.data('value', [{_type: 'collection', _subtype: 'carousel'}]);
                            carouselWrapper.appendTo(sliderElements);

                            if( typeof(pixePP) === 'undefined' || !pixePP.active ){
                                sliderWrapper.addClass('pixe-locked');
                                sliderWrapper.data('source', 'slider');
                                sliderWrapper.removeData('value');
                                carouselWrapper.addClass('pixe-locked');
                                carouselWrapper.data('source', 'carousel');
                                carouselWrapper.removeData('value');
                            }
                            break;
                        case 'column':
                            container.append('<div class="pixe-title" >Add Column</div>');
                            var columnElements = $('<div class="pixe-elements" ></div>');
                            container.append(columnElements);

                            var column = $('<div class="pixe-element pixe-style-column" >Column</div>');
                            column.data('value', [{_type: 'column'}]);
                            column.appendTo(columnElements);
                            break;
                        case 'query-column':
                            container.append('<div class="pixe-title" >Add Query Column</div>');
                            var queryColumnElements = $('<div class="pixe-elements" ></div>');
                            container.append(queryColumnElements);

                            var queryColumn = $('<div class="pixe-element pixe-style-column pixe-style-query" >Query Column</div>');
                            queryColumn.data('value', [{_type: 'column', _subtype: 'query'}]);
                            queryColumn.appendTo(queryColumnElements);
                            break;
                        case 'wrapper-preset':
                            container.append('<div class="pixe-title" >Add Preset</div>');
                            var presetElements = $('<div class="pixe-elements" ></div>');
                            container.append(presetElements);
                            for( var i in pixeData.containers ){
                                var preset = pixeData.containers[i];
                                var element = $('<div class="pixe-element" ></div>');
                                if( preset.iconClass ){ element.addClass(preset.iconClass); }
                                if( preset.icon ){ element.append(preset.icon); }
                                if( preset.value ){ element.data('value', preset.value); }
            
                                presetElements.append(element);
                            }
                            break;
                    }
                }

            }

            // get container depend on the type
            if( pixeData.type == 'template_part' && (pixeData.part == 'post_template' || pixeData.part == 'taxonomy_template') ){
                if( pixeData.templateLayout == 'grid' ){
                    getItems(['column']);
                }else{
                    getItems(['wrapper', 'slider', 'query-column', 'column', 'wrapper-preset']);
                }
            }else{
                getItems(['wrapper', 'slider', 'column', 'wrapper-preset']);
            }
        }
    }

    $.pixeSettingsNavigation = {
        isOpen: false,

        init: function(value, target){
            var t = this;
            if( t.isOpen ){
                t.refresh(value, target);
                return;
            }

            var container = $('<div class="pixe-navigator-popup-container" ></div>');

            var popup = new $.pixePopup({
                closeEvent: false,
                customPosition: { top: 65, right: 30 },
                style: 'pixe-navigator-popup',
                content: container
            });
            t.isOpen = true;

            // popup draggable
            container.pixeDraggable({
                handlerClass: '.pixe-navigator-popup-container',
                frameSelector: '.pixe-popup'
            });

            var head = $('<div class="pixe-navigator-head" ></div>');
            head.append('<div class="pixe-text" >Navigator</div>');
            head.append($.pixeGetAdminIcon('cancel', {class: 'pixe-close'}));
            head.appendTo(container);
            
            head.on('click', '.pixe-close', function(){
                popup.close();
                t.isOpen = false;
                
                $.pixeBuilder.setIframeStatus({
                    event: 'navigator',
                    action: 'close'
                });
            });

            t.navigatorContent = $('<div class="pixe-navigator-content pixe-scrollbar" ></div>');
            t.navigatorContent.append(t.getContent(value, target))
            t.navigatorContent.appendTo(container);
        },

        refresh: function(value, target){
            var t = this;
            if( !t.isOpen ) return;

            t.navigatorContent.empty();
            t.navigatorContent.append(t.getContent(value, target))
        },

        getContent: function(value, target){
            var t = this;

            t.navigator = $('<div class="pixe-navigator" ></div>');
            t.getItems(t.navigator, value);
            if( !t.navigator.children('.pixe-navigator-item').length ){
                t.navigator.addClass('pixe-empty');
                t.navigator.append($.pixeEmptyNotice('navigator'));
            }

            // set target
            var targetItem;
            if( target ){
                targetItem = t.navigator.find('[data-id="' + target + '"]');
                targetItem.addClass('pixe-active').addClass('pixe-focus');
                targetItem.parents('.pixe-navigator-item').addClass('pixe-active');
            }
            
            // events
            t.navigator.on('click', '.pixe-navigator-item > .pixe-head', function(e){

                // unfocus item
                if( targetItem ){
                    targetItem.removeClass('pixe-focus');

                    if( !targetItem.hasClass('pixe-has-content') ){
                        targetItem.removeClass('pixe-active')
                    }
                    
                    targetItem = undefined;
                }
                
                var action = $(e.target).closest('.pixe-action');
                var item = $(this).closest('.pixe-navigator-item');
                
                // do action
                if( action.length ){
                    if( action.hasClass('pixe-up') ){
                        if( !item.prev().length ) return; 
                        $.pixeBuilder.setIframeStatus({
                            event: 'navigator',
                            action: 'move',
                            move: 'up',
                            id: item.attr('data-id')
                        });
                        item.insertBefore(item.prev());
                    }else if( action.hasClass('pixe-down') ){
                        if( !item.next().length ) return;
                        $.pixeBuilder.setIframeStatus({
                            event: 'navigator',
                            action: 'move',
                            move: 'down',
                            id: item.attr('data-id')
                        });
                        item.insertAfter(item.next());
                    }else if( action.hasClass('pixe-remove') ){
                        $.pixeBuilder.setIframeStatus({
                            event: 'navigator',
                            action: 'remove',
                            id: item.attr('data-id')
                        });
                        item.slideUp(150, function(){
                            $(this).remove();
                            if( !t.navigator.children('.pixe-navigator-item').length ){
                                t.navigator.addClass('pixe-empty');
                                t.navigator.append($.pixeEmptyNotice('navigator'));
                            }
                        });
                    }else if( action.hasClass('pixe-edit') ){
                        $.pixeBuilder.setIframeStatus({
                            event: 'navigator',
                            action: 'edit',
                            id: item.attr('data-id')
                        });
                    }

                // open close tab
                }else{
                    if( !item.hasClass('pixe-has-content') ) return; 

                    // change active state
                    if( item.hasClass('pixe-active') ){ 
                        item.removeClass('pixe-active');
                    }else{
                        item.addClass('pixe-active');
                    }
                }
            });
            t.sortable(t.navigator);

            // on hover show editor target
            t.navigator.on('mouseenter', '.pixe-head', function(){
                t.setEditorStyle($(this).closest('.pixe-navigator-item'));
            });
            t.navigator.on('mouseleave', '.pixe-head', function(){
                t.setEditorStyle();
            });

            return t.navigator;
        },

        setEditorStyle: function(item){
            var css = '';
            if( item ){
                css = '[data-id="' + item.attr('data-id') + '"] > .pixe-' + item.attr('data-type') + '-area{ display: block !important; }';
            }
            
            $.pixeBuilder.setIframeStatus({
                event: 'navigator',
                action: 'focus',
                value: css
            });
        },

        getItems: function(container, value, depth = 0){
            var t = this;

            if( value ){
                for(var i in value){
                    container.append(t.getItem(value[i], depth));
                }
            }
        },

        getItem: function(settings, depth){
            var t = this;
            var title = '', icon = '', type = '';
            var hasContent, hasAction = true;
            var svgColor = 'b';

            // check type
            switch(settings._type){
                case 'collection':
                    if( settings._subtype == 'carousel' ){
                        title = 'Carousel';
                    }else if( settings._subtype == 'slider' ){
                        title = 'Slider';
                    }
                    icon = '<svg width="12" height="10" viewBox="0 0 12 10" ><path d="M0 8.33325V6.99992C0 6.26659 0.6 5.66659 1.33333 5.66659H10.6667C11.4 5.66659 12 6.26659 12 6.99992V8.33325C12 9.06659 11.4 9.66659 10.6667 9.66659H1.33333C0.6 9.66659 0 9.06659 0 8.33325ZM0 1.66659V2.99992C0 3.73325 0.6 4.33325 1.33333 4.33325H10.6667C11.4 4.33325 12 3.73325 12 2.99992V1.66659C12 0.933252 11.4 0.333252 10.6667 0.333252H1.33333C0.6 0.333252 0 0.933252 0 1.66659Z" /></svg>';
                    type = 'collection';
                    hasContent = true;
                    svgColor = 'w';
                    break;
                case 'wrapper':
                    title = 'Container';
                    icon = '<svg width="12" height="10" viewBox="0 0 12 10" ><path d="M0 8.33325V6.99992C0 6.26659 0.6 5.66659 1.33333 5.66659H10.6667C11.4 5.66659 12 6.26659 12 6.99992V8.33325C12 9.06659 11.4 9.66659 10.6667 9.66659H1.33333C0.6 9.66659 0 9.06659 0 8.33325ZM0 1.66659V2.99992C0 3.73325 0.6 4.33325 1.33333 4.33325H10.6667C11.4 4.33325 12 3.73325 12 2.99992V1.66659C12 0.933252 11.4 0.333252 10.6667 0.333252H1.33333C0.6 0.333252 0 0.933252 0 1.66659Z" /></svg>';
                    type = 'wrapper';
                    hasContent = true;
                    svgColor = 'w';
                    if( settings._subtype == 'slider' ){ hasAction = false; }
                    break;
                case 'column':
                    title = 'Column';
                    icon = '<svg width="14" height="12" viewBox="0 0 14 12" ><path d="M2.55325 11.3333H1.66659C0.933252 11.3333 0.333252 10.7333 0.333252 9.99996V1.99996C0.333252 1.26663 0.933252 0.666626 1.66659 0.666626H2.55325C3.28659 0.666626 3.88658 1.26663 3.88658 1.99996V9.99996C3.88658 10.7333 3.29325 11.3333 2.55325 11.3333ZM13.6666 9.99996V1.99996C13.6666 1.26663 13.0666 0.666626 12.3333 0.666626H11.4466C10.7133 0.666626 10.1133 1.26663 10.1133 1.99996V9.99996C10.1133 10.7333 10.7133 11.3333 11.4466 11.3333H12.3333C13.0733 11.3333 13.6666 10.7333 13.6666 9.99996ZM8.77992 9.99996V1.99996C8.77992 1.26663 8.17992 0.666626 7.44658 0.666626H6.55992C5.82658 0.666626 5.22658 1.26663 5.22658 1.99996V9.99996C5.22658 10.7333 5.82658 11.3333 6.55992 11.3333H7.44658C8.17992 11.3333 8.77992 10.7333 8.77992 9.99996Z" /></svg>';
                    type = 'column';
                    hasContent = true;
                    if( settings._subtype == 'carousel' ){ hasAction = false; }
                    break;
                case 'element':
                    title = 'Item';
                    type = 'item';
                    if( settings._element && pixeData.elements[settings._element] ){
                        // title
                        if( pixeData.elements[settings._element].title ){
                            title = pixeData.elements[settings._element].title;
                        }

                        // icon
                        if( pixeData.elements[settings._element].icon ){
                            icon = $.pixeBuilderElementIcon(pixeData.elements[settings._element].icon);
                        }
                    }
                    break;
                default:
                    console.log('Nav not implemented', settings)
                    return;
            }
            
            // create element
            var item = $('<div class="pixe-navigator-item pixe-no-drag" ></div>');
            item.attr('data-type', type);
            item.attr('data-id', settings._id);

            var itemNav = '', itemAction = '';
            if( hasAction ){
                itemNav  = '<div class="pixe-nav-action" >';
                itemNav += '<div class="pixe-action pixe-up"><div class="pixe-svg-preset pixe-svg-nav-up-' + svgColor + '"></div></div>';
                itemNav += '<div class="pixe-action pixe-down"><div class="pixe-svg-preset pixe-svg-nav-down-' + svgColor + '"></div></div>';
                itemNav += '</div>';
                itemAction  = '<div class="pixe-right" >';
                itemAction += '<div class="pixe-action pixe-edit" ><div class="pixe-svg-preset pixe-svg-nav-edit-' + svgColor + '"></div></div>';
                itemAction += '<div class="pixe-action pixe-remove" ><div class="pixe-svg-preset pixe-svg-nav-remove-' + svgColor + '"</div>';
                itemAction += '</div>';
            }
            
            var itemHead = $('<div class="pixe-head" ></div>');
            itemHead.append('<div class="pixe-left" >' + icon + title + itemNav + '</div>');
            itemHead.append(itemAction);
            itemHead.appendTo(item);

            if( hasContent ){
                item.addClass('pixe-has-content');

                // active inner element at init
                if( depth > 0 ){
                    item.addClass('pixe-active');
                }
                
                // content
                var itemContent = $('<div class="pixe-navigator-item-content"></div>');
                itemContent.appendTo(item);

                t.getItems(itemContent, settings._elements, depth + 1);

                // sortable
                t.sortable(itemContent);
            } 

            return item;
        },

        sortable: function(area){

            var cancelSort = false;

            function showPlaceholder(ui){

                // hide placeholder if staying at the same place
                var prev = ui.placeholder.prev();
                if( prev.hasClass('ui-sortable-helper') ){
                    prev = prev.prev();
                } 

                var next = ui.placeholder.next();
                if( next.hasClass('ui-sortable-helper') ){
                    next = next.next();
                }

                if( prev.is(ui.item) || next.is(ui.item) ){
                    ui.placeholder.hide();
                    cancelSort = true;
                    return;
                }

                // hide placeholder if not valid position
                var containerType = ui.placeholder.closest('.pixe-navigator-item, .pixe-navigator').attr('data-type');
                var itemType = ui.item.closest('.pixe-navigator-item').attr('data-type');
                if( containerType && (itemType == 'wrapper' || itemType == 'collection') ){
                    ui.placeholder.hide();
                    cancelSort = true;
                    return;
                }else if( containerType == 'collection' ){
                    ui.placeholder.hide();
                    cancelSort = true;
                    return;
                }

                // show if none above
                ui.placeholder.show();
                cancelSort = false;
            }

            area.sortable({
                opacity: 0.8,
                handle: '> .pixe-head',
                placeholder: 'pixe-sortable-placeholder',
                connectWith: '.pixe-navigator-item-content, .pixe-navigator',
                helper: function(e, item){
                    var itemHead = item.children('.pixe-head');
                    var helper = itemHead.children('.pixe-left').clone();
                    helper.removeClass('pixe-left');
                    helper.addClass('pixe-sortable-helper');
                    helper.children('.pixe-nav-action').remove();
                    helper.css({height: itemHead.outerHeight(), width: itemHead.outerWidth()});
                    return helper;
                },
                start: function(e, ui){
                    ui.item.show();
                    showPlaceholder(ui);
                },
                change: function(e, ui){
                    showPlaceholder(ui);
                },
                stop: function(e, ui){
                    if( cancelSort ){
                        $(this).sortable('cancel');
                        return;
                    }

                    var item = ui.item;
                    var itemTarget, itemPos;
                    if( item.prev().length ){
                        itemTarget = item.prev().attr('data-id');
                        itemPos = 'after';
                    }else if( item.next().length ){
                        itemTarget = item.next().attr('data-id');
                        itemPos = 'before';
                    }else{ 
                        itemTarget = item.parent().closest('.pixe-navigator-item, .pixe-navigator').attr('data-id');
                        if( !itemTarget ) itemTarget = 'editor';
                        itemPos = 'children';
                    }

                    // apply sortable
                    $.pixeBuilder.setIframeStatus({
                        event: 'navigator',
                        action: 'move',
                        move: itemPos,
                        target: itemTarget,
                        id: item.attr('data-id')
                    });
                    
                }
            });
        }
    };

    $(document).ready(function(){
        $.pixeDebug = true;

        // init builder status
        $.pixeVariableInit(['builderStatus']);

        // bind tip text
        $(document.body).pixeTipText();
        
        // builder
        $.pixeBuilder.init();
        
        // init admin settings area to be element panel
        $.pixeBuilder.displaySettingsByType('element', false);

        // register keyboard action
        $(document).on('keydown', function(e){
            var keyboardAction = $.pixeGetKeyboardAction(e);
            
            if( keyboardAction == 'preview' ){
                $.pixeBuilder.togglePreview();
                e.preventDefault();
            }else if( keyboardAction ){
                $.pixeBuilder.setIframeStatus({
                    event: 'keyboardAction',
                    action: keyboardAction
                });
                e.preventDefault();
            }
        });
        
        new $.pixeHeartbeat();
    });

    // heartbeat to lock post
    $.pixeHeartbeat = function(){
        if( !wp.heartbeat ){ return; }

        var t = this;
        t.init();
    }
    $.pixeHeartbeat.prototype = {

        // init heartbeat events
        init: function(){
            var t = this;
            $(document).on('heartbeat-send', function(e, data){
                data.pixe_type = pixeData.type;
                data.pixe_id = pixeData.id;
            });
            $(document).on('heartbeat-tick', function(e, data){
                if( data.pixe_locked ){
                    if( t.isLocked ) return;

                    t.lockPage();
                    t.isLocked = true;
                }
            });
            wp.heartbeat.interval(15);
            wp.heartbeat.connectNow();
        },
        
        // lock page if needed
        lockPage: function(){
            var t = this;
            var message = 'This post is currently being edited by another user.';
                message += '<div class="pixe-button-wrap">';
                message += '<input type="button" class="pixe-submit" value="Take Over" />';
                message += '<input class="pixe-cancel" type="button" value="Exit">';
                message += '</div>';

            var confirmBox = $.pixeConfirmationBox({
                title: 'Notice',
                message: message,
                confirmText: false,
                cancelText: false,
                customButton: true,
                customEvent: true,
                overlay: true
            });

            confirmBox.on('click', 'input[type="button"]', function(){
                var button = $(this);
                if( button.hasClass('pixe-loading') ) return;
                button.addClass('pixe-loading');
                
                if( button.hasClass('pixe-submit') ){
                    t.takeOver({
                        onSuccess: function(){
                            var overlay = confirmBox.prev('.pixe-confimation-overlay');
                            confirmBox.fadeOut(150, function(){ $(this).remove(); });
                            overlay.fadeOut(150, function(){ $(this).remove(); });
                        },
                        onError: function(){
                            button.removeClass('pixe-loading');
                        }
                    });
                }else{
                    if( pixeData.returnPostsUrl ){
                        window.location = pixeData.returnPostsUrl;
                    }else{
                        window.location = pixeData.returnUrl;
                    }
                }
            });
        }, 

        // takeover page
        takeOver: function(args){
            var t = this;
            var ajaxData = $.pixeGetAjaxData({
                action: 'pixe_heartbeat_take_over',
                id: pixeData.id,
                type: pixeData.type,
            });

            $.ajax({
                type: 'POST',
                url: pixeData.ajaxUrl,
                data: ajaxData,
                dataType: 'json',
                error: function(jqXHR, textStatus, errorThrown){
                    console.log(jqXHR, textStatus, errorThrown);
                },
                success: function(data){
                    if( data.status == 'success' ){
                        args.onSuccess();
                        delete t.isLocked;
                    }else{
                        args.onError();
                        $.pixeConfirmationBox({
                            title: data.head,
                            message: data.message,
                        });
                    }
                }
            });
        }

    }

})(jQuery);	
