(function($){
    "use strict";

    // propagate hover settiings
    $.pixeRenderElementStyles = function(item){
        item.each(function(){
            if( $(this).hasClass('pixe-wrapper') ){
                $.pixeWrapper.renderStyle($(this), 'item');
            }else if( $(this).hasClass('pixe-item') ){
                $.pixeItem.renderStyle($(this), 'item');
            }else if( $(this).hasClass('pixe-column') ){
                $.pixeColumn.renderStyle($(this), 'item');
            }
        });
    }

    // settings bar action ( remove / advance settings )
    $.pixeStyleSettingsAction = function(item, content){
        content.on('click', '.pixe-remove', function(){
            $.pixeItem.remove(item);
            $(this).closest('.pixe-popup').trigger('closecurrentpopup');
        });

        content.on('click', '.pixe-settings', function(){
            pixeData.hideBuilderPanel = false;
            $.pixeEditor.setEditTarget(item, ['advance']);
        });
    }

    // pixe advance stle
    // class, id, responsive
    $.pixeSetAdvanceStyle = function(item, type){
        var settings = item.data('settings');

        switch(type){
            case 'class':
                var tempClass = item.attr('temp-class');
                item.removeClass(tempClass);
                if( settings.class ){
                    item.addClass(settings.class);
                    item.attr('temp-class', settings.class);
                }else{
                    item.removeAttr('temp-class');
                }
                break;
            case 'id':
                item.removeAttr('id');
                if( settings.id ){
                    item.attr('id', settings.id);
                }
                break;
            case 'responsive':
                $.pixeResponsiveClass(item, settings['responsive']);
                break;
        }
    }

    $.pixeSetScrollMotionStyle = function(item){
        var settings = item.data('settings');

        // dependency
        if( settings['scroll-motion'] && settings['scroll-motion']['enable'] ){

            // animation script
            if( $.pixeScrollMotion ){
                item.data('top-pos', settings.top);
                $.pixeOnExists(item, function(){
                    new $.pixeScrollMotion(item);
                });
            }
            
            $.pixeAddDependency(item, 'scroll-motion');
        }else{
            // disable animation
            item.removeData('scroll-motion-animation');

            $.pixeAddDependency(item, 'scroll-motion', false);
        }
    }

    // animation
    $.pixeSetAnimationStyle = function(item){
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var dependency = [];

        // css per device
        function getCss(deviceSlug = ''){
            if( !settings[deviceSlug + 'animation'] ) return '';
            var animation = settings[deviceSlug + 'animation'];      
            var ncss = ''; // normal state
            var acss = ''; // active state
            if( animation['effect'] ){
                ncss += $.pixeAnimationInitial(animation['effect']);
                acss += $.pixeAnimationActive(animation['effect']);
                dependency.push(animation['effect']);
            }
            if( animation['duration'] ){
                if( isNaN(animation['duration']) ){
                    ncss += '-webkit-animation-duration: ' + animation['duration'] + '; animation-duration: ' + animation['duration'] + ';';
                }else{
                    ncss += '-webkit-animation-duration: ' + animation['duration'] + 'ms; animation-duration: ' + animation['duration'] + 'ms;';
                }
            }
            if( animation['delay'] ){
                if( isNaN(animation['delay']) ){
                    ncss += '-webkit-animation-delay: ' + animation['delay'] + '; animation-delay: ' + animation['delay'] + ';';
                }else{
                    ncss += '-webkit-animation-delay: ' + animation['delay'] + 'ms; animation-delay: ' + animation['delay'] + 'ms;';
                }
            }
            if( animation['loop'] == 'yes' ){
                ncss += '-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;';
            }

            var css  = $.pixeSetCss(id + '.pixe-animation-init', {'custom': ncss});
                css += $.pixeSetCss(id + '.pixe-animated', {'custom': acss});

            return css;
        }

        $.pixeAddCss(item, 'animation',  getCss());
        $.pixeAddCss(item, 'animation',  getCss('tablet-'), 'tablet');
        $.pixeAddCss(item, 'animation',  getCss('mobile-'), 'mobile');

        // for base animation css
        if( dependency.length ){
            item.addClass('pixe-animation-init'); 
            setTimeout(function(){
                item.addClass('pixe-animated'); 
            }, 10);
            
            item.on('animationend', function(e){ 
                item.removeClass('pixe-animation-init pixe-animated');
                $(this).off(e);
            });
            $.pixeAddDependency(item, 'animation', dependency);
        }else{
            item.removeClass('pixe-animation-init pixe-animated');
            $.pixeAddDependency(item, 'animation', false);
        }
    }
    $.pixeSetHoverAnimationStyle = function(item){
        if( !$.pixeProActive ) return;
        
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var css = '';

        if( settings['hover-animation'] ){
            if( settings._type == 'column' ){
                css += $.pixeSetCss('body.pixe-front ' + id + ' > .pixe-column-content > .pixe-column, ' + 
                                    'body.pixe-front ' + id + ' > .pixe-column-content > .pixe-item' , {
                    'transition': 'opacity 300ms, transform 300ms, background 300ms, border 300ms, border-radius 300ms, box-shadow 300ms'
                });
                css += $.pixeHoverAnimationCss(settings['hover-animation']['animation'], {
                    selector: 'body.pixe-front ' + id + ' > .pixe-column-content > .pixe-column, ' +
                              'body.pixe-front ' + id + ' > .pixe-column-content > .pixe-item', 
                    hoverSelector: 'body.pixe-front ' + id + ':hover > .pixe-column-content > .pixe-column, ' +
                                   'body.pixe-front ' + id + ':hover > .pixe-column-content > .pixe-item',
                    delay: settings['hover-animation']['animation-delay'],
                    duration: settings['hover-animation']['animation-duration']
                });
            }else if( settings._type == 'wrapper' ){
                css += $.pixeSetCss('body.pixe-front ' + id + ' > .pixe-wrapper-content > .pixe-column, ' +
                                    'body.pixe-front ' + id + ' > .pixe-wrapper-content > .pixe-item', {
                    'transition': 'opacity 300ms, transform 300ms, background 300ms, border 300ms, border-radius 300ms, box-shadow 300ms'
                });
                css += $.pixeHoverAnimationCss(settings['hover-animation']['animation'], {
                    selector: 'body.pixe-front ' + id + ' > .pixe-wrapper-content > .pixe-column, ' +
                              'body.pixe-front ' + id + ' > .pixe-wrapper-content > .pixe-item', 
                    hoverSelector: 'body.pixe-front ' + id + ':hover > .pixe-wrapper-content > .pixe-column, ' +
                                   'body.pixe-front ' + id + ':hover > .pixe-wrapper-content > .pixe-item',
                    delay: settings['hover-animation']['animation-delay'],
                    duration: settings['hover-animation']['animation-duration']
                });
            }
        }

        $.pixeAddCss(item, 'hover-animation',  css);
    }
    
    // spacing
    $.pixeSetSpacingStyle = function(item, settings){
        var id = '[data-id="' + settings._id + '"]';
        if( item.hasClass('pixe-column') ){
            id = '.pixe-column' + id + ' > .pixe-column-content';
        }

        var extraCss = {};

        function getCss(device = ''){
            var ret = '';
            var custom = '';

            // only wrapper
            if( item.hasClass('pixe-wrapper') ){
                if( settings[device + 'margin'] ){
                    custom += settings[device + 'margin'].left? ' - ' + settings[device + 'margin'].left: '';
                    custom += settings[device + 'margin'].right? ' - ' + settings[device + 'margin'].right: '';
                    
                    if( custom ){
                        custom = 'max-width: calc(100%' + custom + ')';
                    }
                }

                if( settings[device + 'child-margin'] ){
                    item.children('.pixe-wrapper-content').attr('data-content-id', settings._id);
                    ret += $.pixeSetCss('[data-content-id="' + settings._id + '"] > .pixe-column > .pixe-column-content', {
                        'margin': settings[device + 'child-margin']
                    });
                }

                // custom margin left & right for editor
                if( settings[device + 'margin'] ){
                    if( settings[device + 'margin']['left'] || settings[device + 'margin']['right'] ){
                        var deviceSlug = !device? 'desktop': device.replace('-', '');
                        extraCss[deviceSlug] = $.pixeSetCss(id, {
                            '--pixe--wrapper--ml': settings[device + 'margin']['left'],
                            '--pixe--wrapper--mr': settings[device + 'margin']['right']
                        });
                    }
                }
            }

            // normal css
            ret += $.pixeSetCss(id, {
                margin: settings[device + 'margin'],
                padding: settings[device + 'padding'],
                custom: custom
            })
            return ret;
        }

        // css base on device
        $.pixeAddCss(item, 'spacing', getCss());
        $.pixeAddCss(item, 'spacing', getCss('tablet-'), 'tablet');
        $.pixeAddCss(item, 'spacing', getCss('mobile-'), 'mobile');

        if( Object.keys(extraCss).length ){
            item.data('extra-style', extraCss);
        }else{
            item.removeData('extra-style');
        }
    }

    // shape divider
    $.pixeShapeDividerStyle = function(item, contentSelector){
        var container = item;
        if( contentSelector ){
            container = item.children(contentSelector);
        }
        container.children('.pixe-shape-divider').remove();
    
        var settings = item.data('settings');
        var id  = '[data-id="' + settings._id + '"] ';
            id += (contentSelector)? '> ' + contentSelector + ' ': '';
            id += '> .pixe-shape-divider';
        var dependency = false;
        var css = '';
        var tcss = '';
        var mcss = '';

        function getDivider(position = 'top', device = 'desktop', settings){
            if( !settings ) return;

            // create element
            var shapeDivider = $('<div class="pixe-shape-divider" ></div>');
            shapeDivider.addClass('pixe-' + position);
            shapeDivider.addClass('pixe-' + device);
            if( settings.style && settings.style != 'none' ){
                if( settings.style == 'custom' ){
                    
                }else{
                    shapeDivider.append($.pixeShapeDivider(settings.style));
                }
                dependency = true;
            }
            if( settings['flip-x'] == 'yes' ){
                shapeDivider.addClass('pixe-flip-x');
            }
            if( settings['flip-y'] == 'yes' ){
                shapeDivider.addClass('pixe-flip-y');
            }

            // custom css
            css += $.pixeSetCss(id + '.pixe-' + device + '.pixe-' + position + ' svg', {
                width: settings.width,
                height: settings.height,
                transform: {
                    x: settings['pos-x']
                },
                fill: settings.color
            });

            // custom z index
            css += $.pixeSetCss(id + '.pixe-' + device + '.pixe-' + position, {
                'z-index': settings['z-index']
            });
            
            // append to content
            container.prepend(shapeDivider);
        }

        // top shape divider
        getDivider('top', 'desktop', settings['shape-divider-top']);
        if( settings['tablet-shape-divider-top'] && settings['tablet-shape-divider-top'].style ){
            getDivider('top', 'tablet', settings['tablet-shape-divider-top']);
            tcss += id + '.pixe-top.pixe-desktop{ display: none; }';
            tcss += id + '.pixe-top.pixe-tablet{ display: block; }';
        }
        if( settings['mobile-shape-divider-top'] && settings['mobile-shape-divider-top'].style ){
            getDivider('top', 'mobile', settings['mobile-shape-divider-top']);
            mcss += id + '.pixe-top.pixe-desktop{ display: none; }';
            mcss += id + '.pixe-top.pixe-tablet{ display: none; }';
            mcss += id + '.pixe-top.pixe-mobile{ display: block; }';
        }

        // bottom shape divider
        getDivider('bottom', 'desktop', settings['shape-divider-bottom']);
        if( settings['tablet-shape-divider-bottom'] && settings['tablet-shape-divider-bottom'].style ){
            getDivider('bottom', 'tablet', settings['tablet-shape-divider-bottom']);
            tcss += id + '.pixe-bottom.pixe-desktop{ display: none; }';
            tcss += id + '.pixe-bottom.pixe-tablet{ display: block; }';
        }
        if( settings['mobile-shape-divider-bottom'] && settings['mobile-shape-divider-bottom'].style ){
            getDivider('bottom', 'mobile', settings['mobile-shape-divider-bottom']);
            mcss += id + '.pixe-bottom.pixe-desktop{ display: none; }';
            mcss += id + '.pixe-bottom.pixe-tablet{ display: none; }';
            mcss += id + '.pixe-bottom.pixe-mobile{ display: block; }';
        }

        // bottom shape divider
        $.pixeAddCss(item, 'shape-divider',  css);
        $.pixeAddCss(item, 'shape-divider',  tcss, 'tablet');
        $.pixeAddCss(item, 'shape-divider',  mcss, 'mobile');

        // dependency
        $.pixeAddDependency(item, 'shape-divider', dependency);
    }

    // background sync with pixe_get_background_media php function
    $.pixeSetBackgroundMedia = function(item, contentSelector = '', subtype = ''){
    
        // prepare id and background element
        var settings = item.data('settings');
        var updateMedia = (['pos-x', 'pos-y'].indexOf(subtype) === -1);
        var media = settings['bg-media'];
        
        var id;
        var background;
        if( contentSelector ){
            id = '[data-id="' + settings._id + '"] > ' + contentSelector;
            background = item.children(contentSelector).children('.pixe-bg-style');
        }else{
            id = '[data-id="' + settings._id + '"]';
            background = item.children('.pixe-bg-style');
        }

        background.removeClass('pixe-has-tablet pixe-has-mobile');
        if( updateMedia ){ background.empty(); }
        if( !media ) return;

        // variable
        var css = '', tabletCss = '', mobileCss = '';
        var hasParallax = false;
        var hasVideo = false;

        // get bg for each devices
        var devices = {
            'desktop': 'pixe-desktop pixe-normal',
            'desktop-hover': 'pixe-desktop pixe-hover',
            'tablet': 'pixe-tablet pixe-normal',
            'tablet-hover': 'pixe-tablet pixe-hover',
            'mobile': 'pixe-mobile pixe-normal',
            'mobile-hover': 'pixe-mobile pixe-hover',
        };
        for( var slug in devices ){
            if( !media[slug] ) continue;

            var bg;
            var bgClass = devices[slug];
            var deviceCss;

            if( !media[slug].type ){
                bg = $.pixeGetBackgroundImage(bgClass, media[slug]);
                deviceCss = $.pixeGetBackgroundImageCss(id, slug, media);
   
                // check if parallax is enabled
                if( settings['bg-media'][slug]['parallax-speed'] ){ hasParallax = true; }
            }else if( media[slug].type == 'video' ){
                bg = $.pixeGetBackgroundVideo(bgClass, media[slug]);
                deviceCss = $.pixeGetBackgroundVideoCss(id, slug, media[slug]);

                hasVideo = true;
            }else if( media[slug].type == 'map' ){
                bg = $.pixeGetBackgroundMap(bgClass, media[slug]);
            }else if( media[slug].type == 'none' ){
                if( slug == 'tablet' ){
                    background.addClass('pixe-has-tablet');
                }else if( slug == 'mobile' ){
                    background.addClass('pixe-has-mobile');
                }
            }

            // add extra class for hiding desktop bg
            if( updateMedia && bg ){
                background.append(bg);
                if( slug == 'tablet' ){
                    background.addClass('pixe-has-tablet');
                }else if( slug == 'mobile' ){
                    background.addClass('pixe-has-mobile');
                }
            }

            if( deviceCss ){
                switch(slug){
                    case 'desktop':
                    case 'desktop-hover':
                        css += deviceCss;
                        break;
                    case 'tablet':
                    case 'tablet-hover':
                        tabletCss += deviceCss;
                        break;
                    case 'mobile':
                    case 'mobile-hover':
                        mobileCss += deviceCss;
                        break;
                }
            }
        }

        // background style
        $.pixeAddCss(item, 'bg-media', css);
        $.pixeAddCss(item, 'bg-media', tabletCss, 'tablet');
        $.pixeAddCss(item, 'bg-media', mobileCss, 'mobile');

        // dependency
        $.pixeAddDependency(item, 'video-js', hasVideo);
        $.pixeAddDependency(item, 'bg-parallax', hasParallax);
    }
    $.pixeGetBackgroundMap = function(className, settings){
        if( !settings ) return;

        var bg = $('<div class="pixe-bg pixe-bg-map" ></div>');
        bg.addClass(className);
        bg.append($.pixeGetMap(settings));

        return bg;
    }
    $.pixeGetBackgroundVideoCss = function(id, devices, settings){
        if( !settings ) return '';
        
        var ret = '';
        var state = devices.indexOf('-hover') >= 0? 'hover': '';
        if( state == 'hover' ){
            id = id + ':hover > .pixe-bg-style';
        }else{
            id = id + ' > .pixe-bg-style'
        }
        
        if( !settings['video-type'] ){
            ret += $.pixeSetCss(id + ' .pixe-bg-video iframe', {
                'transform': {
                    'x': settings['pos-x'],
                    'y': settings['pos-y']
                },
            });
        }
        ret += $.pixeSetCss(id + ' .pixe-bg-video video', {
            'object-position': {
                'position': 'center',
                'pos-x': settings['pos-x'],
                'pos-y': settings['pos-y']
            },
        });

        return ret;
    }
    $.pixeGetBackgroundVideo = function(className, settings){
        if( !settings ) return;

        var bg = $('<div class="pixe-bg pixe-bg-video" ></div>');
        bg.addClass(className);

        var videoSettings = {
            background: 'yes',
            loop: settings.loop == 'no'? 'no': 'yes',
            startTime: settings['start-time'],
            endTime: settings['end-time'] 
        };

        // youtube & vimeo & file url
        if( !settings['video-type'] ){
            if( settings.url ){
                var video = $.pixeGetVideo(settings.url, videoSettings);
                if( video ){
                    bg.addClass('pixe-fvideo-wrap');
                    bg.append($.pixeGetVideo(settings.url, videoSettings));
                }else{
                    bg.append($.pixeGetHtml5Video(settings.url, videoSettings));
                }
            }else{
                return;
            }
        }else if( settings['video-type'] == 'self-hosted' ){
            if( settings.video && settings.video.url ){
                bg.append($.pixeGetHtml5Video(settings.video.url, videoSettings));
            }else{
                return;
            }
        }

        return bg;
    }
    $.pixeGetBackgroundImageCss = function(id, devices, settings){
        var media = settings[devices];
        if( !media ) return '';
        
        var ret = '';
        var device = devices.replace('-hover', '');
        var state = devices.indexOf('-hover') >= 0? 'hover': '';
        if( state == 'hover' ){
            id = id + ':hover > .pixe-bg-style';
        }else{
            id = id + ' > .pixe-bg-style'
        }
        
        var display = media['display'];

        if( !media['image'] ){
            if( device == 'tablet' ){
                if( settings['desktop'] && settings['desktop']['image'] ){
                    display = settings['desktop']['display'];
                }
            }else if( device == 'mobile' ){
                if( settings['tablet'] && settings['tablet']['image'] ){
                    display = settings['tablet']['display'];
                }else if( settings['desktop'] && settings['desktop']['image'] ){
                    display = settings['desktop']['display'];
                }
            }
        }

        if( display == 'img' ){
            ret += $.pixeSetCss(id + ' .pixe-bg-inner', {
                'object-fit': media['object-fit'],
                'object-position': media,
                'opacity': media.opacity,
                'blend': media.blend,
                'filter': media
            });
        }else{
            ret += $.pixeSetCss(id + ' .pixe-bg-inner', {
                'background-size': media,
                'background-position': media,
                'background-attachment': (media.attachment == 'fixed')? 'fixed': '',
                'background-repeat': media.repeat,
                'opacity': media.opacity,
                'blend': media.blend,
                'filter': media
            });
        }

        return ret;
    }
    $.pixeGetBackgroundImage = function(className, settings){
        if( !settings ) return;
        if( !settings.source && (!settings.image || !settings.image.url) ) return;

        // image container
        var bg = $('<div class="pixe-bg pixe-bg-image" ></div>');
        bg.addClass(className);

        // parallax attachment
        if( settings.attachment == 'parallax' && settings['parallax-speed'] ){
            bg.attr('data-parallax', settings['parallax-speed']);
        }
        
        // image
        var bgImage;
        if( settings.display == 'img' ){

            // query image
            if( ['featured-image', 'custom-field', 'term-meta'].indexOf(settings.source) >= 0 ){
                var bgImage = $('<img />');
                if( settings.source == 'featured-image' ){
                    bgImage.attr('src', pixeData.imgDir + 'featured-image.webp');
                }else{
                    bgImage.attr('src', pixeData.imgDir + 'custom-field-image.webp');
                }
            
            // custom image
            }else{
                bgImage = $.pixeGetImage(settings.image.id, settings['thumbnail-size'], settings.image.url, 'pixe-bg-inner');
            }
        }else{
            bgImage = $('<div class="pixe-bg-inner" ></div>');

            // query image
            if( ['featured-image', 'custom-field', 'term-meta'].indexOf(settings.source) >= 0 ){
                if( settings.source == 'featured-image' ){
                    bgImage.css('background-image', 'url(' + pixeData.imgDir + 'featured-image.webp)');
                }else{
                    bgImage.css('background-image', 'url(' + pixeData.imgDir + 'custom-field-image.webp)');
                }

            // custom image
            }else{
                bgImage.css('background-image', 'url(' + settings.image.url + ')');
            }
        }
        
        bg.append(bgImage);

        return bg;
    }

    // bg style popup
    $.pixeBgStylePopup = function(item, settings){
        settings = $.extend({
            type: 'bg-style',
            button: undefined,
            position: 'bottom-center',
            focusClass: 'pixe-focus',
            onChange: undefined,
            onClose: undefined
        }, settings);

        // for mobile & tablet
        if( $.pixeEditor.viewport != 'desktop' ){
            pixeData.hideBuilderPanel = false;
            $.pixeEditor.setEditTarget(item, ['style', 'bg-color']);
            return;
        }
        
        item.addClass(settings.focusClass);

        // create object for history
        var styleHistory = new $.pixeEditHistory(item);

        // popup
        new $.pixeStyleSelector({
            obj: item.data('settings'),
            slug: 'bg-style',
            type: settings.type,
            target: settings.button,
            popupPosition: settings.position,
            onChange: function(){
                if( settings.onChange ){
                    settings.onChange();
                }
                
                // add to history
                styleHistory.onChange('bg-style');
            },
            onClose: function(){
                if( settings.onClose ){
                    settings.onClose();
                }

                item.removeClass(settings.focusClass);
            }
        });
    
    }

    // bg media popup
    $.pixeBgMediaPopup = function(item, settings){
        settings = $.extend({
            button: undefined,
            position: 'bottom-center',
            focusClass: 'pixe-focus',
            onChange: undefined,
            onClose: undefined
        }, settings);

        // for mobile & tablet
        if( $.pixeEditor.viewport != 'desktop' ){
            pixeData.hideBuilderPanel = false;
            $.pixeEditor.setEditTarget(item, ['style', 'bg-media']);
            return;
        }

        item.addClass(settings.focusClass);

        // create object for history
        var mediaHistory = new $.pixeEditHistory(item);

        // popup
        new $.pixeStyleSelector({
            obj: item.data('settings'),
            slug: 'bg-media',
            type: 'bg-media',
            target: settings.button,
            popupPosition: settings.position,
            onChange: function(value, subtype){
                settings.onChange(value, subtype);

                // add to history
                mediaHistory.onChange('bg-media');
            },
            onClose: function(){
                if( settings.onClose ){
                    settings.onClose();
                }

                item.removeClass(settings.focusClass);
            }
        });

    }

    // spacing popup
    $.pixeSpacingPopup = function(item, args){
        args = $.extend({
            button: undefined,
            type: '',
            position: 'bottom-center',
            focusClass: 'pixe-focus',
            onChange: undefined,
            onClose: undefined
        }, args);

        // for mobile & tablet
        if( $.pixeEditor.viewport != 'desktop' ){
            pixeData.hideBuilderPanel = false;
            $.pixeEditor.setEditTarget(item, ['style', 'spacing']);
            return;
        }

        item.addClass(args.focusClass);
        var settings = item.data('settings');

        // create object for history
        var spacingHistory = new $.pixeEditHistory(item);
        
        new $.pixeStyleSelector({
            obj: settings,
            slug: false,
            target: args.button,
            type: 'spacing' + (args.type? '-' + args.type: ''),
            onChange: function(value, slug){
                if( args.onChange ){ args.onChange(slug); }

                // add to history
                spacingHistory.onChange(slug);
            },
            onClose: function(){
                if( args.onClose ){ args.onClose(); }
                item.removeClass(args.focusClass);
            }
        });
    }

    // set padding value ( for dragging resize )
    $.pixeSetPadding = function(item, pos, value, toHistory = true){
        var settings = item.data('settings');
        var slug = ($.pixeEditor.viewport == 'desktop')? 'padding': $.pixeEditor.viewport + '-padding';

        // create action for history
        if( toHistory ){
            var action = $.pixeHistory.createAction(item, 'edit', slug);
            $.pixeHistory.setActionStep(action, item, slug, settings[slug], true);
        }

        // assign value
        if( value ){
            if( !settings[slug] ){
                settings[slug] = {};
            }
            settings[slug][pos] = value;
        }else{
            if( settings[slug] && settings[slug][pos] ){
                delete settings[slug][pos];

                if( !Object.keys(settings[slug]).length ){
                    delete settings[slug];
                }
            }
        }

        // add action to history
        if( toHistory ){
            $.pixeHistory.setActionStep(action, item, slug, settings[slug]);
            $.pixeHistory.addAction(action);

            // update panel settings
            $.pixeEditor.updateSettingsPanel(item, slug, settings[slug]);
        }
    }
    $.pixeSetPaddingDiff = function(item, handler, diff, toHistory = true){
        var padding = 0;
        var paddingContent;
        if( item.hasClass('pixe-column') ){
            paddingContent = item.children('.pixe-column-content');
        }else{
            paddingContent = item;
        }
        
        if( diff < -10 ){ 
            diff = -10; 
        }else if( diff > 10 ){
            diff = 10;
        }
        
        // apply padding to wrapper
        if( handler.hasClass('pixe-top') ){
            padding = parseInt(paddingContent.css('padding-top')) + diff;
            if( padding < 0 ){
                padding = '0px';
            }else if( padding > 1000 ){
                padding = '1000px';
            }else{
                padding = padding + 'px';
            }
            $.pixeSetPadding(item, 'top', padding, toHistory);
        }else if( handler.hasClass('pixe-bottom') ){
            padding = parseInt(paddingContent.css('padding-bottom')) + diff;
            if( padding < 0 ){
                padding = '0px';
            }else if( padding > 1000 ){
                padding = '1000px';
            }else{
                padding = padding + 'px';
            }
            $.pixeSetPadding(item, 'bottom', padding, toHistory);
        }
    }

})(jQuery);	