(function($){
    "use strict";
    
    $.pixeTemplateSettings = {

        init: function(settings){
            settings = $.extend({
                activeTab: 'template-part',
                activeSubtab: 'header',
                container: undefined,
                hasEditor: true
            }, settings);

            var t = this;
            t.settings = settings;

            var container = $('<div class="pixe-template-settings pixe-box-sizing" ></div>');

            // create popup
            if( settings.container ){
                settings.container.append(container);
            }else{
                t.lb = new $.pixeLightboxPopup({
                    class: 'pixe-lb-template-settings',
                    content: container
                });
            }

            // popup content
            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="template-part" >' + $.pixeGetAdminIcon('template') + pixei18n.template.templatePart + '</span>');
            t.tabHead.append('<span data-tab="template" >' + $.pixeGetAdminIcon('templatePart') + pixei18n.template.template + '</span>');
            t.tabHead.append('<span data-tab="assign-template" >' + $.pixeGetAdminIcon('assignTemplate') + pixei18n.template.assignTemplate + '</span>');
            t.tabHead.find('[data-tab="' + settings.activeTab + '"]').addClass('pixe-active');
            tab.append(t.tabHead);

            var tabHeadRight = $('<div class="pixe-settings-tab-head-right" ></div>');
            tabHeadRight.append('<span data-tab="import" >' + $.pixeGetAdminIcon('upload') + 'Import</span>');
            tabHeadRight.appendTo(t.tabHead);
            
            // close button
            if( !settings.container ){
                tabHeadRight.append('<div class="pixe-divider-v" ></div>');
                tabHeadRight.append($.pixeGetAdminIcon('cancel', { class: 'pixe-close' }));
                tabHeadRight.on('click', '.pixe-close', function(){
                    t.lb.close();
                });
            }

            // init content area
            t.tabContent = $('<div class="pixe-settings-tab-content" ></div>');
            t.tabContent.appendTo(tab);

            // get content
            t.changeTab(settings.activeTab);
            t.tabHead.on('click', '[data-tab]', function(){
                if( $(this).hasClass('pixe-active') ) return;
                
                // add active class
                var tabs = t.tabHead.find('[data-tab]');
                $(this).addClass('pixe-active')
                tabs.not($(this)).removeClass('pixe-active');
                
                // get content
                t.changeTab($(this).attr('data-tab'));
            });

        },

        // change font settings tab
        changeTab: function(activeTab){
            var t = this
            
            t.tabContent.empty();
            
            var content = $('<div class="pixe-template-section pixe-fixed-height pixe-type-notice" ></div>');
            content.append($.pixeProNotice('feature', 'template'));
            content.appendTo(t.tabContent);
        },

    }
    

})(jQuery);	