(function($){
    "use strict";

    $.pixeCollection = {

        create: function(settings = {}, render = true, preview = false, container){
            settings = $.extend({
                _type: 'collection'
            }, settings);

            var t = this;
            var collection = $('<div class="pixe-collection pixe-wrapper" ></div>');
            collection.data('settings', settings);
            collection.addClass('pixe-collection-' + settings._subtype);
            if( container ){
                container.append(collection);
            }

            if( preview ){
                collection.data('preview', true);
            }
            collection.append('<style></style>');

            // set id
            if( settings._id ){ collection.attr('data-id', settings._id); }
            if( settings.id ){ collection.attr('id', settings.id); }

            // background
            collection.append('<div class="pixe-bg-style" ></div>');
            
            // content area
            var content = $('<div class="pixe-collection-content" ></div>');
            content.appendTo(collection);

            // empty elements
            if( !settings._elements ){
                if( settings._subtype == 'slider' ){
                    settings._elements = [{_type: 'wrapper', _subtype: 'slider'}];
                }else if( settings._subtype == 'carousel' ){
                    settings._elements = [];
                    for( var i = 0; i < 3; i++ ){
                        settings._elements.push({_type: 'column', _subtype: 'carousel'});
                    }
                }
                
                $.pixeEditor.setUniqueIdData(settings._elements);
            }

            $.pixeEditor.render(settings._elements, true, preview, content);

            // toolbar
            if( !preview ){

                // area
                collection.append('<div class="pixe-collection-area"></div>');

                // toolbar 
                collection.append(t.getToolbar(collection));

                // tab
                t.bindTab(collection);
            }

            if( settings._subtype == 'slider' ){
                $.pixeAddDependency(collection, 'collection_slider', true);
            }else if( settings._subtype == 'carousel' ){
                $.pixeAddDependency(collection, 'carousel', true);
                $.pixeAddDependency(collection, 'collection_carousel', true);
            }
            $.pixeAddDependency(collection, 'button_controls', true);

            if( typeof(pixePP) === 'undefined' || !pixePP.active ){
                collection.addClass('pixe-locked');
            }

            // style for this element;
            if( render ){ t.render(collection); }
            
            return collection;
        },

        render: function(item, type){
            var t = this;
            if( type ){
                t.renderStyle(item, type);
                return;
            } 

            // render styles
            t.renderStyle(item, 'item', undefined, true);
        },

        renderStyle: function(item, type, subtype, renderCss = true){
            if( !item.hasClass('pixe-collection') ) return;

            var t = this;
            switch(type){
                case '_elements': 
                    var settings = item.data('settings');
                    var content = item.children('.pixe-collection-content');
                    content.children().detach();
                    content.append(settings._elements);

                    t.refreshTab(item);
                    t.setActiveTab(item, 1);
                    break;
                case 'padding':
                case 'tablet-padding':
                case 'mobile-padding':
                case 'margin':
                case 'tablet-margin':
                case 'mobile-margin':
                    var settings = item.data('settings');
                    $.pixeSetSpacingStyle(item, settings);
                    break;
                case 'bg-media':
                    $.pixeSetBackgroundMedia(item, '', subtype);
                    break;
                case 'bg-style':
                    $.pixeWrapper.setBackgroundStyle(item);
                    break;
                case 'slider':
                case 'carousel':
                    var settings = item.data('settings');
                    if( settings._subtype == 'slider' ){
                        t.setSliderSettings(item);
                    }else if( settings._subtype == 'carousel' ){
                        t.setCarouselSettings(item);
                    }
                    break;
                case 'controls':
                    t.setSliderControls(item);
                    break;
                default:
                    if( type == 'item' ){
                        t.renderStyle(item, 'padding', undefined, false);
                        t.renderStyle(item, 'bg-media', undefined, false);
                        t.renderStyle(item, 'bg-style', undefined, false);
                        t.renderStyle(item, 'slider', undefined, false); // slider & carousel
                        t.renderStyle(item, 'controls', undefined, false);
                    }

                    $.pixeWrapper.setDefaultCss(item);
                    break;
            }

            if( renderCss ){
                t.renderCss(item);
            } 
        },

        renderCss: function(item){
            var style = item.data('style');
            var extraCss = item.data('extra-style');
            var styleTag = item.children('style');
            $.pixeRenderCss(styleTag, style, extraCss);
        },

        setCarouselSettings: function(item){
            var settings = item.data('settings');
            var slider = settings['slider']? settings['slider']: {};
            var carousel = settings['carousel']? settings['carousel']: {};
            var id = '[data-id="' + settings._id + '"]';

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

                ret += $.pixeSetCss(id + ' .pixe-collection-content', {
                    '--pixe--gap': carousel[device + 'space'],
                    '--pixe--col': carousel[device + 'column'],
                    '--pixe--content--width': carousel[device + 'width'],
                    'overflow': carousel[device + 'overflow']
                });

                if( !device ){
                    if( slider['fade-overflow'] ){
                        ret += $.pixeSetCss(id + ' .pixe-collection-content > .pixe-column.pixe-inactive-slide', {
                            'opacity': slider['fade-opacity']? slider['fade-opacity']: 50
                        });
                    }
                }

                return ret;
            }

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

        setSliderSettings: function(item){
            var settings = item.data('settings');
            var slider = settings['slider']? settings['slider']: {};
            var id = '[data-id="' + settings._id + '"]';

            var css = '';
            var animIn = slider['anim-in']? slider['anim-in']: 'fade-in';
            var animOut = slider['anim-out']? slider['anim-out']: 'fade-out';
            
            if( animIn ){
                css += $.pixeHoverAnimationCss(animIn, {
                    selector: id + ' .pixe-wrapper.pixe-active-slide', 
                    hoverSelector: id + ' .pixe-wrapper.pixe-anim-in',
                    duration: slider['anim-in-duration']
                });
            }
            if( animOut ){
                css += $.pixeHoverAnimationCss(animOut, {
                    hoverSelector: id + ' .pixe-wrapper.pixe-anim-out',
                    duration: slider['anim-out-duration']
                });
            }

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

                ret += $.pixeSetCss(id + ' .pixe-collection-content', {
                    'overflow': slider[device + 'overflow']
                });
                
                switch(slider[device + 'layout']){
                    case 'custom':
                        ret += $.pixeSetCss(id, {
                            'height': slider[device + 'height']
                        });
                        break;
                    case 'auto':
                        ret += $.pixeSetCss(id, {
                            'height': 'auto'
                        });
                        break;
                    case 'full':
                        ret += $.pixeSetCss(id, {
                            'height': '100vh'
                        });
                        break;
                }

                switch(slider[device + 'slide-layout']){
                    case 'custom':
                        ret += $.pixeSetCss(id + ' .pixe-wrapper', {
                            'height': slider[device + 'slide-height']
                        });
                        break;
                    case 'auto':
                        ret += $.pixeSetCss(id + ' .pixe-wrapper', {
                            'height': 'auto'
                        });
                        break;
                    case 'full':
                        ret += $.pixeSetCss(id + ' .pixe-wrapper', {
                            'height': '100vh'
                        });
                        break;
                }

                return ret;
            }

            $.pixeAddCss(item, 'slider', css + getCss());
            $.pixeAddCss(item, 'slider', getCss('tablet-'), 'tablet');
            $.pixeAddCss(item, 'slider', getCss('mobile-'), 'mobile');
        },

        setSliderControls: function(item){
            var settings = item.data('settings');
            var id = '[data-id="' + settings._id + '"]';
            var controls = settings['controls']? settings['controls']: {};
            
            // bullet
            var bullet = item.children('.pixe-bullet');
            if( controls['enable-bullet'] ){

                // html & style
                if( !bullet.length ){
                    bullet = $.pixeControlStyle.getBulletPreview();
                    bullet.appendTo(item);
                }
                bullet.attr('data-bullet-preset', controls['bullet-style']);
                
                // responsive class
                $.pixeResponsiveClass(bullet, controls['bullet-hide-on'], 'flex');

            }else{
                bullet.remove();
            }

            // navigation
            var navigation = item.children('.pixe-navigation');
            if( controls['enable-navigation'] ){

                // html & style
                if( !navigation.length ){
                    navigation = $.pixeControlStyle.getNavigationPreview(controls);
                    navigation.appendTo(item);
                }else{
                    navigation = $.pixeControlStyle.getNavigationPreview(controls, navigation);
                }
                var navPos = controls['navigation-position']? controls['navigation-position']: 'inner';
                navigation.attr('data-position', navPos);

                // responsive class
                $.pixeResponsiveClass(navigation, controls['navigation-hide-on'], 'flex');

            }else{
                navigation.remove();
            }

            function getCss(device){
                var ret = ''; 
                
                // css
                if( controls['enable-bullet'] == 'yes' ){
                    var bulletAtts = {
                        'justify-content': controls[device + 'bullet-alignment'],
                        'margin-left': controls[device + 'bullet-left-margin'],
                        'margin-right': controls[device + 'bullet-right-margin'],
                        'custom': 'position: absolute; left: 0; right: 0;'
                    };

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

                return ret;
            }

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

            // controls css
            $.pixeAddCss(item, 'controls', getCss(''));
            $.pixeAddCss(item, 'controls', getCss('tablet-'), 'tablet');
            $.pixeAddCss(item, 'controls', getCss('mobile-'), 'mobile');
        },

        getToolbar: function(item){
            var settings = item.data('settings');

            var html  = '<div class="pixe-wrapper-toolbar" >';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-settings" data-action="settings" ></div>';
                
                if( typeof(pixePP) === 'undefined' || !pixePP.active ){

                }else{
                    html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-spaces" data-action="space" ></div>';
                    if( settings._subtype == 'carousel' ){
                        html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-slide" data-action="carousel" ></div>';
                        html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-controls" data-action="controls" ></div>';
                        html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-animation" data-action="carousel-animation" ></div>';
                    }else if( settings._subtype == 'slider' ){
                        html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-controls" data-action="controls" ></div>';
                        html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-animation" data-action="animation" ></div>';
                    }
                    html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-color" data-action="color" ></div>';
                    html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-image" data-action="image" ></div>';
                    html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-copy" data-action="copy" ></div>';
                }
                html += '<div class="pixe-move-wrap" >';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-up" data-action="up" ></div>';
                html += '<div class="pixe-divider" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-down" data-action="down" ></div>';
                html += '</div>';
                html += '<div class="pixe-action pixe-drag pixe-svg-preset pixe-svg-wrapper-drag" data-action="drag" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-trash" data-action="remove" ></div>';
                html += '</div>';

            return html;
        },

        refreshTab: function(item){
            var content = item.children('.pixe-collection-content');
            var tabs = item.children('.pixe-collection-settings').children('.pixe-collection-tab');
            tabs.empty();

            var tabSize = content.children().length;
            for( var i = 1; i <= tabSize; i++  ){
                tabs.append('<span data-tab="' + i + '">' + i + '</span>');
            }
        },

        setActiveTab: function(item, index = 1){
            var settings = item.data('settings');
            var content = item.children('.pixe-collection-content');
            var activeContent = content.children().eq(index - 1);

            // tab
            var tabs = item.children('.pixe-collection-settings').children('.pixe-collection-tab');
            tabs.find('[data-tab="' + index + '"]').addClass('pixe-active').siblings().removeClass('pixe-active pixe-anim-in');

            // slider active
            if( settings._subtype == 'slider' ){
                activeContent.addClass('pixe-active-slide pixe-anim-in').siblings().removeClass('pixe-active-slide');
            
            // carousel active tab
            }else if( settings._subtype == 'carousel' ){
                var firstSlide = content.children().first();
                firstSlide.css({ 'margin-left': '' });
                firstSlide.css({ 'margin-left': -activeContent.position().left });

                // fade overflow effect for normal slider
                if( settings['slider'] && settings['slider']['autoplay'] != 'cont' ){
                    var carousel = settings['carousel']? settings['carousel']: {};
                    var device = $.pixeEditor.viewport == 'desktop'? '': $.pixeEditor.viewport + '-';
                    var column = carousel[device + 'column']? parseInt(carousel[device + 'column']): 3;
                    content.children().each(function(i){
                        if( i + 1 >= index + column || i + 1 < index ){
                            $(this).addClass('pixe-inactive-slide');
                        }else{
                            $(this).removeClass('pixe-inactive-slide');
                        }
                    });
                    
                }
            }
        },

        toolbarAction: function(item, button, type){
            var t = this;
            var settings = item.data('settings');
            var ssSlug, ssType;

            if( type == 'animation' ){
                ssSlug = 'slider';
                ssType = 'collection-slider-settings';
            }else if( type == 'controls' ){
                ssSlug = 'controls';
                ssType = 'slider-controls';
            }else if( type == 'carousel' ){
                ssSlug = 'carousel';
                ssType = 'collection-carousel-style';
            }else if( type == 'carousel-animation' ){
                ssSlug = 'slider';
                ssType = 'collection-carousel-settings';
            }

            var actionHistory = new $.pixeEditHistory(item);

            item.addClass('pixe-focus pixe-focus-toolbar');
            new $.pixeStyleSelector({
                obj: settings,
                slug: ssSlug,
                type: ssType,
                target: button,
                onChange: function(value, subtype){
                    actionHistory.onChange(ssSlug, subtype);
                    t.renderStyle(item, ssSlug, subtype, true);
                },
                onClose: function(){
                    item.removeClass('pixe-focus pixe-focus-toolbar');
                }
            });

        },

        bindTab: function(item){
            var t = this;
            var settings = item.data('settings');
            var activeSlide = 1;

            // pro content restrict
            if( typeof(pixePP) === 'undefined' || !pixePP.active ){
                t.refreshTab(item);
                t.setActiveTab(item, activeSlide);
                return;
            }
            
            // tab settings & toolbar
            var settingsBar = $('<div class="pixe-collection-settings" ></div>');
            settingsBar.appendTo(item);

            var tabs = $('<div class="pixe-collection-tab" ></div>');
            tabs.appendTo(settingsBar);

            settingsBar.append('<span class="pixe-add-new pixe-svg-preset pixe-svg-plus-white" ></span>');
            var html  = '<div class="pixe-collection-toolbar" >';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-settings" data-action="settings" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-spaces" data-action="space" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-color" data-action="color" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-image" data-action="image" ></div>';
                if( settings._subtype == 'slider' ){
                    html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-alarm" data-action="alarm" ></div>';
                    html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-overlay" data-action="overlay" ></div>';
                }
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-copy" data-action="copy" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-right" data-action="right" ></div>';
                html += '<div class="pixe-divider" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-left" data-action="left" ></div>';
                html += '<div class="pixe-action pixe-svg-preset pixe-svg-wrapper-trash" data-action="remove" ></div>';
                html += '</div>';
            var toolbar = $(html);
            settingsBar.append(toolbar);

            // bind
            t.refreshTab(item);
            t.setActiveTab(item, activeSlide);

            // add new tab
            settingsBar.on('click', '.pixe-add-new', function(){
                var settings = item.data('settings');
                var content = item.children('.pixe-collection-content');
                activeSlide = tabs.children().length + 1;
                
                // create history
                var action = $.pixeHistory.createAction(item, 'edit', '_elements', 'Add New Slide');
                $.pixeHistory.setActionStep(action, item, '_elements', content.children(), true, false);

                // new content
                var newElem;
                if( settings._subtype == 'slider' ){
                    newElem = [{_type: 'wrapper', _subtype: 'slider'}];
                }else if( settings._subtype == 'carousel' ){
                    newElem = [{_type: 'column', _subtype: 'carousel'}];
                }
                $.pixeEditor.setUniqueIdData(newElem);

                newElem = $.pixeEditor.render(newElem, true);
                content.append(newElem);
                $.pixeEditor.setStatus(newElem);

                t.refreshTab(item);
                t.setActiveTab(item, activeSlide);

                // add to history
                $.pixeHistory.setActionStep(action, item, '_elements', content.children(), false, false);
                $.pixeHistory.addAction(action);
            });

            // change tab
            tabs.on('click', '[data-tab]', function(){
                activeSlide = parseInt($(this).attr('data-tab'));
                t.setActiveTab(item, activeSlide);
                tabs.find('[data-tab="' + activeSlide + '"]').trigger('mouseenter');
            });
            
            // toolbar position
            var activeTimeout; 
            tabs.on('mouseenter', '.pixe-active', function(){
                if( activeTimeout ){ clearTimeout(activeTimeout); }

                toolbar.addClass('pixe-active');
                toolbar.css({ left: $(this).position().left, right: 'auto', transform: '' });
                if( toolbar.position().left + toolbar.outerWidth() > tabs.position().left + tabs.outerWidth() ){
                    toolbar.css({ left: 'auto', right: '0', transform: 'none' });
                }
            });
            tabs.on('mouseout', '.pixe-active', function(){
                activeTimeout = setTimeout(function(){
                    toolbar.removeClass('pixe-active');
                }, 200);
            });

            // toolbar action
            settingsBar.on('click', '[data-action]', function(){
                var action = $(this).attr('data-action');
                var content = item.children('.pixe-collection-content');
                var slides = content.children();
                var currentSlide = slides.eq(activeSlide - 1);

                switch(action){
                    case 'remove':
                    case 'left':
                    case 'right':
                    case 'copy':
                        var label;
                        if( action == 'remove' ){
                            label = 'Remove Slide';
                            if( slides.length <= 1 ) break;
                        }else if( action == 'left' ){
                            label = 'Move Slide';
                            if( activeSlide == 1 ) break;
                        }else if( action == 'right' ){
                            label = 'Move Slide';
                            if( activeSlide >= slides.length ) break;
                        }else if( action == 'copy' ){
                            label = 'Copy Slide';
                        }

                        // create history
                        var historyAction = $.pixeHistory.createAction(item, 'edit', '_elements', label);
                        $.pixeHistory.setActionStep(historyAction, item, '_elements', content.children(), true, false);

                        // edit
                        if( action == 'remove' ){
                            currentSlide.detach();
                            activeSlide = 1;
                        }else if( action == 'left' ){
                            if( activeSlide == 2 ){      
                                currentSlide.prev().css({'margin-left': ''});
                            }
                            currentSlide.insertBefore(currentSlide.prev());
                            activeSlide = activeSlide - 1;
                        }else if( action == 'right' ){
                            currentSlide.insertAfter(currentSlide.next());
                            activeSlide = activeSlide + 1;
                        }else if( action == 'copy' ){
                            var newElem = $.pixeClone($.pixeGetEditorVal(currentSlide));
                            $.pixeEditor.setUniqueIdData(newElem);

                            var newSlide = $.pixeEditor.render([newElem], true);
                            newSlide.insertAfter(currentSlide);

                            $.pixeEditor.setStatus(newSlide);
                        }

                        t.refreshTab(item);
                        t.setActiveTab(item, activeSlide);

                        // add to history
                        $.pixeHistory.setActionStep(historyAction, item, '_elements', content.children(), false, false);
                        $.pixeHistory.addAction(historyAction);
                        break;
                    case 'alarm':
                        var settings = currentSlide.data('settings');
                        var actionHistory = new $.pixeEditHistory(currentSlide);
                        
                        toolbar.addClass('pixe-focus');
                        new $.pixeStyleSelector({
                            obj: settings,
                            slug: 'slide',
                            type: 'slide-time-settings',
                            target: $(this),
                            onChange: function(value, subtype){
                                actionHistory.onChange('slide', subtype);
                            },
                            onClose: function(){
                                toolbar.removeClass('pixe-focus');
                            }
                        });
                        break;
                    case 'overlay':
                        var settings = currentSlide.data('settings');

                        toolbar.addClass('pixe-focus');
                        var popup = new $.pixeInlinePopup({
                            target: $(this),
                            values: { 'is-overlay': settings['is-overlay'] },
                            options: {
                                'is-overlay': {
                                    'type': 'checkbox',
                                    'default': 'no',
                                    'hide-reset': true
                                },
                                'description': {
                                    'heading': 'Make this slide an overlay',
                                    'type': 'heading'
                                }
                            },
                            style: 'pixe-inline-popup-is-overlay',
                            onClose: function(){
                                toolbar.removeClass('pixe-focus');
                            }
                        });
                        if( popup && popup.content ){
                            popup.content.on('change', '[data-slug]', function(){
                                var slug = $(this).attr('data-slug');
                                var value = $.pixeGetInputVal($(this));

                                // create history
                                var historyAction = $.pixeHistory.createAction(currentSlide, 'edit', slug);
                                $.pixeHistory.setActionStep(historyAction, currentSlide, slug, settings[slug], true, false);
                                $.pixeHistory.setActionStep(historyAction, currentSlide, slug, value, false, false);
                                $.pixeHistory.addAction(historyAction);

                                $.pixeSetData(settings, slug, value);

                            });
                        }
                        break;
                    case 'image':
                        toolbar.addClass('pixe-focus');
                        $.pixeBgMediaPopup(currentSlide, {
                            button: $(this),
                            onChange: function(value, subtype){
                                if( currentSlide.hasClass('pixe-wrapper') ){
                                    $.pixeWrapper.renderStyle(currentSlide, 'bg-media', subtype);
                                }else if( currentSlide.hasClass('pixe-column') ){
                                    $.pixeColumn.renderStyle(currentSlide, 'bg-media', subtype);
                                }
                            },
                            onClose: function(){
                                toolbar.removeClass('pixe-focus');
                            }
                        });
                        break;
                    case 'color':
                        toolbar.addClass('pixe-focus');
                        $.pixeBgStylePopup(currentSlide, {
                            button: $(this),
                            onChange: function(){
                                if( currentSlide.hasClass('pixe-wrapper') ){
                                    $.pixeWrapper.renderStyle(currentSlide, 'bg-style');
                                }else if( currentSlide.hasClass('pixe-column') ){
                                    $.pixeColumn.renderStyle(currentSlide, 'bg-style');
                                }
                            },
                            onClose: function(){
                                toolbar.removeClass('pixe-focus');
                            }
                        });
                        break;
                    case 'space':
                        toolbar.addClass('pixe-focus');
                        $.pixeSpacingPopup(currentSlide, {
                            type: 'tbpdpx',
                            button: $(this),
                            onChange: function(type){
                                if( currentSlide.hasClass('pixe-wrapper') ){
                                    $.pixeWrapper.renderStyle(currentSlide, type);
                                }else if( currentSlide.hasClass('pixe-column') ){
                                    $.pixeColumn.renderStyle(currentSlide, type);
                                }
                            },
                            onClose: function(){
                                toolbar.removeClass('pixe-focus');
                            }
                        });
                        break;
                    case 'settings':
                        pixeData.hideBuilderPanel = false;
                        $.pixeEditor.setEditTarget(currentSlide);
                        break;
                }
            });

        },

        // calculate 
        setStatus: function(collection){
            
            var collectionContent = collection.children('.pixe-collection-content');
            var isEmpty = true;

            collectionContent.children().each(function(){
                if( !$(this).hasClass('pixe-empty') ){
                    isEmpty = false;
                }
            });

            if( isEmpty ){
                collection.addClass('pixe-empty');
            }else{
                collection.removeClass('pixe-empty');
            }

        }

    }

})(jQuery);	