(function($){
    "use strict";

    $.fn.pixeWrapper = function(){
        var editor = $(this);
        $.pixeWrapper.bindToolbar(editor);
        $.pixeWrapper.bindPaddingResize(editor);
    }

    $.pixeWrapper = {

        minimizeSize: 30,
        defaultPadding: { top: '60px', bottom: '60px' },

        create: function(settings = {}, render = true, preview = false, container){
            settings = $.extend({
                _type: 'wrapper'
            }, settings);

            var t = this;
            var wrapper = $('<div class="pixe-wrapper" ></div>');
            wrapper.data('settings', settings);
            if( container ){
                container.append(wrapper);
            }

            if( preview ){ wrapper.data('preview', true); }
            wrapper.append('<style></style>');

            // set id
            if( settings._id ){ wrapper.attr('data-id', settings._id); }
            if( settings.id ){ wrapper.attr('id', settings.id); }

            // subtype
            if( settings._subtype == 'mega-menu' ){ wrapper.addClass('pixe-mega-menu'); }

            // background
            wrapper.append('<div class="pixe-bg-style" ></div>');

            // extra class before initiate inner elements
            t.renderStyle(wrapper, 'propagate-hover', undefined, false);

            // content area
            var wrapperContent = $('<div class="pixe-wrapper-content" ></div>');
            wrapperContent.appendTo(wrapper);
            if( settings._elements ){
                $.pixeEditor.render(settings._elements, true, preview, wrapperContent);
            }
            
            // toolbar
            if( !preview ){

                // padding resize
                if( settings._subtype == 'slider' || settings._subtype == 'mega-menu' ){
                    // do nothing
                }else{
                    var html  = '<div class="pixe-settings" >';
                        html += '<input type="text" />';
                        html += '<div class="pixe-resize" >';
                        html += '<div class="pixe-action pixe-plus pixe-svg-preset pixe-svg-wrapper-plus" ></div>';
                        html += '<div class="pixe-action pixe-minus pixe-svg-preset pixe-svg-wrapper-minus" ></div>';
                        html += '</div>';
                        html += '<div class="pixe-action pixe-plus-5" >+5 px</div>';
                        html += '<div class="pixe-action pixe-minus-5" >-5 px</div>';
                        html += '</div>';
                    var topHandler = $('<div class="pixe-padding-resize pixe-top" ></div>');
                    topHandler.append(html);
                    topHandler.appendTo(wrapper);
                    var bottomHandler = $('<div class="pixe-padding-resize pixe-bottom" ></div>');
                    bottomHandler.append(html);
                    bottomHandler.appendTo(wrapper);
                }

                // area
                wrapper.append('<div class="pixe-wrapper-area"></div>');

                // toolbar 
                wrapper.append(t.getToolbar(wrapper));
            }

            // style for this element;
            if( render ){ t.render(wrapper); }

            return wrapper;
        },
        render: function(wrapper, type){
            var settings = wrapper.data('settings');
            if( !settings ) return;

            var t = this;
            if( wrapper.data('settings')._type == 'collection' ){
                $.pixeCollection.render(wrapper, type);
                return;
            }else if( type ){
                t.renderStyle(wrapper, type);
                return;
            } 

            // render styles
            t.renderStyle(wrapper, 'item', undefined, true);
        },
        renderStyle: function(wrapper, type, subtype, renderCss = true){
            if( !wrapper.data('settings') ) return;
            if( wrapper.data('settings')._type == 'collection' ){
                $.pixeCollection.renderStyle(wrapper, type, subtype, renderCss);
                return;
            }

            var t = this;

            if( !t.proRenderStyle || !t.proRenderStyle(wrapper, type, subtype) ){
                switch(type){
                    case 'class':
                    case 'id':
                    case 'responsive':
                        $.pixeSetAdvanceStyle(wrapper, type);
                        break;
                    case 'padding':
                    case 'tablet-padding':
                    case 'mobile-padding':
                    case 'margin':
                    case 'tablet-margin':
                    case 'mobile-margin':
                    case 'child-margin':
                    case 'tablet-child-margin':
                    case 'mobile-child-margin':
                        t.setSpacingStyle(wrapper);
                        break;
                    case 'bg-media':
                        $.pixeSetBackgroundMedia(wrapper, '', subtype);
                        break;
                    case 'bg-style':
                        t.setBackgroundStyle(wrapper);
                        break;
                    case 'shape-divider':
                    case 'shape-divider-top':
                    case 'shape-divider-bottom':
                    case 'tablet-shape-divider-top':
                    case 'tablet-shape-divider-bottom':
                    case 'mobile-shape-divider-top':
                    case 'mobile-shape-divider-bottom':
                        $.pixeShapeDividerStyle(wrapper, '.pixe-wrapper-content');
                        break;
                    case 'animation':
                    case 'tablet-animation':
                    case 'mobile-animation':
                        $.pixeSetAnimationStyle(wrapper);
                        break;
                    case 'hover-animation':
                        $.pixeSetHoverAnimationStyle(wrapper);
                        break;
                    case 'propagate-hover':
                        var settings = wrapper.data('settings');
                        if( settings['propagate-hover'] ){
                            wrapper.addClass('pixe-hover-target');
                        }else{
                            wrapper.removeClass('pixe-hover-target');
                        }
                        $.pixeRenderElementStyles(wrapper.find('.pixe-column, .pixe-item'));
                        break;
                    default:
                        if( type == 'item' ){
                            t.renderStyle(wrapper, 'id', undefined, false);
                            t.renderStyle(wrapper, 'class', undefined, false);
                            t.renderStyle(wrapper, 'responsive', undefined, false);
                            t.renderStyle(wrapper, 'padding', undefined, false);
                            t.renderStyle(wrapper, 'bg-media', undefined, false);
                            t.renderStyle(wrapper, 'bg-style', undefined, false);
                            t.renderStyle(wrapper, 'shape-divider', undefined, false);
                            t.renderStyle(wrapper, 'animation', undefined, false);
                            t.renderStyle(wrapper, 'hover-animation', undefined, false);
                            t.renderStyle(wrapper, 'pro', undefined, false);
                        }

                        t.setDefaultCss(wrapper);
                        break;
                }
            }

            if( renderCss ){
                t.renderCss(wrapper);
            } 
        },
        renderCss: function(wrapper){
            var settings = wrapper.data('settings');
            if( !settings ) return;
            
            var style = wrapper.data('style');
            var extraCss = wrapper.data('extra-style');
            var styleTag = wrapper.children('style');
            var bgMedia = wrapper.children('.pixe-bg-style');
            $.pixeRenderCss(styleTag, style, extraCss);

            // parallax background
            bgMedia.pixeParallaxBackground();

            // background size
            $.pixeVideo.resizePortrait(wrapper);

            // iframe api ( start - end time )
            $.pixeVideo.initMedia(bgMedia);
        },
        
        // default css
        setDefaultCss: function(wrapper){
            var settings = wrapper.data('settings');
            var id = '[data-id="' + settings._id + '"]';

            var megamenu = settings['mega-menu']? settings['mega-menu']: {};

            function getCss(deviceSlug = ''){
                var css = '';

                // wrap area
                var wrapCss = {
                    'transform': settings[deviceSlug + 'transform'],
                    'order': settings[deviceSlug + 'flex-order'],
                    'position': settings[deviceSlug + 'position'],
                    'z-index': settings[deviceSlug + 'z-index']
                };
                if( settings[deviceSlug + 'position'] == 'absolute' || settings[deviceSlug + 'position'] == 'fixed' ){
                    wrapCss['top'] = settings[deviceSlug + 'top'];
                    wrapCss['right'] = settings[deviceSlug + 'right'];
                    wrapCss['bottom'] = settings[deviceSlug + 'bottom'];
                    wrapCss['left'] = settings[deviceSlug + 'left'];
                }
                if( settings[deviceSlug + 'height'] ){
                    if( settings[deviceSlug + 'height'] == 'full-screen' ){
                        if( settings[deviceSlug + 'full-screen-offset'] ){
                            wrapCss['height'] = 'calc(100vh - ' + settings[deviceSlug + 'full-screen-offset'] + ')';
                        }else{
                            wrapCss['height'] = '100vh';
                        }
                    }else if( settings[deviceSlug + 'height'] == 'min-height' ){
                        wrapCss['min-height'] = settings[deviceSlug + 'min-height'];
                    }else if( settings[deviceSlug + 'height'] == 'auto' ){
                        wrapCss['height'] = 'auto';
                        wrapCss['min-height'] = 'auto';
                    }
                }
                css += $.pixeSetCss(id + '.pixe-wrapper', wrapCss);

                // for megamenu
                if( !deviceSlug ){
                    if( !megamenu['size'] ){
                        css += $.pixeSetCss(id + '.pixe-mega-menu', {
                            'width': megamenu['width']
                        });
                        wrapper.attr('data-mmenu-align', megamenu['align']).parent('li.pixe-mega-menu-item').trigger('mouseenter');

                    }else if( megamenu['size'] == 'full' ){
                        css += $.pixeSetCss(id + '.pixe-mega-menu', {
                            'custom': 'width: 100%; left: 0; right: 0;'
                        });
                        wrapper.attr('data-mmenu-align', '').parent('li.pixe-mega-menu-item').trigger('mouseenter');
                    }
                }

                // wrap hover area
                css += $.pixeSetCss(id + '.pixe-wrapper:hover', {
                    'transform': settings[deviceSlug + 'transform-hover']
                });

                // content area
                var contentCss = {
                    'flex-direction': settings[deviceSlug + 'flex-direction'],
                    'justify-content': settings[deviceSlug + 'justify-content'],
                    'align-items': settings[deviceSlug + 'align-items'],
                    'align-content': settings[deviceSlug + 'align-content'],
                    'flex-wrap': settings[deviceSlug + 'flex-wrap'],
                    'gap': {
                        'x': settings[deviceSlug + 'column-gap'],
                        'y': settings[deviceSlug + 'row-gap']
                    },
                    'overflow': settings[deviceSlug + 'overflow']
                };
                if( settings[deviceSlug + 'content-width'] == 'boxed' ){
                    if( settings[deviceSlug + 'boxed-content-width'] ){
                        contentCss['width'] = settings[deviceSlug + 'boxed-content-width'];
                        contentCss['max-width'] = '100%';
                    }
                }else if( settings[deviceSlug + 'content-width'] == 'full' ){
                    contentCss['width'] = '100%';
                }
                css += $.pixeSetCss(id + ' > .pixe-wrapper-content', contentCss);

                // children
                if( settings[deviceSlug + 'flex-direction'] == 'row' || settings[deviceSlug + 'flex-direction'] == 'row-reverse' ){
                    css += $.pixeSetCss(id + ' > .pixe-wrapper-content > .pixe-item', {'width': 'auto'});
                }
                
                return css;
            }

            // apply css
            $.pixeAddCss(wrapper, 'default', getCss());
            $.pixeAddCss(wrapper, 'default', getCss('tablet-'), 'tablet');
            $.pixeAddCss(wrapper, 'default', getCss('mobile-'), 'mobile');
        },

        // background
        setBackgroundStyle: function(wrapper){
            var settings = wrapper.data('settings');
            delete settings['bg-style-display'];

            var id = '[data-id="' + settings._id + '"]';
            var bgStyle = settings['bg-style']? settings['bg-style']: {};

            function getCss(deviceSlug = ''){
                // wrap area
                var css = ''; 

                // shadow & mask
                css += $.pixeSetCss(id, {
                    'shadow': bgStyle[deviceSlug + 'shadow'],
                    'mask': bgStyle[deviceSlug + 'mask'],
                    'border-radius': bgStyle[deviceSlug + 'border']? bgStyle[deviceSlug + 'border'].radius: ''
                });
                css += $.pixeSetCss(id + ':hover', {
                    'shadow': bgStyle[deviceSlug + 'shadow-hover'],
                    'border-radius': bgStyle[deviceSlug + 'border-hover']? bgStyle[deviceSlug + 'border-hover'].radius: ''
                });

                // bg style area
                var css2 = ''; 

                // background
                css2 += $.pixeSetCss(id + ' > .pixe-bg-style', {
                    'background-color': bgStyle[deviceSlug + 'color'],
                    'border': bgStyle[deviceSlug + 'border'],
                    'custom': $.pixeBgColorFilterCss(bgStyle, deviceSlug)
                });
                css2 += $.pixeSetCss(id + ':hover > .pixe-bg-style', {
                    'background-color': bgStyle[deviceSlug + 'color-hover'],
                    'border': bgStyle[deviceSlug + 'border-hover']
                });

                // for header sticky
                if( !deviceSlug && settings['header-sticky'] ){
                    var styleSticky = settings['header-sticky'];
                    var bgSticky = styleSticky['styling']? styleSticky['styling']: {};

                    css += $.pixeSetCss('.pixe-float-header ' + id, {
                        'padding': styleSticky['padding'],
                        'shadow': bgSticky['shadow'],
                        'custom': $.pixeBgColorFilterCss(bgSticky)
                    });
                    css2 += $.pixeSetCss('.pixe-float-header ' + id + ' > .pixe-bg-style', {
                        'background-color': bgSticky['color'],
                        'border': bgSticky['border'],
                    });
                }

                // for render function
                if( css2 ){
                    settings['bg-style-display'] = 1;
                }
                return css + css2;
            }

            // apply css
            $.pixeAddCss(wrapper, 'bg-style', getCss());
            $.pixeAddCss(wrapper, 'bg-style', getCss('tablet-'), 'tablet');
            $.pixeAddCss(wrapper, 'bg-style', getCss('mobile-'), 'mobile');
        },

        // spacing
        setSpacingStyle: function(wrapper){
            var t = this;
            var settings = wrapper.data('settings');
            $.pixeSetSpacingStyle(wrapper, settings);

            // padding handler
            function getPadding(pos){
                switch($.pixeEditor.viewport){
                    case 'mobile':
                        if( settings['mobile-padding'] && settings['mobile-padding'][pos] ){
                            return settings['mobile-padding'][pos];
                        }
                    case 'tablet':
                        if( settings['tablet-padding'] && settings['tablet-padding'][pos] ){
                            return settings['tablet-padding'][pos];
                        }
                    case 'desktop':
                        if( settings['padding'] && settings['padding'][pos] ){
                            return settings['padding'][pos];
                        }
                }
                return t.defaultPadding[pos] || '0px';
            }

            // handler
            var topHandler = wrapper.children('.pixe-padding-resize.pixe-top');
            var topPadding = getPadding('top');
            var topPaddingVar = $.pixeGetVariable(topPadding);

            if( topPadding ){
                topHandler.css('padding-top', topPadding);

                if( topPaddingVar ){
                    topHandler.find('input').val(topPaddingVar);
                }else{
                    topHandler.find('input').val(topPadding);
                }
                if( parseInt(topPadding) < t.minimizeSize ){
                    topHandler.addClass('pixe-minimize');
                }else{
                    topHandler.removeClass('pixe-minimize');
                }
            }else{
                topHandler.css('padding-top', 0);
                topHandler.find('input').val('-');
                topHandler.addClass('pixe-minimize');
            }
            

            var bottomHandler = wrapper.children('.pixe-padding-resize.pixe-bottom');
            var bottomPadding = getPadding('bottom');
            var bottomPaddingVar = $.pixeGetVariable(bottomPadding);

            if( bottomPadding){ 
                bottomHandler.css('padding-top', bottomPadding);
                if( bottomPaddingVar ){
                    bottomHandler.find('input').val(bottomPaddingVar);
                }else{
                    bottomHandler.find('input').val(bottomPadding);
                }
                if( parseInt(bottomPadding) < t.minimizeSize ){
                    bottomHandler.addClass('pixe-minimize');
                }else{
                    bottomHandler.removeClass('pixe-minimize');
                }
            }else{
                bottomHandler.css('padding-top', 0);
                bottomHandler.find('input').val('-');
                bottomHandler.addClass('pixe-minimize');
            }
            
        },

        getToolbar(wrapper){
            var settings = wrapper.data('settings');
            var html = '';

            if( settings._subtype == 'slider' ){
                // do nothing

            }else if( settings._subtype == 'mega-menu' ){
                html  = '<div class="pixe-wrapper-toolbar" >';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-settings" data-action="settings" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-menu" data-action="menu" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-spaces" data-action="space" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-color" data-action="color" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-image" data-action="image" ></div>';
                html += '</div>';
            }else{
                var headerTemplate = (pixeData.type == 'template_part' && pixeData.part == 'header');
                html  = '<div class="pixe-wrapper-toolbar" >';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-settings" data-action="settings" ></div>';
                if( headerTemplate ){
                    html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-sticky" data-action="sticky" ></div>';
                }
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-spaces" data-action="space" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-color" data-action="color" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-image" data-action="image" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-copy pixe-svg-wrapper-copy" data-action="copy" ></div>';
                html += '<div class="pixe-move-wrap" >';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-up" data-action="up" ></div>';
                html += '<div class="pixe-divider" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-down" data-action="down" ></div>';
                html += '</div>';
                html += '<div class="pixe-action pixe-drag pixe-svg-preset pixe-svg-wrapper-drag" data-action="drag" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-trash" data-action="remove" ></div>';
                html += '</div>';
            }

            return html;
        },

        remove: function(wrapper, updateNavigator = true){

            function remove(){
                // save for history
                var action = $.pixeHistory.createAction(wrapper, 'remove');
                
                // remove from dom
                wrapper.detach();

                // add history action
                $.pixeHistory.addAction(action, updateNavigator);

                // status
                $.pixeEditor.setStatus();
            }
            
            // ask before remove on mobile/tablet devices
            if( $.pixeEditor.viewport == 'desktop' ){
                remove();
            }else{
                $.pixeConfirmationBox({
                    extraClass: 'pixe-red',
                    title: 'Remove Element',
                    confirmText: 'Remove',
                    message: 'Please note that removing an element while editing in Tablet or Mobile view will also remove it from the Desktop view and across all devices.',
                    onSuccess: function(){
                        remove();
                    }
                });
            }
        },
        
        bindToolbar: function(editor){
            var t = this;

            editor.on('click', '.pixe-wrapper-toolbar .pixe-action', function(){
                var wrapper = $(this).closest('.pixe-wrapper');
                var type = $(this).attr('data-action');
                var settings = wrapper.data('settings');

                switch(type){

                    // header sticky
                    case 'sticky':
                        var pageSettings = pixeData.editorSettings;
                        var ssType = 'header-sticky-settings';
                        if( pageSettings.header && pageSettings.header.mode == 'floating' ){
                            ssType = 'header-float-settings';
                        }
                        var actionHistory = new $.pixeEditHistory(wrapper);

                        wrapper.addClass('pixe-focus pixe-focus-toolbar');
                        new $.pixeStyleSelector({
                            obj: settings,
                            slug: 'header-sticky',
                            type: ssType,
                            target: $(this),
                            onChange: function(value, subtype){
                                actionHistory.onChange('header-sticky');
                                t.renderStyle(wrapper, 'bg-style');
                            },
                            onClose: function(){
                                wrapper.removeClass('pixe-focus pixe-focus-toolbar');
                            }
                        });
                        break;

                    // edit settings
                    case 'settings':
                        pixeData.hideBuilderPanel = false;
                        $.pixeEditor.setEditTarget(wrapper);
                        break;
                    
                    // remove
                    case 'remove':
                        t.remove(wrapper);
                        break;

                    // duplicate
                    case 'copy':
                        // copy & assign unique id
                        var settings = $.pixeClone($.pixeGetEditorVal(wrapper));
                        $.pixeEditor.setUniqueIdData(settings);

                        // add item
                        var newItem;
                        if( settings._type == 'collection' ){
                            newItem = $.pixeCollection.create(settings);
                        }else{
                            newItem = t.create(settings);
                        }
                        newItem.insertAfter(wrapper);

                        // save for history
                        var action = $.pixeHistory.createAction(newItem, 'duplicate');
                        $.pixeHistory.addAction(action);

                        // set status
                        $.pixeEditor.setStatus(newItem);
                        break;

                    case 'up':
                    case 'down':
                        var isMove = false;

                        // action for history
                        var action = $.pixeHistory.createAction(wrapper, 'move');

                        // move up or down 
                        if( type == 'up' ){
                            wrapper.prev().each(function(){
                                wrapper.insertBefore($(this));
                                isMove = true;
                            });
                        }else if( type == 'down' ){
                            wrapper.next().each(function(){
                                wrapper.insertAfter($(this));
                                isMove = true;
                            });
                        }                    

                        // update new location & add action
                        if( isMove ){
                            $.pixeHistory.setActionLocation(action, 'target');
                            $.pixeHistory.addAction(action);
                        }
                        break;
                    
                    // margin padding
                    case 'space':
                        $.pixeSpacingPopup(wrapper, {
                            type: 'tbpdpx',
                            button: $(this),
                            focusClass: 'pixe-focus pixe-focus-toolbar',
                            onChange: function(type){
                                t.renderStyle(wrapper, type);
                            }
                        });
                        break;
                    
                    // background media
                    case 'image': 
                        $.pixeBgMediaPopup(wrapper, {
                            button: $(this),
                            focusClass: 'pixe-focus pixe-focus-toolbar',
                            onChange: function(value, subtype){
                                t.renderStyle(wrapper, 'bg-media', subtype);
                                t.setStatus(wrapper);
                            }
                        });
                        break;

                    // background style
                    case 'color':
                        $.pixeBgStylePopup(wrapper, {
                            button: $(this),
                            type: 'bg-style-filter',
                            focusClass: 'pixe-focus pixe-focus-toolbar',
                            onChange: function(){
                                t.renderStyle(wrapper, 'bg-style');
                                t.setStatus(wrapper);
                            }
                        });
                        break;
                    
                    // mega menu
                    case 'menu':
                        var actionHistory = new $.pixeEditHistory(wrapper);

                        wrapper.addClass('pixe-focus pixe-focus-toolbar');
                        new $.pixeStyleSelector({
                            obj: settings,
                            slug: 'mega-menu',
                            type: 'menu-mega',
                            target: $(this),
                            onChange: function(value, subtype){
                                actionHistory.onChange('mega-menu');
                                t.renderStyle(wrapper, 'mega-menu');
                            },
                            onClose: function(){
                                wrapper.removeClass('pixe-focus pixe-focus-toolbar');
                            }
                        });
                        break; 

                    default:
                        if( settings._type == 'collection' ){
                            $.pixeCollection.toolbarAction(wrapper, $(this), type);
                        }
                        break;
                }
            });

        },

        bindPaddingResize: function(editor){
            var t = this;

            // button press action
            editor.on('click', '.pixe-padding-resize .pixe-action', function(){
                var handler = $(this).closest('.pixe-padding-resize');
                var wrapper = $(this).closest('.pixe-wrapper');
                var diff = 0;

                if( $(this).hasClass('pixe-plus') ){
                    diff = 1;
                }else if( $(this).hasClass('pixe-plus-5') ){
                    diff = 5;
                }else if( $(this).hasClass('pixe-minus') ){
                    diff = -1;
                }else if( $(this).hasClass('pixe-minus-5') ){
                    diff = -5
                } 

                if( diff != 0 ){
                    $.pixeSetPaddingDiff(wrapper, handler, diff);
                    t.renderStyle(wrapper, 'padding');
                }
            });

            // dragging resize
            editor.pixeDragResize({
                selector: '.pixe-padding-resize',
                itemSelector: '.pixe-wrapper',
                onResize: function(wrapper, handler, diff){
                    $.pixeSetPaddingDiff(wrapper, handler, diff, false);
                    t.renderStyle(wrapper, 'padding');
                }
            });

            // input change action
            editor.on('focusin focusout change keydown', '.pixe-padding-resize input', function(e){
                var wrapper = $(this).closest('.pixe-wrapper');
                var handler = $(this).closest('.pixe-padding-resize');

                if( e.type == 'focusin' ){
                    wrapper.addClass('pixe-focus');
                    handler.addClass('pixe-focus');
                }else if( e.type == 'focusout' ){
                    wrapper.removeClass('pixe-focus');
                    handler.removeClass('pixe-focus');
                }else if( e.type == 'change' ){
                    var padding = $(this).val()? parseInt($(this).val()) + 'px': undefined;
    
                    if( handler.hasClass('pixe-top') ){
                        $.pixeSetPadding(wrapper, 'top', padding);
                    }else if( handler.hasClass('pixe-bottom') ){
                        $.pixeSetPadding(wrapper, 'bottom', padding);
                    }
    
                    // render style
                    t.renderStyle(wrapper, 'padding');
                }else if( e.type == 'keydown' ){
                    if( e.keyCode != 38 && e.keyCode != 40 ) return;
    
                    var diff = 0;
                    if( e.keyCode == 38 ){
                        diff = 1;
                    }else if( e.keyCode == 40 ){
                        diff = -1;
                    }
                    if( e.shiftKey ){
                        diff *= 10;
                    }
    
                    $.pixeSetPaddingDiff(wrapper, handler, diff);
                    t.renderStyle(wrapper, 'padding');
                }
            });

        },

        // calculate 
        setStatus: function(wrapper){
            var settings = wrapper.data('settings');
            if( !settings ) return;
            
            if( $(this).hasClass('pixe-collection') ) return;
            
            // reset class
            wrapper.removeClass('pixe-has-empty-column');
            wrapper.removeClass('pixe-empty');

            // add & remove class for empty wrapper
            var wrapperContent = wrapper.children('.pixe-wrapper-content');
            if( !wrapperContent.children().length ){
                var media = wrapper.children('.pixe-bg-style');
                var style = wrapper.data('style');
                var hasBgStyle = style && ((style.desktop && style.desktop['bg-style']) || (style.tablet && style.tablet['bg-style']) || (style.mobile && style.mobile['bg-style']))
                
                if( !media.children().length && !hasBgStyle ){
                    wrapper.addClass('pixe-empty');
                }
                
            // add & remove class for empty column
            }else{
                var hasColumn = false;
                var emptyColumn = true;
                wrapperContent.children('.pixe-column').each(function(){
                    hasColumn = true;
                    if( !$(this).hasClass('pixe-empty') ){
                        emptyColumn = false;
                    }
                });
                if( hasColumn && emptyColumn ){
                    wrapper.addClass('pixe-has-empty-column');
                }
            }

        }

    }

})(jQuery);	