(function($){
    "use strict";

    // post categories
    $.pixeRegisterElementRenderer('post-categories', pixeRenderPostCategories);
    function pixeRenderPostCategories(item, type, subtype){
        var container = item.children('.pixe-item-content');
        var renderHtml = false; 

        function setIconDependency(){
            var icons = [];
            var settings = item.data('settings');
            if( settings.icon ){
                icons.push(settings.icon.icon);
            }

            $.pixeAddIconDependency(item, icons);
        }
        
        switch(type){
            case 'item':
                renderHtml = true;

                // bind settings
                if( !item.data('preview') ){
                    container.off().on('click', function(){
                        new $.pixeStyleSettings({
                            target: $(this),
                            content: pixeGetPostCategoriesSettings(item)
                        });
                    });
                    setIconDependency();
                }
                break;
            case 'link': 
                renderHtml = true;
                break;

            case 'taxonomy':
                if( subtype == 'limit' ){
                    renderHtml = true;
                }
                break;

            case 'separator':
                if( subtype == 'type' ){
                    renderHtml = true;
                }
                break;

            case 'icon':
                if( subtype == 'icon' ){
                    renderHtml = true;
                    setIconDependency();
                }else if( subtype == 'position' ){
                    renderHtml = true;
                }
                break;

            case 'format':
            case 'custom-format':
                renderHtml = true;
                break;
        }
        
        // style
        pixeSetPostCategoriesStyle(item);

        // render html
        if( renderHtml ){
            $.pixeItem.renderAjax(item, container);
        }
    }   
    function pixeGetPostCategoriesSettings(item){
        var settings = item.data('settings');

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-icon', { class: 'pixe-action', data: 'data-action="icon"' });
        html += $.pixeGetAdminIcon('option-border', { class: 'pixe-action', data: 'data-action="border"' });
        html += $.pixeGetAdminIcon('option-separator', { class: 'pixe-action', data: 'data-action="sep"' });
        html += $.pixeGetAdminIcon('option-price', { class: 'pixe-action', data: 'data-action="tag"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('option-align-left', { class: 'pixe-action', data: 'data-action="alignment"' });
        html += $.pixeGetAdminIcon('option-link', { class: 'pixe-action', data: 'data-action="link"' });
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        html += '<div class="pixe-action" data-action="color" ><div class="pixe-color-display" ></div></div>';
        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
        $.pixeSetColorDisplay(content, settings['text-color']);

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

            var ssType, ssSlug;
            if( action == 'alignment' ){
                var inlineSlug = 'alignment';
                $.pixeInlinePopup({
                    target: button,
                    options: 'alignment',
                    values: { alignment: settings[inlineSlug] },
                    onChange: function(slug, value){
                        $.pixeSetData(settings, inlineSlug, value);
                        itemHistory.onChange(inlineSlug);
                        pixeSetPostCategoriesStyle(item);
                    }
                });
            }else{
                if( action == 'typo' ){
                    ssSlug = 'typo';
                    ssType = 'typography';
                }else if( action == 'icon' ){
                    ssSlug = 'icon';
                    ssType = 'link-icon';
                }else if( action == 'border' ){
                    ssSlug = 'background';
                    ssType = 'detail-background';
                }else if( action == 'color' ){
                    ssSlug = 'text-color';
                    ssType = 'link-color';
                }else if( action == 'tag'){
                    ssSlug = 'taxonomy';
                    ssType = 'taxonomy-selector';
                }else if( action == 'sep' ){
                    ssSlug = 'separator';
                    ssType = 'separator';
                }else if( action == 'link' ){
                    ssSlug = 'link';
                    ssType = 'taxonomy-link';
                }
    
                new $.pixeStyleSelector({
                    obj: settings,
                    slug: ssSlug,
                    target: button, 
                    targetArea: item.children('.pixe-item-content'),
                    type: ssType,
                    onChange: function(value, type){
                        if( ssSlug == 'text-color' ){ $.pixeSetColorDisplay(content, settings['text-color']); }

                        itemHistory.onChange(ssSlug);
                        pixeRenderPostCategories(item, ssSlug, type)
                    }
                });
            } 
        });

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

        function getCss(device = ''){
            var ret = '';
            var iconData = settings['icon']? settings['icon']: {};
            var background = settings['background']? settings['background']: {};
            var separator = settings['separator']? settings['separator']: {};
            
            ret += $.pixeSetCss(id + ' .pixe-detail', {
                'justify-content': settings[device + 'alignment'],
                'gap': iconData[device + 'gap']
            });
            ret += $.pixeSetIconCss({
                selector: id + ' .pixe-icon',
                icon: iconData
            }, device);

            // text type
            if( !separator.type ){
                ret += $.pixeSetCss(id + ' .pixe-inline', {
                    'padding': background['padding'],
                    'margin': background['margin'],
                    'background': background['color'],
                    'border':{
                        'width': background['border-width'],
                        'style': background['border-style'],
                        'color': background['border-color'],
                        'radius': background['border-radius']
                    }
                });
                ret += $.pixeSetCss(id + ' .pixe-inline, .pixe-item' + id + ' a', {
                    'custom': $.pixeGetTextColorCss(settings['text-color'], device)
                });
                ret += $.pixeSetCss('.pixe-item' + id + ' a:hover', {
                    'custom': $.pixeGetTextColorCss(settings['text-color'], device, '-hover')
                });
            
            // block type
            }else{
                ret += $.pixeSetCss('.pixe-item' + id + ' a', {
                    'padding': background['padding'],
                    'margin': background['margin'],
                    'background': background['color'],
                    'border':{
                        'width': background['border-width'],
                        'style': background['border-style'],
                        'color': background['border-color'],
                        'radius': background['border-radius']
                    },
                    'custom': $.pixeGetTextColorCss(settings['text-color'], device)
                });
                ret += $.pixeSetCss('.pixe-item' + id + ' a:hover', {
                    'custom': $.pixeGetTextColorCss(settings['text-color'], device, '-hover')
                });

                if( separator.type == 'divider' ){
                    ret += $.pixeSetCss(id + ' .pixe-sep', {
                        'border-color': separator[device + 'color'],
                        'border-left-width': separator[device + 'width'],
                        'height': separator[device + 'height'],
                        'transform': { rotate: separator[device + 'rotate'] }
                    });
                }else if( separator.type == 'dot' ){
                    ret += $.pixeSetCss(id + ' .pixe-sep', {
                        'background-color': separator[device + 'color'],
                        'width': separator[device + 'size'],
                        'height': separator[device + 'size'],
                        'align-self': separator[device + 'alignment']
                    });
                } 
            }

            // typo
            ret += $.pixeSetCss(id + ' .pixe-detail', {'custom': $.pixeTypoStyle.getPresetCss(settings.typo, device)});

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

        // set typo
        $.pixeTypoStyle.setPresetData(item.find('.pixe-detail'), settings.typo);
        $.pixeAddTypoDependency(item, [settings.typo]);

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

        $.pixeItem.renderCss(item);
    }

    // post date
    $.pixeRegisterElementRenderer('post-date', pixeRenderPostDate);
    $.pixeRegisterElementRenderer('post-modified-date', pixeRenderPostDate);
    $.pixeRegisterElementRenderer('current-date', pixeRenderPostDate);
    $.pixeRegisterElementRenderer('post-time', pixeRenderPostDate);
    $.pixeRegisterElementRenderer('current-time', pixeRenderPostDate);
    function pixeRenderPostDate(item, type, subtype){
        var container = item.children('.pixe-item-content');
        var renderHtml = false; 

        function setIconDependency(){
            var icons = [];
            var settings = item.data('settings');
            if( settings.icon ){
                icons.push(settings.icon.icon);
            }

            $.pixeAddIconDependency(item, icons);
        }

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

                // bind settings
                if( !item.data('preview') ){
                    container.off().on('click', function(){
                        new $.pixeStyleSettings({
                            target: $(this),
                            content: pixeGetPostDateSettings(item)
                        });
                    });
                    setIconDependency();
                }
                break;
            
            case 'date-link':
                renderHtml = true;
                break;

            case 'icon':
                if( subtype == 'icon' ){
                    renderHtml = true;
                    setIconDependency();
                }else if( subtype == 'position' ){
                    renderHtml = true;
                }
                break;

            case 'format':
            case 'custom-format':
                renderHtml = true;
                break;
        }
        
        // style
        pixeSetPostDateStyle(item);

        // render html
        if( renderHtml ){
            $.pixeItem.renderAjax(item, container);
        }
    }
    function pixeGetPostDateSettings(item){
        var settings = item.data('settings');
        var format;
        if( settings._element == 'post-date' || settings._element == 'current-date' || settings._element == 'post-modified-date' ){
            format = $.pixeComboboxOption.dateFormat();
        }else{
            format = $.pixeComboboxOption.timeFormat()
        }

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-icon', { class: 'pixe-action', data: 'data-action="icon"' });
        html += $.pixeGetAdminIcon('option-border', { class: 'pixe-action', data: 'data-action="border"' });
        html += $.pixeCombobox({
            slug: 'format',
            options: format,
            width: 91,
            placeholder: 'Format',
            value: settings['format']
        });
        html += '<div class="pixe-input-wrap pixe-custom-format" style="width: 100px" >';
        html += $.pixeInput({
            slug: 'custom-format',
            placeholder: 'Format',
            value: settings['custom-format'],
            info: '<a class="pixe-input-info pixe-link" href="https://wordpress.org/documentation/article/customize-date-and-time-format/" target="blank" ><span class="pixe-svg-preset pixe-svg-info" ></span></a>'
        });
        html += '</div>';
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('option-align-left', { class: 'pixe-action', data: 'data-action="alignment"' });
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        if( settings._element == 'post-date' || settings._element == 'post-time' || settings._element == 'post-modified-date' ){
            html += $.pixeGetAdminIcon('option-link', { class: 'pixe-action', data: 'data-action="date-link"' });
        }
        html += '<div class="pixe-action" data-action="color" ><div class="pixe-color-display" ></div></div>';
        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
        content.pixeCombobox();
        $.pixeSetColorDisplay(content, settings['text-color']);
        
        // format & custom format event
        function setComboboxState(){
            var format = content.find('[data-slug="format"]');
            var customFormat = content.find('[data-slug="custom-format"]');

            if( format.data('value') == 'custom' ){
                customFormat.closest('.pixe-custom-format').css('display', 'block');
            }else{
                customFormat.closest('.pixe-custom-format').css('display', 'none');
            }
        }
        setComboboxState();
        content.on('change', '[data-slug="format"]', function(){
            setComboboxState();

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

            var settings = item.data('settings');
            var itemHistory = new $.pixeEditHistory(item);
            $.pixeSetData(settings, slug, value);
            itemHistory.onChange(slug);

            pixeRenderPostDate(item, slug);
        });
        content.on('input', '[data-slug="custom-format"]', $.pixeDebounce(function(){
            var slug = $(this).attr('data-slug');
            var value = $(this).val();

            var settings = item.data('settings');
            var itemHistory = new $.pixeEditHistory(item);
            $.pixeSetData(settings, slug, value);
            itemHistory.onChange(slug);

            pixeRenderPostDate(item, slug);
        }));

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

            var ssType, ssSlug;
            if( action == 'alignment' ){
                var inlineSlug = 'alignment';
                $.pixeInlinePopup({
                    target: button,
                    options: 'alignment',
                    values: { alignment: settings[inlineSlug] },
                    onChange: function(slug, value){
                        $.pixeSetData(settings, inlineSlug, value);
                        itemHistory.onChange(inlineSlug);
                        pixeSetPostDateStyle(item);
                    }
                });
            }else{
                if( action == 'typo' ){
                    ssSlug = 'typo';
                    ssType = 'typography';
                }else if( action == 'icon' ){
                    ssSlug = 'icon';
                    ssType = 'link-icon';
                }else if( action == 'border' ){
                    ssSlug = 'background';
                    ssType = 'detail-background';
                }else if( action == 'color' ){
                    ssSlug = 'text-color';
                    ssType = 'link-color';
                }else if( action == 'date-link' ){
                    ssSlug = 'date-link';
                    ssType = 'date-link';
                }
    
                new $.pixeStyleSelector({
                    obj: settings,
                    slug: ssSlug,
                    target: button, 
                    targetArea: item.children('.pixe-item-content'),
                    type: ssType,
                    onChange: function(value, type){
                        if( ssSlug == 'text-color' ){ $.pixeSetColorDisplay(content, settings['text-color']); }

                        itemHistory.onChange(ssSlug);
                        pixeRenderPostDate(item, ssSlug, type)
                    }
                });
            } 
        });

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

        function getCss(device = ''){
            var ret = '';
            var iconData = settings['icon']? settings['icon']: {};
            var background = settings['background']? settings['background']: {};
            
            ret += $.pixeSetCss(id + ' .pixe-detail', {
                'justify-content': settings[device + 'alignment'],
                'gap': iconData[device + 'gap']
            });
            ret += $.pixeSetIconCss({
                selector: id + ' .pixe-icon',
                icon: iconData
            }, device);
            ret += $.pixeSetCss(id + ' .pixe-inline', {
                'padding': background['padding'],
                'margin': background['margin'],
                'background': background['color'],
                'border':{
                    'width': background['border-width'],
                    'style': background['border-style'],
                    'color': background['border-color'],
                    'radius': background['border-radius']
                },
                'custom': $.pixeGetTextColorCss(settings['text-color'], device)
            });
            ret += $.pixeSetCss(id + ' .pixe-inline:hover', {
                'custom': $.pixeGetTextColorCss(settings['text-color'], device, '-hover')
            });

            // typo
            ret += $.pixeSetCss(id + ' .pixe-inline', {'custom': $.pixeTypoStyle.getPresetCss(settings['typo'], device)});

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

        // set typo
        $.pixeTypoStyle.setPresetData(item.find('.pixe-inline'), settings.typo);
        $.pixeAddTypoDependency(item, [settings['typo']]);

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

        $.pixeItem.renderCss(item);
    }

    // comment number
    $.pixeRegisterElementRenderer('comment-number', pixeRenderCommentNumber);
    function pixeRenderCommentNumber(item, type, subtype){
        var container = item.children('.pixe-item-content');
        var renderHtml = false; 

        function setIconDependency(){
            var icons = [];
            var settings = item.data('settings');
            if( settings.icon ){
                icons.push(settings.icon.icon);
            }

            $.pixeAddIconDependency(item, icons);
        }

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

                // bind settings
                if( !item.data('preview') ){
                    container.off().on('click', function(){
                        new $.pixeStyleSettings({
                            target: $(this),
                            content: pixeGetCommentNumberSettings(item)
                        });
                    });
                    setIconDependency();
                }
                break;

            case 'comment':
                renderHtml = true;
                break;

            case 'icon':
                if( subtype == 'icon' ){
                    renderHtml = true;
                    setIconDependency();
                }else if( subtype == 'position' ){
                    renderHtml = true;
                }
                break;
        }
        
        // style
        pixeSetPostDateStyle(item);

        // render html
        if( renderHtml ){
            $.pixeItem.renderAjax(item, container);
        }

    }
    function pixeGetCommentNumberSettings(item){
        var settings = item.data('settings');

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-icon', { class: 'pixe-action', data: 'data-action="icon"' });
        html += $.pixeGetAdminIcon('option-comment', { class: 'pixe-action', data: 'data-action="comment"' });
        html += $.pixeGetAdminIcon('option-border', { class: 'pixe-action', data: 'data-action="border"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('option-align-left', { class: 'pixe-action', data: 'data-action="alignment"' });
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        html += '<div class="pixe-action" data-action="color" ><div class="pixe-color-display" ></div></div>';
        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
        $.pixeSetColorDisplay(content, settings['text-color']);

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

            var ssType, ssSlug;
            if( action == 'alignment' ){
                var inlineSlug = 'alignment';
                $.pixeInlinePopup({
                    target: button,
                    options: 'alignment',
                    values: { alignment: settings[inlineSlug] },
                    onChange: function(slug, value){
                        $.pixeSetData(settings, inlineSlug, value);
                        itemHistory.onChange(inlineSlug);
                        pixeSetPostDateStyle(item);
                    }
                });
            }else{
                if( action == 'typo' ){
                    ssSlug = 'typo';
                    ssType = 'typography';
                }else if( action == 'icon' ){
                    ssSlug = 'icon';
                    ssType = 'link-icon';
                }else if( action == 'border' ){
                    ssSlug = 'background';
                    ssType = 'detail-background';
                }else if( action == 'color' ){
                    ssSlug = 'text-color';
                    ssType = 'link-color';
                }else if( action == 'comment' ){
                    ssSlug = 'comment';
                    ssType = 'comment-number';
                } 
    
                new $.pixeStyleSelector({
                    obj: settings,
                    slug: ssSlug,
                    target: button, 
                    targetArea: item.children('.pixe-item-content'),
                    type: ssType,
                    onChange: function(value, type){
                        if( ssSlug == 'text-color' ){ $.pixeSetColorDisplay(content, settings['text-color']); }

                        itemHistory.onChange(ssSlug);
                        pixeRenderCommentNumber(item, ssSlug, type)
                    }
                });
            } 
        });

        return content;
    }

    // post id
    $.pixeRegisterElementRenderer('post-id', pixePostIDRenderer);
    $.pixeRegisterElementRenderer('query-var', pixePostIDRenderer);
    function pixePostIDRenderer(item, type){
        var container = item.children('.pixe-item-content');
        var settings = item.data('settings');

        function getHtml(){
            var tag = settings['text-tag']? settings['text-tag']: 'div';
            var text = '';

            if( settings._element == 'post-id' ){
                if( pixeData.type == 'post' && pixeData.id ){
                    text = pixeData.id;
                }else{
                    text = 'POST_ID';
                }
            }else if( settings._element == 'query-var' ){
                text = 'Search Keywords / Taxonomy Name';
            }

            var tag = $(document.createElement(tag));
            tag.addClass('pixe-text');
            tag.append(text);
            container.empty().append(tag);
        }

        // create
        switch(type){
            case 'item':
                container.off().empty();
                container.on('click', function(){
                    new $.pixeStyleSettings({
                        target: $(this),
                        content: pixeGetPostTitleSettings(item)
                    });
                });

                getHtml();
                break;
            case 'text-tag':
                getHtml();
                break;
        }

        // render style
        pixeSetPostTitleStyle(item);
    }

    // post title
    $.pixeRegisterElementRenderer('site-title', pixePostTitleRenderer);
    $.pixeRegisterElementRenderer('post-title', pixePostTitleRenderer);
    $.pixeRegisterElementRenderer('archive-title', pixePostTitleRenderer);
    function pixePostTitleRenderer(item, type){
        var container = item.children('.pixe-item-content');

        function getHtml(){
            var settings = item.data('settings');
            var defaultTag = 'h3';
            var text;

            if( settings._element == 'post-title' ){
                if( pixeData.type == 'post' && pixeData.postTitle ){
                    text = pixeData.postTitle;
                }else{
                    text = 'This is the Post Title';
                }
            }else if( settings._element == 'site-title' ){
                defaultTag = 'h1';
                if( pixeData.siteTitle ){
                    text = pixeData.siteTitle;
                }else{
                    text = 'Site Title';
                }
            }else if( settings._element == 'archive-title' ){
                text = 'This is the Taxonomy Title';
            }

            // create html
            var tag = settings['text-tag']? settings['text-tag']: defaultTag;
            var title = $(document.createElement(tag));
                title.addClass('pixe-text');

            if( !settings.link || settings.link['link-to'] != 'none' ){
                text = '<a href="#" class="pixe-inline" >' + text + '</a>';
                title.append(text);
            }else{
                title.addClass('pixe-inline');
                title.append(text);
            }
            container.empty().append(title);

            // set icon
            pixeSetPostTitleIcon(item);
        }

        // create
        switch(type){
            case 'item':
                item.addClass('pixe-heading');
                container.off();
                getHtml();
                
                container.on('click', function(){
                    new $.pixeStyleSettings({
                        target: $(this),
                        content: pixeGetPostTitleSettings(item)
                    });
                });
                break;

            case 'icon': 
                pixeSetPostTitleIcon(item);
                break;

            case 'link':
            case 'text-tag':
                getHtml();
                break;
        }

        // lightbox dependency
        var settings = item.data('settings');
        var link = settings['link']? settings['link']: {};
        $.pixeAddLightboxDependency(item, link['link-to']);
        $.pixeAddPopupDependency(item, link['link-to'], link['popup']);

        // render style
        pixeSetPostTitleStyle(item);
    }
    function pixeGetPostTitleSettings(item){
        var settings = item.data('settings');
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        if( settings._element == 'post-title' || settings._element == 'archive-title' || settings._element == 'site-title' ){ 
            html += $.pixeGetAdminIcon('option-icon', { class: 'pixe-action', data: 'data-action="icon"' });
            html += $.pixeGetAdminIcon('option-link', { class: 'pixe-action', data: 'data-action="link"' });
        }
        html += $.pixeGetAdminIcon('option-align-left', { class: 'pixe-action', data: 'data-action="align"' });
        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" ><span class="pixe-color-display" ></span></div>';
        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);

        var cd = settings['text-color']? settings['text-color'].color: undefined;
        $.pixeSetColorDisplay(content, {color: cd});

        // 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 == 'tag' || action == 'align' ){

                var inlineType, inlineSlug, inlineValue;
                switch(action){
                    case 'tag':
                        inlineType = 'tag';
                        inlineSlug = 'text-tag';
                        inlineValue = {tag: settings[inlineSlug]};
                        break;

                    case 'align':
                        inlineType = 'alignment';
                        inlineSlug = 'text-align';
                        inlineValue = {alignment: settings[inlineSlug]};
                        break;
                }

                $.pixeInlinePopup({
                    target: button,
                    options: inlineType,
                    values: inlineValue,
                    onChange: function(slug, value){
                        $.pixeSetData(settings, inlineSlug, value);
                        itemHistory.onChange(inlineSlug);

                        if( settings._element == 'post-id' ){
                            pixePostIDRenderer(item, inlineSlug);
                        }else{
                            pixePostTitleRenderer(item, inlineSlug);
                        }
                    }
                });
            }else{

                var ssType, ssSlug, ssTitle;
                switch( action ){
                    case 'link': 
                        ssSlug = 'link';
                        ssType = 'post-link';
                        break;
                    case 'typo':
                        ssSlug = 'text-typo';
                        ssType = 'typography';
                        break;
                    case 'color': 
                        ssSlug = 'text-color';
                        ssType = 'link-color';
                        break;
                    case 'icon':
                        ssSlug = 'icon';
                        ssType = 'link-icon-hover-block';
                }

                new $.pixeStyleSelector({
                    obj: settings,
                    slug: ssSlug,
                    target: button, 
                    targetArea: item.children('.pixe-item-content'),
                    type: ssType,
                    title: ssTitle,
                    onChange: function(value, type){
                        itemHistory.onChange(ssSlug);
                        if( settings._element == 'post-id' ){
                            pixePostIDRenderer(item, ssSlug, type);
                        }else{
                            pixePostTitleRenderer(item, ssSlug, type);
                        }

                        if( ssSlug == 'text-color' ){
                            cd = settings['text-color']? settings['text-color'].color: undefined;
                            $.pixeSetColorDisplay(content, {color: cd});
                        }else if( ssSlug == 'icon' ){
                            pixeSetPostTitleIcon(item);
                        }
                    }
                });
            }      
        });

        return content;
    }
    function pixeSetPostTitleIcon(item){
        var container = item.children('.pixe-item-content');
        var button = container.find('.pixe-text');
        if( button.children('a').length ){
            button = button.children('a');
        }

        var settings = item.data('settings');
        var iconData = settings['icon']? settings['icon']: {};
        
        // add icon
        button.find('.pixe-inline-icon').remove();
        if( iconData && iconData['icon'] ){
            var icon = $($.pixeGetIcon(iconData['icon'], {'icon-class': 'pixe-inline-icon'}));
            $.pixeResponsiveClass(icon, iconData['icon-hide-on']);
            
            if( iconData.position == 'right' || iconData.position == 'right-block' || iconData.position == 'right-stretch' ){
                button.append(icon);
            }else{
                button.prepend(icon);
            }
        }
        $.pixeAddIconDependency(item, [iconData['icon']]);
    }
    function pixeSetPostTitleStyle(item){
        var container = item.children('.pixe-item-content');
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';
        var typo = settings['text-typo']? settings['text-typo']: {};

        function getCss(device = ''){
            var ret = '';
            
            ret += $.pixeSetCss(id + ' .pixe-text, ' + id + ' .pixe-text a', {
                'custom': $.pixeGetTextColorCss(settings['text-color'], device)
            });
            ret += $.pixeSetCss(id + ' .pixe-text:hover a, ' + id + ' .pixe-text:hover', {
                'custom': $.pixeGetTextColorCss(settings['text-color'], device, '-hover')
            });

            // icon style
            ret += $.pixeSetInlineIconCss({
                selector: id + ' .pixe-inline',
                iconSelector: id + ' .pixe-inline-icon',
                iconHoverSelector: id + ' a:hover .pixe-inline-icon',
                noIconSelector: id + ' .pixe-text',
                icon: settings['icon'],
                textAlign: settings[device + 'text-align'],
                selectorCustom: $.pixeTypoStyle.getPresetCss(typo, device)
            }, device);
            
            return ret;
        }
        
        css += getCss('');
        tabletCss += getCss('tablet-');
        mobileCss += getCss('mobile-');

        // typo preset
        $.pixeTypoStyle.setPresetData(container.find('.pixe-text'), typo);
        $.pixeAddTypoDependency(item, [typo]);

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

        $.pixeItem.renderCss(item);
    }
    
})(jQuery);	