Edit File - File Manager

Edit File: themify-constructor.js

var ThemifyConstructor;
(function ($, Themify, topWindow, document, undefined) {
    'use strict';
    var api={ActionBar:{}},
        Common=typeof ThemifyBuilderCommon!=='undefined'?ThemifyBuilderCommon:{};
    ThemifyConstructor = {
        data: null,
        key: 'tb_form_templates_',
        styles: null,
        settings: null,
        editors: null,
        afterRun: [],
        radioChange: [],
        bindings: [],
        stylesData: null,
        values: {},
        clicked: null,
        type: null,
        static: null,
        label: null,
        is_repeat: null,
        is_sort:null,
        is_new: null,
        is_ajax: null,
        breakpointsReverse:null,
        set: function (value) {
            try {
                var m = '';
                for (var s in themifyBuilder.modules) {
                    m += s;
                }
                var record = {val: value, ver: tbLocalScript.version, h: Themify.hash(m)};
                localStorage.setItem(this.key, JSON.stringify(record));
                return true;
            }
            catch (e) {
                return false;
            }
        },
        get: function () {

if (themifyBuilder.debug) {
                return false;
            }
            try {
                localStorage.removeItem('tb_form_templates');//old value is a html,need to be removed
                var record = localStorage.getItem(this.key),
                        m = '';
                if (!record) {
                    return false;
                }
                record = JSON.parse(record);
                for (var s in themifyBuilder.modules) {
                    m += s;
                }
                if (record.ver.toString() !== tbLocalScript.version.toString() || record.h !== Themify.hash(m)) {
                    return false;
                }
                return record.val;
            }
            catch (e) {
                return false;
            }
            return false;
        },
        getForms: function (callback) {
            if(typeof tb_app!=='undefined'){
                if(tb_app.Constructor!==undefined){
                    for(var i in tb_app.Constructor){
                        ThemifyConstructor[i]=tb_app.Constructor[i];
                    }
                    delete tb_app.Constructor;
                }
                Common = ThemifyBuilderCommon;
                api= tb_app;
            }
            this.breakpointsReverse = Object.keys(themifyBuilder.breakpoints).reverse();
            this.breakpointsReverse.push('desktop');
            var self = this,
                    data = self.get(),
                    result = function (resp) {
                        Common.Lightbox.setup();
                        Common.LiteLightbox.modal.on('attach', function () {
                            this.el.classList.add('tb_lite_lightbox_modal');
                        });
                        self.data = resp;
                        if(api.mode==='visual'){
                            api.EdgeDrag.modules = JSON.parse(localStorage.getItem('tb_dragger'));
                        }
                        if (callback) {
                            callback();
                        }
                    };
            if (data !== false) {//cache visual templates
                result(data);
            }
            else {
                $.ajax({
                    type: 'POST',
                    url: themifyBuilder.ajaxurl,
                    dataType: 'json',
                    data: {
                        action: 'tb_load_form_templates',
                        tb_load_nonce: themifyBuilder.tb_load_nonce
                    },
                    success: function (resp) {
                        if (resp) {
                            localStorage.setItem('tb_dragger', JSON.stringify(resp.d));
                            result(resp.v);
                            self.set(resp.v);
                            
                        }
                    }
                });
            }

self.static = themifyBuilder.i18n.options;
 themifyBuilder.i18n.options = null;
 this.label = themifyBuilder.i18n.label;
 themifyBuilder.i18n.label = null;
 var fonts = self.static.fonts.safe;
 for (var i = 0, len = fonts.length; i < len; ++i) {
 if ('' !== fonts[i].value && 'default' !== fonts[i].value) {
 self.font_select.safe[fonts[i].value] = fonts[i].name;
 }
 }
 self.static.fonts.safe = null;
 fonts = self.static.fonts.google;
 for (var i = 0, len = fonts.length; i < len; ++i) {
 if ('' !== fonts[i].value && 'default' !== fonts[i].value) {
 self.font_select.google[fonts[i].value] = {'n': fonts[i].name, 'v': fonts[i].variant};
 }
 }
 self.static.fonts.google = fonts = null;

},
        getOptions: function (data) {
            if (data.options !== undefined) {
                return data.options;
            }
            for (var i in this.static) {
                if (data[i] === true) {
                    return this.static[i];
                }
            }
            return false;
        },
        getTitle: function (data) {
            if (data.type === 'custom_css') {
                return this.label.custom_css;
            }
            if (data.type === 'title') {
                return this.label.m_t;
            }
            return data.label !== undefined ? (this.label[data.label] !== undefined ? this.label[data.label] : data.label) : false;
        },
        getSwitcher: function () {
            var f = document.createDocumentFragment(),
                    sw = document.createElement('ul'),
                    breakpoints = this.breakpointsReverse,
                    self = this;
            sw.className = 'tb_lightbox_switcher clearfix';
            for (var i = breakpoints.length - 1; i > -1; --i) {
                var b = breakpoints[i],
                        el = document.createElement('li'),
                        a = document.createElement('a'),
                        icon = document.createElement('i');
                a.href = '#' + b;
                a.className = 'tab_' + b;
                a.title = b === 'tablet_landscape' ? this.label['table_landscape'] : (b.charAt(0).toUpperCase() + b.substr(1));
                icon.className = 'ti-' + b;
                if (b === 'tablet_landscape') {
                    icon.className += ' ti-tablet';
                }
                a.appendChild(icon);
                el.appendChild(a);
                f.appendChild(el);
            }
            sw.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopImmediatePropagation();
                if (e.target !== sw) {
                    var a = e.target.closest('a');
                    if (a !== null) {
                        self.lightboxSwitch(a.getAttribute('href'));
                    }
                }
            });
            sw.appendChild(f);
            return sw;
        },
        lightboxSwitch: function (bp) {
            var id = bp.replace('#', '');
            if (id === api.activeBreakPoint) {
                return;
            }
            if (api.activeModel && api.mode === 'visual') {
                api.scrollTo = api.liveStylingInstance.$liveStyledElmt;
            }
            $('.tb_breakpoint_switcher.breakpoint-' + id, topWindow.document).trigger('click');
        },
        binding: function (_this, data, val, context) {
            var logic = false,
                    binding = data['binding'],
                    is_responsive = 'desktop' !== api.activeBreakPoint,
                    type=data['type'];
            if (type === 'select' && val == 0) {
                val = '';
            }
            if (!val && binding['empty'] !== undefined) {
                logic = binding['empty'];
            }
            else if (val && binding[val] !== undefined) {
                if (type === 'radio' || type === 'icon_radio') {
                    logic = _this.checked === true ? binding[val] : false;
                } else {
                    logic = binding[val];
                }
            }
            else if (val && binding['not_empty'] !== undefined) {
                logic = binding['not_empty'];
            }
            else if (binding['select'] !== undefined && val !== binding['select']['value']) {
                logic = binding['select'];
            }
            else if (binding['checked'] !== undefined && _this.checked === true) {
                logic = binding['checked'];
            }
            else if (binding['not_checked'] !== undefined && _this.checked === false) {
                logic = binding['not_checked'];
            }
            if (logic) {
                var items = [];
                if (logic['show'] !== undefined) {
                    items = logic['show'];
                }
                if (logic['hide'] !== undefined) {
                    items = items.concat(logic['hide']);
                }
                if (context === undefined || context === null || context.length === 0) {
                    context = _this.closest('.tb_tab');
                    if (context === null) {
                        context = _this.closest('.tb_expanded_opttions');
                        if (context === null) {
                            context = topWindow.document.getElementById('tb_lightbox_container');
                        }
                    }

}
 var hasHide=logic['hide'] !== undefined,
 hasShow=logic['show'] !== undefined;
 var getData = function (options, key) {
 var value,
 keys = Object.keys(options),
 len = keys.length;
 for(var i = 0;i<len;i++){
 if (undefined !== options[keys[i]]['id'] && options[keys[i]]['id'] === key) {
 value = options[keys[i]];
 break;
 }
 if (options[keys[i]] && typeof options[keys[i]] === 'object') {
 value = getData(options[keys[i]], key);
 if(value !== undefined){
 break;
 }
 }
 }
 return value;
 };
 var self = this;
 var relatedBinding = function(el, data,context){
 var type = el.dataset.type,
 _this;
 if('radio' === type){
 _this = el.querySelector('input:checked');
 if(null === _this){
 _this = el.getElementsByTagName('INPUT')[0];
 }
 }else if('checkbox' === type || 'toggle_switch' === type){
 _this = el.getElementsByTagName('INPUT')[0];
 }else if('select' === type){
 _this = el.getElementsByTagName('SELECT')[0];
 }
 if(undefined !== _this){
 self.binding(_this, data, _this.value, context);
 }
 };
 var relatedBindings = [];
 for (var i = 0, len = items.length; i < len; ++i) {
 if (hasHide===true && logic['hide'][i] !== undefined) {
 var hides = context.querySelectorAll('.' + logic['hide'][i]);
 for (var j =hides.length-1; j >-1; --j) {
 hides[j].classList.add('_tb_hide_binding');
 if('object' === typeof this.data && null !== this.type && 'object' === typeof this.data[this.type] ){
 var relatedBindData = getData(this.data[this.type][this.clicked],items[i]);
 if('object' === typeof relatedBindData && 'object' === typeof relatedBindData['binding']){
 relatedBindings.push({el:hides[j], data:relatedBindData});
 }
 }
 }
 hides=null;
 }
 if (hasShow===true && logic['show'][i] !== undefined) {
 var shows = context.querySelectorAll('.' + logic['show'][i]);
 for (var j =shows.length-1; j >-1; --j) {
 shows[j].classList.remove('_tb_hide_binding');
 if('object' === typeof this.data && null !== this.type && 'object' === typeof this.data[this.type] ){
 var relatedBindData = getData(this.data[this.type][this.clicked],items[i]);
 if('object' === typeof relatedBindData && 'object' === typeof relatedBindData['binding']){
 relatedBindings.push({el:shows[j], data:relatedBindData});
 }
 }
 }
 shows=null;
 }
 }
 for(var i = relatedBindings.length -1 ; i>=0;--i){
 relatedBinding(relatedBindings[i].el,relatedBindings[i].data,context);
 }
 relatedBindings = null;
 if (logic['responsive'] !== undefined && logic['responsive']['disabled'] !== undefined) {
 var items_disabled = logic['responsive']['disabled'];
 for (var i =items_disabled.length-1; i>-1; --i) {
 if (logic['responsive']['disabled'][i] !== undefined) {
 var resp = context.querySelectorAll('.' + logic['responsive']['disabled'][i]);
 for (var j=resp.length-1; j >-1; --j) {
 if (is_responsive === true) {
 resp[i].classList.add('responsive_disable');

} else {
                                    resp[i].classList.remove('responsive_disable');
                                }
                            }

}
                    }
                }
            }
        },
        control: {
            init: function (el, type, args) {
                args.name = type;
                this[type].call(this, el, args);
            },
            preview: function (el, val, args) {
                if (api.mode === 'visual') {
                    var selector = null,
                        self = ThemifyConstructor,
                        repeater=null;
                    if (args.repeat === true) {
                        repeater= el.closest('.tb_toggleable_fields');
                        if(repeater===null){
                            repeater= el.closest('.tb_sort_fields_parent');
                            if(repeater===null){
                                repeater = el.closest('.tb_row_js_wrapper');
                            }
                        }
                    }

if (args.selector !== undefined && val) {
                        selector = api.liveStylingInstance.$liveStyledElmt[0].querySelectorAll(args.selector);
                        if (selector.length === 0) {
                            selector = null;
                        }
                        else if (repeater!==null) {
                            var item = el.closest('.tb_repeatable_field'),
                                rep = Array.prototype.slice.call(repeater.children);
                           
                                if(args['rep']!==undefined){
                                    selector = api.liveStylingInstance.$liveStyledElmt[0].querySelectorAll(args.rep);
                                    selector=selector[rep.indexOf(item)];
                                    if(selector!==undefined){
                                        selector=selector.querySelectorAll(args.selector);
                                        if (selector.length === 0){
                                            selector=null;
                                        }
                                    }
                                    else{
                                        selector=null;
                                    }
                                }else{
                                    selector=selector.length===rep.length-1?selector[rep.indexOf(item)]:null;
                                }
                            rep = null;
                        }
                    }
                    if (repeater!==null) {
                        self.settings[ repeater.id ] = api.Utils.clear(api.Forms.parseSettings(repeater).v);
                        repeater = null;
                    }
                    else {
                        self.settings[ args.id ] = val;
                    }
                    if ('refresh' === args.type || self.is_ajax === true) {
                        api.activeModel.trigger('custom:preview:refresh', self.settings, selector, val);
                    }
                    else {
                        api.activeModel.trigger('custom:preview:live', self.settings, args.name === 'wp_editor' || el.tagName === 'TEXTAREA', null, selector, val);
                    }
                }
                else {
                    api.activeModel.backendLivePreview();
                }
                api.hasChanged = true;
            },
            change: function (el, args) {
                var that = this,
                        timer = 'refresh' === args.type && args.selector === undefined ? 1000 : 50,
                        event;
                if (args.event === undefined) {
                    event = 'change';
                    timer = 1;
                }
                else {
                    event = args.event;
                }
                el.addEventListener(event, _.throttle(function (e) {
                    that.preview(e.target, e.target.value, args);
                }, timer), {passive: true });
            },
            wp_editor: function (el, args) {
                var that = this,
                        $el = $(el),
                        timer = 'refresh' === args.type && args.selector === undefined ? 1000 : 50,
                        id = el.id,
                        previous = false,
                        is_widget = false,
                        callback = _.throttle(function (e) {
                            var content = this.type === 'setupeditor' ? this.getContent() : this.value;
                            if (api.activeModel === null || previous === content) {
                                return;
                            }
                            previous = content;
                            if (is_widget !== false) {
                                el.value = content;
                                $el.trigger('change');
                            }
                            else {
                                that.preview(el, content, args);
                            }
                        }, timer);
                api.Utils.initQuickTags(id);
                if (tinyMCE !== undefined) {

if (tinymce.editors[ id ] !== undefined) { // clear the prev editor
                        tinyMCE.execCommand('mceRemoveEditor', true, id);
                    }
                    var ed = api.Utils.initNewEditor(id);
                    is_widget = el.classList.contains('wp-editor-area') ? $el.closest('#instance_widget').length > 0 : false;

// Backforward compatibility
                    !ed.type && (ed.type = 'setupeditor');

ed.on('change keyup', callback);
                }
                $el.on('change keyup', callback);
            },
            layout: function (el, args) {
                if ('visual' === api.mode) {
                    var that = this;
                    el.addEventListener('change', function (e) {
                        var selectedLayout = e.detail.val;
                        if (args['classSelector']!==undefined) {
                            var id = args.id,
                                prevLayout = ThemifyConstructor.settings[id],
                                apllyTo = args['classSelector']!==''? api.liveStylingInstance.$liveStyledElmt.find(args['classSelector']).first():api.liveStylingInstance.$liveStyledElmt;
                                ThemifyConstructor.settings[id]= selectedLayout;
                                if(apllyTo.length>0){
                                apllyTo.removeClass(prevLayout).addClass(selectedLayout);
                                api.Utils.loadContentJs(api.liveStylingInstance.$liveStyledElmt, 'module');
                                }
                                else{
                                    that.preview(this, selectedLayout, args);
                                }

} else {
                            that.preview(this, selectedLayout, args);
                        }

},{passive: true});
 }
 },
 icon: function (el, args) {
 var that = this;
 el.addEventListener('change', function (e) {
 var i = e.target.value,
 prev = this.closest('.tb_input').getElementsByClassName('themify_fa_toggle')[0];
 if (prev !== undefined) {
 prev.className = 'tb_plus_btn themify_fa_toggle icon-close';
 var cl = api.Utils.getIcon(i);
 if (cl === false) {
 cl = 'default_icon';
 }
 prev.className+=' '+cl;
 }
 that.preview(e.target, i, args);
 },{passive: true });
 },
 checkbox: function (el, args) {
 if (api.mode === 'visual') {
 var that = this;
 el.addEventListener('change', function () {
 var checked = [],
 checkbox = this.closest('.themify-checkbox').getElementsByClassName('tb-checkbox');
 for (var i = 0, len = checkbox.length; i < len; ++i) {
 if (checkbox[i].checked) {
 checked.push(checkbox[i].value);
 }
 }
 that.preview(this, checked.join('|'), args);
 },{passive: true });
 }
 },
 color: function (el, args) {
 if (api.mode === 'visual') {
 var that = this;
 el.addEventListener('themify_builder_color_picker_change', function (e) {
 that.preview(this, e.detail.val, args);
 },{passive: true });
 }
 },
 widget_select: function (el, args) {
 this.preview(el, el.find(':input').themifySerializeObject(), args);
 },
 queryPosts: function (el, args) {
 if (api.mode === 'visual') {
 var that = this;
 el.addEventListener('queryPosts', function (e) {
 args['id'] = this.id;
 ThemifyConstructor.settings = api.Utils.clear(api.Forms.serialize('tb_options_setting'));
 that.preview(this, ThemifyConstructor.settings[args['id']], args);
 },{passive: true });
 }
 }
 },
 initControl: function (el, data) {
 if (api.activeModel !== null) {
 if (this.clicked === 'setting' && data.type !== 'custom_css') {
 if (data.control !== false && this.component === 'module') {
 var args = data.control || {},
 type = data['type'];
 if (args['repeat'] === true) {
 args['id'] = el.getAttribute('data-input-id');
 }
 else {
 if (this.is_repeat === true) {
 args['repeat'] = true;
 args['id'] = el.getAttribute('data-input-id');
 }
 else {
 args['id'] = data.id;
 }
 }

if (args.control_type === undefined) {
 if (type === undefined || type === 'text' || type === 'url' || type === 'range' || type === 'radio' || type === 'icon_radio' || type === 'select' || type === 'gallery' || type === 'textarea' || type === 'image' || type === 'date' || type === 'audio' || type === 'video' || type === 'select_menu' || type === 'widgetized_select' || type === 'layoutPart' || type === 'selectSearch' || type === 'hidden' || type === 'toggle_switch') {
 if ((type === 'text' || type === 'textarea') && args.event === undefined) {
 args.event = 'keyup';
 }
 type = 'change';
 }
 }
 else {
 type = args.control_type;
 }
 this.control.init(el, type, args);
 }
 }
 else if (api.mode === 'visual' && this.clicked === 'styling') {
 api.liveStylingInstance.bindEvents(el, data);
 }
 if (data['binding']!== undefined) {
 var self = this,
 is_repeat = self.is_repeat === true,
 callback = function(_this,v){
 var context;
 if(is_repeat){
 context = el.closest('.tb_sort_field_dropdown');
 if(context===null){
 context = el.closest('.tb_toggleable_fields_options');
 if(context===null){
 context=el.closest('.tb_repeatable_field_content');
 }
 }
 }
 self.binding(_this, data,v, context);
 }; 
 if (data.type === 'layout') {
 el.addEventListener('click', function (e) {
 var t = e.target.closest('.tfl-icon');
 if (t !== null) {
 callback(this,t.id);
 }
 },{passive: true});
 }
 else {
 el.addEventListener('change', function (e) {
 callback(this,this.value);
 },{passive: true});
 }
 this.bindings.push({el: el, data: data, repeat: is_repeat});
 }
 }
 return el;
 },
 callbacks: function () {
 var len = this.afterRun.length;
 if (len > 0) {
 for (var i = 0; i < len; ++i) {
 this.afterRun[i].call();
 }
 this.afterRun = [];
 }
 len = this.radioChange.length;
 if (len > 0) {
 for (var i = 0; i < len; ++i) {
 this.radioChange[i].call();
 }
 this.radioChange = [];
 }
 
 len = this.bindings.length;
 if (len > 0) {
 for (var i = len - 1; i > -1; --i) {
 var el = this.bindings[i].el,
 context=this.bindings[i].repeat === true?el.closest('.tb_repeatable_field_content'):undefined,
 v=this.bindings[i].data.type === 'layout'?el.getElementsByClassName('selected')[0].id:el.value;
 if(this.bindings[i].repeat === true){
 context = el.closest('.tb_sort_field_dropdown');
 if(context===null){
 context = el.closest('.tb_toggleable_fields_options');
 if(context===null){
 context=el.closest('.tb_repeatable_field_content');
 }
 }
 }
 this.binding(el, this.bindings[i].data, v, context);
 }
 this.bindings = [];
 }
 },
 setUpEditors: function () {
 for (var i = this.editors.length - 1; i > -1; --i) {
 this.initControl(this.editors[i].el, this.editors[i].data);
 }
 this.editors = [];
 },
 switchTabs: function (e) {
 e.preventDefault();
 e.stopPropagation();
 var id = this.getAttribute('href'),
 li = this.parentNode,
 container = topWindow.document.getElementById(id.replace('#', ''));
 if (container === null || li.classList.contains('current')) {
 return;
 }
 var p = li.parentNode,
 children = p.children,
 containerChildren = container.parentNode.children;
 for (var i = children.length - 1; i > -1; --i) {
 children[i].classList.remove('current');
 }
 children = null;
 li.classList.add('current');
 for (var i = containerChildren.length - 1; i > -1; --i) {
 if (containerChildren[i].classList.contains('tb_tab')) {
 containerChildren[i].style['display'] = 'none';
 }
 }
 containerChildren = null;
 container.style['display'] = 'block';
 Themify.body.triggerHandler('themify_builder_tabsactive', [id, container]);
 Themify.triggerEvent(container, 'themify_builder_tabsactive', {'id': id});
 api.Utils.hideOnClick(p);
 if (api.mode === 'visual') {
 $(document).triggerHandler('mouseup');
 }
 },
 run: function (type, save_opt) {
 
 this.styles = {};
 this.settings = {};
 this.editors = [];
 this.afterRun = [];
 this.radioChange = [];
 this.bindings = [];
 this.stylesData = {};
 this.is_repeat = null;
 this.is_sort = null;
 this.component=null;
 this.type = type;
 this.is_new = null;
 this.is_ajax = null;
 var data,
 is_style=false,
 is_visible=false,
 model=api.activeModel;
 if (model!== null) {
 this.component = model.get('elType');
 var key,
 item = document.getElementsByClassName('tb_element_cid_' + model.cid)[0];

if (this.component === 'module') {
                    this.is_ajax = themifyBuilder.modules[type].type === 'ajax';
                    key = 'mod_settings';
                    if (model.get('is_new') !== undefined) {
                        this.is_new = true;
                        item = item.closest('.module_row');
                    }
                }
                else {
                    key = 'styling';
                }
                this.values = $.extend(true, {}, model.get(key));

if(api.GS.isEmpty(model.attributes['gs'])){
                    api.beforeEvent = Common.clone(item);
                }
                is_visible = model.get('visibileClicked')!==undefined,
                is_style = is_visible===false && (this.component === 'column' || this.component === 'subrow' || model.get('styleClicked')!==undefined),
                data = this.data[type];
            }
            else {
                this.values = {};
                this.component = null;
                data = type;
            }

var top_bar = document.createDocumentFragment(),
                    container = document.createDocumentFragment(),
                    self = this,
                    rememberedEl,
                    createTab = function (index, options) {

return fr;
                    };

this.clicked = null;
            for (var k in data) {
                //meneu
                var li = document.createElement('li'),
                        a = document.createElement('a'),
                        tooltip = document.createElement('span'),
                        wrapper = document.createElement('div'),
                        label= api.activeModel!==null && !api.GS.isEmpty( api.activeModel.attributes['gs']) ? themifyBuilder.i18n.g_s : data[k].name !== undefined ? data[k].name : this.label[k],
                        tab_id = 'tb_options_' + k;
                a.href = '#' + tab_id;
                a.textContent=label;
                if(k!=='setting'){
                    a.className='tb_tooltip';
                    tooltip.textContent = label;
                    a.appendChild(tooltip);
                }
                wrapper.id = tab_id;
                wrapper.className = 'tb_tab tb_options_tab_wrapper';
                if ((is_style && k === 'styling') || (is_visible && k === 'visibility') ||(!is_style && !is_visible &&  k === 'setting') || (this.component === null)) {
                    li.className = 'current';
                    self.clicked = k;
                    if (data[k].html !== undefined) {
                        wrapper.appendChild(data[k].html);
                    }
                    else {
                        wrapper.appendChild(createTab(k, data[k].options));
                    }

wrapper.style['display'] = 'block';
                    new SimpleBar(wrapper);
                    wrapper.dataset['done'] = true;
                }
                wrapper.addEventListener('themify_builder_tabsactive', function (e) {
                    var index = e.detail.id.replace('#tb_options_', '');
                    self.clicked = index;
                    if (this.dataset['done'] === undefined) {
                        this.dataset['done'] = true;
                        this.appendChild(createTab(index, data[index].options));
                        self.callbacks();
                        new SimpleBar(this);
                        if (index === 'setting') {
                            self.setUpEditors();
                        }
                        
                    }
                },{passive: true});
                a.addEventListener('click', this.switchTabs);
                container.appendChild(wrapper);
                li.appendChild(a);
                top_bar.appendChild(li);
            }
            var top = Common.Lightbox.$lightbox[0].getElementsByClassName('tb_options_tab')[0],
                action = Common.Lightbox.$lightbox[0].getElementsByClassName('tb_lightbox_actions_wrap')[0];

while (top.firstChild) {
                top.removeChild(top.firstChild);
            }
            while (action.firstChild) {
                action.removeChild(action.firstChild);
            }
            top.appendChild(top_bar);
            if (save_opt !== undefined || model) {
                var save = document.createElement('button');
                save.className = 'builder_button builder_save_button';
                save.title = save_opt !== undefined && save_opt.ctr_save !== undefined ? this.label[save_opt.ctr_save] : this.label['ctr_save'];
                if(api.activeModel!==null && !api.GS.isEmpty( api.activeModel.attributes['gs'])){
                    api.GS.modulePanel(true);
                    save.textContent = this.label['s_s'];
                }
                else{
                    save.textContent = save_opt !== undefined && save_opt.done !== undefined ? this.label[save_opt.done] : this.label['done'];
                }
                if (model) {
                    api.autoSaveCid = model.cid;
                    if (api.mode === 'visual') {
                        api.liveStylingInstance.init();
                        if (this.component !== 'subrow' && this.component !== 'column') {
                            rememberedEl = api.liveStylingInstance.$liveStyledElmt[0].outerHTML;
                        }
                    }
                    var _saveClicked = function (e) {
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        if(self.saveComponent(false)){
                            save.removeEventListener('click', _saveClicked, {once: false});
                            topSave.removeEventListener('click', _saveClicked, {once: true});
                        }
                    };
                    
                    var topSave = document.createElement('a'),
                        li = document.createElement('li'),
                        span = document.createElement('span');
                    li.className='tb_top_save_btn';
                    topSave.className='ti-check tb_tooltip';
                    span.textContent = this.label['done'];
                    topSave.appendChild(span);
                    li.appendChild(topSave);
                    top.appendChild(li);
                    save.addEventListener('click', _saveClicked, {once: false});
                    topSave.addEventListener('click', _saveClicked, {once: true});
                }
                action.appendChild(save);
            }
            Themify.body.one('themify_builder_lightbox_close', function () {

self.radioChange = self.bindings = self.stylesData = self.is_ajax = self.is_repeat=self.is_sort = self.afterRun = self.editors = self.clicked = self.settings = self.styles = null;
                if (model) {
                    if (typeof _saveClicked === 'function') {
                        save.removeEventListener('click', _saveClicked, {once: true});

}
                    if(self.is_new && 'module' === api.activeModel.get('elType')){
                        var activeEl = 'visual' === api.mode ? api.liveStylingInstance.$liveStyledElmt : Themify.body.find('.tb_element_cid_' + api.activeModel.cid),
                            row = activeEl.closest('.module_row.tb_new_row');
                    }
                    if (api.saving !== true && rememberedEl !== undefined && api.hasChanged) {
                        var m = api.Models.Registry.lookup(model.cid);
                        if (m) {
                            m.trigger('custom:restorehtml', rememberedEl);
                        }
                        m=null;
                    }
                    if (self.is_new) {
                        model.unset('is_new', {silent: true});
                        if (api.saving !== true) {
                            model.trigger('dom:module:unsaved');
                            if(undefined !== row && row.length > 0){
                                var m = api.Models.Registry.lookup(row.data('cid'));
                                if (m) {
                                    m.destroy();
                                }
                                m=null;
                            }
                        }else{
                            if(row.length>0){
                                row[0].classList.remove('tb_new_row');
                            }
                        }
                    }
                    else {
                        model.unset('styleClicked', {silent: true});
                        model.unset('visibileClicked', {silent: true});
                    }
                    if (tinyMCE !== undefined) {
                        for (var i = tinymce.editors.length - 1; i > -1; --i) {
                            if (tinymce.editors[i].id !== 'content') {
                                tinyMCE.execCommand('mceRemoveEditor', true, tinymce.editors[i].id);
                            }
                        }
                    }
                    if (api.mode === 'visual') {
                        api.liveStylingInstance.clear();
                    }
                    if(!api.GS.isEmpty(model.attributes['gs'])){
                        model.destroy();
                    }
                    api.activeModel=model= null;
                }
                Themify.body.off('themify_builder_change_mode.updatestyles');
                rememberedEl = self.values = self.type = self.component = self.is_new = null;
                self.tabs.click = 0;
                api.GS.reopenPreviousPanel();

}).on('themify_builder_change_mode.updatestyles', this.updateStyles.bind(this));

setTimeout(function () {
 if (self.clicked === 'setting') {
 self.setUpEditors();
 }
 self.callbacks();
 Themify.triggerEvent( document, 'tb_editing_' + self.type, [self] );
 /**
 * self.type is the module slug, trigger a separate event for all modules regardless of their slug
 */
 if ( self.type !== 'row' && self.type !== 'column' && self.type !== 'subrow' ) {
 Themify.triggerEvent( document, 'tb_editing_module', [self] );
 }
 }, 5);
 if (is_style) {
 model.unset('styleClicked', {silent: true});
 }
 else if (is_visible) {
 model.unset('visibileClicked', {silent: true});
 }
 return container;
 },
 getStyleVal: function (id, breakpoint) {
 if (api.activeModel !== null) {
 if (breakpoint === undefined) {
 breakpoint = api.activeBreakPoint;
 }
 if (this.clicked !== 'styling' || breakpoint === 'desktop') {
 return this.values[id] !== '' ? this.values[id] : undefined;
 }
 var breakpoints = this.breakpointsReverse,
 index = breakpoints.indexOf(breakpoint);
 for (var i = index, len = breakpoints.length; i < len; ++i) {
 if (breakpoints[i] !== 'desktop') {
 if (this.values['breakpoint_' + breakpoints[i]] !== undefined && this.values['breakpoint_' + breakpoints[i]][id] !== undefined && this.values['breakpoint_' + breakpoints[i]][id] !== '') {
 return this.values['breakpoint_' + breakpoints[i]][id];
 }
 }
 else if (this.values[id] !== '') {
 return this.values[id];
 }
 }
 }
 return undefined;
 },
 updateStyles: function (e, prevbreakpoint, breakpoint) {
 this.setStylingValues(prevbreakpoint);
 var old_tab = this.clicked;
 this.clicked = 'styling';
 for (var k in this.stylesData) {
 var type = this.stylesData[k].type;
 if (type !== 'video' && type !== 'gallery' && type !== 'custom_css' && type!=='builder' && this.stylesData[k].is_responsive !== false) {
 if (type === 'icon_radio') {
 type = 'radio';
 }
 else if (type === 'icon_checkbox') {
 type = 'checkbox';
 }
 else if (type === 'textarea' || type === 'icon'|| type==='hidden') {
 type = 'text';
 }
 else if (type === 'image') {
 type = 'file';
 }
 else if (type === 'padding' || type === 'border_radius') {
 type = 'margin';
 }
 else if (type === 'frame') {
 type = 'layout';
 }
 var v = this.getStyleVal(k);
 this[type].update(k, v, this);
 if (this.stylesData[k].binding !== undefined) {
 var items = topWindow.document.getElementById(k),
 res = [];
 if (type === 'layout') {
 res = items.getElementsByClassName('tfl-icon');
 }
 else if (type === 'radio' || type === 'checkbox') {
 res = items.getElementsByTagName('input');
 }
 else {
 res = [items];
 }
 var data = this.stylesData[k];
 for (var i = 0, len = res.length; i < len; ++i) {
 this.binding(res[i], data, v);
 }
 items = res = null;
 }
 }
 }
 this.clicked = old_tab;
 },
 setStylingValues: function (breakpoint) {
 var data = api.Forms.serialize('tb_options_styling', true),
 isDesktop = breakpoint === 'desktop';
 if (!isDesktop && this.values['breakpoint_' + breakpoint] === undefined) {
 this.values['breakpoint_' + breakpoint] = {};
 } 
 for (var i in data) {
 if (isDesktop===true) {
 this.values[i] = data[i];
 }
 else {
 this.values['breakpoint_' + breakpoint][i] = data[i];
 }
 }
 
 },
 saveComponent: function (autoSave) {
 // Check if save GS post
 if(!api.GS.isEmpty(api.activeModel.attributes['gs'])){
 api.GS.saveLiveEdit();
 return true;
 }
 api.saving = true;
 var self = api.Forms,
 is_module = this.component === 'module';
 if ((is_module && !self.isValidate(topWindow.document.getElementById('tb_options_setting'))) || (Common.Lightbox.$lightbox[0].getElementsByClassName('tb_disable_save')[0]!==undefined)){
 api.beforeEvent = null;
 api.saving = false;
 return false;
 }

Themify.body.triggerHandler('themify_builder_save_component');
            if (api.mode === 'visual') {
                // Trigger parent iframe
                topWindow.jQuery('body').triggerHandler('themify_builder_save_component');
            }
            delete this.values['cid'];

api.activeModel.set(data, {silent: true});
            if (is_module) {
                if (this.is_new) {
                    column = elem.closest('.module_column');
                    column.closest('.module_row').removeClass('tb_row_empty');
                    column.closest('.module_subrow').removeClass('tb_row_empty');
                    column = Common.clone(column);
                }
                api.Instances.Builder[api.builderIndex].removeLayoutButton();
            }
            var styles;
            if (api.mode === 'visual') {
                styles = $.extend(true, {}, api.liveStylingInstance.undoData);
                elem[0].classList.remove('tb_visual_hover');
                elem.find('.tb_visual_hover').removeClass('tb_visual_hover');
            }
            if(api.ActionBar.hoverCid===api.activeModel.cid){
                api.ActionBar.hoverCid=null;
                api.ActionBar.clearSelected();
            }
            api.undoManager.push(api.activeModel.cid, api.beforeEvent, elem, 'save', {bsettings: before_settings, asettings: this.values, styles: styles, 'column': column});
            Common.Lightbox.close(autoSave);
            api.beforeEvent = null;
            api.saving = false;
            return true;
        },
        resetStyling: function (e) {
            e.preventDefault();
            e.stopPropagation();
            if(!this.beforeData){
                this.beforeData =  $.extend(true, {}, this.values);
                var self = this;
                Themify.body.one('themify_builder_lightbox_before_close',function(){
                    self.beforeData = null;
                });
            }
            api.hasChanged = true;
            var context = $('#tb_options_styling', ThemifyBuilderCommon.Lightbox.$lightbox)[0],
                items = context.getElementsByClassName('tb_lb_option'),
                type = api.activeModel.get('elType');
                if(type==='module'){
                    type = api.activeModel.get('mod_name');
                }
            // Reset GS
            var selectedGS = context.getElementsByClassName('tb_selected_style');
            for(var i = selectedGS.length-1;i>-1;--i){
                if ( api.GS.delete( selectedGS[i].getAttribute( 'data-css' ), selectedGS[i].getAttribute( 'data-id' ) ) ) {
                    selectedGS[i].outerHTML = '';
                }
            }
            var GSContainer = context.getElementsByClassName('tb_gs_not_empty');
            if(GSContainer.length){
                GSContainer[0].classList.remove( 'tb_gs_not_empty' );
            }
                var settings = ThemifyStyles.getStyleOptions(type);
            if(api.mode==='visual'){
                var data = {},
                    undoData ={},
                    prefix = api.liveStylingInstance.prefix,
                    points = this.breakpointsReverse;
                for(var i=points.length-1;i>-1;--i){
                    var stylesheet =ThemifyStyles.getSheet(points[i]),
                        rules = stylesheet.cssRules ? stylesheet.cssRules : stylesheet.rules;
                    if(rules.length>0){
                        if( data[points[i]]===undefined){
                            data[points[i]] = {};
                            undoData[points[i]] = {};
                             
                        }
                        for(var j=rules.length-1;j>-1;--j){
                            if(rules[j].selectorText.indexOf(prefix)!==-1){
                                var css = rules[j].cssText.split('{')[1].split(';');
                                if(data[points[i]][j]===undefined){
                                    data[points[i]][j]={};
                                    undoData[points[i]][j]={};
                                }
                                
                                for(var k=css.length-2;k>-1;--k){
                                    var prop=css[k].trim().split(': ')[0].trim();
                                    if(rules[j].style[prop]!==undefined){
                                        var val=rules[j].style[prop];
                                            data[points[i]][j][prop]=val;
                                            undoData[points[i]][j][prop]={'a':'','b':val};
                                            rules[j].style[prop]='';
                                    }
                                }
                            }
                        }
                    }
                }
                if(api.activeModel.get('elType')!=='module'){
                    api.liveStylingInstance.removeBgSlider();
                    api.liveStylingInstance.removeBgVideo();
                    api.liveStylingInstance.getComponentBgOverlay().remove();
                    api.liveStylingInstance.bindBackgroundMode('repeat','background_repeat');
                    api.liveStylingInstance.bindBackgroundMode('repeat','b_r_h');
                    api.liveStylingInstance.$liveStyledElmt[0].removeAttribute('data-tb_slider_videos');
                    api.liveStylingInstance.$liveStyledElmt.children('.tb_slider_videos,.tb_row_frame').remove();
                }
            }
             for(var i in this.values){
                var key = i.indexOf('_color') !== -1 ? 'color' : (i.indexOf('_style') !== -1 ? 'style' : false),
                    remove=null;
                if(i.indexOf('breakpoint_')===0 || settings[i]!==undefined ||  i.indexOf('_apply_all') !== -1){
                        remove=true;
                }
                else if (i.indexOf('_unit') !== -1) {//unit
                    key = i.replace(/_unit$/ig, '', '');
                    if (settings[key] !== undefined) {
                        remove=true;
                    }
                }
                else if (i.indexOf('_w') !== -1) {//weight
                    key = i.replace(/_w$/ig, '', '');
                    if (settings[key] !== undefined && settings[key].type === 'font_select') {
                        remove=true;
                    }
                }
                else if (key !== false) {
                    key = i.replace('_' + key, '_width');
                    if (settings[key] !== undefined && settings[key].type === 'border') {
                        remove=true;
                    }
                }
                if(remove===true){
                        delete this.values[i];
                }
            }
            settings=null;
            for(var i=items.length-1;i>-1;--i){
                var v = items[i].value,
                    cl = items[i].classList;
                if (v !== 'px' && v !== 'solid' && v !== 'default' && v !== 'linear' && v !== 'n' && !cl.contains('exclude-from-reset-field')) {
                    var id = items[i].getAttribute('id');
                    if(this.values[id]!==undefined){
                        delete this.values[id];
                    }
                    if (cl.contains('tb_radio_input_container')) {
                        if (cl.contains('tb_icon_radio')) {
                            var checked = context.querySelector('[name="' + id + '"]:checked');
                            if (checked !== null) {
                                checked.parentNode.click();
                            }
                        }
                        else {
                            var r = context.querySelector('[name="' + id + '"]');
                            if (r.checked !== true) {
                                r.checked = true;
                                Themify.triggerEvent(r, 'change');
                            }
                        }
                    } 
                    else if (cl.contains('tb_uploader_input')) {
                        if (v) {
                            items[i].parentNode.getElementsByClassName('tb_delete_thumb')[0].click(e);
                        }
                    }
                    else if (cl.contains('minicolors-input')) {
                        var p = items[i].closest('.minicolors'),
                            clear = p.getElementsByClassName('tb_clear_btn')[0];
                        if (v) {
                            items[i].value='';
                            items[i].removeAttribute('data-opacity');
                          
                            var swatch=p.getElementsByClassName('minicolors-swatch-color')[0];
                            swatch.style['opacity']=swatch.style['backgroundColor']='';
                            p.nextElementSibling.value='';
                        }
                        if(clear!==undefined){
                            clear.style['display']='none';
                        }
                    }
                    else if (v && items[i].tagName === 'SELECT') {
                        if (cl.contains('font-family-select')) {
                            items[i].value = '';
                        }
                        else if (cl.contains('font-weight-select')) {
                            items[i].value = '';
                            while (items[i].firstChild) {
                                items[i].removeChild(items[i].firstChild);
                            }
                            this.font_select.updateFontVariant('', items[i], this);
                        }
                        else if (cl.contains('tb_unit')) {
                            items[i].value = cl.contains('tb_frame_unit') ? '%' : 'px';
                        } else {
                            if ((v === 'repeat' && id === 'background_repeat') || (v === 'scroll' && id === 'background_attachment') || (v === 'left top' && id === 'background_position')) {
                                continue;
                            }
                            items[i].selectedIndex = 0;
                        }
                        if (!cl.contains('themify-gradient-type')) {
                            Themify.triggerEvent(items[i], 'change');
                        }
                    }
                    else if (cl.contains('themify-layout-icon')) {
                        var f = items[i].getElementsByClassName('tfl-icon')[0];
                        if (!f.classList.contains('selected')) {
                            f.click();
                        }
                    }
                    else if(cl.contains('tb_row_js_wrapper')){
                        var repeat = items[i].getElementsByClassName('tb_repeatable_field');
                        for(var j=repeat.length-1;j>-1;--j){
                            repeat[j].parentNode.removeChild(repeat[j]);
                        }
                        items[i].getElementsByClassName('add_new')[0].click();
                    }
                    else {
                        if (!cl.contains('themify-gradient-angle')) {
                           
                            if (cl.contains('themify-gradient')) {
                                items[i].nextElementSibling.click();
                            }
                            else{ 
                                items[i].value = '';
                                var $el = $(items[i]);
                                if ($el.closest('.tb_gradient_container').is(':visible')) {
                                    $el.trigger(cl.contains('tb_range') ? 'keyup' : 'change');
                                }
                                
                            }
                        }   
                        else {
                            items[i].value = '180';
                        }
                    }
                }
            }
            if(api.mode==='visual'){
                api.liveStylingInstance.tempData = data; 
                api.liveStylingInstance.undoData = undoData;
            }
            
        },
        create: function (data) {
            var content = document.createDocumentFragment();
            if (data===undefined || data.length === 0) {
                var info = document.createElement('div'),
                    infoText = document.createElement('p');
                    infoText.textContent = themifyBuilder.i18n.no_op_module;
                    info.appendChild(infoText);
                    content.appendChild(info);
                    return content;
            }
            if (data.type === 'tabs') {
                content.appendChild(this.tabs.render(data, this));
            }
            else {
                for (var i in data) {
                    if (data[i].hide === true || data[i].type===undefined) {
                        continue;
                    }
                    var type=data[i].type,
                        res = this[type].render(data[i], this);
                
                    if (type!== 'separator' && type!== 'expand' && type!== 'group') {
                        var id = data[i].id;
                        if (type!== 'tabs' && type!== 'multi') {
                            if (this.clicked === 'styling') {
                                if (api.mode === 'visual' && data[i].prop !== undefined) {
                                    this.styles[id] = $.extend(true, {}, data[i]);
                                }
                                this.stylesData[id] = $.extend(true, {}, data[i]);
                            }
                            else if (api.mode === 'visual' && this.clicked === 'setting' && this.values[id] !== undefined && this.is_repeat !== true) {
                                this.settings[id] = this.values[data[i].id];
                                if (data[i]['units'] !== undefined && this.values[id + '_unit'] !== undefined) {
                                    this.settings[id + '_unit'] = this.values[id + '_unit'];
                                }
                            }

}
                        if (type!== 'builder') {
                            var field = document.createElement('div');
                            field.className = 'tb_field';
                            field.setAttribute( 'data-type', type );
                            if (id !== undefined) {
                                field.className += ' ' + id;
                            }
                            if (data[i].wrap_class !== undefined) {
                                field.className += ' ' + data[i].wrap_class;
                            }
                            if (type === 'custom_css') {
                                field.appendChild(this.separator.render(data[i], this));
                            }
                            else if(type==='toggle_switch'){
                                field.className+= ' switch-wrapper';
                            }
                            else if (type === 'slider') {
                                field.className += ' tb_slider_options';
                            }
                            else if (type=== 'message' && data[i].hideIf !== undefined && new Function('return ' + data[i].hideIf ) ) {
                                field.className += ' tb_hide_option';
                            }
                            else  if(data[i]['required']!==undefined && this.clicked === 'setting'){// validation rules
                                var rule = data[i].required['rule']!==undefined?data[i].required['rule']:'not_empty',
                                    msg = data[i].required['message']!==undefined?data[i].required['message']:themifyBuilder.i18n.not_empty;
                                field.setAttribute('data-validation',rule);
                                field.setAttribute('data-error-msg',msg);
                                field.className+=' tb_must_validate';
                            }
                            if (this.clicked === 'styling' && data[i].is_responsive === false) {
                                field.className += ' responsive_disable';
                            }
                            
                            var txt = this.getTitle(data[i]);
                            if (txt !== false) {
                                txt = txt.trim();
                                var label = document.createElement('div'),
                                    labelText = document.createElement('span');
                                    label.className = 'tb_label';
                                    labelText.className = 'tb_label_text';
                                    labelText.textContent = txt;
                                    label.appendChild(labelText);
                                if ( txt=== '' ) {
                                    label.className += ' tb_empty_label';
                                }
                                
                                if(data[i]['help']!==undefined && data[i]['label'] !== '' ){
                                    label.classList.add('contains-help');
                                    labelText.appendChild(this.help(data[i]['help']));
                                }
                                field.appendChild(label);
                                if (type !== 'multi') {
                                    var input = document.createElement('div');
                                    input.className = 'tb_input';
                                    input.appendChild(res);
                                    field.appendChild(input);
                                }
                                else {
                                    field.appendChild(res);
                                }
                            }
                            else {
                                field.appendChild(res);
                            }
                            content.appendChild(field);
                        }
                        else {
                            content.appendChild(res);
                        }
                    }
                    else {
                        content.appendChild(res);
                    }
                }
            }
            return content;
        },
        tabs: {
            click: 0,
            render: function (data, self) {
                var items = data.options,
                    f = document.createDocumentFragment(),
                    tabs_container = document.createDocumentFragment(),
                    ul = document.createElement('ul'),
                    isSticky =  self.clicked === 'styling' && this.click===0 && self.component === 'module',
                    stickyWraper=isSticky?document.createElement('div'):null,
                    tabs = document.createElement('div'),
                    first = null;
                tabs.className = 'tb_tabs';
                    ul.className = 'clearfix tb_tab_wrapper';
                ++this.click;
                for (var k in items) {
                    var li = document.createElement('li'),
                        a = document.createElement('a'),
                        div = document.createElement('div'),
                        id = 'tb_' + this.click + '_' + k;

div.id = id;
                    div.className = 'tb_tab';
                    a.href = '#' + id;
                    a.textContent = items[k].label !== undefined ? items[k].label : self.label[k];
                    if ( first === null) {
                        first = true;
                        li.className = 'current';
                        div.appendChild(self.create(items[k].options));
                        div.style.display = 'block';

}else {
                        (function () {
                            var index = k;
                            div.addEventListener('themify_builder_tabsactive', function _tab(e) {
                                this.appendChild(self.create(items[index].options));
                                if ( self.clicked === 'setting' ) {
                                    self.setUpEditors();
                                }
                                self.callbacks();
                                div.removeEventListener('themify_builder_tabsactive', _tab, { once: true,passive: true});
                                index = null;
                            }, {once: true, passive: true});
                        })();
                    }
                    a.addEventListener('click', self.switchTabs);
                    li.appendChild(a);
                    f.appendChild(li);
                    tabs_container.appendChild(div);
                }
                
                ul.appendChild(f);
                if(stickyWraper!==null){
                    stickyWraper.className='tb_styling_tab_nav';
                    stickyWraper.appendChild(ul);
                    tabs.appendChild(stickyWraper);
                }
                else{
                    tabs.appendChild(ul);
                }
                tabs.appendChild(tabs_container);
                setTimeout(self.callbacks.bind(self), 5);
                return tabs;
            }
        },
        group: {
            render: function (data, self) {
                var wr = document.createElement('div');
                if (data.wrap_class !== undefined) {
                    wr.className += ' ' + data.wrap_class;
                }
                wr.appendChild(self.create(data.options));
                return wr;
            }
        },
        builder: {
            render: function (data, self) {
                self.is_repeat = true;
                var d = document.createDocumentFragment(),
                        wrapper = document.createElement('div'),
                        add_new = document.createElement('a'),
                        _this = this;
                wrapper.className = 'tb_row_js_wrapper tb_lb_option';
                if (data.wrap_class !== undefined) {
                    wrapper.className += ' ' + data.wrap_class;
                }
                wrapper.id = data.id;
                add_new.className = 'add_new tb_icon add';
                add_new.href = '#';
                add_new.textContent = data.new_row !== undefined ? data.new_row : self.label.new_row;
                if (self.values[data.id] !== undefined) {
                    var values = self.values[data.id].slice(),
                            f = document.createDocumentFragment(),
                            orig = $.extend(true, {}, self.values);

for (var i = 0, len = values.length; i < len; ++i) {
 self.values = values[i];
 f.appendChild(this.builderFields(data, self));
 }
 wrapper.appendChild(f);
 self.values = orig;
 orig = values = f = null;
 }
 else {
 wrapper.appendChild(this.builderFields(data, self));
 }
 wrapper.appendChild(add_new);
 d.appendChild(wrapper);
 self.afterRun.push(function () {
 _this.sortable(wrapper, self);
 add_new.addEventListener('click', function (e) {
 e.preventDefault();
 e.stopPropagation();
 self.is_repeat = true;
 add_new.parentNode.insertBefore(_this.builderFields(data, self), add_new);
 setTimeout(function () {
 if (self.clicked === 'setting') {
 self.setUpEditors();
 }
 self.callbacks();
							Themify.triggerEvent( document, 'tb_repeatable_add_new', [ add_new.parentNode, self ] );
 }, 5);
 self.control.preview(wrapper, null, {repeat: true});
 self.is_repeat = null;
 });
 });
 self.is_repeat = null;
 return d;
 },
 builderFields: function (data, self) {
 var d = document.createDocumentFragment(),
 repeat = document.createElement('div'),
 top = document.createElement('div'),
 menu = document.createElement('div'),
 icon = document.createElement('div'),
 ul = document.createElement('ul'),
 _duplicate = document.createElement('li'),
 _delete = document.createElement('li'),
 toggle = document.createElement('div'),
 content = document.createElement('div'),
 _this = this;

repeat.className = 'tb_repeatable_field clearfix';

top.className = 'tb_repeatable_field_top';
                menu.className = 'row_menu';
                icon.tabIndex='-1';
                icon.className = 'menu_icon';
                ul.className = 'tb_down';
                _duplicate.className = 'tb_duplicate_row';
                _delete.className = 'tb_delete_row';
                _duplicate.textContent = self.label.duplicate;
                _delete.textContent = self.label.delete;
                toggle.className = 'toggle_row';
                content.className = 'tb_repeatable_field_content';

d.appendChild(self.create(data.options));
                content.appendChild(d);
                ul.appendChild(_duplicate);
                ul.appendChild(_delete);
                menu.appendChild(icon);
                menu.appendChild(ul);
                top.appendChild(menu);
                top.appendChild(toggle);
                repeat.appendChild(top);
                repeat.appendChild(content);
                setTimeout(function(){
                    top.addEventListener('click',function(e){
                        e.stopPropagation();
                        e.preventDefault();
                        var cl =  e.target.classList;
                        if(cl.contains('tb_delete_row')){
                            if (confirm(themifyBuilder.i18n.rowDeleteConfirm)) {
                                var  p = e.target.closest('.tb_row_js_wrapper');
                                _this.delete(e.target);
                                self.control.preview(p, null, {repeat: true});
                                Themify.triggerEvent(p, 'delete');
                            }
                        }
                        else if(cl.contains('tb_duplicate_row')){
                            self.is_repeat = true;
                            var orig = $.extend(true, {}, self.values);
                            self.values = api.Forms.serialize(repeat, true, true);
                            repeat.parentNode.insertBefore(_this.builderFields(data, self), repeat.nextElementSibling);
                            self.values = orig;
                            orig = null;
                            setTimeout(function () {
                                if (self.clicked === 'setting') {
                                    self.setUpEditors();
                                }
                                self.callbacks();
                                Themify.triggerEvent(repeat.parentNode, 'duplicate');
								Themify.triggerEvent( document, 'tb_repeatable_duplicate', [ repeat.parentNode, self ] );
                            }, 5);
                            self.control.preview(repeat, null, {repeat: true});
                            self.is_repeat = null;
                        }
                        else if(cl.contains('toggle_row')){
                            _this.toggle(e.target);
                        }
                        if(!cl.contains('menu_icon')){
                            api.Utils.hideOnClick(ul);
                        }
                    });
                }.bind(this),1500);
               
                return repeat;
            },
            sortable: function (el, self) {
                var $el = $(el),
                        toggleCollapse = false,
                        editors = {};
                // sortable accordion builder
                $el.sortable({
                    items: '.tb_repeatable_field',
                    handle: '.tb_repeatable_field_top',
                    axis: 'y',
                    tolerance: 'pointer',
                    cursor: 'move',
                    cancel:'.row_menu',
                    start: _.debounce(function (e, ui) {
                        if (tinyMCE !== undefined) {
                            var items = el.getElementsByClassName('tb_lb_wp_editor');
                            for (var i = items.length - 1; i > -1; --i) {
                                var id = items[i].id;
                                editors[id] = tinymce.get(id).getContent();
                                tinyMCE.execCommand('mceRemoveEditor', false, id);
                            }
                            items = null;
                        }
                    }, 300),
                    stop: _.debounce(function (e, ui) {
                        if (tinyMCE !== undefined) {
                            for (var id in editors) {
                                tinyMCE.execCommand('mceAddEditor', false, id);
                                tinymce.get(id).setContent(editors[id]);
                            }
                            editors = {};
                        }

if (toggleCollapse) {
 ui.item.removeClass('collapsed').find('.tb_repeatable_field_content').show();
 toggleCollapse = false;
 }
 $el.find('.tb_state_highlight').remove();
 self.control.preview(el, null, {repeat: true});
 Themify.triggerEvent(el, 'sortable');
 }, 300),
 beforeStart: function (event, el, ui) {
 api.Utils.hideOnClick(ui.item[0].getElementsByClassName('tb_down')[0]);
 $el.find('.tb_state_highlight').height(30);
 if (!ui.item[0].classList.contains('collapsed')) {
 ui.item.addClass('collapsed').find('.tb_repeatable_field_content').hide();
 toggleCollapse = true;
 $el.sortable('refresh');
 }
 }
 });
 },
 toggle: function (el) {
 $(el).closest('.tb_repeatable_field').toggleClass('collapsed').find('.tb_repeatable_field_content').slideToggle();
 },
 delete: function (el) {
 $(el).closest('.tb_repeatable_field').remove();
 }
 },
 toggleable_fields:{
 sort:function(el,self){
 var $el = $(el);
 $el.sortable({
 items: '>li',
 axis: 'y',
 placeholder: 'tb_state_highlight',
 forcePlaceholderSize: true,
 forceHelperSize:true,
 cursor: 'move',
 tolerance: 'pointer',
 zIndex: 9999,
 cancel:'.tb_toggleable_fields_title,.switch-wrapper,.tb_toggleable_fields_options',
 stop: _.debounce(function (e, ui) {
 $el.find('.tb_state_highlight').remove();
 self.control.preview($el[0], null, {repeat: true});
 Themify.triggerEvent($el[0], 'sortable');
 }, 300),
 start:function(e, ui){
 $el.sortable('refreshPositions');
 },
 beforeStart: function (event, el, ui) {
 $el.sortable('refresh');
 }
 });
 },
 expand:function(item,data,self){
 item.addEventListener('click', function (e) {
 if(!this.classList.contains('tb_toggleable_field_disabled') && e.target.closest('.switch-wrapper')===null){
 var wrap = this.getElementsByClassName('tb_toggleable_fields_options')[0];
 if(wrap===undefined){
 wrap = document.createElement('div');
 wrap.style['display']='none';
 wrap.className='tb_toggleable_fields_options';
 this.appendChild(wrap);
 self.is_repeat = true;
 var pid = this.closest('.tb_toggleable_fields').id,
 orig=null,
 id=this.getAttribute('data-id');
 if(self.values[pid]!==undefined && self.values[pid][id]!==undefined && self.values[pid][id]['val']!==undefined){
 orig = $.extend(true, {}, self.values);
 self.values = self.values[pid][id]['val'];
 }
 wrap.appendChild(self.create(data['options']));
 self.setUpEditors();
 self.callbacks();
 if(orig!==null){
 self.values = orig;
 }
 self.is_repeat = orig = null;
 }
 else if(wrap.contains(e.target)){
 return;
 }
 e.stopPropagation();
 e.preventDefault();
 if(this.classList.contains('tb_closed')){
 $(wrap).slideDown(function(){
 this.parentNode.classList.remove('tb_closed');
 });
 }
 else{
 $(wrap).slideUp(function(){
 this.parentNode.classList.add('tb_closed');
 });
 }
 } else if(e.target.closest('.tb_toggleable_fields_options') === null) {
 var wrap = this.getElementsByClassName('tb_toggleable_fields_options')[0];
 $(wrap).slideUp(function(){
 this.parentNode.classList.add('tb_closed');
 });
 }
 });
 },
 disable:function(el,self){
 var item = el.closest('li'),
 cl=item.classList;
 if(!el.checked){
 cl.add('tb_toggleable_field_disabled');
 cl.add('tb_closed');
 }
 else{
 cl.remove('tb_toggleable_field_disabled');
 }
 self.control.preview(item.parentNode, null, {repeat: true});
 },
 render:function(data,self){
 var _this = this,
 f = document.createDocumentFragment(),
 toogleSwitch = {
 type:'toggle_switch',
 id:'',
 options:{
 'on':{
 'name':'1',
 'value' : self.label['s']
 },
 'off':{
 'name':'0',
 'value' : self.label['hi']
 }
 },
 control:false
 },
 ul = document.createElement('ul');
 ul.className='tb_toggleable_fields';
 if (self.is_repeat === true) {
 ul.dataset['inputId'] = data.id;
 ul.className += ' tb_lb_option_child';
 }
 else {
 ul.id = data.id;
 ul.className += ' tb_lb_option';
 }
 
 var oldRepeat = self.is_repeat,
 opt = self.values[data.id];
 self.is_repeat = true;
 var create = function(id,item){
 toogleSwitch['default']=item['on']==='1'?'on':'off';
 var li=document.createElement('li'),
 input=document.createElement('input'),
 title = document.createElement('div'),
 switcher = self.create([toogleSwitch]);
 title.textContent = data['options'][id].label;
 title.className='tb_toggleable_fields_title';
 input.type='hidden';
 input.value ='';
 li.className='tb_closed';
 if(toogleSwitch['default']==='off'){
 li.className+=' tb_toggleable_field_disabled';
 }
 li.setAttribute('data-id',id);
 if(item['val']!==undefined){
 input.value =JSON.stringify(item['val']);
 }
 switcher.querySelector('.toggle_switch').addEventListener('change',function(e){
 e.stopPropagation();
 _this.disable(this,self);
 },{passive:true});
 li.appendChild(input);
 li.appendChild(title);
 li.appendChild(switcher);
 (function () {
 _this.expand(li,data['options'][id],self);
 })();
 f.appendChild(li);
 };
 if(opt!==undefined){
 for(var id in opt){
 if(data['options'][id]!==undefined){
 create(id,opt[id]);
 }
 }
 }
 for(var id in data['options']){
 if(opt[id]===undefined){
 create(id,data['options'][id]);
 }
 }
 self.is_repeat = oldRepeat;
 ul.appendChild(f);
 self.afterRun.push(function(){
 _this.sort(ul,self);
 });
 return ul;
 }
 },
 sortable_fields:{
 getDefaults:function(type,self){
 var in_all_types = [
 { 'id' : 'icon',
 'type' : 'icon',
 'label' :self.label['icon']
 },
 {
 'id' : 'before',
 'type' : 'text',
 'label' : self.label['b_t']
 },
 {
 'id' : 'after',
 'type' : 'text',
 'label' : self.label['a_t']
 }
 ],
 _defaults = {
 date:[
 {
 'id' : 'format',
 'type' : 'select',
 'label' :self.label['d_f'],
 'options' : {
 'F j, Y' : self.label['F_j_Y'],
 'Y-m-d' :self.label['Y_m_d'],
 'm/d/Y' : self.label['m_d_Y'],
 'd/m/Y' : self.label['d_m_Y'],
 'def' : self.label['def'],
 'custom' : self.label['cus']
 },
 'binding' : {
 'not_empty':{'hide':['custom']},
 'custom':{'show':['custom']}
 }
 },
 {
 'id' : 'custom',
 'type' : 'text',
 'control':{'event':'change'},
 'label' : self.label['cus_f'],
 'help' :self.label['cus_fd_h']
 }
 ],
 time:[
 {
 'id' : 'format',
 'type' : 'select',
 'label' : self.label['t_f'],
 'options' : {
 'g:i a' :self.label['g_i_a'],
 'g:i A' :self.label['g_i_A'],
 'H:i' :self.label['H_i'],
 'def' : self.label['def'],
 'custom' : self.label['cus']
 },
 'binding' :{
 'not_empty':{'hide':['custom']},
 'custom':{'show':['custom']}
 }
 },
 {
 'id' : 'custom',
 'type' : 'text',
 'control':{'event':'change'},
 'label' : self.label['cus_f'],
 'help' :self.label['cus_ft_h']
 }
 ],
 author:[
 { 
 'id' : 'l',
 'type' : 'toggle_switch',
 'label' : self.label['l'],
 'options': 'simple'
 },
 {
 'id' : 'a_p',
 'type' : 'toggle_switch',
 'label' : self.label['a_p'],
 'binding' :{
 'checked':{'show':['p_s']},
 'not_checked':{'hide':['p_s']}
 },
 'options': 'simple'
 },
 {
 'id' : 'p_s',
 'type' : 'range',
 'label' : self.label['p_s'],
 'class' : 'xsmall',
 'units' : {
 'px' :{
 'min' : 0,
 'max' : 96
 }
 },
 control:{
 event:'change'
 }
 }
 ],
 comments:[
 {
 'id' : 'l',
 'type' : 'toggle_switch',
 'label' : self.label['l'],
 'options':'simple'
 },
 {
 'id' : 'no',
 'type' : 'text',
 'control':{'event':'change'},
 'label' : self.label['no_c']
 },
 {
 'id' : 'one',
 'type' : 'text',
 'control':{'event':'change'},
 'label' : self.label['one_c']
 },
 {
 'id' : 'comments',
 'type' : 'text',
 'control':{'event':'change'},
 'label' : self.label['comments']
 }
 ],
 terms:[
 {
 'id' : 'post_type',
 'type' : 'query_posts',
 'tax_id':'taxonomy'
 },
 {
 'id' : 'l',
 'type' : 'toggle_switch',
 'label' : self.label['l'],
 'options': 'simple'
 },
 {
 'id' : 'sep',
 'type' : 'text',
 'control':{'event':'change'},
 'label' : self.label['sep']
 }
 ]
 };
 if(_defaults[type]!==undefined){
 for(var i=0,len=in_all_types.length;i<len;++i){
 _defaults[type].push(in_all_types[i]);
 }
 }
 return _defaults[type];
 },
 create:function(self,data,type,id,vals,isRemovable){
 var li =document.createElement('li'),
 opt = data['options'][type];
 li.textContent = opt['label'];
 li.setAttribute('data-type',type);
 if(isRemovable===true){
 var remove = document.createElement('span'),
 input = document.createElement('input'),
 key=false;
 input.type='hidden';
 if(!id){
 if(vals!==undefined){
 key = this.find(vals,type,true);
 }
 li.setAttribute('data-new',true);
 var wrap = Common.Lightbox.$lightbox[0].getElementsByClassName(data['id'])[0],
 i=1;
 id = type+'_'+i;
 if(wrap!==undefined){
 while(true){
 if(wrap.querySelector('[data-id="'+id+'"]')===null){
 break;
 }
 ++i;
 id = type+'_'+i;
 }
 }
 }
 else if(vals!==undefined){
 key = this.find(vals,id);
 }
 li.setAttribute('data-id',id);
 if(key!==false && vals[key]['val']!==undefined){
 input.value=JSON.stringify(vals[key]['val']);
 }
 remove.className='tb_sort_fields_remove';
 remove.title=self.label['delete'];
 li.appendChild(input);
 li.appendChild(remove);
 }
 return li;
 },
 sort:function(el,self){
 var $el = $(el);
 $el.sortable({
 items: '>li',
 appendTo: topWindow.document.body,
 scroll: false,
 containment:'parent',
 placeholder: 'tb_state_highlight',
 cursor: 'move',
 tolerance: 'pointer',
 zIndex: 9999,
 cancel:'.tb_sort_fields_remove,.tb_sort_field_dropdown',
 stop: _.debounce(function (e, ui) {
 $el.find('.tb_state_highlight').remove();
 self.control.preview($el[0], null, {repeat: true});
 Themify.triggerEvent($el[0], 'sortable');
 }, 300),
 start:function(e, ui){
 var w = Math.floor(ui.item.width()+1);
 ui.item.width(w);
 $el.find('.tb_state_highlight').width(w);
 $el.sortable('refreshPositions');
 },
 beforeStart: function (e, el, ui) {
 ui.item[0].classList.remove('current');
 $el.sortable('refresh');
 }
 });
 },
 find:function(values,id,byType){
 for(var i=values.length-1;i>-1;--i){
 if(values[i].id===id || (byType===true && id===values[i].type)){
 return i;
 }
 }
 return false;
 },
 edit:function(self,data,vals,el){
 var type = el.dataset['type'],
 wrap=el.getElementsByClassName('tb_sort_field_dropdown')[0];
 if(wrap===undefined){
 wrap=document.createElement('div');
 wrap.className='tb_sort_field_dropdown tb_sort_field_dropdown_'+type;
 var options = data['options'][type]['options'],
 id=el.dataset.id,
 orig=null;
 if(options===undefined){
 options = this.getDefaults(type,self);
 }
 self.is_repeat = self.is_sort =true;
 if(vals!==undefined){
 var isNew = el.dataset['new']?true:false,
 by=isNew===true?type:id;
 var key= this.find(vals,by,isNew);
 if(key!==false && vals[key]['val']!==undefined){
 orig = $.extend(true, {}, self.values);
 self.values = vals[key]['val'];
 }
 }
 wrap.appendChild(self.create(options));
 el.appendChild(wrap);
 self.callbacks();
 if(orig!==null){
 self.values = orig;
 }
 self.is_sort =self.is_repeat=orig = null;
 }
 
 if(!el.classList.contains('current')){
 el.classList.add('current');
 var _close = function(e){
 if(e.which===1){
 if(e.target===el || el.contains(e.target) || (Themify_Icons.target && el.contains(Themify_Icons.target[0]) && this.getElementById('themify_lightbox_fa').style['display']==='block')){
 el.classList.add('current');
 }
 else{
 el.classList.remove('current');
 topWindow.document.removeEventListener('mousedown',_close,{passive:true});
 el=null;
 }
 }
 };
 topWindow.document.removeEventListener('mousedown',_close,{passive:true});
 topWindow.document.addEventListener('mousedown',_close,{passive:true});
 }
 },
 remove:function(self,el){
 el=el.closest('li');
 var p = el.parentNode;
 el.parentNode.removeChild(el);
 self.control.preview(p, null, {repeat: true});
 Themify.triggerEvent(p, 'delete');
 },
 render:function(data,self){
 var _this = this,
 f = document.createDocumentFragment(),
 f2 = document.createDocumentFragment(),
 wrapper = document.createElement('div'),
 plus = document.createElement('div'),
 plusWrap=document.createElement('div'),
 ul = document.createElement('ul'),
 items = document.createElement('ul'),
 values = self.values[data.id].slice(0);
 wrapper.className='tb_sort_fields_wrap';
 items.className='tb_sort_fields_parent';
 if (self.is_repeat === true) {
 items.dataset['inputId'] = data.id;
 items.className += self.is_sort===true?' tb_lb_sort_child':' tb_lb_option_child';
 }
 else {
 items.id = data.id;
 items.className += ' tb_lb_option';
 }
 
 ul.className='tb_ui_dropdown_items';
 plus.className='tb_ui_dropdown_label tb_sort_fields_plus';
 plus.tabIndex='-1';
 plusWrap.className='tb_sort_fields_plus_wrap';
 for(var i in data['options']){
 f.appendChild(this.create(self,data,i));
 }
 for(var i=0,len=values.length;i<len;++i){
 if(self.is_new!==true || values[i].show===true){
 f2.appendChild(this.create(self,data,values[i].type,values[i].id,values,true));
 }
 }
 items.appendChild(f2);
 ul.appendChild(f);
 plusWrap.appendChild(plus);
 plusWrap.appendChild(ul);
 wrapper.appendChild(items);
 wrapper.appendChild(plusWrap);
 items.addEventListener('click',function(e){
 if(e.target.classList.contains('tb_sort_fields_remove')){
 e.preventDefault();
 e.stopPropagation();
 _this.remove(self,e.target);
 }
 else if(e.target.tagName==='LI'){
 e.preventDefault();
 e.stopPropagation();
 _this.edit(self,data,values,e.target);
 }
 });
 ul.addEventListener('click',function(e){
 if(e.target.tagName==='LI'){
 e.preventDefault();
 e.stopPropagation();
 api.Utils.hideOnClick(ul);
 items.appendChild(_this.create(self,data,e.target.dataset['type'],null,values,true));
 self.control.preview(items, null, {repeat: true});
 $(items).sortable('refresh');
 }
 });
 self.afterRun.push(function(){
 _this.sort(items,self);
 if(self.is_new===true){
 self.control.preview(items, null, {repeat: true});
 }
 });
 return wrapper;
 }
 },
 multi: {
 render: function (data, self) {
 var d = document.createDocumentFragment(),
 wrapper = document.createElement('div');
 wrapper.className = 'tb_multi_fields tb_fields_count_' + data.options.length;
 d.appendChild(self.create(data.options));
 wrapper.appendChild(d);
 return wrapper;
 }
 },
 color: {
 is_typing: null,
 controlChange: function (el, btn_opacity, data) {
 var that = this,
 $el = $(el),
 id = data.id;
 //clear
 var clear = document.createElement('div');
 clear.className = 'tb_clear_btn';
 clear.addEventListener('click', function () {
 clear.style['display'] = 'none';
 el.value = '';
 $el.trigger('keyup');
 },{passive: true});
 $el.minicolors({
 opacity: 1,
 swatches: themifyColorManager.toColorsArray(),
 changeDelay: 10,
 beforeShow: function () {
 var lightbox = Common.Lightbox.$lightbox,
 p = $el.closest('.minicolors'),
 panel = p.find('.minicolors-panel');
 panel.css('visibility', 'hidden').show();//get offset
 if ((lightbox.offset().left + lightbox.width()) <= panel.offset().left + panel.width()) {
 p[0].classList.add('tb_minicolors_right');
 }
 else {
 p[0].classList.remove('tb_minicolors_right');
 }
 panel.css('visibility', '').hide();
 api.hasChanged = true;
 },
 show:function(){
 themifyColorManager.initColorPicker();
 },
 hide: function () {
 clear.style['display'] = el.value !== '' ? 'block' : 'none';
 },
 change: function (hex, opacity) {
 if (!hex) {
 opacity = '';
 }
 else if (opacity) {
 if ('0.99' == opacity) {
 opacity = 1;
 }
 else if (0 >= parseFloat(opacity)) {
 opacity = 0;
 }
 }
 if (!that.is_typing && opacity !== document.activeElement) {
 btn_opacity.value = opacity;
 }
 if (hex && 0 >= parseFloat($(this).minicolors('opacity'))) {
 $(this).minicolors('opacity', 0);
 }

if (api.mode === 'visual') {
 Themify.triggerEvent(this, 'themify_builder_color_picker_change', {id: id, val: (hex ? $(this).minicolors('rgbaString') : '')});
 }
 }
 }).minicolors('show');
 //opacity
 var callback = function (e) {
 var opacity = parseFloat(this.value.trim().replace(',','.'));
 if (opacity > 1 || isNaN(opacity) || opacity === '' || opacity < 0) {
 opacity = !el.value ? '' : 1;
 }
 if (e.type === 'blur') {
 this.value = opacity;
 }
 that.is_typing = 'keyup' === e.type;
 $el.minicolors('opacity', opacity);
 };
 btn_opacity.addEventListener('blur', callback,{passive: true});
 btn_opacity.addEventListener('keyup', callback,{passive: true});
 el.parentNode.appendChild(clear);
 el.setAttribute('data-minicolors-initialized', true);
 },
 setColor: function (input, swatch, opacityItem, val) {
 var color = val,
 opacity = '';
 if (val !== '') {
 if (val.indexOf('_') !== -1) {
 color = api.Utils.toRGBA(val);
 val = val.split('_');
 opacity = val[1];
 if (!opacity) {
 opacity = 1;
 } else if (0 >= parseFloat(opacity)) {
 opacity = 0;
 }
 color = val[0];
 }
 else {
 color = val;
 opacity = 1;
 }
 if (color.indexOf('#') === -1) {
 color = '#' + color;
 }
 }
 input.value = color;
 input.setAttribute('data-opacity', opacity);
 swatch.style['background'] = color;
 swatch.style['opacity'] = opacity;
 opacityItem.value = opacity;
 },
 update: function (id, v, self) {
 var input = topWindow.document.getElementById(id);
 if (input !== null) {
 var p = input.parentNode;
 if (v === undefined) {
 v = '';
 }
 this.setColor(input, p.getElementsByClassName('minicolors-swatch-color')[0], p.nextElementSibling, v);
 }
 },
 render: function (data, self) {
 var f = document.createDocumentFragment(),
 wrapper = document.createElement('div'),
 minicolors = document.createElement('div'),
 input = document.createElement('input'),
 opacity = document.createElement('input'),
 swatch = document.createElement('span'),
 span = document.createElement('span'),
 v = self.getStyleVal(data.id),
 that = this;

wrapper.className = 'minicolors_wrapper';
                minicolors.className = 'minicolors minicolors-theme-default';

input.type = 'text';
                input.className = 'minicolors-input';
                if (data['class'] !== undefined) {
                    input.className += ' ' + data.class;
                }
                if (self.is_repeat === true) {
                    input.className += self.is_sort===true?' tb_lb_sort_child':' tb_lb_option_child';;
                    input.dataset['inputId'] = data.id;
                }
                else {
                    input.id = data.id;
                    input.className += ' tb_lb_option';
                }
                swatch.className = 'minicolors-swatch';
                span.className = 'minicolors-swatch-color';

opacity.type = 'text';
                opacity.className = 'color_opacity';
                swatch.appendChild(span);
                minicolors.appendChild(input);
                minicolors.appendChild(swatch);
                wrapper.appendChild(minicolors);
                wrapper.appendChild(opacity);

self.initControl(input, data);
                swatch.addEventListener('click', function _click() {
                    wrapper.insertAdjacentElement('afterbegin', input);
                    minicolors.parentNode.removeChild(minicolors);
                    that.controlChange(input, opacity, data);
                    swatch.removeEventListener('click', _click, {once: true,passive: true});
                }, {once: true,passive: true});
                input.addEventListener('focusin', function _focusin() {
                    swatch.click();
                    input.removeEventListener('focusin', _focusin, {once: true,passive: true});
                }, {once: true,passive: true});
                opacity.addEventListener('focusin', function(e) {
                    if(!input.dataset['minicolorsInitialized']){
                        input.dataset['opacity'] = this.value;
                        swatch.click();
                    }
                    else{
                        $(input).minicolors('show');
                    }
                }, {passive: true});

if (v !== undefined) {
                    this.setColor(input, span, opacity, v);
                }
                f.appendChild(wrapper);
                if (data['after'] !== undefined) {
                    f.appendChild(self.after(data));
                }
                if (data['description'] !== undefined) {
                    f.appendChild(self.description(data.description));
                }
                if (data['tooltip'] !== undefined) {
                    f.appendChild(self.tooltip(data.tooltip));
                }
                return f;
            }
        },
        text: {
            update: function (id, v, self) {
                var item = topWindow.document.getElementById(id);
                if (item !== null) {
                    item.value = v !== undefined ? v : '';
                }
            },
            render: function (data, self) {
                var f = document.createDocumentFragment(),
                    input = document.createElement('input'),
                    v = self.getStyleVal(data.id);
                    input.type = data['input_type']!==undefined?data.input_type:'text'; // custom input types
                if (self.is_repeat === true) {
                    input.className = self.is_sort===true?'tb_lb_sort_child':'tb_lb_option_child';;
                    input.dataset['inputId'] = data.id;
                }
                else {
                    input.className = 'tb_lb_option';
                    input.id = data.id;
                }
                if (data['placeholder'] !== undefined) {
                    input.placeholder = data['placeholder'];
                }
                if (v !== undefined) {
                    input.value = v;
                }
                if (data['class'] !== undefined) {
                    input.className += ' ' + data.class;
                }
                f.appendChild(self.initControl(input, data));
                if (data['unit'] !== undefined) {
                    f.appendChild(self.select.render(data.unit, self));
                }
                if (data['after'] !== undefined) {
                    f.appendChild(self.after(data));
                }
                if (data['description'] !== undefined) {
                    f.appendChild(self.description(data.description));
                }
                if (data['tooltip'] !== undefined) {
                    f.appendChild(self.tooltip(data.tooltip));
                }
                return f;
            }
        },
        file: {
            _frames: {},
            clicked:null,
            browse: function (uploader, input,  self, type) {
                var _this = this;
                uploader.addEventListener('click', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    var file_frame,
                            title = self.label.upload_image,
                            text = self.label.insert_image;
                    if (_this._frames[type] !== undefined) {
                        file_frame = _this._frames[type];
                    }
                    else {
                        file_frame = wp.media.frames.file_frame = wp.media({
                            title: title,
                            library: {
                                type: type
                            },
                            button: {
                                text: text
                            },
                            multiple: false
                        });
                        _this._frames[type] = file_frame;
                    }
                    file_frame.off('select').on('select', function () {
                        api.ActionBar.disable=true;
                        var attachment = file_frame.state().get('selection').first().toJSON();
                        input.value = attachment.url;
                        Themify.triggerEvent(input, 'change');
                        api.hasChanged = true;
                        $(input).trigger('change');
                        var attach_id = Common.Lightbox.$lightbox.find('#'+input.id+'_id')[0];
                        if(attach_id!==undefined){
                            attach_id.value=attachment.id;
                        }
                    });
                    file_frame.on('close',function() {
                        api.ActionBar.disable=true;
                        setTimeout(function(){
                            api.ActionBar.disable=null;
                        },5);
                    });
                    // Finally, open the modal
                    file_frame.open();
                });
                if (type === 'image') {
                    input.addEventListener('change', function (e) {
                        api.hasChanged = true;
                        _this.setImage(uploader,this.value.trim());
                    },{passive:true});
                }
            },
            setImage: function (prev, url) {
                while (prev.firstChild) {
                    prev.removeChild(prev.firstChild);
                }
                if (url) {
                    var img = document.createElement('img');
                    img.width =40;
                    img.height = 40;
                    img.src = url;
                    prev.appendChild(img);
                }
            },
            update: function (id, v, self) {
                var item = topWindow.document.getElementById(id);
                if (item !== null) {
                    if (v === undefined) {
                        v = '';
                    }
                    item.value = v;
                    this.setImage(item.parentNode.getElementsByClassName('thumb_preview')[0], v);
                }
            },
            render: function (type, data, self) {
                var wr = document.createElement('div'),
                    input = document.createElement('input'),
                    upload_btn = document.createElement('a'),
                    btn_delete = document.createElement('span'),
                    reg = /.*\S.*/,
                    v = self.getStyleVal(data.id),
                    id;
                input.type = 'text';
                input.className = 'tb_uploader_input';
                input.required=true;
                input.setAttribute('pattern', reg.source);
                input.setAttribute('autocomplete', 'off');
                if (self.is_repeat === true) {
                    input.className += self.is_sort===true?' tb_lb_sort_child':' tb_lb_option_child';;
                    id = Math.random().toString(36).substr(2, 7);
                    input.dataset['inputId'] = data.id;
                }
                else {
                    input.className += ' tb_lb_option';
                    id = data.id;
                }
                input.id = id;

if (v !== undefined) {
                    input.value = v;
                }
                btn_delete.className = 'tb_clear_input';
                 
                upload_btn.className = 'tb_media_uploader tb_upload_btn thumb_preview tb_plus_btn';
                upload_btn.href = '#';
                upload_btn.dataset['libraryType'] = type;
                upload_btn.title = self.label.browse_image;
                wr.className='tb_uploader_wrapper';
                
                wr.appendChild(self.initControl(input, data));
                wr.appendChild(btn_delete);
                wr.appendChild(upload_btn);
                if (type === 'image') {
                    this.setImage(upload_btn, v);
                }
                this.browse(upload_btn, input,self, type);
                if (data['after'] !== undefined) {
                    wr.appendChild(self.after(data));
                }
                if (data['description'] !== undefined) {
                    wr.appendChild(self.description(data.description));
                }
                if (data['tooltip'] !== undefined) {
                    wr.appendChild(self.tooltip(data.tooltip));
                }
                if (this.clicked===null && self.is_new === true && self.clicked === 'setting' && (self.type === 'image' || self.type === 'pro-image')) {
                    this.clicked = true;
                    var _this = this;
                    self.afterRun.push(function () {
                        upload_btn.click();
                        _this.clicked=null;
                    });
                }
                return wr;
            }
        },
        image: {
            render: function (data, self) {
                return self.file.render('image', data, self);
            }
        },
        video: {
            render: function (data, self) {
                return self.file.render('video', data, self);
            }
        },
        audio: {
            render: function (data, self) {
                return self.file.render('audio', data, self);
            }
        },
        icon_radio: {
            controlChange: function (wrap) {
                wrap.addEventListener('click', function (e) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    if (e.target !== wrap) {
                        var input = e.target.closest('label').getElementsByTagName('input')[0];
                        if (input.checked === true) {
                            input.checked = false;
                            input.value = undefined;
                        }
                        else {
                            input.checked = true;
                            input.value = input.getAttribute('data-value');
                        }
                        api.hasChanged = true;
                        Themify.triggerEvent(input, 'change');
                    }
                });
            },
            render: function (data, self) {
                return self.radioGenerate('icon_radio', data);
            }
        },
        radio: {
            controlChange: function (item) {
                var context;
                if (item.classList.contains('tb_radio_dnd')) {
                    context = item.closest('.tb_repeatable_field_content');
                }
                else {
                    context = item.closest('.tb_tab');
                    if (context === null) {
                        context = item.closest('.tb_expanded_opttions');
                        if (context === null) {
                            context = Common.Lightbox.$lightbox[0];
                        }
                    }
                }
                var elements = item.parentNode.parentNode.getElementsByTagName('input'),
                        selected = item.value;
                for (var i = elements.length - 1; i > -1; --i) {
                    var v = elements[i].value;
                    if (selected !== v) {
                        var groups = context.getElementsByClassName('tb_group_element_' + v);
                        for (var j = groups.length - 1; j > -1; --j) {
                            groups[j].style['display'] = 'none';
                        }
                    }
                }
                groups = context.getElementsByClassName('tb_group_element_' + selected);
                for (var j = groups.length - 1; j > -1; --j) {
                    groups[j].style['display'] = 'block';
                }
                elements = groups = null;
            },
            update: function (id, v, self) {
                var wrap = topWindow.document.getElementById(id);
                if (wrap !== null) {
                    var items = wrap.getElementsByTagName('input'),
                            is_icon = wrap.classList.contains('tb_icon_radio'),
                            found = null;
                    for (var i = items.length - 1; i > -1; --i) {
                        if (items[i].value === v) {
                            found = items[i];
                            break;
                        }
                    }
                    if (found === null) {
                        var def = wrap.dataset['default'];
                        if (def !== undefined) {
                            found = wrap.querySelector('[value="' + def + '"]');
                        }
                        if (is_icon === false && found === null) {
                            found = items[0];
                        }
                    }

if (found !== null) {
                        found.checked = true;
                        items = null;
                        if (is_icon === false && wrap.classList.contains('tb_option_radio_enable')) {
                            this.controlChange(found);
                        }
                    }
                    else if (is_icon === true) {
                        for (var i = items.length - 1; i > -1; --i) {
                            items[i].checked = false;
                        }
                    }
                }
            },
            render: function (data, self) {
                return self.radioGenerate('radio', data);
            }
        },
        icon_checkbox: {
            render: function (data, self) {
                return self.checkboxGenerate('icon_checkbox', data);
            }
        },
        checkbox: {
            update: function (id, v, self) {
                var wrap = topWindow.document.getElementById(id);
                if (wrap !== null) {
                    var items = wrap.getElementsByTagName('input'),
                            js_wrap = wrap.classList.contains('tb_option_checkbox_enable');
                    wrap = null;
                    v = v ? v.split('|') : [];
                    for (var i = items.length - 1; i > -1; --i) {
                        items[i].checked = v.indexOf(items[i].value) !== -1;
                        if (js_wrap === true) {
                            this.controlChange(items[i]);
                        }
                    }
                    items = null;
                }
            },
            controlChange: function (item) {
                var el = item.classList.contains('tb_radio_dnd') ? item.closest('.tb_repeatable_field_content') : Common.Lightbox.$lightbox[0],
                        parent = item.parentNode.parentNode,
                        items = parent.getElementsByTagName('input'),
                        is_revert = parent.classList.contains('tb_option_checkbox_revert');

parent = null;
 for (var i = items.length - 1; i > -1; --i) {
 var ch = el.getElementsByClassName('tb-checkbox_element_' + items[i].value),
 is_checked = items[i].checked;
 for (var j = ch.length - 1; j > -1; --j) {
 if ((is_revert === true && is_checked === false) || (is_revert === false && is_checked === true)) {
 ch[j].classList.remove('_tb_hide_binding');
 }
 else {
 ch[j].classList.add('_tb_hide_binding');
 }
 }
 }
 },
 render: function (data, self) {
 return self.checkboxGenerate('checkbox', data);
 }
 },
 radioGenerate: function (type, data) {
 var f = document.createDocumentFragment(),
 d = document.createDocumentFragment(),
 wrapper = document.createElement('div'),
 is_icon = 'icon_radio' === type,
 options = this.getOptions(data),
 _default = data['default'] !== undefined ? data.default : false,
 v = this.getStyleVal(data.id),
 js_wrap = data.option_js === true,
 self = this,
 toggle = null,
 id;
 wrapper.className = 'tb_radio_input_container';
 wrapper.setAttribute('tabIndex','-1');
 if (js_wrap === true) {
 var checked = [];
 wrapper.className += ' tb_option_radio_enable';
 }
 if (is_icon === true) {
 wrapper.className += ' tb_icon_radio';
 toggle = data.no_toggle === undefined;
 }
 if (this.is_repeat === true) {
 wrapper.className +=this.is_sort===true?' tb_lb_sort_child':' tb_lb_option_child';;
 id = Math.random().toString(36).substr(2, 7);
 wrapper.dataset['inputId'] = data.id;
 }
 else {
 wrapper.className += ' tb_lb_option';
 wrapper.id = id = data.id;
 }
 if (_default !== false) {
 wrapper.dataset['default'] = _default;
 }
 else if (is_icon === false && v === undefined) {
 _default = options[0].value;
 }
 if (data['before'] !== undefined) {
 d.appendChild(document.createTextNode(data.before));
 }
 for (var i = 0, len = options.length; i < len; ++i) {
 var label = document.createElement('label'),
 ch = document.createElement('input');
 ch.type = 'radio';
 ch.name = id;
 ch.value = options[i].value;
 if (is_icon === true) {
 ch.setAttribute( 'data-value', options[i].value );
 }
 if (this.is_repeat === true) {
 ch.className = 'tb_radio_dnd';
 }
 if (data['class'] !== undefined) {
 ch.className += this.is_repeat === true ? (' ' + data.class) : data.class;
 }
 if (options[i].disable === true) {
 ch.disabled = true;
 }
 if (v === options[i].value || (v === undefined && _default === options[i].value)) {
 ch.checked = true;
 if (js_wrap === true) {
 checked.push(ch);
 }
 }
 label.appendChild(ch);
 if (js_wrap === true) {
 ch.addEventListener('change', function () {
 this.parentNode.parentNode.blur();
 self.radio.controlChange(this);
 },{passive: true});
 }
 if (is_icon === true) {
 if (options[i].icon !== undefined) {
 var icon_wrap = document.createElement('span');
 icon_wrap.className = 'tb_icon_wrapper';
 icon_wrap.innerHTML = options[i].icon;
 label.insertAdjacentElement('beforeend', icon_wrap);
 }
 if (options[i]['label_class'] !== undefined) {
 label.className += options[i]['label_class'];
 }
 if (options[i]['name'] !== undefined) {
 var tooltip = document.createElement('span');
 tooltip.className = 'themify_tooltip';
 tooltip.textContent = options[i].name;
 label.appendChild(tooltip);
 }

}
 else if (options[i]['name'] !== undefined) {
 var label_text = document.createElement( 'span' );
 label_text.textContent = options[i].name;
 label.appendChild( label_text );
 }
 f.appendChild(label);
 if (data['new_line'] !== undefined) {
 f.appendChild(document.createElement('br'));
 }
 this.initControl(ch, data);
 }
 wrapper.appendChild(f);
 wrapper.addEventListener('click',function(e){
 if('LABEL' === e.target.parentNode.tagName){
 this.blur();
 }
 });
 d.appendChild(wrapper);
 if (data['after'] !== undefined) {
 d.appendChild(self.after(data));
 }
 if (data['description'] !== undefined) {
 d.appendChild(self.description(data.description));
 }
 if (is_icon === true && toggle === true) {
 self.icon_radio.controlChange(wrapper);
 }
 if (js_wrap === true) {
 this.radioChange.push(function () {
 for (var i = 0, len = checked.length; i < len; ++i) {
 self.radio.controlChange(checked[i]);
 }
 checked = null;
 });
 }
 return d;
 },
 checkboxGenerate: function (type, data) {
 var f = document.createDocumentFragment(),
 d = document.createDocumentFragment(),
 wrapper = document.createElement('div'),
 options = this.getOptions(data),
 is_icon = 'icon_checkbox' === type,
 _default = null,
 is_array = null,
 js_wrap = data.option_js === true,
 new_line = data['new_line'] === undefined,
 v = this.getStyleVal(data.id);
 wrapper.className = 'themify-checkbox';
 if (js_wrap === true) {
 var self = this,
 chekboxes = [];
 wrapper.className += ' tb_option_checkbox_enable';
 if (data['reverse'] !== undefined) {
 wrapper.className += ' tb_option_checkbox_revert';
 }
 }
 if (this.is_repeat === true) {
 wrapper.className += this.is_sort===true?' tb_lb_sort_child':' tb_lb_option_child';
 wrapper.dataset['inputId'] = data.id;
 }
 else {
 wrapper.className += ' tb_lb_option';
 wrapper.id = data.id;
 }
 if(data['wrap_checkbox']!==undefined){
 wrapper.className += ' '+data['wrap_checkbox'];
 }
 if (v === undefined) {
 if (data['default'] !== undefined) {
 _default = data['default'];
 is_array = Array.isArray(_default);
 }
 }
 else {
 v = v !== false ? v.split('|') : undefined;
 }
 if (is_icon === true) {
 wrapper.className += ' tb_icon_checkbox';
 }
 if (data['before'] !== undefined) {
 d.appendChild(document.createTextNode(data.before));
 }
 for (var i = 0, len = options.length; i < len; ++i) {
 var label = document.createElement('label'),
 ch = document.createElement('input');
 ch.type = 'checkbox';
 ch.className = 'tb-checkbox';
 ch.value = options[i].name;
 if (this.is_repeat === true) {
 ch.className += this.is_sort===true?' tb_lb_sort_child':' tb_lb_option_child';
 }
 if (data['class'] !== undefined) {
 ch.className += ' ' + data.class;
 }
 if ((v !== undefined && v.indexOf(options[i].name) !== -1) || (_default === options[i].name || (is_array === true && _default.indexOf(options[i].name) !== -1))) {
 ch.checked = true;
 }
 if (js_wrap === true) {
 ch.addEventListener('change', function () {
 self.checkbox.controlChange(this);
 },{passive: true});
 chekboxes.push(ch);
 }
 if (new_line === false) {
 label.className = 'pad-right';
 }
 label.appendChild(ch);
 if (is_icon === true) {
 label.insertAdjacentHTML('beforeend', options[i].icon);
 if (options[i]['value'] !== undefined) {
 var tooltip = document.createElement('span');
 tooltip.className = 'themify_tooltip';
 tooltip.textContent = options[i].value;
 label.appendChild(tooltip);
 }
 }
 else if (options[i]['value'] !== undefined) {
 label.appendChild(document.createTextNode(options[i].value));
 }
 f.appendChild(label);
 if (options[i].help !== undefined ) {
 f.appendChild( this.help(options[i].help) );
 }
 if (new_line === true) {
 f.appendChild(document.createElement('br'));
 }
 this.initControl(ch, data);
 }
 wrapper.appendChild(f);
 d.appendChild(wrapper);
 if (data['after'] !== undefined) {
 if ( ( data['label'] === undefined || data['label'] === '' )&& ( data['help'] !== undefined && data['help'] !== '' ) ){
 wrapper.classList.add('contains-help');
 wrapper.appendChild(this.after(data));
 }else {
 d.appendChild(this.after(data));
 }
 }
 if (data['description'] !== undefined) {
 d.appendChild(this.description(data.description));
 }
 if (js_wrap === true) {
 this.afterRun.push(function () {
 for (var i = 0, len = chekboxes.length; i < len; ++i) {
 self.checkbox.controlChange(chekboxes[i]);
 }
 chekboxes = null;
 });
 }
 return d;
 },
 date: {
 loaded: null,
 render: function (data, self) {
 var f = document.createDocumentFragment(),
 input = document.createElement('input'),
 clear = document.createElement('button'),
 _self = this,
 callback = function () {
 var datePicker = topWindow.$.fn.themifyDatetimepicker
 ? topWindow.$.fn.themifyDatetimepicker
 : topWindow.$.fn.datetimepicker;

if (!datePicker)
                                return;

clear.className = 'themify-datepicker-clear';
                clear.textContent = self.label.clear_date;

if (self.values[data.id] !== undefined) {
                    input.value = self.values[data.id];
                }
                if (data['class'] !== undefined) {
                    input.className += ' ' + data.class;
                }
                if (!input.value) {
                    clear.style['display'] = 'none';
                }
                f.appendChild(self.initControl(input, data));
                f.appendChild(clear);
                if (data['after'] !== undefined) {
                    f.appendChild(self.after(data));
                }
                if (data['description'] !== undefined) {
                    f.appendChild(self.description(data.description));
                }
                if (this.loaded === null) {
                    var init = function () {
                        topWindow.Themify.LoadCss(themifyBuilder.meta_url + 'css/jquery-ui-timepicker.min.css', tbLocalScript.version);
                        topWindow.Themify.LoadAsync(themifyBuilder.includes_url + 'js/jquery/ui/datepicker.min.js', function () {
                            topWindow.Themify.LoadAsync(themifyBuilder.meta_url + 'js/jquery-ui-timepicker.min.js', function () {
                                _self.loaded = true;
                                callback();
                            }, tbLocalScript.version, null, function () {
                                return topWindow.$.fn.themifyDatetimepicker !== undefined || topWindow.$.fn.datetimepicker!==undefined;
                            });
                        }, tbLocalScript.version, null, function () {
                            return topWindow.$.fn.datepicker !== undefined;
                        });
                    };
                    self.afterRun.push(init);
                }
                else {
                    self.afterRun.push(callback);
                }
                return f;
            }
        },
        gradient: {
            controlChange: function (self, gradient, input, clear, type, angle, circle, text, update) {
                var angleV = self.getStyleVal(angle.id);
                if(angleV===undefined || angleV===''){
                    angleV = 180;
                }
                var is_removed = false,
                        $gradient = $(gradient),
                        id = input.id,
                        value = self.getStyleVal(id),
                        args = {
                            angle: angleV,
                            onChange: function (stringGradient, cssGradient) {
                                if (is_removed) {
                                    stringGradient = cssGradient = '';
                                }
                                if ('visual' === api.mode) {
                                    Themify.triggerEvent(input, 'themify_builder_gradient_change', {val: cssGradient});
                                }
                                input.value = stringGradient;
                                api.hasChanged = true;
                            },
                            onInit: function () {
                                gradient.style['display'] = 'block';
                            }
                        };
                if (value) {
                    args.gradient = value;
                    input.value = value;
                }
                angle.value=angleV;
                if (!update) {
                    $gradient.ThemifyGradient(args);
                }
                var instance = $gradient.data('themifyGradient'),
                        callback = function (val) {
                            var p = angle.parentNode;
                            if (!p.classList.contains('gradient-angle-knob')) {
                                p = angle;
                            }
                            if (val === 'radial') {
                                text.style['display'] = p.style['display'] = 'none';
                                circle.parentNode.style['display'] = 'inline-block';
                            }
                            else {
                                text.style['display'] = p.style['display'] = 'inline-block';
                                circle.parentNode.style['display'] = 'none';
                            }
                        };
                if (update) {
                    instance.settings = $.extend({}, instance.settings, args);
                    instance.settings.type = self.getStyleVal(type.id);
                    instance.settings.circle = circle.checked;
                    instance.isInit = false;
                    instance.update();
                    instance.isInit = true;
                }
                else {
                    clear.addEventListener('click', function (e) {
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        is_removed = true;
                        instance.settings.gradient = $.ThemifyGradient.default;
                        instance.update();
                        is_removed = false;
                    });

type.addEventListener('change', function (e) {
                        var v = this.value;
                        instance.setType(v);
                        callback(v);
                    },{passive: true});

circle.addEventListener('change', function () {
                        instance.setRadialCircle(this.checked);
                    },{passive: true});
                    angle.addEventListener('mousedown', function _knob() {

$(this).knob({
                            min: 0,
                            max: 360,
                            step: 1,
                            width: 63,
                            height: 63,
                            thickness: .45,
                            cursor: true,
                            lineCap: 'round',
                            change: function (v) {
                                instance.setAngle(Math.round(v));
                            }
                        });
                        this.removeAttribute('style');
                        var p = this.parentNode;
                        p.classList.add('gradient-angle-knob');
                        p.removeAttribute('style');
                        p.insertAdjacentElement('afterbegin', this);

this.addEventListener('change', function () {
                            var val = parseInt(this.value);
                            if (!val) {
                                val = 0;
                            }
                            instance.setAngle(val);
                        },{passive: true});
                        angle.removeEventListener('mousedown', _knob, {once: true,passive: true});
                    }, {once: true,passive: true});
                }
                callback(self.getStyleVal(type.id));
            },
            update: function (id, v, self) {
                var nid = id + '-gradient',
                        input = topWindow.document.getElementById(nid);
                if (input !== null) {
                    var angle = topWindow.document.getElementById(nid + '-angle'),
                            type = topWindow.document.getElementById(nid + '-type'),
                            circle = topWindow.document.getElementById(id + '-circle-radial'),
                            gradient = input.previousElementSibling,
                            text = circle.previousElementSibling;
                    this.controlChange(self, gradient, input, null, type, angle, circle.getElementsByClassName('tb-checkbox')[0], text, true);
                }
            },
            render: function (data, self) {
                var wrap = document.createElement('div'),
                        d = document.createDocumentFragment(),
                        selectwrapper = document.createElement('div'),
                        type = document.createElement('select'),
                        options = ['linear', 'radial'],
                        angle = document.createElement('input'),
                        text = document.createElement('span'),
                        gradient = document.createElement('div'),
                        input = document.createElement('input'),
                        clear = document.createElement('a');
                wrap.className = 'themify-gradient-field';
                if (data.option_js !== undefined) {
                    wrap.className += ' tb_group_element_gradient';
                }
                selectwrapper.className = 'selectwrapper';
                type.className = 'tb_lb_option themify-gradient-type';
                type.id = data.id + '-gradient-type';
                angle.type = 'text';
                angle.className = 'xsmall tb_lb_option themify-gradient-angle';
                angle.id = data.id + '-gradient-angle';
                angle.autocomplete = 'off';
                angle.value = 180;
                text.textContent = self.label.rotation;
                gradient.className = 'tb_gradient_container';
                gradient.tabIndex = -1;
                input.type = 'hidden';
                input.className = 'themify-gradient tb_lb_option';
                input.dataset.id = data.id;
                input.id = data.id + '-gradient';
                clear.className = 'tb_clear_gradient ti-close';
                clear.href = '#';
                clear.title = self.label.clear_gradient;

for (var i = 0; i < 2; ++i) {
 var opt = document.createElement('option');
 opt.value = options[i];
 opt.textContent = self.label[options[i]];
 type.appendChild(opt);
 }
 selectwrapper.appendChild(type);
 d.appendChild(selectwrapper);
 d.appendChild(angle);
 d.appendChild(text);
 d.appendChild(self.checkboxGenerate('checkbox',
 {
 id: data.id + '-circle-radial',
 options: [{name: '1', value: self.label.circle_radial}]
 }
 ));

d.appendChild(gradient);
                d.appendChild(input);
                d.appendChild(clear);
                wrap.appendChild(d);
                var _this = this;
                self.initControl(input, data);
                self.afterRun.push(function () {
                    _this.controlChange(self, gradient, input, clear, type, angle, wrap.getElementsByClassName('tb-checkbox')[0], text);
                });
                return wrap;
            }
        },
        fontColor: {
            update: function (id, v, self) {
                self.radio.update(id, self.getStyleVal(id), self);
            },
            render: function (data, self) {
                data.isFontColor = true;
                var roptions = {
                    id: data.id,
                    type: 'radio',
                    option_js: true,
                    isFontColor: true,
                    options: [
                        {value: data.s + '_solid', name: self.label.solid},
                        {value: data.g + '_gradient', name: self.label.gradient}
                    ]
                };
                var radioWrap = self.radioGenerate('radio', roptions),
                        radio = radioWrap.querySelector('.tb_lb_option'),
                        colorData = $.extend(true, {}, data),
                        color,
                        gradient;
                colorData.label = '';
                colorData.type = 'color';
                colorData.id = data.s;
                colorData.prop = 'color';
                colorData.wrap_class = 'tb_group_element_' + data.s + '_solid';

color = self.create([colorData]);

colorData.id = data.g;
                colorData.wrap_class = 'tb_group_element_' + data.g + '_gradient';
                colorData.type = 'gradient';
                colorData.prop = 'background-image';

gradient = self.create([colorData]);
 colorData = roptions = null;
 self.afterRun.push(function () {
 var field = radio.parentNode.closest('.tb_field');
 field.parentNode.insertBefore(color, field.nextElementSibling);
 field.parentNode.insertBefore(gradient, field.nextElementSibling);
 field = gradient = color = radio = null;
 });
 return radioWrap;
 }
 },
 imageGradient: {
 update: function (id, v, self) {
 self.radio.update(id + '-type', self.getStyleVal(id + '-type'), self);
 self.file.update(id, v, self);
 self.gradient.update(id, v, self);
 var el = topWindow.document.getElementById(id);
 if (el !== null) {
 var p = el.closest('.tb_tab'),
 imageOpt = p.getElementsByClassName('tb_image_options');
 var eid = p.getElementsByClassName('tb_gradient_image_color')[0].getElementsByClassName('minicolors-input')[0].id;
 self.color.update(eid, self.getStyleVal(eid), self);
 for(var i=0;i<imageOpt.length;++i){
 eid=imageOpt[i].getElementsByClassName('tb_lb_option')[0].id;
 self.select.update(eid, self.getStyleVal(eid), self);
 }
 }
 },
 render: function (data, self) {
 var wrap = document.createElement('div'),
 d = document.createDocumentFragment(),
 imageWrap = document.createElement('div');
 wrap.className = 'tb_image_gradient_field';
 imageWrap.className = 'tb_group_element_image';
 d.appendChild(self.radioGenerate('radio',
 {type: data.type,
 id: data.id + '-type',
 options: [
 {name: self.label.image, value: 'image'},
 {name: self.label.gradient, value: 'gradient'}
 ],
 option_js: true
 }
 ));
 var extend = $.extend(true, {}, data);
 extend.type = 'image';
 extend.class = 'xlarge';
 //image
 imageWrap.appendChild(self.file.render('image', $.extend(true,{}, extend), self));
 d.appendChild(imageWrap);
 //gradient
 extend.type = 'gradient';
 delete extend.class;
 delete extend.binding;
 d.appendChild(self.gradient.render(extend, self));
 self.afterRun.push(function () {
 var group={
 'wrap_class':'tb_group_element_image',
 'type':'group',
 'options':[]
 };
 //color
 extend.prop='background-color';
 extend.wrap_class='tb_gradient_image_color';
 extend.label=self.label['bg_c'];
 extend.type='color';
 extend.id=extend.colorId;
 group.options.push($.extend({}, extend));

//repeat
                    extend.prop='background-mode';
                    extend.wrap_class='tb_image_options';
                    extend.label=self.label['b_r'];
                    extend.repeat=true;
                    extend.type='select';
                    extend.id=extend.repeatId;
                    group.options.push($.extend({}, extend));

//position
                    extend.prop='background-position';
                    extend.wrap_class='tb_image_options';
                    extend.label=self.label['b_p'];
                    extend.position=true;
                    extend.type='select';
                    extend.id=extend.posId;
                    delete extend.repeat;
                    group.options.push($.extend({}, extend));
                    
                    var field = imageWrap.parentNode.closest('.tb_field');
                    field.parentNode.insertBefore(self.create([group]), field.nextElementSibling);
                    extend=group = null;
                });
                wrap.appendChild(d);
                return wrap;
            }
        },
        layout: {
            controlChange: function (el) {
                el.addEventListener('click', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    if (e.target !== el) {
                        var selected = e.target.closest('a');
                        if (selected !== null) {
                            var items = this.getElementsByClassName('tfl-icon');
                            for (var i = items.length - 1; i > -1; --i) {
                                items[i].classList.remove('selected');
                            }
                            selected.classList.add('selected');
                            api.hasChanged = true;
                            Themify.triggerEvent(this, 'change', {val: selected.id});
                        }
                    }
                });
            },
            update: function (id, v, self) {
                var input = topWindow.document.getElementById(id);
                if (input !== null) {
                    var items = input.getElementsByClassName('tfl-icon');
                    for (var i = items.length - 1; i > -1; --i) {
                        if (v === items[i].id) {
                            items[i].classList.add('selected');
                        }
                        else {
                            items[i].classList.remove('selected');
                        }
                    }
                    if (v === undefined) {
                        var def = input.dataset['default'];
                        if (def === undefined) {
                            def = items[0];
                        }
                        else {
                            def = def.querySelector('#' + def);
                        }
                        def.classList.add('selected');
                    }
                }
            },
            render: function (data, self) {
                var f = document.createDocumentFragment(),
                        p = document.createElement('div'),
                        v = self.getStyleVal(data.id),
                        options = self.getOptions(data);

if (data.color === true && data.transparent === true) {
                    options = options.slice();
                    options.push({img: 'transparent', value: 'transparent', label: self.label.transparent});
                }
                p.className = 'themify-layout-icon';
                if (self.is_repeat === true) {
                    p.className += self.is_sort===true?' tb_lb_sort_child':' tb_lb_option_child';
                    p.dataset['inputId'] = data.id;
                }
                else {
                    p.className += ' tb_lb_option';
                    p.id = data.id;
                }
                if (data['class'] !== undefined) {
                    p.className += ' ' + data.class;
                }

if (v === undefined) {
 var def = themifyBuilder.modules[ self.type ];
 if (def !== undefined && def.defaults !== undefined && def.defaults[data.id]) {
 v = def.defaults[data.id];
 def = null;
 }
 else {
 v = options[0].value;
 }
 }
 for (var i = 0, len = options.length; i < len; ++i) {
 var a = document.createElement('a'),
 tooltip = document.createElement('span'),
 sprite;
 a.href = '#';
 a.className = 'tfl-icon';
 a.id = options[i].value;
 if (v === options[i].value) {
 a.className += ' selected';
 }
 tooltip.className = 'themify_tooltip';
 tooltip.textContent = options[i].label;

if (data.mode === 'sprite' && options[i].img.indexOf('.png') === -1) {
                        sprite = document.createElement('span');
                        sprite.className = 'tb_sprite';
                        if (options[i].img.indexOf('http') !== -1) {
                            sprite.style['backgroundImage'] = 'url(' + options[i].img + ')';
                        }
                        else {
                            sprite.className += ' tb_' + options[i].img;
                        }

}
                    else {
                        sprite = document.createElement('img');
                        sprite.alt = options[i].label;
                        sprite.src = options[i].img.indexOf('http') !== -1 ? options[i].img : themifyBuilder.builder_url + '/img/builder/' + options[i].img;
                    }

a.appendChild(sprite);
                    a.appendChild(tooltip);
                    f.appendChild(a);
                }

options = null;
 p.appendChild(f);
 this.controlChange(p);
 if(self.component==='row' && (data.id==='row_width' || data.id==='row_height')){
 api.Utils.changeOptions(p,data.type);
 }
 else{
 self.initControl(p, data);
 }
 return p;
 }
 },
 layoutPart: {
 data: [],
 get: function (callback) {
 var self = this;
 $.ajax({
 type: 'POST',
 url: themifyBuilder.ajaxurl,
 dataType: 'json',
 data: {
 action: 'tb_get_library_items',
 nonce: themifyBuilder.tb_load_nonce,
 pid: themifyBuilder.post_ID
 },
 beforeSend: function (xhr) {
 Common.showLoader('show');
 },
 success: function (data) {
 Common.showLoader('hide');
 self.data = data;
 callback();
 },
 error: function () {
 Common.showLoader('error');
 }
 });
 },
 render: function (data, self) {
 var _this = this,
 d = document.createDocumentFragment(),
 selectWrap = self.select.render(data, self),
 edit = document.createElement('a'),
 add = document.createElement('a'),
 add_icon = document.createElement('span'),
 edit_icon = document.createElement('span'),
 select = selectWrap.querySelector('select');
 function callback() {
 var f = document.createDocumentFragment(),
 s = self.values[data.id],
 currentLayoutId =api.Forms.LayoutPart.id!==null ?api.Forms.LayoutPart.id.toString():null;
 f.appendChild(document.createElement('option'));
 for (var i = 0, len = _this.data.length; i < len; ++i) {
 if(currentLayoutId!==_this.data[i].id.toString()){
 var opt = document.createElement('option');
 opt.value = _this.data[i].post_name;
 opt.textContent = _this.data[i].post_title;
 if (s === _this.data[i].post_name) {
 opt.selected = true;
 }
 f.appendChild(opt);
 }
 }
 select.appendChild(f);
 select = null;
 }
 if (_this.data.length === 0) {
 _this.get(callback);
 }
 else {
 callback();
 }
 d.appendChild(selectWrap);
 selectWrap = null;
 edit.target = add.target = '_blank';
 edit.className = add.className = 'add_new';
 edit.href = data.edit_url;
 add.href = data.add_url;
 add_icon.className = 'tb_icon add';
 edit_icon.className = 'tb_icon ti-folder';
 edit.appendChild(edit_icon);
 edit.appendChild(document.createTextNode(self.label['mlayout']));
 add.appendChild(add_icon);
 add.appendChild(document.createTextNode(self.label['nlayout']));
 d.appendChild(document.createElement('br'));
 d.appendChild(add);
 d.appendChild(edit);
 return d;
 }
 },
 separator: {
 render: function (data, self) {
 var seperator,
 txt = self.label[data.label] !== undefined ? self.label[data.label] : data.label;
 if (txt !== undefined) {
 seperator = data.wrap_class !== undefined?document.createElement('div'):document.createDocumentFragment();
 var h4 = document.createElement('h4');
 h4.textContent = txt;
 seperator.appendChild(document.createElement('hr'));
 seperator.appendChild(h4);
 if(data.wrap_class!==undefined){
 seperator.className = data.wrap_class;
 }
 }
 else if (data.html !== undefined) {
 var tmp = document.createElement('div');
 tmp.innerHTML = data.html;
 seperator = tmp.firstChild;
 if (data.wrap_class !== undefined) {
 seperator.className = data.wrap_class;
 }
 }
 else {
 seperator = document.createElement('hr');
 if (data.wrap_class !== undefined) {
 seperator.className = data.wrap_class;
 }
 }
 return seperator;
 }
 },
 multiColumns: {
 render: function (data, self) {
 var opt = [],
 columnOptions = [
 {
 id: data.id + '_gap',
 label: self.label['c_g'],
 type: 'range',
 prop: 'column-gap',
 selector: data.selector,
 wrap_class: 'tb_multi_columns_wrap',
 units: {
 px: {
 min: 0,
 max: 500
 }
 }
 },
 {type: 'multi',
 wrap_class: 'tb_multi_columns_wrap',
 label: self.label['c_d'],
 options: [
 {
 type: 'color',
 id: data.id + '_divider_color',
 prop: 'column-rule-color',
 selector: data.selector
 },
 {
 type: 'range',
 id: data.id + '_divider_width',
 class: 'tb_multi_columns_width',
 prop: 'column-rule-width',
 selector: data.selector,
 units: {
 px: {
 min: 0,
 max: 500
 }
 }
 },
 {
 type: 'select',
 id: data.id + '_divider_style',
 options: self.static.border,
 prop: 'column-rule-style',
 selector: data.selector
 }
 ]
 }

];
 for (var i = 0; i < 7; ++i) {
 opt[i] = i === 0 ? '' : i;
 }
 data.options = opt;
 opt = null;
 var ndata = $.extend(true, {}, data);
 ndata.type = 'select';
 var wrap = self.select.render(ndata, self),
 select = wrap.querySelector('select');
 self.afterRun.push(function () {
 var field = select.closest('.tb_field');
 field.parentNode.insertBefore(self.create(columnOptions), field.nextElementSibling);

});
 return wrap;
 }
 },
 expand: {
 render: function (data, self) {
 var wrap = document.createElement('fieldset'),
 expand = document.createElement('div'),
 toggle = document.createElement('div'),
 i = document.createElement('i'),
 txt = self.label[data.label] !== undefined ? self.label[data.label] : data.label;
 wrap.className = 'tb_expand_wrap';
 toggle.className = 'tb_style_toggle tb_closed';
 expand.className = 'tb_expanded_opttions';
 i.className = 'ti-angle-up';
 toggle.appendChild(document.createTextNode(txt));
 toggle.appendChild(i);
 wrap.appendChild(toggle);
 wrap.appendChild(expand);
 toggle.addEventListener('click', function (e) {
 e.preventDefault();
 e.stopImmediatePropagation();
 if (this.dataset['done'] === undefined) {
 this.dataset['done'] = true;
 expand.appendChild(self.create(data.options));
 if (self.clicked === 'setting') {
 self.setUpEditors();
 }
 self.callbacks();
						Themify.triggerEvent( document, 'tb_options_expand', [ expand, self ] );
 }
 if (this.classList.contains('tb_closed')) {
 this.classList.remove('tb_closed');
 }
 else {
 this.classList.add('tb_closed');
 }
 });
 return wrap;
 }
 },
 gallery: {
 file_frame: null,
 cache: {},
 init: function (btn, input) {
 var clone = wp.media.gallery.shortcode,
 _this = this,
 val = input.value.trim(),
 preview = function (images, is_ajax) {
 var prewiew_wrap = document.createElement('div'),
 f = document.createDocumentFragment(),
 parent = input.parentNode,
 pw = parent.getElementsByClassName('tb_shortcode_preview')[0];
 prewiew_wrap.className = 'tb_shortcode_preview';
 if (pw !== undefined) {
 pw.parentNode.removeChild(pw);
 }
 for (var i = 0, len = images.length; i < len; ++i) {
 var img = document.createElement('img');
 img.width = img.height = 50;
 if (is_ajax === true) {
 img.src = images[i];
 }
 else {
 var attachment = images[i].attributes;
 img.src = attachment.sizes.thumbnail ? attachment.sizes.thumbnail.url : attachment.url;
 }
 f.appendChild(img);
 }
 prewiew_wrap.appendChild(f);
 input.parentNode.insertBefore(prewiew_wrap, input.nextElementSibling);
 };
 if (val.length > 0) {
 if (this.cache[val] !== undefined) {
 preview(this.cache[val], true);
 }
 else {
 $.ajax({
 type: 'POST',
 url: themifyBuilder.ajaxurl,
 dataType: 'json',
 data: {
 action: 'tb_load_shortcode_preview',
 tb_load_nonce: themifyBuilder.tb_load_nonce,
 shortcode: val
 },
 success: function (data) {
 preview(data, true);
 _this.cache[val] = data;
 }
 });
 }
 }
 btn.addEventListener('click', function (e) {
 e.preventDefault();
 e.stopPropagation();
 if (_this.file_frame === null) {
 // Create the media frame.
 _this.file_frame = wp.media.frames.file_frame = wp.media({
 frame: 'post',
 state: 'gallery-library',
 library: {
 type: 'image'
 },
 title: wp.media.view.l10n.editGalleryTitle,
 editing: true,
 multiple: true,
 selection: false
 });
 _this.file_frame.el.classList.add('themify_gallery_settings');
 }
 else {
 _this.file_frame.options.selection.reset();
 }
 wp.media.gallery.shortcode = function (attachments) {
 var props = attachments.props.toJSON(),
 attrs = _.pick(props, 'orderby', 'order');

if (attachments.gallery) {
                            _.extend(attrs, attachments.gallery.toJSON());
                        }
                        attrs.ids = attachments.pluck('id');
                        // Copy the `uploadedTo` post ID.
                        if (props.uploadedTo) {
                            attrs.id = props.uploadedTo;
                        }
                        // Check if the gallery is randomly ordered.
                        if (attrs._orderbyRandom) {
                            attrs.orderby = 'rand';
                            delete attrs._orderbyRandom;
                        }
                        // If the `ids` attribute is set and `orderby` attribute
                        // is the default value, clear it for cleaner output.
                        if (attrs.ids && 'post__in' === attrs.orderby) {
                            delete attrs.orderby;
                        }
                        // Remove default attributes from the shortcode.
                        for (var key in wp.media.gallery.defaults) {
                            if (wp.media.gallery.defaults[key] === attrs[key]) {
                                delete attrs[key];
                            }
                        }
                        delete attrs['_orderByField'];
                        var shortcode = new topWindow.wp.shortcode({
                            tag: 'gallery',
                            attrs: attrs,
                            type: 'single'
                        });
                        wp.media.gallery.shortcode = clone;
                        return shortcode;
                    };

var v = input.value.trim();
                    if (v.length > 0) {
                        _this.file_frame = wp.media.gallery.edit(v);
                        _this.file_frame.state('gallery-edit');
                    } else {
                        _this.file_frame.state('gallery-library');
                        _this.file_frame.open();
                        _this.file_frame.$el.find('.media-menu .media-menu-item').last().trigger('click');
                    }

var setShortcode = function (selection) {
                        var v = wp.media.gallery.shortcode(selection).string().slice(1, -1);
                        input.value = '[' + v + ']';
                        preview(selection.models);
                        Themify.triggerEvent(input, 'change');
                        api.hasChanged = true;
                    };
                    _this.file_frame.off('update', setShortcode).on('update', setShortcode);
                });

},
            render: function (data, self) {
                var d = document.createDocumentFragment(),
                        a = document.createElement('a'),
                        _this = this,
                        cl = data.class !== undefined ? data.class : '';
                cl += ' tb_shortcode_input';

a.href = '#';
                a.className = 'builder_button tb_gallery_btn';
                a.textContent = self.label.add_gallery;
                data.class = cl;
                d.appendChild(self.textarea.render(data, self));
                d.appendChild(a);

self.afterRun.push(function () {

_this.init(a, a.previousElementSibling);
                    if (self.is_new === true && self.type === 'gallery' && self.clicked === 'setting') {
                        a.click();
                    }
                });
                return d;
            }
        },
        textarea: {
            render: function (data, self) {
                var f = document.createDocumentFragment(),
                        area = document.createElement('textarea'),
                        v = self.getStyleVal(data.id);
                if (self.is_repeat === true) {
                    area.className = self.is_sort===true?'tb_lb_sort_child':'tb_lb_option_child';
                    area.dataset['inputId'] = data.id;
                }
                else {
                    area.className = 'tb_lb_option';
                    area.id = data.id;
                }
                area.className += ' '+(data['class'] !== undefined?data.class:'xlarge');
                if (v !== undefined) {
                    area.value = v;
                }
                if (data.rows !== undefined) {
                    area.rows = data.rows;
                }
                f.appendChild(self.initControl(area, data));
                if (data['after'] !== undefined) {
					f.appendChild(self.after(data ));
                }
                if (data['description'] !== undefined) {
                    f.appendChild(self.description(data.description));
                }
                return f;
            }
        },
        wp_editor: {
            render: function (data, self) {
                var wrapper = document.createElement('div'),
                        tools = document.createElement('div'),
                        media_buttons = document.createElement('div'),
                        add_media = document.createElement('button'),
                        icon = document.createElement('span'),
                        tabs = document.createElement('div'),
                        switch_tmce = document.createElement('button'),
                        switch_html = document.createElement('button'),
                        container = document.createElement('div'),
                        quicktags = document.createElement('div'),
                        textarea = document.createElement('textarea'),
                        id;

wrapper.className = 'wp-core-ui wp-editor-wrap tmce-active';
                textarea.className = 'tb_lb_wp_editor fullwidth';
                if (self.is_repeat === true) {
                    id = Math.random().toString(36).substr(2, 7);
                    textarea.className += self.is_sort===true?' tb_lb_sort_child':' tb_lb_option_child';
                    textarea.dataset['inputId'] = data.id;
                    if (data.control !== false) {
                        if (data.control === undefined) {
                            data.control = {};
                        }
                        data.control.repeat = true;
                    }
                }
                else {
                    textarea.className += ' tb_lb_option';
                    id = data.id;
                }
                textarea.id = id;
                wrapper.id = 'wp-' + id + '-wrap';
                tools.id = 'wp-' + id + '-editor-tools';
                tools.className = 'wp-editor-tools';

media_buttons.id = 'wp-' + id + '-media-buttons';
                media_buttons.className = 'wp-media-buttons';

add_media.type = 'button';
                add_media.className = 'button insert-media add_media';
                // add_media.dataset['editor'] = id;
                icon.className = 'wp-media-buttons-icon';

tabs.className = 'wp-editor-tabs';

switch_tmce.type = 'button';
                switch_tmce.className = 'wp-switch-editor switch-tmce';
                switch_tmce.id = id + '-tmce';
                switch_tmce.dataset['wpEditorId'] = id;
                switch_tmce.textContent = self.label.visual;

switch_html.type = 'button';
                switch_html.className = 'wp-switch-editor switch-html';
                switch_html.id = id + '-html';
                switch_html.dataset['wpEditorId'] = id;
                switch_html.textContent = self.label.text;

container.id = 'wp-' + id + '-editor-container';
                container.className = 'wp-editor-container';

quicktags.id = 'qt_' + id + '_toolbar';
                quicktags.className = 'quicktags-toolbar';

if (data['class'] !== undefined) {
                    textarea.className += ' ' + data.class;
                }
                if (self.values[data.id] !== undefined) {
                    textarea.value = self.values[data.id];
                }
                textarea.rows = 12;
                textarea.cols = 40;
                container.appendChild(textarea);
                container.appendChild(quicktags);

tabs.appendChild(switch_tmce);
                tabs.appendChild(switch_html);

add_media.appendChild(icon);
 add_media.appendChild(document.createTextNode(self.label.add_media));
 media_buttons.appendChild(add_media);
 tools.appendChild(media_buttons);
 tools.appendChild(tabs);
 wrapper.appendChild(tools);
 wrapper.appendChild(container);
 self.editors.push({'el': textarea, 'data': data});
 return wrapper;
 }
 },
 select: {
 update: function (id, v, self) {
 var item = topWindow.document.getElementById(id);
 if (item !== null) {
 if (v !== undefined) {
 item.value = v;
 }
 else if (item[0] !== undefined) {
 item[0].selected = true;
 }
 }
 },
 /* generate the <option> tags and returns a DocumentFragment */
 make_options : function( data, self ) {
 var d = document.createDocumentFragment(),
 options = self.getOptions(data),
 v = self.getStyleVal(data.id);

for (var k in options) {
                    var opt = document.createElement('option');
                    opt.value = k;
                    opt.text = options[k];
                    if (v === k || (v === undefined && k === data.default)) {
                        opt.selected = true;
                    }
                    d.appendChild(opt);
                }
				return d;
			},
            render: function (data, self) {
                var select_wrap = document.createElement('div'),
                        select = document.createElement('select');
                select_wrap.className = 'selectwrapper';
                if (self.is_repeat === true) {
                    select.className =self.is_sort===true?'tb_lb_sort_child':'tb_lb_option_child';
                    select.dataset['inputId'] = data.id;
                }
                else {
                    select.className = 'tb_lb_option';
                    select.id = data.id;
                }
                if (data['class'] !== undefined) {
                    select.className += ' ' + data.class;
                }
				if ( data['optgroup'] !== undefined && data['optgroup'] ) {
					var optgroups = self.getOptions( data );
					for ( var k in optgroups ) {
						var o = document.createElement('optgroup');
						o.setAttribute( 'label', optgroups[k]['label'] );
						o.appendChild( this.make_options( optgroups[k], self ) );
						select.appendChild( o );
                    }
				} else {
					select.appendChild( this.make_options( data, self ) );
                    }
                select_wrap.appendChild(self.initControl(select, data));
                var d = document.createDocumentFragment();
                d.appendChild(select_wrap);
                if (data['after'] !== undefined) {
					d.appendChild(self.after(data ));
                }
                if (data['description'] !== undefined) {
                    d.appendChild(self.description(data.description));
                }
				if (data['tooltip'] !== undefined) {
					d.appendChild(self.tooltip(data.tooltip));
				}
                return d;
            }
        },
        font_select: {
            loaded_fonts: [],
            fonts: [],
            safe: [],
            google: [],
            updateFontVariant: function (value, weight, self) {
                if (!weight) {
                    return;
                }
                if (this.google[value] === undefined || this.google[value].v === undefined) {
                    weight.closest('.tb_field').classList.add('_tb_hide_binding');
                    return;
                }

var variants = this.google[value].v,
 selected = self.getStyleVal(weight.id),
 fr = document.createDocumentFragment();
 if (selected === undefined) {
 selected = 'regular';
 }
 weight.dataset['selected'] = value;
 for (var i = 0, len = variants.length; i < len; ++i) {
 var opt = document.createElement('option');
 opt.value = opt.textContent = variants[i];
 if (variants[i] === selected) {
 opt.selected = true;
 }
 fr.appendChild(opt);

}
                while (weight.firstChild) {
                    weight.removeChild(weight.firstChild);
                }
                weight.appendChild(fr);
                weight.closest('.tb_field').classList.remove('_tb_hide_binding');
            },
            loadGoogleFonts: function (fontFamilies, iframe) {
                fontFamilies = $.unique(fontFamilies.split('|'));
                var result = [],
                        loaded = [],
                        self = this;
                for (var i = fontFamilies.length - 1; i > -1; --i) {
                    if (fontFamilies[i] && this.loaded_fonts.indexOf(fontFamilies[i]) === -1 && result.indexOf(fontFamilies[i]) === -1) {
                        var req = fontFamilies[i].split(':'),
                                weight = ('regular' === req[1] || 'italic' === req[1] || parseInt(req[1])) ? req[1] : '400,700',
                                f = req[0].split(' ').join('+') + ':' + weight;
                        if (this.loaded_fonts.indexOf(f) === -1) {
                            result.push(f + ':latin,latin-ext');
                            loaded.push(f);
                        }
                    }
                }
                if (result.length > 0) {

fontFamilies = null;
                    var loading = function () {
                        for (var i = loaded.length - 1; i > -1; --i) {
                            if (self.loaded_fonts.indexOf(loaded[i]) === -1) {
                                self.loaded_fonts.push(loaded[i]);
                            }
                        }
                    },
                            fontConfig = {
                                google: {families: result},
                                fontloading: function (familyName, fvd) {
                                    loading();
                                },
                                fontinactive: function (familyName, fvd) {
                                    loading();
                                }
                            };
                    WebFont.load(fontConfig);
                    if (iframe) {
                        fontConfig['context'] = iframe;
                        WebFont.load(fontConfig);
                    }
                }
            },
            controlChange: function (select, preview, pw, self) {
                var _this = this,
                        $combo = $(select).comboSelect({
                    'comboClass': 'themify-combo-select',
                    'comboArrowClass': 'themify-combo-arrow',
                    'comboDropDownClass': 'themify-combo-dropdown',
                    'inputClass': 'themify-combo-input',
                    'disabledClass': 'themify-combo-disabled',
                    'hoverClass': 'themify-combo-hover',
                    'selectedClass': 'themify-combo-selected',
                    'markerClass': 'themify-combo-marker'
                }).parent('div');

}
                        }
                        _this.updateFontVariant(value, select.closest('.tb_tab').getElementsByClassName('font-weight-select')[0], self);
                        setTimeout(function () {
                            Themify.triggerEvent(select, 'change');
                        }, 10);

},{passive: true});
                    items[i].addEventListener('mouseenter', function () {
                        var value = this.dataset['value'];
                        if (value) {
                            var $this = $(this);
                            if (!$this.is(':visible')) {
                                return;
                            }
                            if (value === 'default') {
                                value = 'inherit';
                            }
                            preview.style['top'] = $this.position().top + 30 + 'px';
                            preview.style['fontFamily'] = value;
                            preview.style['display'] = 'block';
                            if (value === 'inherit') {
                                return;
                            }
                            if (!this.classList.contains('tb_font_loaded')) {
                                this.classList.add('tb_font_loaded');
                                if (_this.fonts.indexOf(value) === -1) {
                                    pw.classList.add('themify_show_wait');
                                    var type = select.querySelector('option[value="' + value + '"]');
                                    if (type === null || type.dataset['type'] !== 'webfont') {
                                        WebFont.load({
                                            classes: false,
                                            context: topWindow,
                                            google: {
                                                families: [value]
                                            },
                                            fontloading: function (familyName, fvd) {
                                                callback(value);
                                            },
                                            fontinactive: function (familyName, fvd) {
                                                callback(value);
                                            }
                                        });
                                    }
                                    else {
                                        callback(value);
                                    }
                                }
                                this.classList.add('tb_font_loaded');
                                this.style['fontFamily'] = value;
                            }
                        }
                    },{passive: true});
                }
                items = null;
                $combo.trigger('comboselect:open')
                        .on('comboselect:close', function () {
                            preview.style['display'] = 'none';
                        });
                $combo[0].getElementsByClassName('themify-combo-arrow')[0].addEventListener('click', function () {
                    preview.style['display'] = 'none';
                },{passive: true});
            },
            update: function (id, v, self) {
                var select = topWindow.document.getElementById(id);
                if (select !== null) {
                    if (v === undefined) {
                        v = '';
                    }
                    select.value = v;
                    this.updateFontVariant(v, select.closest('.tb_tab').getElementsByClassName('font-weight-select')[0], self);
                    if (select.dataset['init'] === undefined) {
                        var groups = select.getElementsByTagName('optgroup');
                        while (groups[0].firstChild) {
                            groups[0].removeChild(groups[0].firstChild);
                        }
                        while (groups[1].firstChild) {
                            groups[1].removeChild(groups[1].firstChild);
                        }
                        var opt = document.createElement('option');
                        opt.value = v;
                        opt.selected = true;
                        if (this.safe[v] !== undefined) {
                            opt.textContent = this.safe[v];
                            groups[0].appendChild(opt);
                        }
                        else if (this.google[v] !== undefined) {
                            opt.textContent = this.google[v].n;
                            groups[1].appendChild(opt);
                        }
                        else {
                            opt.textContent = v;
                            groups[0].appendChild(opt);
                        }
                    }
                    else {
                        select.parentNode.getElementsByClassName('themify-combo-input')[0].value = v;
                    }
                }
            },
            render: function (data, self) {
                var wrapper = document.createElement('div'),
                        select = document.createElement('select'),
                        preview = document.createElement('span'),
                        pw = document.createElement('span'),
                        d = document.createDocumentFragment(),
                        empty = document.createElement('option'),
                        v = self.getStyleVal(data.id),
                        _this = this,
                        group = [self.label.safe_fonts, self.label.google_fonts];
                wrapper.className = 'tb_font_preview_wrapper';
                select.className = 'tb_lb_option font-family-select';
                select.id = data.id;
                preview.className = 'tb_font_preview';
                pw.textContent = self.label.font_preview;
                empty.value = '';
                empty.textContent = '---';
                d.appendChild(empty);

if (data['class'] !== undefined) {
                    select.className += ' ' + data.class;
                }

for (var i = 0; i < 2; ++i) {
 var optgroup = document.createElement('optgroup');
 optgroup.label = group[i];
 if (v !== undefined) {
 var opt = document.createElement('option');
 opt.value = v;
 opt.selected = true;
 if (i === 0 && this.safe[v] !== undefined) {
 opt.textContent = this.safe[v];
 }
 else if (i === 1 && this.google[v] !== undefined) {
 opt.textContent = this.google[v].n;
 }
 else {
 opt.textContent = v;
 }
 optgroup.appendChild(opt);
 }
 d.appendChild(optgroup);
 }
 wrapper.addEventListener('focusin', function _focusin() {
 var fonts = _this.safe,
 f = document.createDocumentFragment(),
 groups = select.getElementsByTagName('optgroup');
 select.dataset['init'] = true;
 if (v !== undefined) {
 while (groups[0].firstChild) {
 groups[0].removeChild(groups[0].firstChild);
 }
 while (groups[1].firstChild) {
 groups[1].removeChild(groups[1].firstChild);
 }
 }
 for (var i in fonts) {
 var opt = document.createElement('option');
 opt.value = i;
 opt.textContent = fonts[i];
 opt.dataset['type'] = 'webfont';
 if (v === i) {
 opt.selected = true;
 }
 f.appendChild(opt);
 }
 groups[0].appendChild(f);
 fonts = _this.google;
 f = document.createDocumentFragment();
 for (var i in fonts) {
 var opt = document.createElement('option');
 opt.value = i;
 opt.textContent = fonts[i].n;
 if (v === i) {
 opt.selected = true;
 }
 f.appendChild(opt);
 }
 groups[1].appendChild(f);
 fonts = null;
 _this.controlChange(select, preview, pw, self);
 wrapper.removeEventListener('focusin', _focusin, {once: true,passive: true});
 }, {once: true,passive: true});

select.appendChild(d);
                preview.appendChild(pw);
                wrapper.appendChild(self.initControl(select, data));
                wrapper.appendChild(preview);
                self.afterRun.push(function () {
                    var weight = self.create([{type: 'select', label: 'f_w', selector: data.selector, class: 'font-weight-select', id: data.id + '_w', prop: 'font-weight'}]),
                            field = wrapper.closest('.tb_field'),
                            weightParent = weight.querySelector('.tb_field');
                    field.parentNode.insertBefore(weight, field.nextElementSibling);
                    _this.updateFontVariant(v, weightParent.querySelector('.font-weight-select'), self);
                });

return wrapper;
            }
        },
        animation_select: {
            render: function (data, self) {
                var d = document.createDocumentFragment(),
                        select_wrap = document.createElement('div'),
                        options = self.static['preset_animation'],
                        select = document.createElement('select'),
                        v = self.values[data.id];
                select_wrap.className = 'selectwrapper';
                select.className = 'tb_lb_option';
                select.id = data.id;
                d.appendChild(document.createElement('option'));
                for (var k in options) {
                    var group = document.createElement('optgroup'),
                            f = document.createDocumentFragment();
                    group.label = k;
                    for (var i in options[k]) {
                        var opt = document.createElement('option');
                        opt.value = i;
                        opt.text = options[k][i];
                        if (v === i) {
                            opt.selected = true;
                        }
                        f.appendChild(opt);
                    }
                    group.appendChild(f);
                    d.appendChild(group);
                }
                select.appendChild(d);
                select_wrap.appendChild(select);
                return select_wrap;
            }
        },
        select_menu: {
            data: null,
            get: function (select, v) {
                var self = this,
                        callback = function () {
                            var d = document.createDocumentFragment();
                            for (var k in self.data) {
                                var opt = document.createElement('option');
                                opt.value = self.data[k].slug;
                                opt.text = self.data[k].name;
                                opt.dataset['termid'] = self.data[k].term_id;
                                if (v === self.data[k].slug) {
                                    opt.selected = true;
                                }
                                d.appendChild(opt);
                            }
                            select.appendChild(d);
                        };
                if (self.data === null) {
                    $.ajax({
                        type: 'POST',
                        url: themifyBuilder.ajaxurl,
                        dataType: 'json',
                        data: {
                            action: 'tb_get_menu',
                            tb_load_nonce: themifyBuilder.tb_load_nonce
                        },
                        success: function (res) {
                            self.data = res;
                            callback();
                        }
                    });
                }
                else {
                    callback();
                }
            },
            render: function (data, self) {
                var d = document.createDocumentFragment(),
                        select_wrap = document.createElement('div'),
                        select = document.createElement('select'),
                        help = document.createElement('small'),
                        v = self.values[data.id];
                select_wrap.className = 'selectwrapper';
                select.className = 'select_menu_field';
                if (self.is_repeat === true) {
                    select.className +=self.is_sort===true?' tb_lb_sort_child':' tb_lb_option_child';
                    select.dataset['inputId'] = data.id;
                }
                else {
                    select.className += ' tb_lb_option';
                    select.id = data.id;
                }
                if (data['class'] !== undefined) {
                    select.className += ' ' + data.class;
                }
                help.innerHTML = self.label.menu_help;
                var def = document.createElement('option');
                def.value = '';
                def.text = self.label.select_menu;
                d.appendChild(def);
                def = null;
                this.get(select, v);

select_wrap.appendChild(self.initControl(select, data));
 d = document.createDocumentFragment();
 d.appendChild(select_wrap);
 d.appendChild(document.createElement('br'));
 d.appendChild(help);
 return d;
 }
 },
 sticky: {
 render: function (data, self) {
 var unstickOption = {},
 selectedUID = api.activeModel.get('element_id'),
 _data = $.extend(true, {}, data),
 uidList = api.Utils.getUIDList(data.key);
 for (var i = 0, len = uidList.length; i < len; ++i) {
 if (uidList[i].element_id !== selectedUID) {
 var uidText = 'row' === uidList[i].elType ? 'Row #' + uidList[i].element_id : uidList[i].mod_name + ' #' + uidList[i].element_id;
 if ('row' === uidList[i].elType && uidList[i].styling && uidList[i].styling.custom_css_id) {
 uidText = '#' + uidList[i].styling.custom_css_id;
 }
 else if ('module' === uidList[i].elType && uidList[i].mod_settings && uidList[i].mod_settings.custom_css_id) {
 uidText = '#' + uidList[i].mod_settings.custom_css_id;
 }
 unstickOption[uidList[i].element_id] = uidText;
 }
 }
 uidList = null;
 _data.options = unstickOption;
 return self.select.render(_data, self);
 }
 },
 selectSearch: {
 update: function (val, search, options, self) {
 var f = document.createDocumentFragment(),
 first = null;
 search.removeAttribute('data-value');
 search.value = '';
 if (options !== undefined) {
 for (var k in options) {
 var item = document.createElement('div');
 if (first === null) {
 first = k;
 }
 item.dataset['value'] = k;
 item.className = 'tb_search_item';
 item.textContent = options[k];
 if (val === k) {
 item.className += ' selected';
 search.setAttribute('data-value', k);
 search.value = options[k];
 }
 f.appendChild(item);
 }

if (search.value === '' && first !== null) {
 search.value = options[first];
 search.setAttribute('data-value', first);
 }
 }
 return f;
 },
 events: function (search, container) {
 search.addEventListener('keyup', function (e) {
 var items = container.getElementsByClassName('tb_search_item'),
 val = this.value.trim(),
 r = new RegExp(val, 'i');
 for (var i = 0, len = items.length; i < len; ++i) {
 if (val === '' || r.test(items[i].textContent)) {
 items[i].style['display'] = 'block';
 }
 else {
 items[i].style['display'] = 'none';
 }
 }
 },{passive: true});
 container.addEventListener('mousedown', function (e) {
 if (e.which === 1 && e.target.classList.contains('tb_search_item')) {
 e.preventDefault();
 e.stopPropagation();
 var all_items = this.getElementsByClassName('tb_search_item'),
 _this = e.target;
 for (var i = all_items.length - 1; i > -1; --i) {
 all_items[i].classList.remove('selected');
 }
 _this.classList.add('selected');
 var v = _this.dataset['value'];
 search.value = _this.textContent;
 search.dataset['value'] = v;
 search.blur();
 search.previousElementSibling.blur();
 Themify.triggerEvent(search, 'selectElement', {val: v});
 }
 });
 },
 render: function (data, self) {
 var container = document.createElement('div'),
 arrow = document.createElement('div'),
 search = document.createElement('input'),
 loader = document.createElement('span'),
 search_container = document.createElement('div');
 container.className = 'tb_search_wrapper';
 search.className = 'tb_search_input';
 search.autocomplete = 'off';
 search_container.className = 'tb_search_container';
 if (self.is_repeat === true) {
 search.className +=self.is_sort===true?' tb_lb_sort_child':' tb_lb_option_child';
 search.dataset['inputId'] = data.id;
 }
 else {
 search.className += ' tb_lb_option';
 search.id = data.id;
 }
 if (data['class'] !== undefined) {
 search.className += ' ' + data['class'];
 }
 loader.className = 'fa fa-spin fa-spinner';
 search_container.tabIndex = 1;
 arrow.tabIndex = 1;
 arrow.className = 'tb_search_arrow';
 search.type = 'text';
 search.placeholder = (data.placeholder !== undefined ? data.placeholder : data.label) + '...';
 search_container.appendChild(this.update(self.values[data.id], search, data.options, self));
 arrow.appendChild(loader);
 container.appendChild(arrow);
 container.appendChild(self.initControl(search, data));
 container.appendChild(search_container);
 if (data['after'] !== undefined) {
					container.appendChild(self.after(data ));
 }
 if (data['description'] !== undefined) {
 container.appendChild(self.description(data.description));
 }
				if (data['tooltip'] !== undefined) {
					container.appendChild(self.tooltip(data.tooltip));
				}
 this.events(search, search_container);
 setTimeout(function () {
 new SimpleBar(search_container);
 }, 100);

return container;
 }
 },
 optin_provider : {
 cache:null,
 render : function ( data, self ) {
 var el = document.createElement( 'div' ),
 _this = this,
 callback = function(){
 el.appendChild(self.create( _this.cache ));
 };
 if(this.cache===null){
 Common.showLoader( 'show' );
 $.ajax({
 type: 'POST',
 url: themifyBuilder.ajaxurl,
 dataType: 'json',
 data: {
 action: 'tb_optin_get_settings',
 tb_load_nonce: themifyBuilder.tb_load_nonce
 },
 success : function( result ) {
 Common.showLoader( 'spinhide' );
 _this.cache=result;
 callback();
 self.callbacks();
 },
 error: function () {
 Common.showLoader( 'error' );
 }
 });
 }
 else{
 callback();
 }
 return el;
 }
 },
 check_map_api : {
 render : function ( data, self ) {
 if(!themifyBuilder[data.map+'_api']){
 var errData = {
 type:'separator',
 html:''+themifyBuilder[data.map+'_api_err']+'',
 wrap_class:'tb_group_element_'+data.map
 };
 return self.separator.render(errData, self)
 }else{
 return document.createElement('span');
 }
 }
 },
 query_posts: {
 cacheTypes: null,
 cacheTerms: [],
 render: function (data, self) {
 var _this = this,
 tmp_el,
 desc = data.description,
 after= data.after,
 values=self.values,
 formatData = function (options) {
 var result = [];
 for (var k in options) {
 result[k] = options[k].name;
 }
 return result;
 },
 update = function (item, val, options) {
 var container = item.nextElementSibling.getElementsByClassName('simplebar-content')[0];
 if (container === undefined) {
 container = item.nextElementSibling;
 }
 while (container.firstChild) {
 container.removeChild(container.firstChild);
 }
 container.appendChild(self.selectSearch.update(val, item, options, self));
 },
 get = function (wr, val, type) {
 wr.classList.add('tb_search_wait');
 return $.ajax({
 type: 'POST',
 url: themifyBuilder.ajaxurl,
 dataType: 'json',
 data: {
 action: 'tb_get_post_types',
 tb_load_nonce: themifyBuilder.tb_load_nonce,
 type: type,
 v: val
 },
 complete: function () {
 wr.classList.remove('tb_search_wait');
 }
 });
 };
 (function () {
 var _data = $.extend(true, {}, data),
 timeout = null;
 tmp_el = document.createElement('div');
 tmp_el.id = data.id ? data.id : data.term_id;

self.afterRun.push(function () {
                        var opt = ['id', 'tax_id', 'term_id'],
                                fr = document.createDocumentFragment(),
                                isInit = null,
                                getTerms = function (search, val) {
                                    var termsCallback = function () {
                                        if(data['term_id']===undefined){
                                            return;
                                        }
                                        var term_id = data['term_id'].replace('#tmp_id#', val),
                                                parent = search.closest('.tb_input'),
                                                term_val;
                                        search.id = term_id;
                                        if (isInit === null && values[term_id] !== undefined) {
                                            term_val = values[term_id].split('|')[0];
                                        }
                                        if (!term_val) {
                                            term_val = 0;
                                        }
                                        update(search, term_val, _this.cacheTerms[val]);
                                        if (isInit === null) {
                                            var multiply = document.createElement('input'),
                                                    or = document.createElement('span'),
                                                    wr = document.createElement('div');
                                            or.innerHTML = self.label.or;
                                            multiply.type = 'text';
                                            multiply.className = 'query_category_multiple';
                                            wr.className = 'tb_query_multiple_wrap';
                                            wr.appendChild(or);
                                            wr.appendChild(multiply);
                                            parent.insertBefore(wr, parent.nextSibling);
                                            if (after !== undefined) {
                                                parent.appendChild(self.after(after));
                                            }
                                            if (desc!== undefined) {
                                                parent.appendChild(self.description(desc));
                                            }
                                            if (data['slug_id'] !== undefined) {
                                                var referenceNode = parent.parentNode,
                                                        query_by = self.create([{
                                                                type: 'radio',
                                                                id: 'term_type',
                                                                label: self.label['query_by'],
                                                                default: values['term_type'] === undefined && values[data['tax_id']] === 'post_slug' ? 'post_slug' : false, //backward compatibility
                                                                option_js: true,
                                                                options: [
                                                                    {value: 'category', name: self.label['query_term_id']},
                                                                    {value: 'post_slug', name: self.label['slug_label']}
                                                                ]
                                                            }]),
                                                        slug = self.create([{
                                                                id: data['slug_id'],
                                                                type: 'text',
                                                                'class': 'large',
                                                                wrap_class: 'tb_group_element_post_slug',
                                                                help: self.label['slug_desc'],
                                                                label: self.label['slug_label']
                                                            }]);
                                                referenceNode.parentNode.insertBefore(query_by, referenceNode);
                                                referenceNode.parentNode.appendChild(slug);

}
                                            multiply.addEventListener('change', function (e) {
                                                Themify.triggerEvent(search, 'queryPosts', {val: term_val});
                                            },{passive: true});
                                            if (timeout !== null) {
                                                clearTimeout(timeout);
                                            }
                                            timeout = setTimeout(function () {
                                                self.callbacks();
                                            }, 2);
                                        }
                                        parent.getElementsByClassName('query_category_multiple')[0].value = term_val;

if (isInit === true || self.is_new) {
 Themify.triggerEvent(search, 'queryPosts', {val: term_val});
 }
 else {
 ThemifyConstructor.settings = api.Utils.clear(api.Forms.serialize('tb_options_setting'));
 }
 isInit = true;
 };
 if (_this.cacheTerms[val] === undefined) {
 get(search.parentNode, val, 'terms').done(function (res) {
 _this.cacheTerms[val] = res;
 termsCallback();
 });
 }
 else {
 termsCallback();
 }
 };
 for (var i = 0, len = opt.length; i < len; ++i) {
 if (!_data[opt[i]]) {
 continue;
 }
 _data.id = _data[opt[i]];
 _data.label = self.label['query_' + opt[i]];
 _data.type = 'selectSearch';
 if (opt[i] === 'term_id') {
 _data.wrap_class = 'tb_search_term_wrap tb_group_element_category';
 _data.class = 'query_category_single';
 _data.help = self.label['query_desc'];
 _data['control'] = {control_type: 'queryPosts'};
 }
 else if (opt[i] === 'tax_id' && _data['term_id']===undefined ){
 _data['control'] = {control_type: 'queryPosts'};
 }
 delete _data.description;
 delete _data.after;
 var res = self.create([_data]);
 (function () {
 var is_post = opt[i] === 'id',
 is_term = opt[i] === 'term_id',
 v = is_term ? '' : values[_data.id],
 search = res.querySelector('.tb_search_input');
 search.addEventListener('selectElement', function (e) {
 var val = e.detail.val,
 nextsearch = this.closest('.tb_field');
 if (!is_term) {
 if(nextsearch.nextElementSibling!==null){
 nextsearch = nextsearch.nextElementSibling;
 if (!is_post && isInit === true && data['slug_id'] !== undefined) {
 nextsearch = nextsearch.nextElementSibling;
 }
 if(nextsearch!==null){
 nextsearch = nextsearch.getElementsByClassName('tb_search_input')[0];
 if (is_post) {
 if (_this.cacheTypes[val] !== undefined) {
 update(nextsearch, values[data['tax_id']], formatData(_this.cacheTypes[val].options));
 Themify.triggerEvent(nextsearch, 'selectElement', {val: nextsearch.getAttribute('data-value')});
 }
 }
 else {
 getTerms(nextsearch, val);
 }
 }
 }
 else if(!is_post){
 Themify.triggerEvent(this, 'queryPosts', {val: this.getAttribute('data-value')});
 }
 }
 else {
 nextsearch.getElementsByClassName('query_category_multiple')[0].value = val;
 Themify.triggerEvent(this, 'queryPosts', {val: val});
 }
 },{passive: true});
 if (is_post) {
 var callback = function () {
 if (!v) {
 v = 'post';
 }
 update(search, v, formatData(_this.cacheTypes));
 Themify.triggerEvent(search, 'selectElement', {val: v});
 search = null;
 };
 if (_this.cacheTypes === null) {
 get(search.parentNode, null, 'post_types').done(function (res) {
 _this.cacheTypes = res;
 callback();
 });
 }
 else {
 setTimeout(callback, 10);
 }
 }
 else if (is_term && !data['id'] && data['taxonomy'] !== undefined) {
 getTerms(search, data['taxonomy']);
 }
 })();
 fr.appendChild(res);
 }
 tmp_el.parentNode.replaceChild(fr, tmp_el);
 _data = tmp_el = null;
 });
 })();
 return tmp_el;
 }
 },
 range: {
 update: function (id, v, self) {
 var range = topWindow.document.getElementById(id);
 if (range !== null) {
 range.value = v !== undefined ? v : '';
 var unit_id = id + '_unit',
 unit = topWindow.document.getElementById(unit_id);
 if (unit !== null && unit.tagName === 'SELECT') {
 var v = self.getStyleVal(unit_id);
 if (v === undefined) {
 v = unit[0].value;
 }
 unit.value = v;
 this.setData(range, (unit.selectedIndex !== -1 ? unit[unit.selectedIndex] : unit[0]));
 }
 }
 },
 setData: function (range, item) {
 var min=item.getAttribute('data-min'),
 max=item.getAttribute('data-max'),
 increment = item.getAttribute('data-increment'),
 v=parseFloat(range.value.trim());
 
 if(v>parseFloat(max) || v<parseFloat(min)){
 v=v>parseFloat(max)?max:min;
 range.value = increment % 1 !== 0 ? parseFloat(v).toFixed(1) : parseInt(v);
 }
 range.setAttribute('data-min',min);
 range.setAttribute('data-max',max);
 range.setAttribute('data-increment',increment);
 },
 controlChange: function (range, unit, event) {
 var is_select = unit !== undefined && unit.tagName === 'SELECT',
 _this = this;
 function changeValue(condition) {
 var increment = range.getAttribute('data-increment');
 if (!increment) {
 return;
 }
 var is_increment = increment % 1 !== 0,
 max = parseFloat(range.getAttribute('data-max')),
 min = parseFloat(range.getAttribute('data-min')),
 cval = range.value,
 v=0,
 val = !is_increment ? parseInt(cval || 0) : parseFloat(cval || 0);
 increment = !is_increment ? parseInt(increment) : parseFloat(increment);

if ('increase' === condition) {
 v=val >= max?max:(val + increment);
 }
 else {
 v=val <= min?min:(val - increment);
 }
 range.value = is_increment ? parseFloat(v).toFixed(1) : parseInt(v);
 }
 range.addEventListener('mousedown', function (e) {
 if (e.which === 1) {
 var lastY = e.pageY,
 that = this,
 old_v = range.value,
 callback = function (e) {
 if (e.pageY < lastY) {
 changeValue('increase');
 } else if (e.pageY > lastY) {
 changeValue('decrease');
 }
 lastY = e.pageY;
 Themify.triggerEvent(that, event);
 };
 topWindow.document.body.classList.add('tb_panel_resize');
 topWindow.document.addEventListener('mousemove', callback,{passive: true});
 topWindow.document.addEventListener('mouseup', function _move() {
 topWindow.document.removeEventListener('mousemove', callback,{passive: true});
 if (range.value !== old_v) { 
 Themify.triggerEvent(that, event);
 }
 api.hasChanged = true;
 topWindow.document.removeEventListener('mouseup', _move, {once: true,passive: true});
 topWindow.document.body.classList.remove('tb_panel_resize');
 }, {once: true,passive: true});
 }
 },{passive: true});
 range.addEventListener('keydown', function (e) {
 if (e.which === 38) {
 changeValue('increase');
 } else if (e.which === 40) {
 changeValue('decrease');
 }
 Themify.triggerEvent(this, event);
 },{passive: true});
 if (is_select === true) {
 unit.addEventListener('change', function (e) {
 _this.setData(range, unit.options[ unit.selectedIndex ]);
 Themify.triggerEvent(range,event);
 },{passive: true});
 }
 if (unit !== undefined) {
 _this.setData(range, is_select ? (unit.selectedIndex !== -1 ? unit[unit.selectedIndex] : unit[0]) : unit);
 }
 },
 render: function (data, self) {
 var d = document.createDocumentFragment(),
 wrapper = document.createElement('div'),
 range_wrap = document.createElement('span'),
 input = document.createElement('input'),
 v = self.getStyleVal(data.id);
 wrapper.className = 'tb_tooltip_container';
 if (data.wrap_class !== undefined) {
 wrapper.className = ' ' + data.wrap_class;
 }
 range_wrap.className = 'tb_range_input';
 input.autocomplete = 'off';
 input.type = 'text';
 input.className = 'tb_range';
 if (v !== undefined) {
 input.value = v;
 }
 if (self.is_repeat === true) {
 input.className += self.is_sort===true?' tb_lb_sort_child':' tb_lb_option_child';
 input.dataset['inputId'] = data.id;
 }
 else {
 input.className += ' tb_lb_option';
 input.id = data.id;
 }
 if (data.class !== undefined) {
 input.className += ' ' + data.class;
 }
 range_wrap.appendChild(input);
 if (data.tooltip !== undefined) {
					range_wrap.appendChild(self.tooltip(data.tooltip));
 }
 d.appendChild(range_wrap);
 if (data['units'] === undefined) {
 input.dataset['min'] = 0;
 input.dataset['max'] = 500;
 input.dataset['increment'] = 1;
 }
 else {
 var select_wrap = document.createElement('div'),
 keys = Object.keys(data.units),
 select;
 select_wrap.className = 'selectwrapper noborder';
 if (keys.length > 1) {
 var options = document.createDocumentFragment(),
 v = self.getStyleVal(data.id + '_unit'),
 select_id = data.id + '_unit';
 select = document.createElement('select');
 select.className = 'tb_unit';

if (self.is_repeat === true) {
 select.className += self.is_sort===true?' tb_lb_sort_child':' tb_lb_option_child';
 select.dataset['inputId'] = select_id;
 }
 else {
 select.className += ' tb_lb_option';
 select.id = select_id;
 }
 if (data.select_class !== undefined) {
 select.className += ' ' + data.select_class;
 }
 for (var i in data.units) {
 var opt = document.createElement('option');
 opt.value = i;
 opt.textContent = i;
 opt.dataset['min'] = data.units[i].min;
 opt.dataset['max'] = data.units[i].max;
 opt.dataset['increment'] = data.units[i].increment !== undefined ? data.units[i].increment : (i === 'em' || i === 'em' ? .1 : 1);
 if (v === i) {
 opt.selected = true;
 }
 options.appendChild(opt);
 }
 select.appendChild(options);
 self.initControl(select, {type: 'select', 'id': select_id, control: data.control});
 }
 else {
 var unit = keys[0];
 select = document.createElement('span');
 select.className = 'tb_unit';
 select.id = data.id + '_unit';
 select.dataset['min'] = data.units[unit].min;
 select.dataset['max'] = data.units[unit].max;
 select.dataset['increment'] = data.units[unit].increment !== undefined ? data.units[unit].increment : (unit === 'em' || unit === 'em' ? .1 : 1);
 select.textContent = unit;
 }
 select_wrap.appendChild(select);
 d.appendChild(select_wrap);
 }
 if (data.after !== undefined) {
 d.appendChild(self.after(data.after));
 }
 if (data.description !== undefined) {
 d.appendChild(self.description(data.description));
 }
 wrapper.appendChild(d);
 var event = self.clicked === 'styling' ? 'keyup' : 'change';
 if(data['opposite']===true){
 select.addEventListener('change', function(e){
 e.stopPropagation();
 self.margin.changeUnit(this);
 },{passive: true});
 }
 this.controlChange(input, select, event);
 var ndata = $.extend({}, data);
 if(data['opposite']===true){
 input.addEventListener(event, function(e){
 e.stopPropagation();
 self.margin.changeOppositive(this);
 },{passive: true});
 }
 ndata.type = 'range';
 self.initControl(input, ndata);
 return wrapper;
 }
 },
 icon: {
 render: function (data, self) {
 var wr = document.createElement('div'),
 input = document.createElement('input'),
 preview = document.createElement('span'),
 clear = document.createElement('span'),
 v = self.getStyleVal(data.id);
 input.type = 'text';
 input.className = 'themify_field_icon';
 preview.className = 'tb_plus_btn themify_fa_toggle icon-close';
 wr.className = 'tb_icon_wrap';
 clear.className='tb_clear_input';
 if (self.is_repeat === true) {
 input.className += self.is_sort===true?' tb_lb_sort_child':' tb_lb_option_child';
 input.dataset['inputId'] = data.id;
 }
 else {
 input.className += ' tb_lb_option';
 input.id = data.id;
 }
 if (data.class !== undefined) {
 input.className += ' ' + data.class;
 }
 if (v !== undefined) {
 input.value = v;
 var p = api.Utils.getIcon(v);
 if (p === false) {
 p='default_icon';
 }
 preview.className += ' ' + p;
 }
 else{
 preview.className += ' default_icon';
 }
 wr.appendChild(self.initControl(input, data));
 wr.appendChild(preview);
 wr.appendChild(clear);
 return wr;
 }
 },
 createMarginPadding: function (type, data) {
 var options = data.options !== undefined ? data.options : [
 { id: 'top', label : this.label.top },
 { id: 'right', label : this.label.right },
 { id: 'bottom', label : this.label.bottom },
 { id: 'left', label : this.label.left }
 ],
 d = document.createDocumentFragment(),
 ul = document.createElement('ul'),
 self= this,
 id = data.id,
 isBorderRadius=type==='border_radius',
 range = $.extend(true, {}, data);
 range['units'] = {
 px: {
 min: (type === 'margin' ? -500 : 0),
 max: 500
 },
 em: {
 min: (type === 'margin' ? -10 : 0),
 max: 10
 },
 '%': {
 min: (type === 'margin' ? -100 : 0),
 max: 100
 }
 };
 range.prop = null;
 range.opposite=true;
 ul.className = 'tb_seperate_items tb_inline_list tb_has_opposite';
 if(isBorderRadius===true){
 ul.setAttribute('data-toptext',options[0].label);
 }
 for (var i = 0, len = options.length; i < len; ++i) {
 var li = document.createElement('li'),
 prop_id = id + '_' + options[i].id;
 
 range.id = prop_id;
 range.tooltip = options[i].label;
 range.class=data['class']===undefined?'':data['class'];
 range.class+=' tb_multi_field tb_range_'+options[i].id;
 if(isBorderRadius===true){
 range.class+=' tb_is_border_radius';
 }
 var rangeEl=this.range.render(range, this);
 if(i!==0 && i!==2){
 var opposite = document.createElement('li'),
 oppId=options[i].id==='right'?'top':options[i].id;
 opposite.className='tb_seperate_opposite tb_opposite_'+(oppId==='bottom'?'top':oppId);
 opposite.appendChild(this.checkboxGenerate('checkbox',{
 id: id + '_opp_'+oppId,
 'class': 'style_apply_oppositive',
 options: [
 {name: '1', value:''}
 ],
 'new_line': false
 }
 ));
 var ch_op=opposite.querySelector('.style_apply_oppositive'),
 state =document.createElement('div');
 state.className='tb_oppositive_state';
 ch_op.parentNode.insertBefore(state, ch_op.nextSibling);

ch_op.addEventListener('change',function(e){
                                e.stopPropagation();
                                self.margin.bindingOppositive(this,true);
                            },{passive: true});
                            if(ch_op.checked===true){
                                self.afterRun.push(function () {
                                    self.margin.bindingOppositive(this);
                                }.bind(ch_op));
                            }

d.appendChild(opposite);
 }
 li.appendChild(rangeEl);
 d.appendChild(li);
 var prop;
 if(isBorderRadius===true){
 prop='border-';
 if(options[i].id==='top'){
 prop+='top-left-radius';
 }
 else if(options[i].id==='right'){
 prop+='top-right-radius'; 
 }
 else if(options[i].id==='left'){
 prop+='bottom-left-radius'; 
 }
 else if(options[i].id==='bottom'){
 prop+='bottom-right-radius'; 
 }
 }
 else{
 prop=data.prop + '-' + options[i].id;
 }
 this.styles[prop_id] = {prop: prop, selector: data.selector};
 }
 ul.appendChild(d);
 range = null;
 d = document.createDocumentFragment();
 d.appendChild(ul);
 if (len === 4) {
 d.appendChild(self.checkboxGenerate('icon_checkbox',
 {
 id: 'checkbox_' + id + '_apply_all',
 'class': 'style_apply_all',
 options: [
 {name: '1', value: self.label.all, icon: ''}
 ],
 'default': (this.component === 'module' && this.is_new === true) || Object.keys(this.values).length === 0 ? '1' : false,
 'new_line': false
 }
 ));
 var apply_all = d.querySelector('.style_apply_all');
 apply_all.addEventListener('change', function (e) {
 self.margin.apply_all(this, true);
 },{passive: true});
 if (apply_all.checked === true) {
 self.afterRun.push(function () {
 self.margin.apply_all(apply_all);
 });
 }
 }
 return d;
 },
 margin_opposity:{
 render:function (data, self){
 var items = ['topId','bottomId'],
 f= document.createDocumentFragment(),
 ul = document.createElement('ul'),
 range = $.extend(true, {}, data);
 ul.className='tb_seperate_items tb_inline_list tb_has_opposite';
 for(var i=0;i<2;++i){
 var li = document.createElement('li');
 
 range.id = data[items[i]];
 range.prop=items[i]==='topId'?'margin-top':'margin-bottom';
 range.class='tb_multi_field tb_range_'+(items[i]==='topId'?'top':'bottom');
 range.opposite=true;
 range.tooltip = items[i]==='topId'?self.label.top:self.label.bottom;
 li.appendChild(self.range.render(range, self));
 f.appendChild(li);
 if(i===0){
 var opposite=document.createElement('li');
 opposite.className='tb_seperate_opposite tb_opposite_top';
 opposite.appendChild(self.checkboxGenerate('checkbox',
 {
 id: range.id + '_opp_top',
 'class': 'style_apply_oppositive',
 options: [
 {name: '1', value:''}
 ],
 'new_line': false
 }
 ));
 var ch_op=opposite.querySelector('.style_apply_oppositive'),
 state =document.createElement('div');
 state.className='tb_oppositive_state';
 ch_op.parentNode.insertBefore(state, ch_op.nextSibling);
 ch_op.addEventListener('change',function(e){
 e.stopPropagation();
 self.margin.bindingOppositive(this,true);
 },{passive: true});
 
 f.appendChild(opposite);
 }
 self.styles[data[items[i]]] = {prop:(items[i]==='topId'?'margin-top':'margin-bottom'), selector: data.selector};
 }
 ul.appendChild(f);
 return ul;
 }
 },
 margin: {
 bindingOppositive:function(el,init){
 var li = el.closest('.tb_seperate_opposite'),
 p = li.parentNode,
 isLeft=li.classList.contains('tb_opposite_left'),
 firstItem=isLeft===true?li.nextElementSibling:li.previousElementSibling,
 isChecked=el.checked===true,
 dir=this.getOppositiveDir(firstItem.getElementsByClassName('tb_range')[0]),
 field=p.getElementsByClassName('tb_range_'+dir)[0],
 u=field.closest('li').getElementsByClassName('tb_unit')[0];
 if(isChecked===true){
 field.setAttribute('data-v',field.value);
 u.setAttribute('data-u',u.value);
 if(init===true){
 var firstInput = firstItem.getElementsByClassName('tb_range')[0],
 v = firstInput.value,
 v2=field.value;
 if(v!=='' || v2===''){
 field.value=v;
 u.value=firstItem.getElementsByClassName('tb_unit')[0].value;
 }
 else{
 firstInput.value=v2;
 firstItem.getElementsByClassName('tb_unit')[0].value=u.value;
 }
 
 }
 }
 else{
 var v=field.getAttribute('data-v');
 field.value=v===undefined || v===null?'':v;
 u.value=u.getAttribute('data-u');
 }
 if(init===true){
 Themify.triggerEvent(field, 'keyup');
 }
 },
 changeUnit:function(el){
 var p = el.closest('.tb_has_opposite');
 if(!p.hasAttribute('data-checked')){
 var input = topWindow.document.getElementById(el.getAttribute('id').replace(/_unit$/ig,'')),
 dir=this.getOppositiveDir(input),
 isBorder=input.classList.contains('tb_is_border_radius'),
 chClass=dir==='top'|| (isBorder===true && dir==='right') || (isBorder===false && dir==='bottom')?'top':'left';
 if(p.getElementsByClassName('tb_opposite_'+chClass)[0].getElementsByClassName('style_apply_oppositive')[0].checked===true){
 var input =p.getElementsByClassName('tb_range_'+dir)[0];
 input.closest('li').getElementsByClassName('tb_unit')[0].value=el.value;
 }
 }
 },
 getOppositiveDir:function(el){
 var cl = el.classList,
 opp=cl.contains('tb_range_top')?'bottom':(cl.contains('tb_range_bottom')?'top':(cl.contains('tb_range_left')?'right':'left'));
 if(cl.contains('tb_is_border_radius')){
 if(opp==='bottom'){
 opp='right';
 }
 else if(opp==='top'){
 opp='left';
 }
 else if(opp==='left'){
 opp='top';
 }
 else{
 opp='bottom';
 }
 }
 return opp;
 },
 changeOppositive:function(el){
 var li = el.closest('li'),
 p = li.parentNode;
 if(!p.hasAttribute('data-checked')){
 var dir = this.getOppositiveDir(el),
 isBorder=el.classList.contains('tb_is_border_radius'),
 ch=dir==='top'|| (isBorder===true && dir==='right') || (isBorder===false && dir==='bottom')?p.getElementsByClassName('tb_opposite_top')[0]:p.getElementsByClassName('tb_opposite_left')[0];
 if(ch.getElementsByClassName('style_apply_oppositive')[0].checked===true){
 p.getElementsByClassName('tb_range_'+dir)[0].value=el.value;
 }
 }
 },
 apply_all: function (item, trigger) {
 var ul = item.closest('.tb_input').getElementsByClassName('tb_seperate_items')[0],
 first = ul.getElementsByTagName('li')[0],
 isChecked=item.checked === true,
 text;
 if (isChecked === true) {
 ul.setAttribute('data-checked', 1);
 text = ThemifyConstructor.label.all;

}
                else {
                    ul.removeAttribute('data-checked');
                    text = ul.getAttribute('data-toptext');
                    if(!text){
                        text=ThemifyConstructor.label.top;
                    }
                }
                if (trigger === true) {
                    Themify.triggerEvent(first.getElementsByClassName('tb_multi_field')[0], 'keyup');
                }
                first.getElementsByClassName('tb_tooltip_up')[0].textContent = text;
            },
            update: function (id, v, self) {
                var options = ['top', 'right', 'bottom', 'left'],
                    checkbox_id = 'checkbox_' + id + '_apply_all',
                    apply_all=topWindow.document.getElementById(checkbox_id).getElementsByClassName('style_apply_all')[0];    
                for (var i = 3; i>-1; --i) {
                    var nid = id + '_' + options[i],
                        el = topWindow.document.getElementById(nid);
                    if (el !== null) {
                        self.range.update(nid, self.getStyleVal(nid), self);
                        if(apply_all.checked!==true){
                            var oppositiveId=id + '_opp_'+options[i],
                                ch_oppositive=topWindow.document.getElementById(oppositiveId);
                            if(ch_oppositive!==null){
                                ch_oppositive.getElementsByClassName('style_apply_oppositive')[0].checked=self.getStyleVal(oppositiveId)?true:false;
                            }
                        }
                    }
                    
                }
                self.checkbox.update(checkbox_id, self.getStyleVal(checkbox_id), self);
                this.apply_all(apply_all);
            },
            render: function (data, self) {
                return self.createMarginPadding(data.type, data);
            }
        },
        padding: {
            render: function (data, self) {
                return self.createMarginPadding(data.type, data);
            }
        },
        box_shadow: {
            update: function (id, v, self) {
                var options = ['hOffset', 'vOffset', 'blur'];
                for (var i = 2;i>-1; --i) {
                    var nid = id + '_' + options[i],
                        el = topWindow.document.getElementById(nid);
                    if (el !== null) {
                        self.range.update(nid, self.getStyleVal(nid), self);
                    }
                }
                var color_id = id + '_color',
                    checkbox_id = id + '_inset';
                self.color.update(color_id, self.getStyleVal(color_id), self);
                self.checkbox.update(checkbox_id, self.getStyleVal(checkbox_id), self);
            },
            render: function (data, self) {
                var ranges = {
                        hOffset: {
                            label: self.label.h_o,
                            units: {px: {min: -200, max: 200}, em: {min: 0, max: 10}}
                        },
                        vOffset: {
                            label: self.label.v_o,
                            units: {px: {min: -200,max: 200},em: {min: 0,max: 10}}
                        },
                        blur: {
                            label: self.label.bl,
                            units: {px: {min: 0, max: 300}, em: {min: 0, max: 10}}
                        }
                    },
                    d = document.createDocumentFragment(),
                    ul = document.createElement('ul'),
                    id = data.id,
                    range = $.extend(true, {}, data);
                range['class'] = 'tb_shadow_field';
                range.prop = null;
                ul.className = 'tb_seperate_items tb_inline_list tb_shadow_inputs';
                for (var rangeField in ranges) {
                    if (ranges[rangeField]!==undefined){
                        var rField = ranges[rangeField],
                            li = document.createElement('li'),
                            prop_id = id + '_' + rangeField;
                        range.id = prop_id;
                        range.tooltip = rField.label;
                        range['units'] = rField.units;
                        range['selector'] = data.selector;
                        li.appendChild(self.range.render(range, self));
                        d.appendChild(li);
                        self.styles[prop_id] = {prop: data.prop, selector: data.selector};
                    }
                }
                // Add color field
                var li = document.createElement('li'),
                    prop_id = id + '_color',
                    color = {id: prop_id, type:'color', class:range['class'], selector: data.selector};
                self.styles[prop_id] = {prop: data.prop, selector: data.selector,type:'color'};
                li.appendChild(self.color.render(color, self));
                d.appendChild(li);
                // Add inset checkbox
                var inset = document.createElement('li'),
                    prop_id = id + '_inset',
                    coptions = {
                    id: prop_id,
                    origID: id,
                    type: 'checkbox',
                    class:range['class'],
                    isBoxShadow: true,
                    prop:data.prop,
                    options: [
                        {value: self.label.in_sh, name: 'inset'}
                    ]
                },
                checkboxWrap = self.checkboxGenerate('checkbox', coptions);
                self.styles[prop_id] = {prop: data.prop, selector: data.selector};
                inset.className='tb_box_shadow_inset';
                inset.appendChild(checkboxWrap);
                d.appendChild(inset);
                ul.appendChild(d);
                return ul;
            }
        },
        text_shadow: {
            update: function (id, v, self) {
                var options = [self.label.h_sh, self.label.v_sh, self.label.bl];
                for (var i = 2; i >-1; --i) {
                    var nid = id + '_' + options[i],
                        el = topWindow.document.getElementById(nid);
                    if (el !== null) {
                        self.range.update(nid, self.getStyleVal(nid), self);
                    }
                }
                var color_id = id + '_color';
                self.color.update(color_id, self.getStyleVal(color_id), self);
            },
            render: function (data, self) {
                var ranges = {
                        hShadow: {
                            label: self.label.h_sh,
                            units: {px: {min: -200, max: 200}, em: {min: 0, max: 10}}
                        },
                        vShadow: {
                            label: self.label.v_sh,
                            units: {px: {min: -200, max: 200}, em: {min: 0, max: 10}}
                        },
                        blur: {
                            label: self.label.bl,
                            units: {px: {min: 0, max: 300}, em: {min: 0, max: 10}}
                        }
                    },
                    d = document.createDocumentFragment(),
                    ul = document.createElement('ul'),
                    id = data.id,
                    range = $.extend(true, {}, data);
                range['class'] = 'tb_shadow_field';
                range.prop = null;
                ul.className = 'tb_seperate_items tb_inline_list tb_shadow_inputs';
                for (var rangeField in ranges) {
                    if (!ranges.hasOwnProperty(rangeField)) continue;

select['options'] = self.static['border'];
                select.prop = null;

ul.className = 'tb_seperate_items tb_borders tb_group_element_border';
 for (var i = 0; i < 4; ++i) {
 var li = document.createElement('li'),
 id = orig_id + '_' + options[i];
 radio['options'].push({value: options[i], name: self.label[options[i]], icon: '', label_class: 'tb_radio_label_borders'});

li.className = 'tb_group_element_' + options[i];
                    if (options[i] === 'top') {
                        li.className += ' tb_group_element_all';
                    }
                    self.styles[id + '_color'] = {prop: 'border-' + options[i], selector: data.selector};
                    select.id = id + '_color';
                    select.type = 'color';
                    select.class = 'border_color';
                    d.appendChild(self.color.render(select, self));

self.styles[id + '_width'] = {prop: 'border-' + options[i], selector: data.selector};
                    select.id = id + '_width';
                    select.type = 'range';
                    select.class = 'border_width';
                    select.wrap_class = 'range_wrapper';
                    select.units = {px: {min: 0, max: 300}};
                    d.appendChild(self.range.render(select, self));

self.styles[id + '_style'] = {prop: 'border-' + options[i], selector: data.selector};
                    select.id = id + '_style';
                    select.type = 'select';
                    select.class = 'border_style tb_multi_field';
                    var border_select = self.select.render(select, self),
                            select_item = border_select.querySelector('select');
                    d.appendChild(border_select);

li.appendChild(d);
                    f.appendChild(li);
                    select_item.addEventListener('change', function (e) {
                        _this.changeControl(this);
                    },{passive: true});
                    if (select_item.value === 'none') {
                        _this.changeControl(select_item);
                    }

}
                ul.appendChild(f);
                d = document.createDocumentFragment();
                d.appendChild(self.radioGenerate('icon_radio', radio, self));
                _this.apply_all(ul, d.querySelector('#' + radio.id));
                d.appendChild(ul);

return d;
            }
        },
        slider: {
            render: function (data, self) {
                return self.create(self.getOptions(data));
            }
        },
        custom_css: {
            render: function (data, self) {
                data.class = 'large';
                data.control = false;
                data.help=self.label.custom_css_help;
                var el = self.text.render(data, self);
                api.Utils.changeOptions(el.querySelector('#'+data.id),data.type);
                return el;
            }
        },
        custom_css_id: {
            render: function (data, self) {
                var el= self.create([{
                    id: 'custom_css_id',
                    type: 'text',
                    label:self.label.id_name,
                    help: self.label.id_help,
                    control: false,
                    'class': 'large'
                }], self);
                api.Utils.changeOptions(el.querySelector('#custom_css_id'),data.type);
                return el;
            }
        },
        hidden: {
            render: function (data, self) {
                var input = document.createElement('input'),
                        v = self.getStyleVal(data.id);
                input.type = 'hidden';
                if (self.is_repeat === true ) {
                    input.className= self.is_sort===true?'tb_lb_sort_child':'tb_lb_option_child';
                    input.dataset['inputId'] = data.id;
                }
                else {
                    input.className= 'tb_lb_option';
                    input.id = data.id;
                }
                if (data.class !== undefined) {
                    input.className += ' ' + data.class;
                }
                if (v !== undefined) {
                    input.value = v;
                }
                else if (data.value !== undefined) {
                    input.value = data.value;
                }
                return self.initControl(input, data);
            }
        },
        frame: {
            render: function (data, self) {
                data.options = self.static['frame'];
                data.class = 'tb_frame';
                return self.layout.render(data, self);
            }
        },
        title: {
            render: function (data, self) {
                data.class = 'large';
                data.control = {event: 'keyup', control_type: 'change', selector: '.module-title'};
                return self.text.render(data, self);
            }
        },
        url: {
            render: function (data, self) {
                data.input_type = 'url';
                return self.text.render(data, self);
            }
        },
        button: {
            render: function (data, self) {
                var btn = document.createElement('button');
                btn.className = 'builder_button';
                btn.id = data.id;
                if (data.class !== undefined) {
                    btn.className += ' ' + data.class;
                }
                btn.textContent = data.name;
                return self.initControl(btn, data);
            }
        },
        row_anchor: {
            render: function (data, self) {
                data.control = false;
                var el = self.text.render(data, self);
                api.Utils.changeOptions(el.querySelector('#'+data.id),data.type);
                return el;
            }
        },
        widget_form: {
            render: function (data, self) {
                var container = document.createElement('div');
                container.id = data.id;
                container.className = 'module-widget-form-container wp-core-ui tb_lb_option';
                return container;
            }
        },
        widget_select: {
            data: null,
            el: null,
            cache: [],
            mediaInit: null,
            textInit: null,
            render: function (data, self) {
                var d = document.createDocumentFragment(),
                        filter = document.createElement('div'),
                        loader = document.createElement('i'),
                        search = document.createElement('input'),
                        available = document.createElement('div'),
                        select = document.createElement('div');

filter.id = 'available-widgets-filter';
                loader.className = 'fa fa-spin fa-spinner tb_loading_widgets';
                search.type = 'text';
                search.id = 'widgets-search';
                search.dataset.validation = 'not_empty';
                search.dataset.errorMsg = self.label.widget_validate;
                search.autocomplete = 'off';
                search.placeholder = self.label.search_widget;

available.id = 'available-widgets';
                available.tabIndex = 1;

select.id = data.id;
                select.className = 'tb_lb_option tb_widget_select';

this.el = select;
                filter.appendChild(loader);
                filter.appendChild(search);
                available.appendChild(select);
                d.appendChild(filter);
                d.appendChild(available);

var _this = this,
                        val = self.values[data.id],
                        callback = function () {

var f = document.createDocumentFragment(),
                                    all_items = [],
                                    select_widget = function (item, instance_widget) {
                                        for (var i = all_items.length - 1; i > -1; --i) {
                                            all_items[i].classList.remove('selected');
                                        }
                                        item.classList.add('selected');
                                        var v = item.dataset['value'];
                                        search.value = item.getElementsByClassName('widget-title')[0].textContent;
                                        available.style['display'] = 'none';

_this.select(v, _this.data[v].b, instance_widget, data);

};
                            for (var i in _this.data) {
                                var w = document.createElement('div'),
                                        title = document.createElement('div'),
                                        h3 = document.createElement('h3');
                                w.className = 'widget-tpl ' + _this.data[i].b;
                                w.dataset['value'] = i;
                                title.className = 'widget-title';
                                h3.textContent = _this.data[i].n;
                                title.appendChild(h3);
                                w.appendChild(title);
                                w.addEventListener('click', function (e) {
                                    e.preventDefault();
                                    e.stopPropagation();
                                    self.settings[data.id] = this.dataset['value'];
                                    select_widget(this, null);
                                });
                                all_items.push(w);
                                if (_this.data[i].d !== undefined) {
                                    var desc = document.createElement('div');
                                    desc.className = 'widget-description';
                                    desc.innerHTML = _this.data[i].d;
                                    w.appendChild(desc);
                                }
                                f.appendChild(w);
                                if (val === i) {
                                    select_widget(w, self.values['instance_widget']);
                                }
                            }
                            select.appendChild(f);

if (!val) {
                                new SimpleBar(select);
                            }
                            _this.search(search, available);
                            loader.parentNode.removeChild(loader);
                            loader = null;
                            api.hasChanged = true;
                        };
                if (_this.data === null) {

$.ajax({
                        type: 'POST',
                        url: themifyBuilder.ajaxurl,
                        dataType: 'json',
                        data: {
                            action: 'tb_get_widget_items',
                            nonce: themifyBuilder.tb_load_nonce
                        },
                        success: function (data) {
                            _this.data = data;
                            callback();
                        }
                    });

for (var i in themifyBuilder.widget_css) {
                        topWindow.Themify.LoadCss(themifyBuilder.widget_css[i], tbLocalScript.version);
                    }
                    themifyBuilder.widget_css = null;

}
 else {
 setTimeout(callback, 5);
 }
 return d;
 },
 search: function (search, available) {
 var _this = this;
 search.addEventListener('focus', this.show.bind(this),{passive: true});
 search.addEventListener('blur', function (e) {
 if (!e.relatedTarget || e.relatedTarget.id !== 'available-widgets') {
 available.style['display'] = 'none';
 }
 },{passive: true});
 search.addEventListener('keyup', function (e) {
 _this.show();
 var val = this.value.trim(),
 r = new RegExp(val, 'i'),
 items = _this.el.getElementsByClassName('widget-tpl');
 for (var i = 0, len = items.length; i < len; ++i) {
 if (val === '') {
 items[i].style['display'] = 'block';
 }
 else {
 var title = items[i].getElementsByTagName('h3')[0];
 title = title.textContent || title.innerText;
 if (r.test(title)) {
 items[i].style['display'] = 'block';
 }
 else {
 items[i].style['display'] = 'none';
 }
 }
 }

},{passive: true});
            },
            show: function () {
                //this.$el.next('.tb_field_error_msg').remove();
                this.el.closest('#available-widgets').style['display'] = 'block';
            },
            hide: function () {
                this.el.closest('#available-widgets').style['display'] = 'none';
            },
            select: function (val, base, settings_instance, args) {
                var _this = this,
                        instance = $('#instance_widget', Common.Lightbox.$lightbox),
                        callback = function (data) {
                            var initjJS = function () {
                                var form = $(data.form);
                                instance.addClass('open').html(form.html());
                                if (settings_instance) {
                                    for (var i in settings_instance) {
                                        form.find('[name="' + i + '"]').val(settings_instance[i]);
                                    }
                                }
                                form = null;
                                if (base === 'text') {
                                    if (wp.textWidgets) {
                                        if (!_this.textInit) {
                                            _this.textInit = true;
                                            wp.textWidgets.init();
                                        }
                                        if (settings_instance) {
                                            delete wp.textWidgets.widgetControls[settings_instance['widget-id']];
                                        }
                                    }

} else if (wp.mediaWidgets) {
                                    if (!_this.mediaInit) {
                                        wp.mediaWidgets.init();
                                        _this.mediaInit = true;
                                    }
                                    if (settings_instance) {
                                        delete wp.mediaWidgets.widgetControls[settings_instance['widget-id']];
                                    }
                                }
                                $(document).trigger('widget-added', [instance]);
                                base === 'text' && ThemifyConstructor.initControl(instance.find('.wp-editor-area')[0], {control: {control_type: 'wp_editor', type: 'refresh'}});

if (settings_instance) {
 setTimeout(function () {
 new SimpleBar(topWindow.document.getElementById('tb_options_setting'));
 new SimpleBar(_this.el);
 }, 100);//widget animation delay is 50
 }
 if (api.mode === 'visual') {
 var settings = $.extend(true, {}, args);
 settings.id = instance[0].id;
 instance.on('change', ':input', function () {
 if (api.is_ajax_call === false) {
 ThemifyConstructor.control.widget_select(instance, settings);
 }
 });
 if (val) {
 ThemifyConstructor.control.widget_select(instance, settings);
 }
 }
 instance.removeClass('tb_loading_widgets_form').find('select').wrap('');
 },
 extra = function (data) {
 var str = '';
 if (typeof data === 'object') {
 for (var i in data) {
 if (data[i]) {
 str += data[i];
 }
 }
 }
 if (str !== '') {
 var s = document.createElement('script');
 s.type = 'text/javascript';
 s.text = str;
 var t = document.getElementsByTagName('script')[0];
 t.parentNode.insertBefore(s, t);
 }
 },
 recurisveLoader = function (js, i) {
 var len = js.length,
 loadJS = function (src, callback) {
 Themify.LoadAsync(src, callback, data.v);
 };
 loadJS(js[i].src, function () {
 if (js[i].extra && js[i].extra.after) {
 extra(js[i].extra.after);
 }
 ++i;
 i < len ? recurisveLoader(js, i) : initjJS();
 });
 };

if (_this.cache[base] === undefined) {
                                data.template && document.body.insertAdjacentHTML('beforeend', data.template);
                                data.src.length > 0 ? recurisveLoader(data.src, 0) : initjJS();
                            } else {
                                initjJS();
                            }
                        };

instance.addClass('tb_loading_widgets_form').html('');

// backward compatibility with how Widget module used to save data
                if (settings_instance) {
                    $.each(settings_instance, function (i, v) {
                        var old_pattern = i.match(/.*\[\d\]\[(.*)\]/);
                        if ($.isArray(old_pattern) && old_pattern[1] !== 'undefined') {
                            delete settings_instance[ i ];
                            settings_instance[ old_pattern[1] ] = v;
                        }
                    });
                }

$.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: themifyBuilder.ajaxurl,
                    data: {
                        action: 'module_widget_get_form',
                        tb_load_nonce: themifyBuilder.tb_load_nonce,
                        load_class: val,
                        tpl_loaded: _this.cache[base] === 1 ? 1 : 0,
                        id_base: base,
                        widget_instance: settings_instance
                    },
                    success: function (data) {
                        if (data && data.form) {
                            callback(data);
                            _this.cache[base] = 1;
                        }
                    }
                });
            }
        },
        message:{
            render: function (data, self) {
                    var d = document.createElement('div');
                    if( data.class !== undefined ){
                        d.className += data.class;
                    }
                    d.innerHTML = data.comment;
                    return d;
            }
        },
        filters: {
            render: function ( data, self ) {
                var ranges = {
                        hue: {
                            label: self.label.hue,
                            units: { deg: { min: 0, max: 360 } },
                            prop: 'hue-rotate'
                        },
                        saturation: {
                            label: self.label.sat,
                            units: { '%': { min: 0, max: 200 } },
                            prop: 'saturate'
                        },
                        brightness: {
                            label: self.label.bri,
                            units: { '%': { min: 0, max: 200 } },
                            prop: 'brightness'
                        },
                        contrast: {
                            label: self.label.con,
                            units: { '%': { min: 0, max: 200 } },
                            prop: 'contrast'
                        },
                        invert: {
                            label: self.label.inv,
                            units: { '%': { min: 0, max: 100 } },
                            prop: 'invert'
                        },
                        sepia: {
                            label: self.label.se,
                            units: { '%': { min: 0, max: 100 } },
                            prop: 'sepia'
                        },
                        opacity: {
                            label: self.label.op,
                            units: { '%': { min: 0, max: 100 } },
                            prop: 'opacity'
                        },
                        blur: {
                            label: self.label.bl,
                            units: { px: { min: 0, max: 50 } },
                            prop: 'blur'
                        }
                    },
                    d = document.createDocumentFragment(),
                    ul = document.createElement( 'ul' ),
                    id = data.id,
                    range = $.extend( true, {}, data );
                range['class'] = 'tb_filters_field';
                range.prop = null;
                ul.className = 'tb_seperate_items tb_filters_fields';
                for ( var rangeField in ranges ) {
                    if ( ranges[rangeField] !== undefined ) {
                        var rField = ranges[rangeField],
                            li = document.createElement( 'li' ),
                            prop_id = id + '_' + rangeField;
                        range.id = prop_id;
                        range['units'] = rField.units;
                        range['selector'] = data.selector;
                        var label = document.createElement( 'div' ),
                            labelText = document.createElement( 'span' );
                        label.className = 'tb_label';
                        labelText.className = 'tb_label_text';
                        labelText.textContent = rField.label;
                        label.appendChild( labelText );
                        li.appendChild( label );
                        li.appendChild( self.range.render( range, self ) );
                        d.appendChild( li );
                        self.styles[prop_id] = { prop: rField.prop, selector: data.selector };
                    }
                }
                ul.appendChild( d );
                return ul;
            }
        },
        help: function (text) {
            var help = document.createElement('div'),
                    helpContent = document.createElement('div'),
                    icon = document.createElement('i');
            help.className = 'tb_help';
            icon.className = 'icon ti-help';
            helpContent.className = 'tb_help_content';
            icon.tabIndex = -1;
            helpContent.innerHTML = text;
            help.appendChild(icon);
            help.appendChild(helpContent);
            return help;
        },
        tooltip: function (text){
            var tooltip = document.createElement('span');
            tooltip.className = 'tb_tooltip_up';
            tooltip.textContent = text;
            return tooltip;
        },
        description: function (text) {
            var d = document.createElement('small');
                d.innerHTML = text;
            return d;
        },
        after:function( data ){
            var afterElem = document.createElement('span');
            afterElem.className = 'tb_input_after';
            afterElem.textContent = data.after;
            if ( ( data['label'] === undefined || data['label'] === '' )
                    && ( data['help'] !== undefined && data['help'] !== '' ) ){
                    afterElem.appendChild(this.help(data['help']));
            }
            return afterElem;
        },
        height: {
            update: function (id, v, self) {
                self.checkbox.update(id, self.getStyleVal(id), self);
            },
            render: function (data, self) {
                data.isHeight = true;
                var coptions = {
                    id: data.id + '_auto_height',
                    heightID: data.id,
                    type: 'checkbox',
                    isHeight: true,
                    prop: 'height',
                    options: [
                        {value: self.label.a_ht, name: 'auto'}
                    ]
                };
                var checkboxWrap = self.checkboxGenerate('checkbox', coptions),
                    checkbox = checkboxWrap.querySelector('.tb_lb_option'),
                    checkboxInput = checkboxWrap.querySelector('input'),
                    height,
                    heightData = $.extend(true, {}, data);
                checkboxInput.addEventListener('change',function(e){
                    var heightField = topWindow.document.getElementsByClassName('tb_group_element_' + data.id + '_height')[0];
                    if(e.target.checked){
                        heightField.classList.add('hide-auto-height');
                    }else{
                        heightField.classList.remove('hide-auto-height');
                    }
                });
                heightData.label = 'ht';
                heightData.type = 'range';
                heightData.id = data.id;
                heightData.prop = 'height';
                heightData.wrap_class = 'tb_group_element_' + data.id + '_height';
                if('auto' === self.values[data.id + '_auto_height']){
                    heightData.wrap_class += ' hide-auto-height';
                }
                heightData.units = {
                        px: {
                            min: 0,
                            max: 1200
                        },
                        vh: {
                            min: 0,
                            max: 100
                        },
                        '%':  {
                            min: 0,
                            max: 100
                        },
                        em: {
                            min: 0,
                            max: 200
                        }
                };

height = self.create([heightData]);

heightData = coptions = null;
                self.afterRun.push(function () {
                    var field = checkbox.parentNode.closest('.tb_field');
                    field.parentNode.insertBefore(height, field);
                    field = height = checkbox = null;
                });
                return checkboxWrap;
            }
        },
        toggle_switch:{
            update: function (id, v, self) {
                self.checkbox.update(id, self.getStyleVal(id), self);
            },
            controlChange:function(el,args){
                el.addEventListener('change', function () {
                    var v=this.checked===true?args['on'].name:(args['off']!==undefined?args['off'].name:'');
                    this.value=v;
                },{passive: true });
            },
             render : function ( data, self ) {
                var clone = $.extend(true,{},data),
                    orig = {},
                    label = document.createElement('div'),
                    state = 'off',
                    v = self.getStyleVal(data.id);
                clone['control']=false;
                if(clone['class']===undefined){
                    clone['class']='toggle_switch';
                }
                else{
                    clone['class']+=' toggle_switch';
                }
                var options = clone['options'];
                if(options===undefined || options==='simple'){
                        if(options==='simple'){
                            options = {
                                'on':{
                                    'name':'yes',
                                    'value' : self.label['y']
                                },
                                'off':{
                                    'name':'no',
                                    'value' : self.label['no']
                                }
                            };
                        }
                        else{
                            options = {
                                'on':{
                                    'name':'no',
                                    'value' : self.label['s']
                                },
                                'off':{
                                    'name':'yes',
                                    'value' :self.label['hi']
                                }
                            };
                            if(clone['default']===undefined){
                                clone['default']='on';
                            }
                        }
                } 
                if ( v === undefined ){
                    if(clone['default'] === 'on'){
                        state ='on';
                    }
                    v = state==='on'?options['on'].name:(options['off']!==undefined?options['off'].name:'');
                }
                else{
                    if(v===false){
                        v = '';
                    }
                    state=options['on'].name===v?'on':'off';
                }
                for(var i in options){
                    if ( clone['after'] === undefined && options[i]['value']!==undefined) {
                        label.setAttribute('data-'+i, self.label[options[i]['value']]!==undefined?self.label[options[i]['value']]:options[i]['value']);
                    }
                    orig[i] = options[i];
                }
                var k = Object.keys( options )[0];
                delete clone['binding'];
                delete options[k]['value'];
                delete clone['default'];
                clone['options'] = [options[k]];
                if(clone['wrap_checkbox']===undefined){
                    clone['wrap_checkbox'] = '';
                }
                clone['wrap_checkbox']+=' tb_switcher';
                label.className = 'switch_label';
                var checkBox = self.checkboxGenerate('checkbox',clone),
                    sw = checkBox.querySelector('.toggle_switch');
                    clone=null;
                    sw.value=v;
                    sw.checked=state==='on';
                    this.controlChange(sw,orig);
                    options=orig=null;
                sw.parentNode.appendChild(label);
                self.initControl(sw, data);
                return checkBox;
            }
        },
        width: {
            update: function (id, v, self) {
                self.checkbox.update(id, self.getStyleVal(id), self);
            },
            render: function (data, self) {
                data.isWidth = true;
                var coptions = {
                    id: data.id + '_auto_width',
                    widthID: data.id,
                    type: 'checkbox',
                    isWidth: true,
                    prop: 'width',
                    options: [
                        {value: self.label.a_wd, name: 'auto'}
                    ]
                };
                var checkboxWrap = self.checkboxGenerate('checkbox', coptions),
                    checkbox = checkboxWrap.querySelector('.tb_lb_option'),
                    checkboxInput = checkboxWrap.querySelector('input'),
                    width,
                    widthData = $.extend(true, {}, data);
                checkboxInput.addEventListener('change',function(e){
                    var widthField = topWindow.document.getElementsByClassName('tb_group_element_' + data.id + '_width')[0];
                    if(e.target.checked){
                        widthField.classList.add('hide-auto-height');
                    }else{
                        widthField.classList.remove('hide-auto-height');
                    }
                });
                widthData.label = 'w';
                widthData.type = 'range';
                widthData.id = data.id;
                widthData.prop = 'width';
                widthData.wrap_class = 'tb_group_element_' + data.id + '_width';
                if('auto' === self.values[data.id + '_auto_width']){
                    widthData.wrap_class += ' hide-auto-height';
                }
                widthData.units = {
                    px: {
                        min: -2000,
                        max: 2000
                    },
                    '%':  {
                        min: 0,
                        max: 100,
                        increment: 1
                    },
                    em: {
                        min: -20,
                        max: 20
                    }
                };

width = self.create([widthData]);

widthData = coptions = null;
                self.afterRun.push(function () {
                    var field = checkbox.parentNode.closest('.tb_field');
                    field.parentNode.insertBefore(width, field);
                    field = width = checkbox = null;
                });
                return checkboxWrap;
            }
        }
    };

})(jQuery, Themify, window.top, document,  undefined);

Back to File Manager