(function($){
    "use strict";

    // button controls
    $.pixeControlSettings = {

        tabHead: false,
        tabContent: false,
        isChanged: false,

        // initiate content
        init: function(settings){
            settings = $.extend({
                activeTab: 'bullet'
            }, settings);

            var t = this;
            t.isChanged = false;
            
            var container = $('<div class="pixe-typo-settings pixe-box-sizing" ></div>');
            var tab = $('<div class="pixe-settings-tab" ></div>');
            tab.appendTo(container);

            // init header area
            t.tabHead = $('<div class="pixe-settings-tab-head" ></div>');
            t.tabHead.append('<span data-tab="bullet" >Bullet</span>');
            t.tabHead.append('<span data-tab="navigation" >Navigation</span>');
            t.tabHead.append('<span data-tab="touch" >Touch Navigation</span>');
            t.tabHead.append('<span data-tab="pagination" >Pagination</span>');
            t.tabHead.append($.pixeGetAdminIcon('cancel', { class: 'pixe-close' }));
            tab.append(t.tabHead);
            
            // init content area
            t.tabContent = $('<div class="pixe-settings-tab-content" ></div>');
            t.changeTab(settings.activeTab);
            tab.append(t.tabContent);

            // get content
            t.tabHead.on('click', '[data-tab]', function(){
                t.changeTab($(this).attr('data-tab'));
            });
            
            // popup
            var lb = new $.pixeLightboxPopup({
                class: 'pixe-lb-typo-settings',
                content: container,
                onClose: function(){
                    if( !t.isChanged ) return; 
                    
                    // sync variable to child iframe
                    $.pixeBuilder.setIframeData(['controlPreset']);

                    // update combobox options for builder
                    var selector  = '.pixe-bullet-preset-combobox,';
                        selector += '.pixe-navigation-preset-combobox,';
                        selector += '.pixe-pagination-preset-combobox';

                    $.pixeBuilder.settingsPanel.panel.find(selector).each(function(){
                        if( $(this).hasClass('pixe-bullet-preset-combobox') ){
                            $.pixeUpdateCombobox($(this), { options: 'bulletPreset' });
                        }else if( $(this).hasClass('pixe-navigation-preset-combobox') ){
                            $.pixeUpdateCombobox($(this), { options: 'navigationPreset' });
                        }else if( $(this).hasClass('pixe-pagination-preset-combobox') ){
                            $.pixeUpdateCombobox($(this), { options: 'paginationPreset' });
                        }
                    }); 
                }
            });
            t.tabHead.on('click', '.pixe-close', function(){
                lb.close();
            });
        },

        // change font settings tab
        changeTab: function(activeTab){
            var t = this;
            var tab = t.tabHead.find('[data-tab="' + activeTab + '"]');

            if( tab.hasClass('pixe-active') ) return;
            tab.addClass('pixe-active').siblings().removeClass('pixe-active');

            t.tabContent.empty();
            
            var content = $('<div class="pixe-settings-tab-notice" ></div>');
            content.append($.pixeProNotice('feature', 'control'));
            content.appendTo(t.tabContent);
        },

    };

})(jQuery);
