(function($){
    "use strict";

    // table
    $.pixeRegisterElementData('table', 'tab');
    $.pixeRegisterElementRenderer('table', pixeTableRenderer);
    function pixeTableRenderer(item, type){
        var settings = item.data('settings');
        var container = item.children('.pixe-item-content');

        // render
        switch(type){
            case 'item':
                var tabData, row, col;
                if( settings._tab && settings._tab.length ){
                    tabData = settings._tab;
                }else{
                    settings.row = 4;
                    settings.col = 4;
                    tabData = [
                        {content: []},
                        {content: [{ "_type": "element", "content": "<div>Standard</div>", "_element": "text-box" }]},
                        {content: [{ "_type": "element", "content": "<div>Premium</div>", "_element": "text-box" }]},
                        {content: [{ "_type": "element", "content": "<div>Advanced</div>", "_element": "text-box" }]},
                        {content: [{ "_type": "element", "content": "<div>Disk Storage</div>", "_element": "text-box" }]},
                        {content: [{ "_type": "element", "content": "<div>5 GB Storage</div>", "_element": "text-box" }]},
                        {content: [{ "_type": "element", "content": "<div>10 GB Storage</div>", "_element": "text-box" }]},
                        {content: [{ "_type": "element", "content": "<div>20 GB Storage</div>", "_element": "text-box" }]},
                        {content: [{ "_type": "element", "content": "<div>Support Mode</div>", "_element": "text-box" }]},
                        {content: [{ "_type": "element", "content": "<div>Email Support</div>", "_element": "text-box" }]},
                        {content: [{ "_type": "element", "content": "<div>Email Support</div>", "_element": "text-box" }]},
                        {content: [{ "_type": "element", "content": "<div>Phone Support</div>", "_element": "text-box" }]},
                        {content: []},
                        {content: [{ "_type": "element", "text": "Button", "_element": "button" }]},
                        {content: [{ "_type": "element", "text": "Button", "_element": "button" }]},
                        {content: [{ "_type": "element", "text": "Button", "_element": "button" }]},
                    ];
                }
                row = settings.row;
                col = settings.col;

                var html = $('<table></table>');
                for( var i = 0; i < row; i++ ){
                    var tr = $('<tr></tr>');
                    html.append(tr);

                    for( var j = 0; j < col; j++ ){
                        var index = (i * col) + j;
                        tr.append(pixeGetTableCell(tabData[index]));
                    }
                }

                container.find('[data-tab-slug="content"]').detach();
                container.empty().append(html);

                pixeSetTableLayout(item);
                pixeSetTableControls(item);
                break;

            case '_tabContent':
                var tabData, tabContent, row, col;
                tabData = settings._tab;
                tabContent = settings._tabContent;
                row = settings.row;
                col = settings.col;

                var html = $('<table></table>');
                for( var i = 0; i < row; i++ ){
                    var tr = $('<tr></tr>');
                    html.append(tr);

                    for( var j = 0; j < col; j++ ){
                        var index = (i * col) + j;
                        tr.append(pixeGetTableCell(tabData[index], tabContent.eq(index)));
                    }
                }

                container.find('[data-tab-slug="content"]').detach();
                container.empty().append(html);

                pixeSetTableLayout(item);
                pixeSetTableControls(item);
                break;
        }

        pixeSetTableStyle(item);
    }

    // set style
    function pixeSetTableStyle(item){
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var tab = settings._tab? settings._tab: [];
        var col = parseInt(settings.col);
        var row = parseInt(settings.row);
        var layout = settings.layout? settings.layout: {};
        var bg = settings.bg? settings.bg: {};
        var border = settings.border? settings.border: {};
        var headColor = settings['head-color'] || {};
        var headTypo = settings['head-typo'] || {};
        var headAlign = settings['head-align'];
        var headSpacing = settings['head-spacing'] || {};
        var headBorder = settings['head-border'] || {};
        var headBg = settings['head-bg'] || {};
        var bodyColor = settings['body-color'] || {};
        var bodyTypo = settings['body-typo'] || {};
        var bodyAlign = settings['body-align'];
        var bodySpacing = settings['body-spacing'] || {};
        var bodyBorder = settings['body-border'] || {};
        var bodyBg = settings['body-bg'] || {};
        var footerColor = settings['footer-color'] || {};
        var footerTypo = settings['footer-typo'] || {};
        var footerAlign = settings['footer-align'];
        var footerSpacing = settings['footer-spacing'] || {};
        var footerBorder = settings['footer-border'] || {};
        var footerBg = settings['footer-bg'] || {};

        function getRowSelector(rowIndex){
            var hasHeader = layout.header != 'no';
            var hasFooter = layout.footer != 'no';

            if( hasHeader && rowIndex == 1 ){
                return id + ' table > thead > tr';
            }else if( hasFooter && rowIndex == row ){
                return id + ' table > tfoot > tr';
            }else{
                return id + ' table > tbody > tr:nth-child(' + (rowIndex - (hasHeader? 1: 0)) + ')';
            }
        }

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

            ret += $.pixeSetCss(id + ' table', {
                border: border[device + 'border'],
                shadow: border[device + 'shadow']
            });
            
            // header
            ret += $.pixeSetCss(id + ' table > thead', {
                'text-align': headAlign,
                'custom': $.pixeGetTextColorCss(headColor, device) + $.pixeTypoStyle.getPresetCss(headTypo, device)
            });
            ret += $.pixeSetCss(id + ' table > thead > tr > td, ' + 
                                id + ' table > thead > tr > th', {
                padding: headSpacing[device + 'padding'],
                background: headBg[device + 'bg'],
                'border-right-width': headBorder[device + 'v-width'],
                'border-right-color': headBorder[device + 'v-color'],
                'border-bottom-width': headBorder[device + 'h-width'],
                'border-bottom-color': headBorder[device + 'h-color'],
            });

            // body odd even color
            ret += $.pixeSetCss(id + ' table > tbody', {
                'text-align': bodyAlign,
                'custom': $.pixeGetTextColorCss(bodyColor, device) + $.pixeTypoStyle.getPresetCss(bodyTypo, device)
            });
            ret += $.pixeSetCss(id + ' table > tbody > tr > td, ' + 
                                id + ' table > tbody > tr > th', {
                padding: bodySpacing[device + 'padding'],
                'border-right-width': bodyBorder[device + 'v-width'],
                'border-right-color': bodyBorder[device + 'v-color'],
                'border-bottom-width': bodyBorder[device + 'h-width'],
                'border-bottom-color': bodyBorder[device + 'h-color'],
            });
            ret += $.pixeSetCss(id + ' table > tbody > tr:nth-child(even) > td', {
                background: bodyBg[device + 'even-bg']
            });
            ret += $.pixeSetCss(id + ' table > tbody > tr:nth-child(odd) > td', {
                background: bodyBg[device + 'odd-bg']
            });

            // footer
            ret += $.pixeSetCss(id + ' table > tfoot', {
                'text-align': footerAlign,
                'custom': $.pixeGetTextColorCss(footerColor, device) + $.pixeTypoStyle.getPresetCss(footerTypo, device)
            });
            ret += $.pixeSetCss(id + ' table > tfoot > tr > td, ' + 
                                id + ' table > tfoot > tr > th', {
                padding: footerSpacing[device + 'padding'],
                background: footerBg[device + 'bg'],
                'border-right-width': footerBorder[device + 'v-width'],
                'border-right-color': footerBorder[device + 'v-color'],
                'border-top-width': footerBorder[device + 'h-width'],
                'border-top-color': footerBorder[device + 'h-color'],
            });

            // cell background
            for( var i in tab ){
                if( !col ){ continue; }
                if( tab[i].data && tab[i].data.bg ){
                    var rowIndex = Math.floor(parseInt(i) / col) + 1;
                    var colIndex = (parseInt(i) % col) + 1;

                    ret += $.pixeSetCss(getRowSelector(rowIndex) + ' > td:nth-child(' + colIndex + ')', {
                        background: tab[i].data.bg[device + 'color']
                    });
                }
            }

            return ret;
        }

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

        $.pixeTypoStyle.setPresetData(item.find('table > thead'), headTypo);
        $.pixeTypoStyle.setPresetData(item.find('table > tbody'), bodyTypo);
        $.pixeTypoStyle.setPresetData(item.find('table > tfoot'), footerTypo);
        $.pixeAddTypoDependency(item, [headTypo, bodyTypo, footerTypo]);

        $.pixeItem.renderCss(item);
    }

    // add table settings & controls
    function pixeSetTableControls(item){
        var container = item.children('.pixe-item-content');
        var table = container.find('table');
        var tr = table.find('tr');

        container.off();
        container.find('.pixe-extra-setttings, .pixe-tab-settings, .pixe-tab-new').remove();

        // rol, col, cell settings
        tr.each(function(){
            $(this).children('th, td').first().append('<span class="pixe-extra-settings pixe-type-row" data-action="row" ></div>');
        });
        tr.first().find('th, td').append('<span class="pixe-extra-settings pixe-type-col" data-action="col" ></div>');

        // head foot settings
        table.find('thead tr').children('th, td').last().append('<div class="pixe-tab-settings pixe-svg-preset pixe-svg-tab-settings pixe-right-settings" data-action="head-settings" ></div>');
        table.find('tfoot tr').children('th, td').last().append('<div class="pixe-tab-settings pixe-svg-preset pixe-svg-tab-settings pixe-right-settings" data-action="footer-settings" ></div>');

        // body settings
        var html  = '<div class="pixe-tab-controls" >';
            html += '<div class="pixe-tab-new pixe-svg-preset pixe-svg-tab-new" data-action="new-row" ></div>';
            html += '<div class="pixe-tab-settings pixe-svg-preset pixe-svg-tab-settings" data-action="tab-settings" ></div>';
            html += '</div>';
        container.append(html);
        container.append('<div class="pixe-tab-new pixe-svg-preset pixe-svg-tab-new" data-action="new-col" ></div>');
        container.append('<div class="pixe-tab-settings pixe-svg-preset pixe-svg-tab-settings pixe-right-settings" data-action="body-settings" ></div>');
        table.off().on('mouseover', $.pixeThrottling(function(){
            var tableHeight = $(this).outerHeight();
            container.children('[data-action="new-col"]').css('top', tableHeight / 2);
            container.children('[data-action="body-settings"]').css('top', tableHeight / 2);
        }));

        container.on('click', function(e){
            if( !$(this).closest('.pixe-item, .pixe-column').is(item) ){ return; }

            var target = $(e.target);
            var action = target.attr('data-action');

            if( action == 'col' || action == 'row' ){
                new $.pixeStyleSettings({
                    target: target,
                    content: pixeGetTableRowSettings(item, action, target)
                });
            }else if( action == 'new-col' || action == 'new-row' ){
                pixeAddNewTableRow(item, action);
            }else if( action == 'body-settings' || action == 'head-settings' || action == 'footer-settings' ){
                new $.pixeStyleSettings({
                    target: target,
                    content: pixeGetTableSectionSettings(item, action)
                });
            }else if( action == 'tab-settings' ){
                new $.pixeStyleSettings({
                    target: target,
                    content: pixeGetTableSettings(item)
                });
            }else if( target.hasClass('pixe-tab-data') ){
                new $.pixeStyleSettings({
                    target: target,
                    content: pixeGetTableCellSettings(item, action, target)
                });
            }

        });

    }
    function pixeGetTableCellSettings(item, type, button){
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="background"' });
        content.append(html);

        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var cellButton = button;
            var data = cellButton.data('value');
            var actionButton = $(this);
            var action = actionButton.attr('data-action');

            var ssType, ssSlug, ssTitle;
            switch( action ){
                case 'background':
                    ssSlug = 'bg';
                    ssType = 'text-box-bg-color';
                    ssTitle = 'Background Color';
                    break;
            }

            if( !data || Array.isArray(data) ){
                data = {};
                cellButton.data('value', data);
            }

            $.pixeInlineTab.getVal(cellButton);

            new $.pixeStyleSelector({
                obj: data,
                slug: ssSlug,
                target: actionButton,
                targetArea: item.children('.pixe-item-content'),
                type: ssType,
                title: ssTitle,
                onChange: function(value, type){
                    data[ssSlug] = value;
                    $.pixeInlineTab.setVal(cellButton, ssTitle);

                    pixeSetTableStyle(item);
                }
            });
        });
        return content;
    }
    function pixeAddNewTableRow(item, type){
        var settings = item.data('settings');

        if( type == 'new-col' ){
            var historyAction = pixeCreateTableHistory(item, 'edit', 'New Col');
            settings.col = parseInt(settings.col) + 1;

            var trs = item.find('tr');
            trs.each(function(){    
                var newContent = [{ "_type": "element", "content": "<div>Text</div>", "_element": "text-box" }];
                $.pixeEditor.setUniqueIdData(newContent);

                var newTd = pixeGetTableCell({
                    content: newContent
                });
                $.pixeEditor.setStatus(newTd);
                newTd.insertAfter($(this).children('td').last());

                pixeSetTableControls(item);
            });
        }else if( type == 'new-row' ){
            item.find('thead, tfoot, tbody').contents().unwrap();

            var historyAction = pixeCreateTableHistory(item, 'edit', 'Copy Row');
            settings.row = parseInt(settings.row) + 1;

            var lastTr = item.find('tr').last();
            var newTr = $('<tr></tr>');
            for( var i = 0; i < lastTr.children('td').length; i++){
                var newContent = [{ "_type": "element", "content": "<div>Text</div>", "_element": "text-box" }];
                $.pixeEditor.setUniqueIdData(newContent);

                var newTd = pixeGetTableCell({
                    content: newContent
                });
                $.pixeEditor.setStatus(newTd);
                newTd.appendTo(newTr);
            }
            newTr.insertAfter(lastTr);

            pixeSetTableLayout(item);
            pixeSetTableControls(item);
        }

        pixeSetTableHistory(item, historyAction);
    }
    function pixeGetTableRowSettings(item, type, button){
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        if( type == 'col' ){
            html += $.pixeGetAdminIcon('option-left', { class: 'pixe-move pixe-svg-hover', data: 'data-action="left"' });
            html += '<div class="pixe-sub-divider" ></div>';
            html += $.pixeGetAdminIcon('option-right', { class: 'pixe-move pixe-svg-hover', data: 'data-action="right"' });
        }else{
            html += '<div class="pixe-move-wrap" >';
            html += $.pixeGetAdminIcon('option-left', { class: 'pixe-move pixe-svg-hover', data: 'data-action="up"' });
            html += '<div class="pixe-sub-divider" ></div>';
            html += $.pixeGetAdminIcon('option-right', { class: 'pixe-move pixe-svg-hover', data: 'data-action="down"' });
            html += '</div>';
        }
        
        html += $.pixeGetAdminIcon('copy', {class: 'pixe-action', data: 'data-action="copy"'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-action', data: 'data-action="remove"'});
        content.append(html);

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

            var historyAction;
            
            if( type == 'col' ){
                var index = button.parent('th, td').index();
                var trs = item.find('tr');
                var tds = $(); 
                trs.each(function(){
                    tds = tds.add($(this).children('td, th').eq(index))
                });

                if( action == 'left' ){
                    var prevTd = button.parent('th, td').prev('th, td');
                    if( !prevTd.length ) return; 
                    
                    historyAction = pixeCreateTableHistory(item, 'edit', 'Move Col');
                    tds.each(function(){
                        $(this).insertBefore($(this).prev('th, td'));
                    });

                }else if( action == 'right' ){
                    var nextTd = button.parent('th, td').next('th, td'); 
                    if( !nextTd.length ) return;

                    historyAction = pixeCreateTableHistory(item, 'edit', 'Move Col');
                    tds.each(function(){
                        $(this).insertAfter($(this).next('th, td'));
                    });
                    
                }else if( action == 'copy' ){
                    historyAction = pixeCreateTableHistory(item, 'edit', 'Copy Col');
                    settings.col = parseInt(settings.col) + 1;

                    tds.each(function(){    
                        var copyData = $(this).children('[data-tab-slug="data"]').data('value');
                        var copyContent = $.pixeGetEditorVal($(this).children('[data-tab-slug="content"]'));
                        $.pixeEditor.setUniqueIdData(copyContent);

                        var newTd = pixeGetTableCell({
                            data: copyData, 
                            content: copyContent
                        });
                        $.pixeEditor.setStatus(newTd);
                        newTd.insertAfter($(this));
                    });
                }else if( action == 'remove' ){
                    historyAction = pixeCreateTableHistory(item, 'edit', 'Delete Col');
                    settings.col = parseInt(settings.col) - 1;
                    tds.detach();
                    $(document.body).trigger('closepopup');
                }

                pixeSetTableControls(item);
            }else if( type == 'row' ){
                item.find('thead, tfoot, tbody').contents().unwrap();

                var tr = button.closest('tr');

                // move up
                if( action == 'up' ){
                    var prevTr = tr.prev('tr');
                    if( prevTr.length ){
                        historyAction = pixeCreateTableHistory(item, 'edit', 'Move Row');
                        tr.insertBefore(prevTr);
                    }else{
                        pixeSetTableLayout(item);
                        pixeSetTableControls(item);
                        return;
                    }
                
                // move down
                }else if( action == 'down' ){
                    var nextTr = tr.next('tr');
                    if( nextTr.length ){
                        historyAction = pixeCreateTableHistory(item, 'edit', 'Move Row');
                        tr.insertAfter(nextTr);
                    }else{
                        pixeSetTableLayout(item);
                        pixeSetTableControls(item);
                        return;
                    }

                }else if( action == 'copy' ){
                    historyAction = pixeCreateTableHistory(item, 'edit', 'Copy Row');
                    settings.row = parseInt(settings.row) + 1;

                    var newTr = $('<tr></tr>');
                    tr.children('td').each(function(){
                        var copyData = $(this).children('[data-tab-slug="data"]').data('value');
                        var copyContent = $.pixeGetEditorVal($(this).children('[data-tab-slug="content"]'));
                        $.pixeEditor.setUniqueIdData(copyContent);

                        var newTd = pixeGetTableCell({
                            data: copyData, 
                            content: copyContent
                        });
                        $.pixeEditor.setStatus(newTd);
                        newTd.appendTo(newTr);

                        pixeSetTableControls(item);
                    });
                    newTr.insertAfter(tr);

                }else if( action == 'remove' ){
                    historyAction = pixeCreateTableHistory(item, 'edit', 'Delete Row');
                    settings.row = parseInt(settings.row) - 1;
                    tr.detach();
                    $(document.body).trigger('closepopup');
                }

                pixeSetTableLayout(item);
                pixeSetTableControls(item);

            }
            
            pixeSetTableHistory(item, historyAction);
            pixeSetTableStyle(item);
        });

        return content
    }
    function pixeGetTableSettings(item){
        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-table2', { class: 'pixe-action', data: 'data-action="table"' });
        html += $.pixeGetAdminIcon('option-border', { class: 'pixe-action', data: 'data-action="border"' });
        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;
            switch(action){
                case 'table':
                    ssSlug = 'layout';
                    ssType = 'table-layout';
                    break;
                case 'border':
                    ssSlug = 'border';
                    ssType = 'table-border';
                    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 == 'layout' ){
                        pixeSetTableLayout(item);
                        pixeSetTableControls(item);
                    }

                    pixeSetTableStyle(item);
                }
            });
        });

        return content;
    }
    function pixeGetTableSectionSettings(item, type){
        var prefix = type.replace('-settings', '-');
        var settings = item.data('settings');

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-align-left', { class: 'pixe-action', data: 'data-action="align"' });
        html += $.pixeGetAdminIcon('option-spaces', { class: 'pixe-action', data: 'data-action="spaces"' });
        html += $.pixeGetAdminIcon('option-border-inner', { class: 'pixe-action', data: 'data-action="border"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="background"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        html += '<div class="pixe-action" data-action="color" ><span class="pixe-color-display" ></span></div>';
        content.append(html);

        $.pixeSetColorDisplay(content, settings[prefix + 'color']);

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

            if( action == 'align' ){
                var inlineSlug = prefix + 'align';
                $.pixeInlinePopup({
                    target: button,
                    options: 'text-alignment',
                    values: { alignment: settings[inlineSlug] },
                    onChange: function(slug, value){
                        $.pixeSetData(settings, inlineSlug, value);
                        itemHistory.onChange(inlineSlug);
                        pixeSetTableStyle(item);
                    }
                });
            }else{
                var ssType, ssSlug;
                switch(action){
                    case 'spaces':
                        ssSlug = 'spacing';
                        ssType = 'padding';
                        break;
                    case 'table':
                        ssSlug = 'layout';
                        ssType = 'table-layout';
                        break;
                    case 'background':
                        ssSlug = 'bg';
                        if( type == 'body-settings' ){
                            ssType = 'table-body-bg';
                        }else{
                            ssType = 'table-bg';
                        }
                        break;
                    case 'border':
                        ssSlug = 'border';
                        ssType = 'table-section-border';
                        break;
                    case 'typo':
                        ssSlug = 'typo';
                        ssType = 'typography';
                        break;
                    case 'color':
                        ssSlug = 'color';
                        ssType = 'inline-text-color';
                        break;
                }

                new $.pixeStyleSelector({
                    obj: settings,
                    slug: prefix + ssSlug,
                    target: button,
                    type: ssType,
                    onChange: function(value, type){
                        itemHistory.onChange(prefix + ssSlug);
                        if( ssSlug == 'color' ){
                            $.pixeSetColorDisplay(content, settings[prefix + 'color']);
                        }
                        pixeSetTableStyle(item);
                    }
                });
            }
        });

        return content;
    }

    // each table cell
    function pixeSetTableLayout(item){
        var settings = item.data('settings');
        var layout = settings.layout? settings.layout: {};

        var table = item.find('table');
        table.children('thead, tfoot, tbody').contents().unwrap();

        var tr = table.children('tr');
        var trBody = table.children('tr');

        if( layout.header != 'no' ){
            tr.first().wrap('<thead></thead>');
            trBody = trBody.not(tr.first());
        }
        if( layout.footer != 'no' ){
            tr.last().wrap('<tfoot></tfoot>');
            trBody = trBody.not(tr.last());
        }

        trBody.wrapAll('<tbody></tbody>');

    }
    function pixeGetTableCell(tabData, tabContent){
        tabData = !tabData? {}: tabData;

        var ret = $('<td></td>');
        ret.append($.pixeInlineTab.getInput('data', 'data', tabData.data));

        if( tabContent ){
            ret.append(tabContent);
        }else{
            ret.append($.pixeInlineTab.getInput('container', 'content', tabData.content));
        }
        
        return ret;
    }

    // history action
    function pixeCreateTableHistory(item, subtype, label){
        var settings = item.data('settings');
        var action = $.pixeHistory.createAction(item, 'edit', subtype, label);

        // find cell data
        $.pixeInlineTab.updateTabData(item);

        // find cell content
        var tabContent = item.find('[data-tab-slug="content"]').filter(function(){
            return $(this).closest('.pixe-item').is(item)
        });

        // set to history
        $.pixeHistory.setActionStep(action, item, 'row', settings.row, true);
        $.pixeHistory.setActionStep(action, item, 'col', settings.col, true);
        $.pixeHistory.setActionStep(action, item, '_tab', settings._tab, true);
        $.pixeHistory.setActionStep(action, item, '_tabContent', tabContent, true, false);

        return action;
    }
    function pixeSetTableHistory(item, action){
        var settings = item.data('settings');

        // find cell data
        $.pixeInlineTab.updateTabData(item);

        // find cell content
        var tabContent = item.find('[data-tab-slug="content"]').filter(function(){
            return $(this).closest('.pixe-item').is(item)
        });

        // set to history
        $.pixeHistory.setActionStep(action, item, 'row', settings.row, false);
        $.pixeHistory.setActionStep(action, item, 'col', settings.col, false);
        $.pixeHistory.setActionStep(action, item, '_tab', settings._tab, false);
        $.pixeHistory.setActionStep(action, item, '_tabContent', tabContent, false, false);
        $.pixeHistory.addAction(action);
    }

    // accordion
    $.pixeRegisterElementData('accordion', 'tab');
    $.pixeRegisterElementRenderer('accordion', pixeAccordionRenderer);
    function pixeAccordionRenderer(item, type){
        var settings = item.data('settings');
        var container = item.children('.pixe-item-content');

        function getItemSettings(){
            var html  = '<div class="pixe-tab-controls" >';
                html += '<div class="pixe-tab-new pixe-svg-preset pixe-svg-tab-new" ></div>';
                html += '<div class="pixe-tab-settings pixe-svg-preset pixe-svg-tab-settings" ></div>';
                html += '</div>';
            return html;
        }

        // migrate old data
        if( settings['title-typo'] ){
            settings.typo = {
                'title': settings['title-typo']
            };
            delete settings['title-typo'];
        }
        if( settings['title-text-color'] ){
            settings['title-color'] = {
                'title': settings['title-text-color']
            };
            delete settings['title-text-color'];
        }
        if( settings.icon && settings.icon['icon-width'] ){
            settings.icon.width = settings.icon['icon-width'];
            delete settings.icon['icon-width'];
        }

        switch(type){
            case 'item':
                container.attr('data-accordion', settings._id);
                container.off().empty();
                
                // init tab data if empty
                var tabData;
                if( settings._tab ){
                    tabData = settings._tab;
                }else{
                    tabData = [
                        {title: 'Title 1', content: []},
                        {title: 'Title 2', content: []},
                        {title: 'Title 3', content: []},
                    ];
                }

                // html
                for( var i in tabData ){
                    container.append(getAccordion(settings, tabData[i], (i == 0)));
                }

                // item settings
                if( settings['tab-action'] == 'toggle-click' || settings['tab-action'] == 'toggle-hover' ){
                    container.attr('data-action', 'toggle-click');
                }else{
                    container.removeAttr('data-action');
                }

                container.append(getItemSettings());
                container.pixeItemAccordion(true);

                // add new
                container.on('click', '.pixe-tab-new', function(){
                    if( !$(this).closest('.pixe-item-content').is(container) ) return; // prevent nested item

                    // create history
                    var action = createAccordionHistory(item, '_tab', 'Add New Tab');

                    // add element
                    var controls = $(this).closest('.pixe-tab-controls');
                    var index = settings._tab.length + 1;
                    var accordion = getAccordion(settings, {title: 'Title ' + index, content: []});
                    accordion.insertBefore(controls);

                    // update history
                    setAccordionHistory(item, action);
                    
                    // update style to add icon
                    pixeSetAccordionStyle(item);
                });

                // settings 
                container.on('click', '.pixe-tab-settings', function(){
                    if( !$(this).closest('.pixe-item-content').is(container) ) return; // prevent nested item

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

                // tab edit
                container.on('click', '.pixe-tab-data', function(){
                    if( !$(this).closest('.pixe-item-content').is(container) ) return; // prevent nested item
                    
                    new $.pixeStyleSettings({
                        target: $(this),
                        content: pixeGetAccordionEdit(item, $(this)),
                        popupPosition: 'top-center'
                    });
                });
                break;

            case 'tab-action':
                if( settings['tab-action'] == 'toggle-click' || settings['tab-action'] == 'toggle-hover' ){
                    container.attr('data-action', 'toggle-click');
                }else{
                    container.removeAttr('data-action');
                }
                break;

            case 'title-tag':
                var title = container.children('.pixe-accordion').children('.pixe-accordion-title').children('.pixe-text');
                var tag = settings['title-tag']? settings['title-tag']: 'div';

                title.each(function(){
                    var value = $(this).html();
                    var input = $.pixeInlineTab.getInput('text', 'title', value, tag, 'pixe-text');
                    $(this).replaceWith(input);
                });
                break;
            
            case '_tab':
                var tabControls = container.children('.pixe-tab-controls');
                var tabData = settings._tab;

                removeAccordion(container.children('.pixe-accordion'));
                for( var i in tabData ){
                    getAccordion(settings, tabData[i], (i == 0), false).insertBefore(tabControls);
                }
                break;

            case '_tabContent':
                var tabContent = settings._tabContent;
                container.children('.pixe-accordion').each(function(i){
                    var content = $(this).children('.pixe-accordion-content');
                    content.children().detach();
                    content.append(tabContent.eq(i));
                });
                break;
        }

        pixeSetAccordionStyle(item);
    }

    // add content style to item settings
    $.pixeRegisterElementFilter('accordion', function(item){
        var toolbar = item.children('.pixe-item-toolbar');
        var maximizeButton = toolbar.find('.pixe-maximize');
        var html  = '<div class="pixe-action pixe-content-spaces pixe-svg-preset pixe-svg-wrapper-spaces" ></div>';
            html += '<div class="pixe-action pixe-content-bg-media pixe-svg-preset pixe-svg-wrapper-image" ></div>';
            html += '<div class="pixe-action pixe-content-bg-style pixe-svg-preset pixe-svg-wrapper-color" ></div>';

        var customButton = $(html);
        customButton.insertAfter(maximizeButton);
        maximizeButton.remove();

        // event
        customButton.on('click', function(){
            var button = $(this);
            var settings = item.data('settings');
            item.addClass('pixe-focus-toolbar');

            var ssSlug, ssType;
            if( button.hasClass('pixe-content-bg-media') ){
                ssSlug = 'content-bg-image';
                ssType = 'css-bg-image-hover';
            }else if( button.hasClass('pixe-content-bg-style') ){
                ssSlug = 'content-bg-style';
                ssType = 'bg-style';
            }else if( button.hasClass('pixe-content-spaces') ){
                ssSlug = 'content-spacing';
                ssType = 'spacing';
            }
            
            var styleHistory = new $.pixeEditHistory(item);

            new $.pixeStyleSelector({
                obj: settings,
                slug: ssSlug,
                type: ssType,
                target: button,
                onChange: function(value){
                    pixeSetAccordionStyle(item);

                    // add to history
                    styleHistory.onChange(ssSlug);
                },
                onClose: function(){
                    item.removeClass('pixe-focus');
                    item.removeClass('pixe-focus-toolbar');
                }
            });
            
        });
    });

    // settings for each tab header area
    function pixeGetAccordionEdit(item, tabButton){

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += '<div class="pixe-move-wrap" >';
        html += $.pixeGetAdminIcon('option-left', { class: 'pixe-move pixe-svg-hover', data: 'data-action="left"' });
        html += '<div class="pixe-sub-divider" ></div>';
        html += $.pixeGetAdminIcon('option-right', { class: 'pixe-move pixe-svg-hover', data: 'data-action="right"' });
        html += '</div>';
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('option-tune', { class: 'pixe-action', data: 'data-action="toggle"' });
        html += $.pixeGetAdminIcon('option-image', { class: 'pixe-action', data: 'data-action="bg"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('copy', { class: 'pixe-action', data: 'data-action="copy"' });
        html += $.pixeGetAdminIcon('remove', { class: 'pixe-remove pixe-item-action', data: 'data-action="remove"' });
        content.append(html);

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

            // create history
            var action = createAccordionHistory(item, '_tab', 'Move Tab');
                
            // move element
            var accordion = tabButton.closest('.pixe-accordion');
            if( direction == 'left' ){ 
                if( accordion.prev('.pixe-accordion').length ){
                    accordion.insertBefore(accordion.prev());
                }else{
                    return;
                }
            }else if( direction == 'right' ){
                if( accordion.next('.pixe-accordion').length ){
                    accordion.insertAfter(accordion.next());
                }else{
                    return;
                }
            }

            // update history
            setAccordionHistory(item, action);

            // render style
            pixeSetAccordionStyle(item);

        });
        content.on('click', '.pixe-action, .pixe-remove', function(){
            var button = $(this);
            var buttonAction = $(this).attr('data-action');
            
            if( buttonAction == 'copy' ){ 

                // create history
                var action = createAccordionHistory(item, '_tab', 'Copy Tab');

                // copy process
                var accordion = tabButton.closest('.pixe-accordion');
                var index = accordion.index();
                var content = accordion.children('.pixe-accordion-content').children('.pixe-tab-container');
                var settings = item.data('settings');

                var tabSettings = $.pixeClone(settings._tab[index]);
                tabSettings.content = $.pixeClone($.pixeGetEditorVal(content));
                $.pixeEditor.setUniqueIdData(tabSettings.content);

                var newContent = getAccordion(settings, tabSettings);
                $.pixeEditor.setStatus(newContent);
                newContent.insertAfter(accordion);

                // update history
                setAccordionHistory(item, action);

                // render style
                pixeSetAccordionStyle(item);

            }else if( buttonAction == 'remove' ){
                
                // create history
                var action = createAccordionHistory(item, '_tab', 'Remove Tab');
                
                // remove element
                removeAccordion(tabButton.closest('.pixe-accordion'));

                // update history
                setAccordionHistory(item, action);

                // render style
                pixeSetAccordionStyle(item);

                // close popup
                $(this).closest('.pixe-popup').data('pixe-popup').close();
            }else{

                var ssType, ssSlug, ssLabel;

                switch(buttonAction){
                    case 'bg':
                        ssSlug = 'bg';
                        ssType = 'css-bg-image-active';
                        ssLabel = 'Accordion BG';
                        break;
                    case 'toggle':
                        ssSlug = 'toggle';
                        ssType = 'accordion-toggle';
                        ssLabel = 'Toggle State';
                        break;
                }
                
                var data = tabButton.data('value');

                // create object for history
                $.pixeInlineTab.getVal(tabButton);

                new $.pixeStyleSelector({
                    obj: data,
                    slug: ssSlug,
                    type: ssType,
                    target: button,
                    onChange: function(value, type){
                        if( !data || Array.isArray(data) ){ tabButton.data('value', {ssSlug: value}); }
                        
                        // update to history
                        $.pixeInlineTab.setVal(tabButton, ssLabel);

                        // render side text
                        if( buttonAction == 'toggle' && type != 'open' ){
                            pixeRenderAccordionSideText(tabButton.closest('.pixe-accordion-title'), value);
                        }

                        // render style
                        pixeSetAccordionStyle(item);
                    }
                });
            }
            
        });

        return content;
    }

    // popup settings bar
    function pixeGetAccordionSettings(item){ 

        var settings = item.data('settings');

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeCombobox({
            slug: 'tab-action',
            width: 150,
            value: settings['tab-action'],
            options: $.pixeComboboxOption.object({
                'label': '*Action*',
                '': 'Accordion on Click',
                'hover': 'Accordion on Hover',
                'toggle-click': 'Toggle on Click',
                'toggle-hover': 'Toggle on Hover'
            })
        });
        html += $.pixeGetAdminIcon('option-spaces', { class: 'pixe-action', data: 'data-action="spaces"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="bg-style"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('option-icon', { class: 'pixe-action', data: 'data-action="icon"' });
        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);

        $.pixeSetColorDisplay(content, {'color': '#ff9a84'});

        // bind
        content.pixeCombobox();
        $.pixeStyleSettingsAction(item, content);

        // click action
        content.on('click', '[data-action]', function(){
            var button = $(this);
            var buttonAction = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);
            settings = item.data('settings');
            
            switch(buttonAction){
                case 'tag':
                    var inlineSlug = 'title-tag';
                    $.pixeInlinePopup({
                        target: button,
                        options: 'tag',
                        values: { tag: settings[inlineSlug] },
                        onChange: function(slug, value){
                            $.pixeSetData(settings, inlineSlug, value);
                            itemHistory.onChange(inlineSlug);
                            pixeAccordionRenderer(item, inlineSlug);
                        }
                    });
                    break;
                case 'spaces':
                case 'bg-style':
                case 'color':
                case 'typo':
                case 'icon':
                    var ssSlug, ssType, ssTypoGroup;
                    if( buttonAction == 'icon' ){
                        ssSlug = 'icon';
                        ssType = 'accordion-icon';
                    }else if( buttonAction == 'bg-style' ){
                        ssSlug = 'title-background-style';
                        ssType = 'button-background';
                    }else if( buttonAction == 'color' ){
                        ssSlug = 'title-color';
                        ssType = 'accordion-color';
                    }else if( buttonAction == 'typo' ){
                        ssSlug = 'typo';
                        ssType = 'typography';
                        ssTypoGroup = {
                            'title': 'Title',
                            'side-text': 'Side Text'
                        };
                    }else if( buttonAction == 'spaces' ){
                        ssSlug = 'title-spacing';
                        ssType = 'accordion-spacing'
                    }
                
                    new $.pixeStyleSelector({
                        obj: settings,
                        slug: ssSlug,
                        type: ssType,
                        typoGroup: ssTypoGroup,
                        target: button,
                        targetArea: item.children('.pixe-item-content'),
                        onChange: function(value){
                            pixeSetAccordionStyle(item);
                            itemHistory.onChange(ssSlug);
                        }
                    });
                    break;
            }
        });
        content.on('change', '.pixe-combobox', function(){
            var slug = $(this).data('slug');
            var value = $(this).data('value');

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

            // set data
            $.pixeSetData(settings, slug, value);

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

            // upate panel
            $.pixeEditor.updateSettingsPanel(item, slug, value);

            pixeAccordionRenderer(item, slug);
        });

        return content;
    }

    // accordion history
    function createAccordionHistory(item, subtype, label){
        var tabContent = item.children('.pixe-item-content').children('.pixe-accordion').children('.pixe-accordion-content');
        var action = $.pixeHistory.createAction(item, 'edit', subtype, label);
        $.pixeInlineTab.updateTabData(item);
        $.pixeHistory.setActionStep(action, item, '_tab', item.data('settings')._tab, true);
        $.pixeHistory.setActionStep(action, item, '_tabContent', tabContent.children(), true, false);
        return action;
    }
    function setAccordionHistory(item, action){
        var tabContent = item.children('.pixe-item-content').children('.pixe-accordion').children('.pixe-accordion-content');
        $.pixeInlineTab.updateTabData(item);
        $.pixeHistory.setActionStep(action, item, '_tab', item.data('settings')._tab);
        $.pixeHistory.setActionStep(action, item, '_tabContent', tabContent.children(), false, false);
        $.pixeHistory.addAction(action);
    }

    // accordion renderer
    function removeAccordion(accordion){
        accordion.children('.pixe-accordion-content').children().detach();
        accordion.remove();
    }
    function getAccordion(settings, data, active = false, renderContent = true){
        var ret = $('<div class="pixe-accordion" ></div>');
        active && ret.addClass('pixe-active');
        ret.append(getAccordionTitle(settings, data.title, data.data));
        ret.append(getAccordionContent(data.content, renderContent));
        return ret;
    }
    function getAccordionTitle(settings, value, data){
        var ret = $('<div class="pixe-accordion-title" ></div>');
        var tag = settings['title-tag']? settings['title-tag']: 'div';
        var data = data? data: {};

        var titleWrap = $('<span class="pixe-text-wrap" ></span>');
        titleWrap.appendTo(ret);
        titleWrap.append($.pixeInlineTab.getInput('text', 'title', value, tag, 'pixe-text'));
        pixeRenderAccordionSideText(ret, data.toggle);

        ret.append($.pixeInlineTab.getInput('data', 'data', data));

        return ret;
    }
    function pixeRenderAccordionSideText(title, data){
        var sideText = title.find('.pixe-accordion-side-text');
        if( !data || !data['side-text'] ){
            sideText.remove();
            return;
        }

        if( !sideText.length ){
            sideText = $('<div class="pixe-accordion-side-text" ></div>');
        }
        sideText.text(data['side-text']);

        if( !data['side-text-position'] ){
            sideText.insertBefore(title.find('.pixe-text').first());
        }else{
            sideText.insertAfter(title.find('.pixe-text').first());
        }
    }
    function getAccordionContent(value, renderContent){
        var ret = $('<div class="pixe-accordion-content" ></div>');
        if( renderContent ){
            ret.append($.pixeInlineTab.getInput('container', 'content', value));
        }
        return ret;
    }

    // accordion style
    function pixeSetAccordionStyle(item){
        var settings = item.data('settings');
        var id = '[data-accordion="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';
        var tab = settings._tab;
        var container = item.children('.pixe-item-content');
        
        var typo = settings.typo? settings.typo: {};
        var titleSpaces = settings['title-spacing']? settings['title-spacing']: {};
        var titleColor = settings['title-color']? settings['title-color']: {};
        var iconData = settings.icon? settings.icon: {};

        // title typo
        var tabTitle = container.children('.pixe-accordion').children('.pixe-accordion-title');
        var tabSideText = tabTitle.find('.pixe-accordion-side-text');
        $.pixeTypoStyle.setPresetData(tabTitle, typo['title']);
        $.pixeTypoStyle.setPresetData(tabSideText, typo['side-text']);
        $.pixeAddTypoDependency(item, [typo['title'], typo['side-text']]);

        // icon
        tabTitle.find('.pixe-plus, .pixe-minus').remove();
        if( !iconData.plus ){
            tabTitle.prepend($.pixeGetIconPreset('acc-plus', {'class': 'pixe-plus'}));
        }else if( iconData.plus != 'none' ){
            tabTitle.prepend($.pixeGetIcon(iconData.plus, {'class': 'pixe-plus'}));
        }
        if( !iconData.minus ){
            tabTitle.prepend($.pixeGetIconPreset('acc-minus', {'class': 'pixe-minus'}));
        }else if( iconData.minus != 'none' ){
            tabTitle.prepend($.pixeGetIcon(iconData.minus, {'class': 'pixe-minus'}));
        }
        $.pixeAddIconDependency(item, [iconData.plus, iconData.minus]);
        
        // device
        function getCss(device = '', state = ''){
            var ret = '';

            if( state == '' ){

                // icon
                var iconCustomCss = '';
                if( !device && iconData['position'] ){
                    iconCustomCss += 'order: 2;';
                }
                ret += $.pixeSetIconCss({
                    icon: iconData,
                    selector: id + ' > .pixe-accordion > .pixe-accordion-title .pixe-icon',
                    hoverSelector: id + ' > .pixe-accordion > .pixe-accordion-title:hover .pixe-icon',
                    activeSelector: id + ' > .pixe-accordion.pixe-active > .pixe-accordion-title .pixe-icon',
                    custom: iconCustomCss,
                    syncHeight: true
                }, device);

                // title spacing
                ret += $.pixeSetCss(id + ' > .pixe-accordion > .pixe-accordion-title', {
                    'gap': iconData['space'],
                    'padding': titleSpaces[device + 'padding'],
                    'margin': titleSpaces[device + 'margin'],
                    'justify-content': !device && iconData['align']? iconData['align']: ''
                });
                ret += $.pixeSetCss(id + ' > .pixe-accordion > .pixe-accordion-title .pixe-text', {
                    'custom': $.pixeTypoStyle.getPresetCss(typo['title'], device)
                });
                ret += $.pixeSetCss(id + ' > .pixe-accordion > .pixe-accordion-title .pixe-text-wrap', {
                    'gap': titleSpaces[device + 'side-text-gap']
                });
                ret += $.pixeSetCss(id + ' > .pixe-accordion > .pixe-accordion-title .pixe-accordion-side-text', {
                    'margin-top': titleSpaces[device + 'side-text-offset'],
                    'custom': $.pixeTypoStyle.getPresetCss(typo['side-text'], device)
                });
        
                // content spacing
                ret += $.pixeSetCss(id + ' > .pixe-accordion', {
                    'padding': settings['content-spacing']? settings['content-spacing'][device + 'padding']: '',
                    'margin': settings['content-spacing']? settings['content-spacing'][device + 'margin']: '',
                });

                
            }else if( state == '-hover' ){
                ret += $.pixeSetCss(id + ' > .pixe-accordion > .pixe-accordion-title:hover .pixe-icon', {
                    'color': iconData[device + 'color' + state],
                    'fill': iconData[device + 'color' + state]
                });
            }else if( state == '-active' ){
                ret += $.pixeSetCss(id + ' > .pixe-accordion.pixe-active > .pixe-accordion-title .pixe-icon', {
                    'color': iconData[device + 'color' + state],
                    'fill': iconData[device + 'color' + state]
                });
            }

            // title background
            if( settings['title-background-style'] ){
                var bgSelector = '';
                if( !state ){
                    bgSelector = id + '  > .pixe-accordion > .pixe-accordion-title';
                }else if( state == '-hover' ){
                    bgSelector = id + ' > .pixe-accordion > .pixe-accordion-title:hover';
                }else if( state == '-active' ){
                    bgSelector = id + ' > .pixe-accordion.pixe-active > .pixe-accordion-title';
                }

                ret += $.pixeSetCss(bgSelector, {
                    background: settings['title-background-style'][device + 'color' + state],
                    border: settings['title-background-style'][device + 'border' + state],
                    shadow: settings['title-background-style'][device + 'shadow' + state],
                    mask: settings['title-background-style'][device + 'mask' + state]
                })
            }
            
            // title text color
            if( titleColor['title'] ){
                var textSelector = '';
                if( !state ){
                    textSelector = id + '  > .pixe-accordion > .pixe-accordion-title .pixe-text';
                }else if( state == '-hover' ){
                    textSelector = id + '  > .pixe-accordion > .pixe-accordion-title:hover .pixe-text';
                }else if( state == '-active' ){
                    textSelector = id + '  > .pixe-accordion.pixe-active > .pixe-accordion-title .pixe-text';
                }
                ret += $.pixeSetCss(textSelector, {'custom': $.pixeGetTextColorCss(titleColor['title'], device, state)});
            }

            // side text color
            if( titleColor['side-text'] ){
                var textSelector = '';
                if( !state ){
                    textSelector = id + '  > .pixe-accordion > .pixe-accordion-title .pixe-accordion-side-text';
                }else if( state == '-hover' ){
                    textSelector = id + '  > .pixe-accordion > .pixe-accordion-title:hover .pixe-accordion-side-text';
                }else if( state == '-active' ){
                    textSelector = id + '  > .pixe-accordion.pixe-active > .pixe-accordion-title .pixe-accordion-side-text';
                }
                ret += $.pixeSetCss(textSelector, {'custom': $.pixeGetTextColorCss(titleColor['side-text'], device, state)});
            }

            // content background
            if( settings['content-bg-style'] || settings['content-bg-image'] ){
                var contentStyle = settings['content-bg-style']? settings['content-bg-style']: {};
                var contentBg = settings['content-bg-image']? settings['content-bg-image']: {};
                var bgSelector = '';
                if( !state ){
                    bgSelector = id + ' > .pixe-accordion';
                }else if( state == '-hover' ){
                    bgSelector = id + ' > .pixe-accordion:hover';
                }

                ret += $.pixeSetCss(bgSelector, {
                    background: contentStyle[device + 'color' + state],
                    border: contentStyle[device + 'border' + state],
                    shadow: contentStyle[device + 'shadow' + state],
                    mask: contentStyle[device + 'mask' + state],
                    'background-image': contentBg[device + 'image' + state],
                    'background-position': {
                        'position': contentBg[device + 'position' + state],
                        'pos-x': contentBg[device + 'pos-x' + state],
                        'pos-y': contentBg[device + 'pos-y' + state]
                    },
                    'background-size': {
                        'size': contentBg[device + 'size' + state],
                        'scale': contentBg[device + 'scale' + state]
                    },
                    'background-repeat': contentBg[device + 'repeat' + state]
                });
            }
            
            // tab specific css
            for( var i in tab ){
                if( tab[i].data ){
                    var tabId = id + ' > .pixe-accordion:nth-child(' + (parseInt(i) + 1) + ') .pixe-accordion-title';
                    var bgData = tab[i].data.bg? tab[i].data.bg: {};

                    if( state == '-hover' ){
                        tabId += ':hover';
                    }else if( state == '-active' ){
                        tabId += '.pixe-active';
                    }

                    ret += $.pixeSetCss(tabId, {
                        'background-image': bgData[device + 'image' + state],
                        'background-position': {
                            'position': bgData[device + 'position' + state],
                            'pos-x': bgData[device + 'pos-x' + state],
                            'pos-y': bgData[device + 'pos-y' + state]
                        },
                        'background-size': {
                            'size': bgData[device + 'size' + state],
                            'scale': bgData[device + 'scale' + state]
                        },
                        'background-repeat': bgData[device + 'repeat' + state]
                    });
                }
            }

            return ret;
        }

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

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

        $.pixeItem.renderCss(item);
    }

    // tab
    $.pixeRegisterElementData('tab', 'tab');
    $.pixeRegisterElementRenderer('tab', pixeTabRenderer);
    function pixeTabRenderer(item, type){
        var settings = item.data('settings');
        var container = item.children('.pixe-item-content');

        // old data
        if( settings['title-background-style'] ){
            settings['title-bg'] = {
                tab: settings['title-background-style']
            };
            delete settings['title-background-style'];
        }
         
        function getTitleSettings(){
            var html  = '<div class="pixe-tab-settings-wrap" >';
                html += '<div class="pixe-tab-new pixe-svg-preset pixe-svg-tab-new" ></div>';
                html += '<div class="pixe-tab-settings pixe-svg-preset pixe-svg-tab-settings" ></div>';
                html += '</div>';
            return html;
        }

        // render
        switch(type){
            case 'item':
                container.off().empty();
                
                // init tab data if empty
                var tabData;
                if( settings._tab ){
                    tabData = settings._tab;
                }else{
                    tabData = [
                        {title: 'Title 1', content: []},
                        {title: 'Title 2', content: []},
                    ];
                }
                
                // html
                var tabTitle = $('<div class="pixe-item-tab-title pixe-tab-title" ></div>');
                var tabTextWrap = $('<div class="pixe-text-wrap" ></div>');
                var tabContent = $('<div class="pixe-item-tab-content pixe-tab-content" ></div>');
                for( var i in tabData ){
                    var active = (i == 0);
                    tabTextWrap.append(getTabTitle(settings, i, tabData[i].title, tabData[i].data, active));
                    tabContent.append(getTabContent(i, tabData[i].content, active));
                }
                tabTitle.append(tabTextWrap);
                tabTitle.append(getTitleSettings());
                container.append(tabTitle);
                container.append(tabContent);
                container.pixeItemTab();

                // add new
                tabTitle.on('click', '.pixe-tab-new', function(){
                    if( !$(this).closest('.pixe-item-content').is(container) ) return; // prevent nested item
                    
                    // create history
                    var action = createTabHistory(item, '_tab', 'Add New Tab');

                    // add element
                    var button = $(this);
                    var index = tabTextWrap.children('[data-tab]').length;
                    var newTitle = getTabTitle(settings, index, 'Tab Title');
                    var newContent = getTabContent(index, []);
                    newTitle.appendTo(tabTextWrap);
                    newContent.appendTo(tabContent);

                    // update history
                    setTabHistory(item, action);
                });

                // settings 
                tabTitle.on('click', '.pixe-tab-settings', function(){
                    if( !$(this).closest('.pixe-item-content').is(container) ) return; // prevent nested item

                    new $.pixeStyleSettings({
                        target: $(this),
                        popupPosition: 'top-center',
                        content: pixeGetTabSettings(item)
                    });
                });

                // tab edit
                tabTitle.on('click', '.pixe-tab-data', function(){
                    if( !$(this).closest('.pixe-item-content').is(container) ) return; // prevent nested item

                    new $.pixeStyleSettings({
                        target: $(this),
                        content: pixeGetTabEdit(item, $(this)),
                        popupPosition: 'top-center'
                    });
                });
                break;

            case '_tab':
            case 'title-tag':
                var tabData = settings._tab;
                var tabTitle = container.children('.pixe-tab-title');
                var activeIndex = tabTitle.children('.pixe-text-wrap').children('.pixe-active').index();

                var tabTextWrap = $('<div class="pixe-text-wrap" ></div>');
                for( var i in tabData ){
                    tabTextWrap.append(getTabTitle(settings, i, tabData[i].title, tabData[i].data, i == activeIndex));
                }

                tabTitle.empty();
                tabTitle.append(tabTextWrap);
                tabTitle.append(getTitleSettings());
                break; 

            // add update tab content
            case '_tabContent':
                var tabTitle = container.children('.pixe-tab-title');
                var tabContent = container.children('.pixe-tab-content');
                tabContent.children().detach();
                tabContent.append(settings._tabContent);

                // reset active tab
                pixeResetTabState(tabTitle, tabContent);
                break;
        }

        console.log(type);

        pixeSetTabStyle(item);
    }

    // add content style to item settings
    $.pixeRegisterElementFilter('tab', function(item){
        var toolbar = item.children('.pixe-item-toolbar');
        var maximizeButton = toolbar.find('.pixe-maximize');
        var html  = '<div class="pixe-action pixe-content-spaces pixe-svg-preset pixe-svg-wrapper-spaces" ></div>';
            html += '<div class="pixe-action pixe-content-bg-media pixe-svg-preset pixe-svg-wrapper-image" ></div>';
            html += '<div class="pixe-action pixe-content-bg-style pixe-svg-preset pixe-svg-wrapper-color" ></div>';

        var customButton = $(html);
        customButton.insertAfter(maximizeButton);
        maximizeButton.remove();

        // event
        customButton.on('click', function(){
            var button = $(this);
            var settings = item.data('settings');
            item.addClass('pixe-focus-toolbar');

            var ssSlug, ssType;
            if( $(this).hasClass('pixe-content-bg-media') ){
                ssSlug = 'content-bg-image';
                ssType = 'css-bg-image-hover';
            }else if( $(this).hasClass('pixe-content-bg-style') ){
                ssSlug = 'content-bg-style';
                ssType = 'bg-style';
            }else if( $(this).hasClass('pixe-content-spaces') ){
                ssSlug = 'content-spacing';
                ssType = 'spacing';
            }
            
            var styleHistory = new $.pixeEditHistory(item);

            new $.pixeStyleSelector({
                obj: settings,
                slug: ssSlug,
                type: ssType,
                target: button,
                onChange: function(value){
                    pixeSetTabStyle(item);

                    // add to history
                    styleHistory.onChange(ssSlug);
                },
                onClose: function(){
                    item.removeClass('pixe-focus');
                    item.removeClass('pixe-focus-toolbar');
                }
            });
            
        });
    });

    // settings for each tab header area
    function pixeGetTabEdit(item, tabButton){

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-left', { class: 'pixe-move pixe-svg-hover', data: 'data-action="left"' });
        html += '<div class="pixe-sub-divider" ></div>';
        html += $.pixeGetAdminIcon('option-right', { class: 'pixe-move pixe-svg-hover', data: 'data-action="right"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('option-icon', { class: 'pixe-action', data: 'data-action="icon"' });
        html += $.pixeGetAdminIcon('option-image', { class: 'pixe-action', data: 'data-action="bg"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('copy', { class: 'pixe-action', data: 'data-action="copy"' });
        html += $.pixeGetAdminIcon('remove', { class: 'pixe-remove pixe-item-action', data: 'data-action="remove"' });
        content.append(html);

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

            var tabTitle = tabButton.closest('.pixe-tab-title');
            var tabContent = tabTitle.siblings('.pixe-tab-content');

            var currentTitle = tabButton.closest('[data-tab]');
            var currentIndex = currentTitle.attr('data-tab');
            var currentContent = tabContent.children('[data-tab="' + currentIndex + '"]');

            // create history
            var action = createTabHistory(item, '_tab', 'Move Tab');
            
            // move element
            if( direction == 'left' ){
                if( currentTitle.prev('[data-tab]').length ){
                    currentTitle.insertBefore(currentTitle.prev());
                    currentContent.insertBefore(currentContent.prev());
                }else{
                    return;
                }
            }else if( direction == 'right' ){
                if( currentTitle.next('[data-tab]').length ){ 
                    currentTitle.insertAfter(currentTitle.next());
                    currentContent.insertAfter(currentContent.next());
                }else{
                    return;
                }
            }

            // reset active tab & update tab id
            pixeResetTabState(tabTitle, tabContent); 

            // update history
            setTabHistory(item, action);

            // render style
            pixeSetTabStyle(item);
        });
        content.on('click', '.pixe-action, .pixe-remove', function(){
            var button = $(this);
            var buttonAction = $(this).attr('data-action');
            var data = tabButton.data('value');

            if( buttonAction == 'bg' ){
                
                // create object for history
                $.pixeInlineTab.getVal(tabButton);

                new $.pixeStyleSelector({
                    obj: data,
                    slug: 'bg',
                    type: 'css-bg-image-active',
                    target: button,
                    targetArea: tabButton,
                    onChange: function(value){
                        if( !data || Array.isArray(data) ){ tabButton.data('value', { 'bg': value }); }
                        
                        // update to history
                        $.pixeInlineTab.setVal(tabButton, 'Tab Background');

                        // render
                        pixeSetTabStyle(item);
                    }
                });
            }else if( buttonAction == 'icon' ){

                // create object for history
                $.pixeInlineTab.getVal(tabButton);

                new $.pixeStyleSelector({
                    obj: data,
                    slug: 'icon',
                    type: 'button-icon',
                    target: button,
                    targetArea: tabButton,
                    onChange: function(value){
                        if( !data || Array.isArray(data) ){ tabButton.data('value', { 'icon': value }); }
                        
                        // update to history
                        $.pixeInlineTab.setVal(tabButton, 'Tab Icon');

                        // render
                        pixeSetTabStyle(item);
                    }
                });
            }else if( buttonAction == 'copy' ){

                // create history
                var action = createTabHistory(item, '_tab', 'Copy Tab');

                // copy process
                var title = tabButton.closest('[data-tab]');
                var index = parseInt(title.attr('data-tab'));
                var tabTitle = title.closest('.pixe-tab-title');
                var tabContent = tabTitle.siblings('.pixe-tab-content');
                var content = tabContent.children('[data-tab="' + index + '"]')
                var settings = item.data('settings');

                var titleSettings = settings._tab[index];
                var newTitle = getTabTitle(settings, 99, titleSettings.title, titleSettings.data);
                newTitle.insertAfter(title);

                var contentSettings = $.pixeClone($.pixeGetEditorVal(content));
                $.pixeEditor.setUniqueIdData(contentSettings);

                var newContent = getTabContent(99, contentSettings);
                $.pixeEditor.setStatus(newContent);
                newContent.insertAfter(content);

                // reset active tab & update tab id
                pixeResetTabState(tabTitle, tabContent);  

                // update history
                setTabHistory(item, action);

                // render style
                pixeSetTabStyle(item);

            }else if( buttonAction == 'remove' ){

                var tabTitle = tabButton.closest('.pixe-tab-title');
                var tabContent = tabTitle.siblings('.pixe-tab-content');

                // create history
                var action = createTabHistory(item, '_tab', 'Remove Tab');
                
                // remove element
                var selectedTitle = tabButton.closest('[data-tab]');
                var selectedContent = tabContent.children('[data-tab="' + selectedTitle.attr('data-tab') + '"]');
                selectedTitle.remove();
                selectedContent.detach();

                // reset active tab & update tab id
                pixeResetTabState(tabTitle, tabContent); 

                // update history
                setTabHistory(item, action);

                // render style
                pixeSetTabStyle(item);

                // close popup
                $(this).closest('.pixe-popup').data('pixe-popup').close();
            }
            
        });

        return content;
    }

    // popup settings bar
    function pixeGetTabSettings(item){
        var settings = item.data('settings');

        // create element
        var content = $('<div class="pixe-ssettings pixe-tab-ssettings" ></div>');
        var html = '';
        html += $.pixeCombobox({
            slug: 'tab-action',
            width: 70,
            value: settings['tab-action'],
            options: $.pixeComboboxOption.object({
                'label': '*Tab Action*',
                '': 'Click',
                'hover': 'Hover'
            })
        });
        html += $.pixeGetAdminIcon('option-vertical', {class: 'pixe-action', data: 'data-action="horizontal"'});
        html += $.pixeGetAdminIcon('option-horizontal', {class: 'pixe-action', data: 'data-action="vertical"'});
        html += $.pixeGetAdminIcon('option-align-left', { class: 'pixe-action', data: 'data-action="alignment"' });
        html += $.pixeGetAdminIcon('option-spaces', { class: 'pixe-action', data: 'data-action="spaces"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="bg-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" ><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);

        // init value
        if( settings['tab-alignment'] == 'vertical' ){
            content.addClass('pixe-style-vertical');
        }else{
            content.addClass('pixe-style-horizontal');
        }

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

        // bind
        content.pixeCombobox();
        $.pixeStyleSettingsAction(item, content);

        // click action
        content.on('click', '[data-action]', function(){
            var button = $(this);
            var buttonAction = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);
            settings = item.data('settings');
            
            switch(buttonAction){
                case 'vertical':
                case 'horizontal':
                    var slug = 'tab-alignment';
                    var value = '';

                    // set data
                    if( buttonAction == 'vertical' ){
                        value = 'vertical';
                        content.addClass('pixe-style-vertical').removeClass('pixe-style-horizontal');
                    }else if( buttonAction == 'horizontal' ){
                        value = '';
                        content.addClass('pixe-style-horizontal').removeClass('pixe-style-vertical');
                    }
                    $.pixeSetData(settings, slug, value);
                    itemHistory.onChange(slug);
                    pixeSetTabStyle(item);
                    break;

                case 'tag':
                    var inlineSlug = 'title-tag';
                    $.pixeInlinePopup({
                        target: button,
                        options: 'tag',
                        values: { tag: settings[inlineSlug] },
                        onChange: function(slug, value){
                            $.pixeSetData(settings, inlineSlug, value);
                            itemHistory.onChange(inlineSlug);
                            pixeTabRenderer(item, inlineSlug);
                        }
                    });
                    break;
                case 'alignment':
                    var inlineSlug = 'title-alignment';
                    $.pixeInlinePopup({
                        target: button,
                        options: 'alignment',
                        values: settings[inlineSlug],
                        onChange: function(slug, value){
                            $.pixeSetData(settings, inlineSlug, { alignment: value });
                            itemHistory.onChange(inlineSlug);
                            pixeSetTabStyle(item);
                        }
                    });
                    break;
                case 'spaces':
                case 'bg-style':
                case 'color':
                case 'typo':
                    var ssSlug, ssType;
                    if( buttonAction == 'bg-style' ){
                        ssSlug = 'title-bg';
                        ssType = 'tab-background';
                    }else if( buttonAction == 'color' ){
                        ssSlug = 'title-text-color';
                        ssType = 'button-text';
                    }else if( buttonAction == 'typo' ){
                        ssSlug = 'title-typo';
                        ssType = 'typography';
                    }else if( buttonAction == 'spaces' ){
                        ssSlug = 'title-spacing';
                        ssType = 'tab-spacing'
                    }
                
                    new $.pixeStyleSelector({
                        obj: settings,
                        slug: ssSlug,
                        type: ssType,
                        target: button,
                        onChange: function(value){
                            if( buttonAction == 'color' ){ $.pixeSetColorDisplay(content, settings['title-text-color']); }
                            
                            pixeSetTabStyle(item);
                            itemHistory.onChange(ssSlug);
                        }
                    });
                    break;
            }
        });
        content.on('change', '.pixe-combobox', function(){
            var slug = $(this).data('slug');
            var value = $(this).data('value');

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

            // set data
            $.pixeSetData(settings, slug, value);

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

            // upate panel
            $.pixeEditor.updateSettingsPanel(item, slug, value);
        });

        return content;
    }

    // tab history
    function createTabHistory(item, subtype, label){
        var tabContent = item.children('.pixe-item-content').children('.pixe-item-tab-content');
        var action = $.pixeHistory.createAction(item, 'edit', subtype, label);
        $.pixeInlineTab.updateTabData(item);
        $.pixeHistory.setActionStep(action, item, '_tab', item.data('settings')._tab, true);
        $.pixeHistory.setActionStep(action, item, '_tabContent', tabContent.children(), true, false);
        return action;
    }
    function setTabHistory(item, action){
        var tabContent = item.children('.pixe-item-content').children('.pixe-item-tab-content');  
        $.pixeInlineTab.updateTabData(item);
        $.pixeHistory.setActionStep(action, item, '_tab', item.data('settings')._tab);
        $.pixeHistory.setActionStep(action, item, '_tabContent', tabContent.children(), false, false);
        $.pixeHistory.addAction(action);
    }

    // tab renderer
    function getTabTitle(settings, index, value, data, active = false){
        var ret = $('<div></div>');
        ret.attr('data-tab', index);
        if( active ) ret.addClass('pixe-active');

        var tag = settings['title-tag']? settings['title-tag']: 'div';
        ret.append($.pixeInlineTab.getInput('text', 'title', value, tag, 'pixe-text'));
        ret.append($.pixeInlineTab.getInput('data', 'data', data));
        return ret;
    }
    function getTabContent(index, value, active = false){
        var content = $.pixeInlineTab.getInput('container', 'content', value);
        content.attr('data-tab', index);
        active && content.addClass('pixe-active');
        return content;
    }

    // reset tab id & active tab
    function pixeResetTabState(tabTitle, tabContent){
        var tIndex = 0;
        tabTitle.children('.pixe-text-wrap').children('[data-tab]').each(function(){
            if( tIndex == 0 ){
                $(this).addClass('pixe-active').siblings().removeClass('pixe-active');
            }

            $(this).attr('data-tab', tIndex);
            tIndex++;
        });

        var cIndex = 0;
        tabContent.children('[data-tab]').each(function(){
            if( cIndex == 0 ){
                $(this).addClass('pixe-active').css({display: 'flex', opacity: 1}).siblings().removeClass('pixe-active').css({display: 'none'});
            }

            $(this).attr('data-tab', cIndex);
            cIndex++;
        });
    }

    // set tab style
    function pixeSetTabStyle(item){
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';
        var tab = settings._tab;
        
        // settings
        var titleSpacing = settings['title-spacing']? settings['title-spacing']: {};
        var titleBgStyle = settings['title-bg']? settings['title-bg']: {};
        var titleBg = titleBgStyle['tab'];
        var titleContainerBg = titleBgStyle['container'];

        // title typo
        var tabTitle = item.children('.pixe-item-content').children('.pixe-tab-title');
        $.pixeTypoStyle.setPresetData(tabTitle, settings['title-typo']);
        $.pixeAddTypoDependency(item, [settings['title-typo']]);

        // alignment
        var tabAlignment = settings['tab-alignment'];
        if( tabAlignment == 'vertical' ){
            item.addClass('pixe-style-vertical');
        }else{
            item.removeClass('pixe-style-vertical');
        }

        // title alignment
        var titleAlignment = settings['title-alignment']? settings['title-alignment'].alignment: '';
        if( !tabAlignment && titleAlignment == 'right' ){
            tabTitle.addClass('pixe-align-' + titleAlignment);
        }else{
            tabTitle.removeClass('pixe-align-right');
        }

        // icon
        var iconDeps = [];
        for( var i in tab ){
            var tabTarget = tabTitle.find('[data-tab="' + i + '"]');
            tabTarget.find('.pixe-icon').remove();

            if( tab[i].data && tab[i].data.icon && tab[i].data.icon.icon ){
                tabTarget.prepend($.pixeGetIcon(tab[i].data.icon.icon));
                iconDeps.push(tab[i].data.icon.icon);
            }
        }
        $.pixeAddIconDependency(item, iconDeps);
        
        // device typo
        function getCss(device = '', state = ''){
            var ret = '';

            if( state == '' ){

                // title alignment
                if( !tabAlignment && !device ){
                    ret += $.pixeSetCss(id + ' .pixe-item-tab-title', {
                        'justify-content': titleAlignment
                    });
                }

                // title spacing
                ret += $.pixeSetCss(id + ' .pixe-item-tab-title [data-tab]', {
                    'padding': titleSpacing[device + 'padding'],
                });
                ret += $.pixeSetCss(id + ' .pixe-item-tab-title .pixe-text-wrap', {
                    'padding': titleSpacing[device + 'container-padding'],
                    'margin': titleSpacing[device + 'container-margin'],
                    'gap': titleSpacing[device + 'gap']
                });
                ret += $.pixeSetCss(id + ' .pixe-item-tab-title .pixe-text', {
                    'custom': $.pixeTypoStyle.getPresetCss(settings['title-typo'], device)
                });

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

            // title background
            if( titleContainerBg ){
                ret += $.pixeSetCss(id + ' .pixe-item-tab-title .pixe-text-wrap', {
                    background: titleContainerBg[device + 'color' + state],
                    border: titleContainerBg[device + 'border' + state],
                    shadow: titleContainerBg[device + 'shadow' + state],
                    mask: titleContainerBg[device + 'mask' + state]
                });
            }
            if( titleBg ){
                var bgSelector = '';
                if( !state ){
                    bgSelector = id + ' .pixe-item-tab-title [data-tab]';
                }else if( state == '-hover' ){
                    bgSelector = id + ' .pixe-item-tab-title [data-tab]:hover';
                }else if( state == '-active' ){
                    bgSelector = id + ' .pixe-item-tab-title [data-tab].pixe-active';
                }

                ret += $.pixeSetCss(bgSelector, {
                    background: titleBg[device + 'color' + state],
                    border: titleBg[device + 'border' + state],
                    shadow: titleBg[device + 'shadow' + state],
                    mask: titleBg[device + 'mask' + state]
                });
            }
            
            if( !device && !state ){
                if( titleBg && titleBg['mask'] && (titleBg['mask'].shape && titleBg['mask'].shape != 'none') ){
                    item.data('extra-style', {
                        desktop: id + ' .pixe-tab-data{ left: 50%; margin-left: -4px; right: auto; }' + 
                                 id + ' .pixe-tab-data:hover, ' + id + ' .pixe-tab-data.pixe-active{ margin-left: -7px; }'
                    })
                }else{
                    item.removeData('extra-style');
                }
            }
            
            // title text color
            var textColor = settings['title-text-color'];
            if( textColor ){
                var textSelector = '';
                if( !state ){
                    textSelector = id + ' .pixe-item-tab-title .pixe-text';
                }else if( state == '-hover' ){
                    textSelector = id + ' .pixe-item-tab-title [data-tab]:hover .pixe-text';
                }else if( state == '-active' ){
                    textSelector = id + ' .pixe-item-tab-title [data-tab].pixe-active .pixe-text';
                }
                ret += $.pixeSetCss(textSelector, {'custom': $.pixeGetTextColorCss(textColor, device, state)});
            }

            // content background
            if( settings['content-bg-style'] || settings['content-bg-image'] ){
                var contentStyle = settings['content-bg-style']? settings['content-bg-style']: {};
                var contentBg = settings['content-bg-image']? settings['content-bg-image']: {};
                var bgSelector = '';
                if( !state ){
                    bgSelector = id + ' .pixe-item-tab-content';
                }else if( state == '-hover' ){
                    bgSelector = id + ' .pixe-item-tab-content:hover';
                }

                ret += $.pixeSetCss(bgSelector, {
                    background: contentStyle[device + 'color' + state],
                    border: contentStyle[device + 'border' + state],
                    shadow: contentStyle[device + 'shadow' + state],
                    mask: contentStyle[device + 'mask' + state],
                    'background-image': contentBg[device + 'image' + state],
                    'background-position': {
                        'position': contentBg[device + 'position' + state],
                        'pos-x': contentBg[device + 'pos-x' + state],
                        'pos-y': contentBg[device + 'pos-y' + state]
                    },
                    'background-size': {
                        'size': contentBg[device + 'size' + state],
                        'scale': contentBg[device + 'scale' + state]
                    },
                    'background-repeat': contentBg[device + 'repeat' + state]
                });
            }

            // tab specific css
            for( var i in tab ){
                if( tab[i].data ){
                    var tabId = id + ' .pixe-item-tab-title [data-tab="' + i + '"]';
                    var bgData = tab[i].data.bg? tab[i].data.bg: {};
                    var iconData = tab[i].data.icon? tab[i].data.icon: {};

                    if( state == '-hover' ){
                        tabId += ':hover';
                    }else if( state == '-active' ){
                        tabId += '.pixe-active';
                    }

                    ret += $.pixeSetCss(tabId, {
                        'gap': iconData[device + 'space' + state],
                        'background-image': bgData[device + 'image' + state],
                        'background-position': {
                            'position': bgData[device + 'position' + state],
                            'pos-x': bgData[device + 'pos-x' + state],
                            'pos-y': bgData[device + 'pos-y' + state]
                        },
                        'background-size': {
                            'size': bgData[device + 'size' + state],
                            'scale': bgData[device + 'scale' + state]
                        },
                        'background-repeat': bgData[device + 'repeat' + state]
                    });
                    ret += $.pixeSetCss(tabId + ' .pixe-icon', {
                        'font-size': iconData[device + 'width' + state],
                        'width': iconData[device + 'width' + state],
                        'color': iconData[device + 'color' + state],
                        'fill': iconData[device + 'color' + state],
                        'transform': { y: iconData[device + 'v-offset' + state] },
                        'order': (iconData[device + 'position' + state] == 'right')? 2: undefined
                    });
                }
            }

            return ret;
        }

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

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

        $.pixeItem.renderCss(item);
    }

})(jQuery);	
