(function($){
    "use strict";

    // slider control css
    $.pixeSliderControlStyle = function(item, id, bullet, navigation, device){
        var ret = ''; 
        
        // css
        if( bullet || navigation ){
            if( bullet && bullet['enable-bullet'] == 'yes' ){
                var bulletAtts = {
                    'justify-content': bullet[device + 'bullet-alignment'],
                    'margin-left': bullet[device + 'bullet-left-margin'],
                    'margin-right': bullet[device + 'bullet-right-margin'],
                };
                // inner bullet
                if( !bullet['bullet-position'] ){
                    if( device ){
                        bulletAtts['bottom'] = bullet[device + 'bullet-bottom-margin']? bullet[device + 'bullet-bottom-margin']: '';
                    }else{
                        bulletAtts['custom'] = 'position: absolute; left: 0; right: 0;';
                        bulletAtts['bottom'] = bullet[device + 'bullet-bottom-margin']? bullet[device + 'bullet-bottom-margin']: '20px';
                    }
                    
                // outer bullet
                }else if( bullet['bullet-position'] == 'outer' ){
                    bulletAtts['margin-top'] = bullet[device + 'bullet-top-margin'];
                }
                ret += $.pixeSetCss(id + ' .pixe-bullet', bulletAtts);
            }
            
            if( navigation && navigation['enable-navigation'] == 'yes' ){
                if( !navigation['navigation-position'] || navigation['navigation-position'] == 'outer' || navigation['navigation-position'] == 'inner' ){
                    ret += $.pixeSetCss(id + ' .pixe-navigation', {'align-items': navigation[device + 'navigation-valignment']});
                    ret += $.pixeSetCss(id + ' .pixe-navigation .pixe-prev', {'margin-left': navigation[device + 'navigation-side-margin']});
                    ret += $.pixeSetCss(id + ' .pixe-navigation .pixe-next', {'margin-right': navigation[device + 'navigation-side-margin']});
                    ret += $.pixeSetCss(id + ' .pixe-navigation span', {'margin-top': navigation[device + 'navigation-vertical-offset']});
                }else if( navigation['navigation-position'] == 'top' ){
                    ret += $.pixeSetCss(id + ' .pixe-navigation', {
                        'justify-content': navigation[device + 'navigation-alignment'],
                        'gap': navigation[device + 'navigation-spaces'],
                        'max-width': navigation[device + 'navigation-max-width'],
                        'transform': {
                            'x': navigation[device + 'navigation-offset-x'],
                            'y': navigation[device + 'navigation-offset-y']
                        },
                        'custom': device? '':'position: absolute; left: 0; right: 0; top: 0; margin-left: auto; margin-right: auto;'
                    });
                }else if( navigation['navigation-position'] == 'bottom' ){
                    ret += $.pixeSetCss(id + ' .pixe-navigation', {
                        'justify-content': navigation[device + 'navigation-alignment'],
                        'gap': navigation[device + 'navigation-spaces'],
                        'max-width': navigation[device + 'navigation-max-width'],
                        'transform': {
                            'x': navigation[device + 'navigation-offset-x'],
                            'y': navigation[device + 'navigation-offset-y']
                        },
                        'custom': device? '':'position: absolute; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto;'
                    });
                }
            }
        }

        // add dependency
        if( !device ){
            $.pixeAddDependency(item, 'bullet', false);
            $.pixeAddDependency(item, 'navigation', false);
            if( bullet && bullet['enable-bullet'] == 'yes' && bullet['bullet-style'] ){
                $.pixeAddDependency(item, 'bullet', bullet['bullet-style']);
            }
            if( navigation && navigation['enable-navigation'] == 'yes' && navigation['navigation-style'] ){
                $.pixeAddDependency(item, 'navigation', navigation['navigation-style']);
            }
            if( navigation && navigation['enable-touch-navigation'] == 'yes' && navigation['touch-navigation-style'] ){
                $.pixeAddDependency(item, 'touch-navigation', navigation['touch-navigation-style']);
            }
        }
        
        return ret;
    }

    // image overlay
    $.pixeIsImageOverlayChanged = function(type){
        if( type.indexOf('enable-title') >= 0 || type.indexOf('enable-caption') >= 0 || type.indexOf('enable-description') >= 0 ||
            type.indexOf('enable-icon') >= 0 || type == 'icon-position' || type == 'image-icon' || type == 'video-icon' || type == 'link-icon' ){
            return true;
        }
        return false;
    }
    $.pixeSetImageOverlayAtts = function(item, overlay){
        var settings = item.data('settings');

        if( !overlay ){
            overlay = {};
        }
        
        if( !overlay ){
            delete settings['overlay-atts'];
        }else{
            var devices = ['', 'tablet-', 'mobile-'];
            var ret = {};

            for( var i in devices ){
                var device = devices[i];
                if( overlay[device + 'enable-title'] ){
                    ret['title'] = '1';
                }
                if( overlay[device + 'enable-caption'] ){
                    ret['caption'] = '1';
                }
                if( overlay[device + 'enable-description'] ){
                    ret['description'] = '1';
                }
                if( overlay[device + 'enable-icon'] ){
                    ret['icon'] = '1';
                }
            }

            if( Object.keys(ret).length ){
                settings['overlay-atts'] = ret;
            }else{
                delete settings['overlay-atts'];
            }
        }

        $.pixeAddIconDependency(item, [overlay['image-icon'], overlay['video-icon'], overlay['link-icon']]);
    }

    // image ratio
    $.pixeImageLayoutStyle = function(id, layout, device){
        if( !layout ) return '';

        var ret = '';
        var imgAtts = {
            'min-width': layout[device + 'min-width'],
            'width': layout[device + 'max-width']
        };
        var imgTagAtts = {};
        var linkAtts = {};

        // image alignment
        ret += $.pixeSetCss(id, {
            'justify-content': layout[device + 'alignment']
        });

        if( layout[device + 'max-width'] ){
            imgTagAtts['width'] = '100%';
        }

        // image ratio
        if( layout[device + 'image-ratio'] ){
            imgAtts['aspect-ratio'] = $.pixeGetAspectRatio(layout[device + 'image-ratio'], layout[device + 'custom-ratio']);
            
            if( !device ){
                if( !layout['max-width'] ){
                    imgAtts['width'] = '100%';
                } 
            }else if( device == 'tablet-' ){
                if( !layout['max-width'] && !layout['tablet-max-width'] ){
                    imgAtts['width'] = '100%';
                }
            }else if( device == 'mobile-' ){
                if( !layout['max-width'] && !layout['tablet-max-width'] && !layout['mobile-max-width'] ){
                    imgAtts['width'] = '100%';
                }
            }
            
            imgTagAtts['custom'] = 'position: absolute; width: 100%; height: 100%; object-fit: cover; ' + $.pixeGetCss('object-position', {
                'position': layout[device + 'position'],
                'pos-x': layout[device + 'pos-x'],
                'pos-y': layout[device + 'pos-y']
            });

            linkAtts = {'display': 'block', 'width': '100%', 'height': '100%'};
        }

        ret += $.pixeSetCss(id + ' .pixe-image', imgAtts);
        ret += $.pixeSetCss(id + ' .pixe-image img', imgTagAtts);
        ret += $.pixeSetCss(id + ' .pixe-image a', linkAtts);

        return ret;
    }

    // image position
    $.pixeSetImagePosition = function(container, value, type, target){
        if( ['image-pos-x', 'image-pos-y', 'image-position'].indexOf(type) == -1 ) return false;
        if( !target || !Number.isInteger(target.filter) || !Number.isInteger(target.index) ) return false;

        var image = container.find('[data-filter="' + target.filter + '"][data-index="' + target.index + '"] img');
        image.css('object-position', $.pixeGetCss('object-position', value[target.filter]['images'][target.index], false));

        return true;
    }

    // image overlay content
    $.pixeImageOverlayContentStyle = function(id, settings, device){
        var ret = '';
        var overlay = settings.overlay;
        var overlayAtts = settings['overlay-atts']? settings['overlay-atts']:{};

        if( overlay ){

            var delay = overlay['animation-delay']? parseFloat(overlay['animation-delay']): 0;
            var sequencedDelay = overlay['sequenced-animation']? 200: 0;

            // style
            ret += $.pixeSetCss(id + ' .pixe-image .pixe-overlay-content', {
                'align-items': overlay[device + 'align-x'],
                'text-align': overlay[device + 'align-x'],
                'justify-content': overlay[device + 'align-y'],
                'padding': overlay[device + 'padding']
            });

            if( overlayAtts['icon'] && !overlay['icon-position'] ){
                if( overlay[device + 'enable-icon'] ){
                    ret += $.pixeSetCss(id + ' .pixe-image .pixe-icon', {
                        'transition-delay': (delay? delay + 'ms': '')
                    });
                    if( sequencedDelay ){ delay += sequencedDelay; }
                }
            }
            if( overlayAtts['title'] ){
                if( overlay[device + 'enable-title'] ){
                    ret += $.pixeSetCss(id + ' .pixe-image .pixe-title', {
                        'display': 'block',
                        'margin-bottom': overlay[device + 'title-bottom-margin'],
                        'transition-delay': (delay? delay + 'ms': ''),
                        'custom': $.pixeGetTextColorCss(overlay, device, '', 'title-color')
                    });
                    ret += $.pixeSetCss(id + ' .pixe-image:hover .pixe-title', {
                        'margin-bottom': overlay[device + 'title-bottom-margin-hover'],
                        'custom': $.pixeGetTextColorCss(overlay, device, '-hover', 'title-color')
                    });
                    if( sequencedDelay ){ delay += sequencedDelay; }
                }else{
                    ret += $.pixeSetCss(id + ' .pixe-image .pixe-title', {'display': 'none'});
                }
            }
            if( overlayAtts['caption'] ){
                if( overlay[device + 'enable-caption'] ){
                    ret += $.pixeSetCss(id + ' .pixe-image .pixe-caption', {
                        'display': 'block',
                        'margin-bottom': overlay[device + 'caption-bottom-margin'],
                        'transition-delay': (delay? delay + 'ms': ''),
                        'custom': $.pixeGetTextColorCss(overlay, device, '', 'caption-color')
                    });
                    ret += $.pixeSetCss(id + ' .pixe-image:hover .pixe-caption', {
                        'margin-bottom': overlay['caption-bottom-margin-hover'],
                        'custom': $.pixeGetTextColorCss(overlay, device, '-hover', 'caption-color')
                    });
                    if( sequencedDelay ){ delay += sequencedDelay; }
                }else{
                    ret += $.pixeSetCss(id + ' .pixe-image .pixe-caption', {'display': 'none'});
                }
            }
            if( overlayAtts['description'] ){
                if( overlay[device + 'enable-description'] ){
                    ret += $.pixeSetCss(id + ' .pixe-image .pixe-description', {
                        'display': 'block',
                        'margin-bottom': overlay[device + 'description-bottom-margin'],
                        'transition-delay': (delay? delay + 'ms': ''),
                        'custom': $.pixeGetTextColorCss(overlay, device, '', 'description-color')
                    });
                    ret += $.pixeSetCss(id + ' .pixe-image:hover .pixe-description', {
                        'margin-bottom': overlay[device + 'description-bottom-margin-hover'],
                        'custom': $.pixeGetTextColorCss(overlay, device, '-hover', 'description-color')
                    });
                    if( sequencedDelay ){ delay += sequencedDelay; }
                }else{
                    ret += $.pixeSetCss(id + ' .pixe-image .pixe-description', {'display': 'none'});
                }
            }
            if( overlayAtts['icon'] ){
                if( overlay[device + 'enable-icon'] ){
                    ret += $.pixeSetCss(id + ' .pixe-image .pixe-icon', {
                        'display': 'block',
                        'color': overlay[device + 'icon-color'],
                        'fill': overlay[device + 'icon-color'],
                        'font-size': overlay[device + 'icon-width'],
                        'margin-bottom': overlay[device + 'icon-bottom-margin'],
                        'transition-delay': ((overlay['icon-position'] == 'bottom' && delay)? delay + 'ms': '')
                    });
                    ret += $.pixeSetCss(id + ' .pixe-image .pixe-icon.pixe-type-image, ' + id + ' .pixe-image .pixe-icon.pixe-type-svg', {
                        'width': overlay[device + 'icon-width'],
                    });
                    ret += $.pixeSetCss(id + ' .pixe-image:hover .pixe-icon', {
                        'color': overlay[device + 'icon-color-hover'],
                        'fill': overlay[device + 'icon-color-hover'],
                        'font-size': overlay[device + 'icon-width-hover'],
                        'margin-bottom': overlay[device + 'icon-bottom-margin-hover']
                    });
                    ret += $.pixeSetCss(id + ' .pixe-image:hover .pixe-icon.pixe-type-image, ' + id + ' .pixe-image:hover .pixe-icon.pixe-type-svg', {
                        'width': overlay[device + 'icon-width-hover'],
                    });
                    if( sequencedDelay && overlay['icon-position'] == 'bottom' ){ delay += sequencedDelay; }
                }else{
                    ret += $.pixeSetCss(id + ' .pixe-image .pixe-icon', {'custom': 'display: none;'});
                }
            }

            // animation
            if( overlay['animation'] ){
                ret += $.pixeHoverAnimationCss(overlay['animation'], {
                    selector: id + ' .pixe-image .pixe-overlay-content > *', 
                    hoverSelector: id + ' .pixe-image:hover .pixe-overlay-content > *',
                    duration: overlay['animation-duration']
                });
            }
         
        }

        return ret;
    }

    // image overlay style
    $.pixeImageOverlayStyle = function(id, style, device, selector){
        selector = $.extend({
            border: id + ' .pixe-image',
            borderHover: id + ' .pixe-image:hover'
        }, selector);

        var ret = '';

        if( style ){   

            // background
            ret += $.pixeSetCss(id + ' .pixe-image:before', {'background': style[device + 'overlay-color']});
            ret += $.pixeSetCss(id + ' .pixe-image:hover:before', {'background': style[device + 'overlay-color-hover']});

            // border & shadow
            ret += $.pixeSetCss(selector.border, {
                'border': style[device + 'border'],
                'shadow': style[device + 'shadow']
            });
            ret += $.pixeSetCss(selector.borderHover, {
                'border': style[device + 'border-hover'],
                'shadow': style[device + 'shadow-hover']
            });
            
            // filter
            ret += $.pixeSetCss(id + ' .pixe-image img', {'filter': style[device + 'filter']});
            ret += $.pixeSetCss(id + ' .pixe-image:hover img', {'filter': style[device + 'filter-hover']});
        }

        return ret;
    }
    
    // visual the image overlay typo
    $.pixeImageOverlayTypoStyle = function(container, id, overlayTypo, device){
        var ret = '';
        overlayTypo = overlayTypo? overlayTypo: {};

        // preview typo
        if( !device ){
            $.pixeTypoStyle.setPresetData(container.find('.pixe-overlay-content .pixe-title'), overlayTypo.title);
            $.pixeTypoStyle.setPresetData(container.find('.pixe-overlay-content .pixe-caption'), overlayTypo.caption);
            $.pixeTypoStyle.setPresetData(container.find('.pixe-overlay-content .pixe-description'), overlayTypo.description);
        }

        // typo custom css
        if( overlayTypo ){
            ret += $.pixeSetCss(id + ' .pixe-overlay-content .pixe-title', {'custom': $.pixeTypoStyle.getPresetCss(overlayTypo.title, device)});
            ret += $.pixeSetCss(id + ' .pixe-overlay-content .pixe-caption', {'custom': $.pixeTypoStyle.getPresetCss(overlayTypo.caption, device)});
            ret += $.pixeSetCss(id + ' .pixe-overlay-content .pixe-description', {'custom': $.pixeTypoStyle.getPresetCss(overlayTypo.description, device)});
        }

        return ret;
    }

    // individual image settings
    $.pixeEditGalleryImage = function(button, item){
        var itemHistory = new $.pixeEditHistory(item);
        var settings = item.data('settings');
        var image = button.closest('.pixe-image');
        var filter = image.data('filter');
        var index = image.data('index');
        var imageData = settings.gallery[filter]['images'][index];

        new $.pixeStyleSelector({
            obj: { '': imageData },
            slug: '',
            type: 'image-settings',
            target: button,
            targetArea: image,
            onChange: function(value, type){
                var action = 'image-' + type;
                itemHistory.onChange('gallery', action);
                image.find('img').css('object-position', $.pixeGetCss('object-position', imageData, false));
            }
        });
    }

    // filter button settings
    $.pixeGetFilterButtonSettings = function(item, callback){
        var content = $('<div class="pixe-ssettings" ></div>');
        var settings = item.data('settings');

        var html = '';
        html += $.pixeGetAdminIcon('option-filter', { class: 'pixe-action', data: 'data-action="filter"' });
        html += $.pixeGetAdminIcon('option-bar', { class: 'pixe-action', data: 'data-action="bar"' });
        html += $.pixeGetAdminIcon('option-spaces', { class: 'pixe-action', data: 'data-action="spaces"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="style"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        html += $.pixeGetAdminIcon('option-tag', { class: 'pixe-action', data: 'data-action="tag"' });
        html += '<div class="pixe-action" data-action="color" ><div class="pixe-color-display" ></div></div>';
        html += '<div class="pixe-divider" ></div>';
        html += '<div class="pixe-action pixe-svg-preset pixe-svg-settings" data-action="settings" ></div>';
        content.append(html);

        $.pixeSetColorDisplay(content, settings['filter-text-color']);

        content.on('click', '[data-action]', function(){
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);
            settings = item.data('settings');
            
            if( action == 'settings' ){
                $.pixeEditor.setEditTarget(item, ['styling', 'filter-settings']);

            }else if( action == 'tag' ){
                var inlineSlug = 'filter-tag';
                $.pixeInlinePopup({
                    target: button,
                    position: false,
                    targetAreaPos: ['bottom-center'],
                    options: 'tag',
                    values: { tag: settings[inlineSlug] },
                    onChange: function(slug, value){
                        $.pixeSetData(settings, inlineSlug, value);
                        itemHistory.onChange(inlineSlug);

                        callback(item, inlineSlug, slug);
                    }
                });
                
            }else{

                var ssType, ssSlug, ssTitle;
                if( action == 'filter' ){
                    ssType = 'filter-settings';
                    ssSlug = 'filter';
                }else if( action == 'bar' ){
                    ssType = 'filter-bar-settings';
                    ssSlug = 'filter-bar';
                }else if( action == 'spaces' ){
                    ssType = 'filter-spacing';
                    ssSlug = 'filter-spacing'
                }else if( action == 'style' ){
                    ssType = 'filter-bar-style';
                    ssSlug = 'filter-color';
                }else if( action == 'typo' ){
                    ssType = 'typography';
                    ssSlug = 'filter-typo';
                }else if( action == 'color' ){
                    ssType = 'button-text-color';
                    ssSlug = 'filter-text-color';
                }

                new $.pixeStyleSelector({
                    obj: settings,
                    slug: ssSlug,
                    title: ssTitle,
                    target: button,
                    position: false,
                    targetAreaPos: ['bottom-center'],
                    type: ssType,
                    onChange: function(value, type){
                        if( action == 'color' ){ $.pixeSetColorDisplay(content, settings['filter-text-color']); }
                        
                        itemHistory.onChange(ssSlug);
                        callback(item, ssSlug, type);
                    }
                });

            }
        });
        return content;
    }

    // featured image
    $.pixeRegisterElementRenderer('post-featured-image', pixeRenderFeaturedImage);
    function pixeRenderFeaturedImage(item, type, subtype){
        var settings = item.data('settings');
        var container = item.children('.pixe-item-content');
        var renderHtml = false; 

        // update image via ajax request
        switch(type){
            case 'item':
                renderHtml = true;

                // bind settings
                item.addClass('pixe-type-flex');
                if( !item.data('preview') ){
                    container.off().on('click', '.pixe-image', function(){
                        settings = item.data('settings');

                        new $.pixeStyleSettings({
                            target: $(this),
                            content: pixeGetFeaturedImageSettings(item)
                        });
                    });
                }
                break;

            case 'layout':
                if( subtype == 'image-size' ){
                    renderHtml = true;
                }
                break;

            case 'link':
                renderHtml = true;
                break;

        }

        // render style
        pixeSetFeaturedImageStyle(item);

        // render html
        if( renderHtml ){

            // empty container
            container.empty();

            var html = $('<div class="pixe-image" ></div>');
                html.append('<img src="' + pixeData.imgDir + 'featured-image.webp" />');
            container.append(html);

            // replace image if exists
            if( pixeData.type == 'post' && pixeData.id ){
                $.pixeItem.renderAjax(item, container, {
                    onEmpty: function(){
                        // do nothing
                    }
                });
            }
        }
    }
    function pixeGetFeaturedImageSettings(item){
        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-crop', { class: 'pixe-action', data: 'data-action="layout"' });
        html += $.pixeGetAdminIcon('option-overlay', { class: 'pixe-action', data: 'data-action="overlay"' });
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="color"' });
        html += $.pixeGetAdminIcon('option-link', { class: 'pixe-action', data: 'data-action="link"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);
            
            var ssType, ssSlug;
            if( action == 'layout' ){
                ssType = 'image-layout';
                ssSlug = 'layout';
            }else if( action == 'overlay' ){
                ssType = 'image-overlay';
                ssSlug = 'overlay';
            }else if( action == 'color' ){
                ssType = 'image-style';
                ssSlug = 'style';
            }else if( action == 'link' ){
                ssType = 'image-link';
                ssSlug = 'link';
            }else if( action == 'typo' ){
                ssSlug = 'overlay-typo';
                ssType = 'image-overlay-typography';
            }

            new $.pixeStyleSelector({
                obj: settings,
                slug: ssSlug,
                target: button, 
                targetArea: item.children('.pixe-item-content'),
                type: ssType,
                onChange: function(value, type){
                    itemHistory.onChange(ssSlug);
                    pixeRenderFeaturedImage(item, ssSlug, type);
                }
            });
                    
        });

        return content;
    }
    function pixeSetFeaturedImageStyle(item){
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';

        var link = settings['link']? settings['link']: {};
        var layout = settings['layout']? settings['layout']: {};
        var overlayTypo = settings['overlay-typo']? settings['overlay-typo']: {};

        if( layout['image-ratio'] || layout['tablet-image-ratio'] || layout['mobile-image-ratio'] ){
            item.addClass('pixe-custom-ratio');
        }else{
            item.removeClass('pixe-custom-ratio');
        }

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

            // image layout
            ret += $.pixeImageLayoutStyle(id, settings['layout'], device);
            
            // overlay content
            ret += $.pixeImageOverlayContentStyle(id, settings, device);
            
            // overlay typo
            ret += $.pixeImageOverlayTypoStyle(item, id, overlayTypo, device);

            // style
            ret += $.pixeImageOverlayStyle(id, settings.style, device);

            return ret;
        }

        // typo dependency
        $.pixeAddTypoDependency(item, [overlayTypo.title, overlayTypo.caption, overlayTypo.description]);

        css += getCss('');
        tabletCss += getCss('tablet-');
        mobileCss += getCss('mobile-');

        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');

        $.pixeItem.renderCss(item);

        // lightbox dependency
        $.pixeAddLightboxDependency(item, link['link-to'], 'image-lb');
        $.pixeAddPopupDependency(item, link['link-to'], link['popup']);
    }

    // map
    $.pixeRegisterElementRenderer('google-map', pixeRenderGoogleMap);
    function pixeRenderGoogleMap(item, type, subtype){
        var container = item.children('.pixe-item-content');
        var settings = item.data('settings');

        function getHtml(){
            var mapData = $.extend({}, settings.map, settings.style);
            var html = $('<div class="pixe-map" ></div>');
            html.append($.pixeGetMap(mapData));
            container.empty().append(html);
        }

        switch(type){
            case 'item':
                getHtml();
                container.off().on('click', function(){
                    new $.pixeStyleSettings({
                        target: $(this),
                        content: pixeGetMapSettings(item)
                    });
                });
                break;
            
            case 'map':
                getHtml();
                break; 

            case 'style':
                if( subtype == 'height' ){
                    getHtml();
                }
                break;
        }

        var id = '[data-id="' + settings._id + '"]';
        var css = $.pixeSetCss(id + ' iframe', { filters: settings.style });

        $.pixeAddCss(item, 'item',  css);
        $.pixeItem.renderCss(item);
    }
    function pixeGetMapSettings(item){
        
        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-location', { class: 'pixe-action', data: 'data-action="map"' });
        html += $.pixeGetAdminIcon('option-image', { class: 'pixe-action', data: 'data-action="style"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);
            var ssType, ssSlug;
            var debounceRender = $.pixeDebounce(function(i, j, k){
                pixeRenderGoogleMap(i, j, k);
            });

            switch(action){
                case 'map':
                    ssSlug = 'map';
                    ssType = 'google-map-settings';
                    break;
                case 'style':
                    ssSlug = 'style';
                    ssType = 'google-map-style';
                    break;
            }

            new $.pixeStyleSelector({
                obj: settings,
                slug: ssSlug,
                target: button, 
                targetArea: item.children('.pixe-item-content'),
                type: ssType,
                onChange: function(value, type){
                    itemHistory.onChange(ssSlug);
                    debounceRender(item, ssSlug, type);
                }
            });
        });

        return content;
    }

    // video
    $.pixeRegisterElementRenderer('video', pixeRenderVideo);
    function pixeRenderVideo(item, type, subtype){
        var container = item.children('.pixe-item-content');
        var settings = item.data('settings');

        function getVideo(){
            var video = settings.video? settings.video: {};
            var videoAtts = {
                loop: video['loop'],
                muted: video['muted'],
                autoplay: video['autoplay'],
                startTime: video['start-time'],
                endTime: video['end-time']
            };
            var html = $('<div class="pixe-video" ></div>');

            if( !video.type ){
                if( video.url ){
                    html.append($.pixeGetVideo(video.url, videoAtts));
                }
            }else{
                if( video.upload && video.upload.url ){
                    html.append($.pixeGetHtml5Video(video.upload.url, videoAtts));
                }
            }

            if( !html.children().length ){
                html.append($.pixeGetItemPreviewArea('Please select or upload a video you want to display.', '', 'pixe-small'));
            }

            container.empty();
            
            if( html ){
                container.append(html);
                getOverlay();
            }
            
            // iframe api ( start - end time )
            $.pixeVideo.initMedia(html);
            $.pixeAddDependency(item, 'video-js');
        }
        function getOverlay(){
            var video =  container.children('.pixe-video');
            video.children('.pixe-overlay-background').remove();
            
            var overlay = settings.overlay? settings.overlay: {};
            var image = overlay.image? overlay.image: {};
            var icon = overlay.icon? overlay.icon: {};
            var html;
            if( image.image || icon.icon ){
                html = $('<div class="pixe-overlay-background" ></div>');
                
                if( icon.icon ){
                    html.append($.pixeGetIcon(icon.icon));
                }
            }

            if( html ){
                video.append(html);
            }
        }

        switch(type){
            case 'item':
                getVideo();
                container.off().on('click', function(){
                    new $.pixeStyleSettings({
                        target: $(this),
                        content: pixeGetVideoSettings(item)
                    });
                });
                break;
            case 'video':
                getVideo();
                break;
            case 'overlay':
                getOverlay();
                break;
        }

        pixeSetVideoStyle(item);
    }
    function pixeGetVideoSettings(item){

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-video', { class: 'pixe-action', data: 'data-action="video"' });
        html += $.pixeGetAdminIcon('option-image', { class: 'pixe-action', data: 'data-action="image"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="color"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);
            var debounceRender = $.pixeDebounce(function(i, j, k){
                pixeRenderVideo(i, j, k);
            });
            var ssType, ssSlug;
            
            switch(action){
                case 'video':
                    ssSlug = 'video';
                    ssType = 'video-settings';
                    break;
                case 'image':
                    ssSlug = 'overlay';
                    ssType = 'video-overlay-settings';
                    break;
                case 'color':
                    ssSlug = 'background';
                    ssType = 'video-background-settings';
                    break;
            }

            new $.pixeStyleSelector({
                obj: settings,
                slug: ssSlug,
                target: button, 
                targetArea: item.children('.pixe-item-content'),
                type: ssType,
                onChange: function(value, type){
                    itemHistory.onChange(ssSlug);

                    if( ssSlug == 'video' ){
                        debounceRender(item, ssSlug, type);
                    }else{
                        pixeRenderVideo(item, ssSlug, type);
                    }
                    
                }
            });
        });

        return content;
    }
    function pixeSetVideoStyle(item){
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';
        var background = settings.background? settings.background: {};

        function layoutCss(device = ''){
            var overlay = settings.overlay? settings.overlay: {};
            var imageOverlay = overlay[device + 'image']? overlay[device + 'image']: {};
            var iconOverlay = overlay[device + 'icon']? overlay[device + 'icon']: {};
            
            var ret = '';

            // bg style
            ret += $.pixeSetCss(id + ' .pixe-video', {
                'border': background[device + 'border'],
                'shadow': background[device + 'shadow'],
                'mask': background[device + 'mask']
            });
            ret += $.pixeSetCss(id + ' .pixe-video:hover', {
                'border': background[device + 'border-hover'],
                'shadow': background[device + 'shadow-hover'],
                'mask': background[device + 'mask-hover']
            });
            ret += $.pixeSetCss(id + ' .pixe-overlay-background', {
                'background-image': imageOverlay['image'],
                'background-position': imageOverlay,
                'background-size': imageOverlay,
                'background-repeat': imageOverlay['repeat'],
            });
            ret += $.pixeSetCss(id + ' .pixe-overlay-background .pixe-icon', {
                'width': iconOverlay['image'],
                'font-size': iconOverlay['width'],
                'color': iconOverlay['color']
            });
            ret += $.pixeSetCss(id + ' .pixe-overlay-background .pixe-icon svg', {
                'color': iconOverlay['color']
            });

            return ret;
        }

        css += layoutCss();
        tabletCss += layoutCss('tablet-');
        mobileCss += layoutCss('mobile-');

        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');

        $.pixeItem.renderCss(item);
    }

    // image
    $.pixeRegisterElementRenderer('image', pixeRenderImage);
    function pixeRenderImage(item, type, subtype){
        var container = item.children('.pixe-item-content');
        var settings = item.data('settings');
        var renderHtml = false; 

        switch(type){
            case 'item':
                renderHtml = true;

                item.addClass('pixe-type-flex');
                if( !item.data('preview') ){
                    container.off().on('click', '.pixe-image', function(){
                        new $.pixeStyleSettings({
                            target: $(this),
                            content: pixeGetImageSettings(item)
                        });
                    });
                }
                break;

            case 'image':
            case 'link':
                renderHtml = true;
                break;

            case 'layout':
                if( !subtype || subtype == 'image-size' ){ renderHtml = true; }
                break;
            
            case 'overlay':
                if( $.pixeIsImageOverlayChanged(subtype) ){ 
                    $.pixeSetImageOverlayAtts(item, settings['overlay']); 
                    renderHtml = true;
                }
                break;
        }

        // render style
        pixeSetImageStyle(item);

        // render html 
        if( renderHtml ){

            // empty image
            if( !settings.image ){
                container.empty();
                container.append('<div class="pixe-image pixe-image-empty" ></div>');

            // render ajax
            }else{
                $.pixeItem.renderAjax(item, container);
            }
        }
    }
    function pixeSetImageStyle(item){
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';
        var link = settings['link']? settings['link']: {};
        var overlayTypo = settings['overlay-typo']? settings['overlay-typo']: {};

        function layoutCss(device = ''){
            var ret = '';

            // image spacing
            ret += $.pixeSetCss(id + ' .pixe-image', {
                'margin': settings['spacing']? settings['spacing'][device + 'margin']: ''
            });

            // image layout
            ret += $.pixeImageLayoutStyle(id, settings['layout'], device);
            
            // overlay content
            ret += $.pixeImageOverlayContentStyle(id, settings, device);
            
            // overlay typo
            ret += $.pixeImageOverlayTypoStyle(item, id, overlayTypo, device);
            
            // style
            ret += $.pixeImageOverlayStyle(id, settings.style, device);
            
            return ret;
        }

        // typo dependency
        $.pixeAddTypoDependency(item, [overlayTypo.title, overlayTypo.caption, overlayTypo.description]);

        css += layoutCss();
        tabletCss += layoutCss('tablet-');
        mobileCss += layoutCss('mobile-');

        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');

        // lightbox dependency
        $.pixeAddLightboxDependency(item, link['link-to'], 'none');
        $.pixeAddPopupDependency(item, link['link-to'], link['popup']);

        $.pixeItem.renderCss(item);
    }
    function pixeGetImageSettings(item){
        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-image', { class: 'pixe-action', data: 'data-action="image"' });
        html += $.pixeGetAdminIcon('option-crop', { class: 'pixe-action', data: 'data-action="layout"' });
        html += $.pixeGetAdminIcon('option-spaces', { class: 'pixe-action', data: 'data-action="spaces"' });
        html += $.pixeGetAdminIcon('option-overlay', { class: 'pixe-action', data: 'data-action="overlay"' });
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="color"' });
        html += $.pixeGetAdminIcon('option-link', { class: 'pixe-action', data: 'data-action="link"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);

            var ssType, ssSlug;
            if( action == 'image' ){
                ssType = 'image';
                ssSlug = false;
            }else if( action == 'spaces' ){
                ssType = 'margin';
                ssSlug = 'spacing';
            }else if( action == 'layout' ){
                ssType = 'single-image-layout';
                ssSlug = 'layout';
            }else if( action == 'overlay' ){
                ssType = 'image-overlay';
                ssSlug = 'overlay';
            }else if( action == 'color' ){
                ssType = 'image-style';
                ssSlug = 'style';
            }else if( action == 'link' ){
                ssType = 'image-link';
                ssSlug = 'link';
            }else if( action == 'typo' ){
                ssSlug = 'overlay-typo';
                ssType = 'image-overlay-typography';
            }

            new $.pixeStyleSelector({
                obj: settings,
                slug: ssSlug,
                target: button, 
                targetArea: item.children('.pixe-item-content'),
                type: ssType,
                onChange: function(value, type){
                    if( !ssSlug ){
                        itemHistory.onChange(type);
                        pixeRenderImage(item, type);
                    }else{
                        itemHistory.onChange(ssSlug);
                        pixeRenderImage(item, ssSlug, type);
                    }
                    
                }
            });
                    
        });

        return content;
    }

    // gallery
    $.pixeRegisterElementRenderer('gallery', pixeRenderGallery);
    function pixeRenderGallery(item, type, subtype){
        var container = item.children('.pixe-item-content');
        var settings = item.data('settings');
        var renderHtml = false;

        switch(type){
            case 'item':
                renderHtml = true;
                if( item.data('preview') ) break; 

                container.off().on('click', function(e){
                    var target = $(e.target);
        
                    // extra settings
                    if( target.hasClass('pixe-extra-settings') ){
        
                        // filter
                        if( target.closest('.pixe-item-gallery-filter').length ){
                            var filter = target.closest('.pixe-item-gallery-filter');
                            new $.pixeStyleSettings({
                                popupPosition: 'top-center',
                                target: target,
                                content: $.pixeGetFilterButtonSettings(item, pixeRenderGallery)
                            });
        
                        // image
                        }else{
                            $.pixeEditGalleryImage(target, item);
                        }
        
                    // gallery settings
                    }else if( !target.is('[data-filter]') ){
                        var gallery = container.children('.pixe-item-gallery-images');
                        if( gallery.length ){
                            new $.pixeStyleSettings({
                                target: container,
                                targetArea: gallery,
                                content: pixeGetGallerySettings(item)
                            });
                        }
                    }
                });
                break;

            case 'gallery':
            case 'link':
            case 'filter-tag':
                renderHtml = true;
                break;

            case 'pagination':
                var notRenderGroup = ['pagination-alignment', 'pagination-top-margin'];
                if( subtype && notRenderGroup.indexOf(subtype) == -1 ){
                    renderHtml = true;
                }
                break;

            case 'layout':
                var renderGroup = ['alignment', 'image-size', 'column', 'mobile-column', 'tablet-column', 'random'];
                if( !subtype || renderGroup.indexOf(subtype) != -1 ){
                    renderHtml = true;
                }else if( ['image-height', 'tablet-image-height', 'mobile-image-height'].indexOf(subtype) != -1 ){
                    item.children('.pixe-item-content').children('.pixe-item-gallery-images').trigger('changeheight');
                }
                break;
  
            case 'overlay':
                if( $.pixeIsImageOverlayChanged(subtype) ){ 
                    $.pixeSetImageOverlayAtts(item, settings['overlay']); 
                    renderHtml = true;
                }
                break;

            case 'filter': 
                if( !subtype || subtype == 'all' ){
                    renderHtml = true;
                }
                break;
        }

        // render ajax 
        if( renderHtml ){
            
            // empty gallery
            if( !settings.gallery ){
                var gallery = $('<div class="pixe-item-gallery-images pixe-grid" ></div>');
                for( var i = 0; i < 8; i++ ){
                    gallery.append('<div class="pixe-grid-item pixe-image-empty"></div>');
                }

                container.empty().append(gallery);
                pixeSetGalleryStyle(item);

            // render ajax
            }else{
                $.pixeItem.renderAjax(item, container, {
                    onUpdate: function(){
                        // filter settings
                        if( !item.data('preview') ){
                            var filter = container.children('.pixe-item-gallery-filter');
                            if( filter.length ){
                                filter.append('<div class="pixe-extra-settings" ></div>');
                            }
                        }
                        
                        // gallery style & script
                        pixeSetGalleryStyle(item);
                        pixeSetGalleryScript(item);
                    }
                });
            }
        }else{
            pixeSetGalleryStyle(item);
        }
    }
    function pixeSetGalleryScript(item){
        var settings = item.data('settings');
        
        var gallery = item.children('.pixe-item-content').children('.pixe-item-gallery-images');
        new $.pixeGalleryLayout(gallery);

        // dependency
        $.pixeAddDependency(item, 'lightbox');
        $.pixeAddDependency(item, 'masonry', (settings.layout && settings.layout.alignment == 'masonry'));
        $.pixeAddDependency(item, 'justified', (settings.layout && settings.layout.alignment == 'justified'));

        // pagination dependency
        if( settings['pagination'] && settings['pagination']['enable-pagination'] && settings['pagination']['pagination-style'] ){
            $.pixeAddDependency(item, 'button_controls');
            $.pixeAddDependency(item, 'pagination', settings['pagination']['pagination-style']);
        }else{
            $.pixeAddDependency(item, 'button_controls', false);
            $.pixeAddDependency(item, 'pagination', false);
        }
    }
    function pixeGetGallerySettings(item){

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-gallery', { class: 'pixe-action', data: 'data-action="gallery"' });
        html += $.pixeGetAdminIcon('option-layout', { class: 'pixe-action', data: 'data-action="layout"' });
        html += $.pixeGetAdminIcon('option-controls', { class: 'pixe-action', data: 'data-action="controls"' });
        html += $.pixeGetAdminIcon('option-overlay', { class: 'pixe-action', data: 'data-action="overlay"' });
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="color"' });
        html += $.pixeGetAdminIcon('option-link', { class: 'pixe-action', data: 'data-action="link"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);

            if( action == 'gallery' ){
                new $.pixeStyleSelector({
                    obj: settings,
                    slug: 'gallery',
                    target: button, 
                    targetArea: item.children('.pixe-item-content'),
                    type: 'gallery',
                    'gallery-filter': true,
                    onChange: function(value, type, target){
                        itemHistory.onChange('gallery', type);
                        if( !$.pixeSetImagePosition(item, value, type, target) ){
                            pixeRenderGallery(item, 'gallery', type);
                        }
                    }
                });
            }else{
                var ssType, ssSlug;
                if( action == 'layout' ){
                    ssType = 'gallery-layout';
                    ssSlug = 'layout';
                }else if( action == 'controls' ){
                    ssType = 'pagination';
                    ssSlug = 'pagination';
                }else if( action == 'overlay' ){
                    ssType = 'image-overlay';
                    ssSlug = 'overlay';
                }else if( action == 'color' ){
                    ssType = 'image-style';
                    ssSlug = 'style';
                }else if( action == 'link' ){
                    ssType = 'gallery-link';
                    ssSlug = 'link';
                }else if( action == 'typo' ){
                    ssSlug = 'overlay-typo';
                    ssType = 'image-overlay-typography';
                }

                new $.pixeStyleSelector({
                    obj: settings,
                    slug: ssSlug,
                    target: button,
                    targetArea: item.children('.pixe-item-content'), 
                    type: ssType,
                    onChange: function(value, type){
                        itemHistory.onChange(ssSlug);
                        pixeRenderGallery(item, ssSlug, type);
                    }
                });
            }
        });

        return content;
    }
    function pixeSetGalleryStyle(item){
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';
        var gallery = item.children('.pixe-item-content').children('.pixe-item-gallery-images');
        var filter = gallery.siblings('.pixe-item-gallery-filter');
        
        var layout = settings.layout? settings.layout: {};
        var pagination = settings.pagination? settings.pagination: {};
        var overlayTypo = settings['overlay-typo']? settings['overlay-typo']: {};

        function layoutCss(device = ''){
            var ret = '';
            
            // grid
            if( !layout.alignment ){
                // column & gap
                ret += $.pixeSetCss(id, {
                    '--pixe--col': layout[device + 'column'],
                    '--pixe--gap': layout[device + 'space']
                });

                if( !device ){
                    ret += $.pixeSetCss(id + ' .pixe-image img', {'custom': 'width: 100%; height: 100%; object-fit: cover;'});
                }
                
                // ratio
                if( layout[device + 'image-ratio'] ){
                    var ratio = $.pixeGetAspectRatio(layout[device + 'image-ratio'], layout[device + 'custom-ratio']);
                    ret += $.pixeSetCss(id + ' .pixe-image', {'aspect-ratio': ratio});
                    ret += $.pixeSetCss(id + ' .pixe-image img', {'custom': 'position: absolute;'});
                }
            
            // grid raw
            }else if( layout.alignment == 'grid-raw' ){
                ret += $.pixeSetCss(id, {
                    '--pixe--col': layout[device + 'column'],
                    '--pixe--gap': layout[device + 'space']
                });
                if( !device ){
                    ret += $.pixeSetCss(id + ' .pixe-item-gallery-images', {
                        'align-items': layout['align-y']? layout['align-y']: 'flex-start'
                    });
                }
            
            // masonry
            }else if( layout.alignment == 'masonry' ){
                if( layout[device + 'column'] ){
                    gallery.attr('data-' + device + 'col', layout[device + 'column']);
                }
                ret += $.pixeSetCss(id + ' .pixe-grid', {
                    '--pixe--col': layout[device + 'column'],
                    '--pixe--gap': layout[device + 'space']
                });

            // justified
            }else if( layout.alignment == 'justified' ){
                var imageHeight = layout[device + 'image-height'];
                if( !device && !imageHeight ){
                    imageHeight = '375px';
                }

                ret += $.pixeSetCss(id, {'--pixe--gap': layout[device + 'space']});
                ret += $.pixeSetCss(id + ' .pixe-justified-row', {'height': imageHeight});
            }

            // overlay
            ret += $.pixeImageOverlayContentStyle(id, settings, device);

            // overlay typo
            ret += $.pixeImageOverlayTypoStyle(item, id, overlayTypo, device);

            // style
            ret += $.pixeImageOverlayStyle(id, settings.style, device);

            // filter style
            ret += $.pixeGetFilterButtonCss(item, filter, device);

            // pagination
            ret += $.pixeSetCss(id + ' .pixe-pagination', {
                'justify-content': pagination[device + 'pagination-alignment'],
                'margin-top': pagination[device + 'pagination-top-margin'],
            });

            return ret;
        }

        // typo dependency
        $.pixeAddTypoDependency(item, [overlayTypo.title, overlayTypo.caption, overlayTypo.description, settings['filter-typo']]);

        css += layoutCss();
        tabletCss += layoutCss('tablet-');
        mobileCss += layoutCss('mobile-');

        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');

        $.pixeItem.renderCss(item);
    }

})(jQuery);	
