(function() {
    tinymce.PluginManager.add('ux_shortcode_insert', function( editor, url ) {
        editor.addButton( 'ux_shortcode_insert', {
           text: 'Shortcodes',
            type: 'menubutton',
            tooltip: 'Add Shortcodes and Content',
            menu: [
                 {
                    text: 'Section / Background',
                      icon: 'icon dashicons-align-none',
                    onclick: function() {
                        ux_add_section(editor);
                    },
                },
                {
                    text: 'Row / Columns',
                     icon: 'icon dashicons-text',
                    onclick: function() {
                        ux_add_row(editor);
                    },
                },
                {
                    text: 'UX Slider',
                    icon: 'icon  dashicons-images-alt2',
                    menu: [
                                {
                                    text: 'Simple slider',
                                    value: '[ux_slider timer="4500" arrows="true" bullets="true" auto_slide="true" nav_color="dark"]<br> Insert slides here (UX Banner or Sections) <br>[/ux_slider]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Slider with columns',
                                    value: '[ux_slider timer="4500" arrows="true" bullets="false" auto_slide="true" nav_color="dark"]<p>[col span="1/4"] Content [/col]<br/><br>[col span="1/4"] Content [/col]<br/><br>[col span="1/4"] Content [/col]<br/><br>[col span="1/4"] Content [/col]<br/><br>[col span="1/4"] Content [/col]<br/></p>[/ux_slider]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Logo / brand slider',
                                    value: '[ux_slider height="60px" arrows="true" bullets="false" nav_color="dark" margin="0px"]<br><br/>[logo title="Logo title" img="http://imageurl" height="60px"]<br/><br/>[logo title="Logo title" img="http://imageurl" height="60px"]<br/><br/>[logo title="Logo title" img="http://imageurl" height="60px"]<br/><br/>[logo title="Logo title" img="http://imageurl" height="60px"]<br/><br/>[logo title="Logo title" img="http://imageurl" height="60px"]<br/>[logo title="Logo title" img="http://imageurl" height="60px"]<br/><br/>[logo title="Logo title" img="http://imageurl" height="60px"]<br/><br/>[/ux_slider]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },

                            ]   
                },
                {
                    text: 'UX Banner',
                    icon: 'icon dashicons-format-image',
                    onclick: function() {
                        ux_add_uxbanner(editor);
                    },
                },
                {
                    text: 'Elements',
                     icon: 'icon dashicons-screenoptions',
                    onclick: function() {
                        editor.insertContent(this.value());
                    },
                    menu: [

                        {
                            text: 'Icon Box',
                            menu: [
                             {
                                    text: 'Icon Top Center',
                                    value: '[featured_box title="Title text" img="http://iconurl" img_width="" pos="center" link=""]<p>Featured box text</p>[/featured_box]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                     text: 'Icon Top',
                                    value: '[featured_box title="Title text" img="http://iconurl" img_width="" link=""]<p>Featured box text</p>[/featured_box]',
                                 onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                   text: 'Icon Left',
                                    value: '[featured_box title="Title text" pos="left" img="http://iconurl" img_width="" link=""]<p>Featured box text</p>[/featured_box]',
                                   onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                               
                            ]   
                        },
                        {
                            text: 'Button',
                           menu: [
                                {
                                    text: 'Button - Primary',
                                    value: '[button size="medium" style="primary"  text="Medium button" link="http://" target=""]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Button - Secondary',
                                    value: '[button size="medium" style="secondary"  text="Medium button" link="http://" target=""]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                 {
                                    text: 'Button - Alert',
                                    value: '[button size="medium" style="alert"  text="Medium button" link="http://" target=""]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                 {
                                    text: 'Button - Success',
                                    value: '[button size="medium" style="success"  text="Medium button" link="http://"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                 {
                                    text: 'Button - White',
                                    value: '[button size="medium" style="white"  text="Medium button" link="http://"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                 {
                                    text: 'Alt Button - Primary ',
                                    value: '[button size="medium" style="is-outline primary"  text="Medium button" link="http://" target=""]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Alt Button - Secondary',
                                    value: '[button size="medium" style="is-outline secondary"  text="Medium button" link="http://" target=""]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Alt button - Success',
                                    value: '[button size="medium" style="is-outline success"  text="Medium button" link="http://"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Alt button - White',
                                    value: '[button size="medium" style="is-outline white"  text="Medium button" link="http://"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                               
                            ]    
                        },
                        {
                            text: 'Tabs / Accordion',
                            onclick: function(e) {
                            },
                            menu: [
                                {
                                    text: 'Tabs - Horizontal',
                                    value: '[tabgroup title="Tab group title"]<br>[tab title="Tab 1 Title"] Tab content [/tab]<br>[tab title="Tab 2 Title"] Tab content [/tab]<br>[tab title="Tab 3 Title"] Tab content [/tab]<br>[/tabgroup]<br>',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                 {
                                    text: 'Tabs - Horizontal Centered',
                                    value: '[tabgroup style="center" title=""]<br>[tab title="Tab 1 Title"] Tab content [/tab]<br>[tab title="Tab 2 Title"] Tab content [/tab]<br>[tab title="Tab 3 Title"] Tab content [/tab]<br>[/tabgroup]<br>',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                 {
                                    text: 'Tabs - Horizontal Pills',
                                    value: '[tabgroup style="pills" title=""]<br>[tab title="Tab 1 Title"] Tab content [/tab]<br>[tab title="Tab 2 Title"] Tab content [/tab]<br>[tab title="Tab 3 Title"] Tab content [/tab]<br>[/tabgroup]<br>',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Tabs - Vertical',
                                    value: '[tabgroup_vertical title=""]<br>[tab title="Tab 1 Title"] Tab content [/tab]<br>[tab title="Tab 2 Title"] Tab content [/tab]<br>[tab title="Tab 3 Title"] Tab content [/tab]<br>[/tabgroup_vertical]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Accordion',
                                    value: '[accordion title="Accordion title"]<br><br>[accordion-item title="Accordion Item 1 Title"]<br>Accordion Item 1 Content Goes Here<br>[/accordion-item]<br><br>[accordion-item title="Accordion Item 1 Title"]<br>Accordion Item 1 Content Goes Here<br>[/accordion-item]<br><br>[accordion-item title="Accordion Item 1 Title"]<br> Accordion Item 1 Content Goes Here<br> [/accordion-item]<br><br>[/accordion]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                }
                               
                            ]
                        },
                        {
                            text: 'Map',
                            value: '[map lat="40.79028" long="-73.95972" height="500px" color="#58728a"] Enter map content here.. [/map]',
                            onclick: function(e) {
                                e.stopPropagation();
                                editor.insertContent(this.value());
                            }       
                        },
                        {
                            text: 'Blog Posts',
                            menu: [
                                {
                                    text: 'Blog Post Slider',
                                    value: '[blog_posts posts="6" columns="3" image_height="200px" show_date="true"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                 {
                                    text: 'Blog Post Slider - Text overlay',
                                    value: '[blog_posts columns="3" style="text-overlay" posts="8" category="" image_height="150px" show_date="true"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                 {
                                    text: 'Blog Post Slider - Text Bounce',
                                    value: '[blog_posts columns="3" style="text-bounce" posts="8" category="" image_height="150px" show_date="true"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                }
                            ]  
                               
                        },
                        {
                            text: 'Titles / Dividers',
                            value: 'Text from sub sub menu',
                            menu: [
                                {
                                    text: 'Title - Left',
                                    value: '[title text="This is a title" link="" link_text=""]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Title - Center',
                                    value: '[title text="This is a centered title" style="center"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Title - Bold Left',
                                    value: '[title text="This is a bold title" style="bold"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Title - Bold Center',
                                    value: '[title text="This is a bold centered title" style="bold_center"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Title - Left (With link)',
                                    value: '[title text="This is a title" link="#" link_text="Title link"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Divider',
                                    value: '[divider]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Divider - Full Width',
                                    value: '[divider width="full"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Divider - Small',
                                    value: '[divider width="small"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                     text: 'Divider - Medium',
                                    value: '[divider width="medium"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                     text: 'Gap - 30px',
                                    value: '[gap height="30px"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                     text: 'Gap - 60px',
                                    value: '[gap height="60px"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                     text: 'Gap - 15px',
                                    value: '[gap height="15px"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                }

                            ]   
                        },
                        {
                            text: 'Follow / Share',
                            menu: [
                             {
                                    text: 'Follow Icons',
                                    value: '[follow twitter="http://" facebook="http://" email="email@post.com" pinterest="http://" rss="http://" instagram="http://" googleplus="http://"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Follow Icons - Small',
                                    value: '[follow size="small" twitter="http://" facebook="http://" email="email@post.com" pinterest="http://" rss="http://" instagram="http://" googleplus="http://"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Share icons',
                                    value: '[share title=""]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                               
                            ]   
                        },

                        {
                            text: 'Price Table',
                            value: '[ux_price_table price="99$" title="Awesome title" featured="false" description="This is a description" button_text="Order Now" button_link="#"]<br>[bullet_item text="This is a bullet item"]<br>[bullet_item text="This is a bullet item"]<br>[bullet_item text="This is a bullet item"]<br>[/ux_price_table]',
                            onclick: function(e) {
                                e.stopPropagation();
                                editor.insertContent(this.value());
                            }       
                        },
                        {
                            text: 'Testimonial',
                            value: '[testimonial style="" image="http://imageurl" name="Author name" company="Company name" stars="5"]<br> Add testimonial text here <br>[/testimonial]',
                            onclick: function(e) {
                                e.stopPropagation();
                                editor.insertContent(this.value());
                            }       
                        },
                        {
                            text: 'Team Member',
                            value: '[team_member name="Name" title="Title" facebook="http://" twitter="http://" pinterest="http://"  img="http://imageurl"]<br>Team member description<br>[/team_member]',
                            onclick: function(e) {
                                e.stopPropagation();
                                editor.insertContent(this.value());
                            }       
                        },
                        {
                            text: 'Message Box',
                            value: '[message_box bg="#hex or http://imageurl"] Message box text [/message_box]',
                            onclick: function(e) {
                                e.stopPropagation();
                                editor.insertContent(this.value());
                            }       
                        },
                        {
                            text: 'Scroll To Link',
                            value: '[scroll_to link="#scrolltothis" title="Scroll to This"]',
                            onclick: function(e) {
                                e.stopPropagation();
                                editor.insertContent(this.value());
                            }       
                        },                        
                    ]
                },{
                    text: 'Shop',
                    icon: 'icon dashicons-cart',
                    onclick: function() {
                        editor.insertContent(this.value());
                    },
                    menu: [
                        {
                            text: 'Product Sliders',
                            menu: [
                            {
                                    text: 'Featured products',
                                    value: '[ux_featured_products products="" columns="4" title="Check our Featured products!"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                             {
                                    text: 'Best selling products',
                                    value: '[ux_bestseller_products products="" columns="4" title="Check our bestsellers!"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Custom category',
                                    tooltip: 'Show products from an selected category',
                                    value: '[ux_custom_products cat="" products="" columns="4" title="Check our bestsellers!"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Products On Sale',
                                    value: '[ux_sale_products columns="4" title="Check our Products on Sale!"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Latest products',
                                    value: '[ux_latest_products columns="4" title="Check our Latest products!"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                            ]       
                        },
                        {
                            text: 'Categories',
                            menu: [
                             {
                                    text: 'Category Slider',
                                    value: '[ux_product_categories number="10" parent="0" columns="4" title="Our categories" ]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Category Grid - Simple Grid',
                                    value: '[product_categories number="10" parent="0" columns="4" title="Our categories"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Category Grid - New Grid style',
                                    value: '[ux_product_categories_grid number="22" parent="0"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                }
                            ]         
                        },
                        {
                            text: 'Product Lookbook Slider',
                            value: '[product_lookbook cat="category-slug" products="8"]',
                            onclick: function(e) {
                                e.stopPropagation();
                                editor.insertContent(this.value());
                            }       
                        },
                        {
                            text: 'Product Pinterest Style Grid',
                            value: '[products_pinterest_style products="" cat="category-slug" columns="4"]',
                            onclick: function(e) {
                                e.stopPropagation();
                                editor.insertContent(this.value());
                            }       
                        },
                        {
                            text: 'WooCommerce',
                            menu: [
                             {
                                    text: 'Order Tracking',
                                    value: '[woocommerce_order_tracking]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Product Price/cart button',
                                    value: '[add_to_cart id="" sku=""]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Products by SKU',
                                    value: '[product id="" sku=""]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Custom products',
                                    value: '[product_category category="" per_page="12" columns="4" orderby="date" order="desc"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Recent products',
                                    value: '[recent_products per_page="12" columns="4" orderby="date" order="desc"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Featured Products',
                                    value: '[featured_products per_page="12" columns="4" orderby="date" order="desc"]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },
                                {
                                    text: 'Shop messages',
                                    value: '[woocommerce_shop_messages]',
                                    onclick: function(e) {
                                        e.stopPropagation();
                                        editor.insertContent(this.value());
                                    }       
                                },




                            ]         
                        },

                    ]
                },
           ]
        });
    });



/* ADD BANNER */
function ux_add_uxbanner(editor){
    var list_style = 'height:90px; width:130px; text-indent: -999px; text-align:center;padding-top:3px; background-repeat:no-repeat;font-size:10px!important;border-top:1px solid #555;';
    ux_selected_image = 'http://imageurl';

    editor.windowManager.open( {
        title: 'Insert UX Banner',
        body: [
        {
            type: 'listbox', 
            name: 'height', 
            label: 'Height',
            tooltip: 'Set height of the banner',
            'values': [
                {text: '500px', value: 'height="500px"'},
                {text: '700px', value: 'height="700px"'},
                {text: '600px', value: 'height="600px"'},
                {text: '400px', value: 'height="400px"'},
                {text: '300px', value: 'height="300px"'},
                {text: '200px', value: 'height="200px"'},
                {text: '100px', value: 'height="100px"'},

            ]
        },
        {
            type: 'button', 
            name: 'button', 
            label: 'Background Image',
            text: 'Select image',
            icon: 'icon dashicons-format-gallery',
             onclick: function(e) {
               e.preventDefault();
               UXgalleryModal();
            },
        },
        {
            type: 'listbox', 
            name: 'parallax', 
            label: 'Background Parallax', 
            'values': [
                {text: 'Disabled', value:'parallax="0"'},
                {text: 'Low', value: 'parallax="1"'},
                {text: 'Normal', value: 'parallax="3"'},
                {text: 'Stronger', value: 'parallax="6"'},
                {text: 'Strongest', value: 'parallax="9"'},
            ]
        },

        {
            type: 'listbox', 
            name: 'parallax_text', 
            label: 'Text Parallax', 
            'values': [
                {text: 'Disabled', value: 'parallax="0"'},
                {text: 'Low', value: 'parallax="1"'},
                {text: 'Normal', value: 'parallax_="3"'},
                {text: 'Stronger', value: 'parallax="6"'},
                {text: 'Strongest', value: 'parallax="9"'},
            ]
        },
        {
            type: 'listbox', 
            name: 'text_animation', 
            label: 'Text Animation', 
            'values': uxAnimations
        },
        {
            type: 'listbox', 
            name: 'text_color', 
            label: 'Text color', 
            tooltip: 'Select light/dark color on text',
            'values': [
                {text: 'Light text', value: 'text_color="light"', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 6636 characters]");'},
                {text: 'Dark text', value: 'text_color="dark"', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 6648 characters]");'},
                
            ]
        },
        {
            type: 'listbox', 
            name: 'text_layout', 
            label: 'Text Layout', 
            tooltip: 'Select predefined text position',
            'values': [
                {text:'Text Center', value: 'text_align="center" text_pos="center" text_width="70%"', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 4524 characters]");'},
                {text:'Text Left', value: 'text_align="left" text_pos="left center" text_width="40%" text_bg=""', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 4512 characters]");'},
                {text:'Text Left Centered', value: 'text_align="center" text_pos="left center" text_width="40%" text_bg=""', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 4544 characters]");'},
                {text:'Text Right', value: 'text_align="right" text_pos="right center" text_width="40%" text_bg=""', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 4516 characters]");'},
                {text:'Text Right Centered', value: 'text_align="center" text_pos="right center" text_width="40%" text_bg=""', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 4480 characters]");'},
                {text:'Text Bottom Center', value: 'text_align="center" text_pos="bottom center" text_width="40%" text_bg=""', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 4504 characters]");'},
                {text:'Text Top Left', value: 'text_align="left" text_pos="left top" text_width="40%" text_bg=""', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 4548 characters]");'},
                {text:'Text Top Center', value: 'text_align="center" text_pos="top center" text_width="70%" text_bg=""', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 4544 characters]");'},
                {text:'Boxed Text Left', value: 'text_align="left" text_pos="left center" text_width="40%" text_bg="#000" text_bg_opacity=0.8" padding="30px"', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 4560 characters]");'},
                {text:'Boxed Text Right', value: 'text_align="left" text_pos="right center" text_width="40%" text_bg="#000" text_bg_opacity=0.8" padding="30px"', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 4588 characters]");'},
                {text:'Boxed Text Center', value: 'text_align="center" text_pos="center" text_width="40%" text_bg="#000" text_bg_opacity=0.8" padding="30px"', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 4508 characters]");'},
                {text:'Boxed Badge style', value: 'text_align="center" text_pos="bottom full-width" text_bg="#000" text_bg_opacity=0.8" padding="10px"', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 4416 characters]");'},
            ]
        },
        {
            type: 'listbox', 
            name: 'text_content', 
            label: 'Text Content', 
            tooltip :'Select predefined text, you can change this in the editor',
            'values': [
                {text: 'Default', value: '<h4 class="alt-font">Smaller On Top</h4><p>___</p><h1>BIG HEADLINE</h1><h4 class="thin-font">A smaller text under headline</h4><p>[button text="button" link="#" size="medium" style="is-outline white"]</p>', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 12108 characters]");'},
                {text: 'Big banner', value: '<h3 class="alt-font">Smaller On Top</h3><p>____</p><h1 class="h-large">BIG HEADLINE</h1><h4 class="thin-font">A smaller text under headline</h4><p>[button text="button" link="#" size="medium" style="is-outline white"] <br>[button text="button" link="#" size="medium" style="is-outline white"] <br>[button text="button" link="#" size="medium" style="is-outline white"]</p>', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 12172 characters]");'},
                {text: 'Simple', value: '<h1>BIG HEADLINE</h1><h4 class="thin-font">A smaller text under headline</h4>', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 9192 characters]");'},
                {text: 'Simple two buttons', value: '<h2>BIG HEADLINE</h2><h4 class="thin-font">A smaller text under headline</h4><p>[button text="button" link="#" size="medium" style=""] <br>[button text="button" link="#" size="medium" style="is-outline"]</p>', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 10636 characters]");'},
                {text: 'Bordered Headline', value: '<h2 class="text-bordered-white">BIG HEADLINE</h2><h4 class="thin-font">A smaller text under headline</h4>', style: list_style+' background-image: url("data:image/png;base64, [encoded data, 8496 characters]");'},
            ]
        },
        {
            type: 'listbox', 
            name: 'banner_effect', 
            label: 'Effects', 
            'values': [
                {text: 'No effect', value: 'effect=""'},
                {text: 'Snow', value: 'effect="snow"'},
                {text: 'Confetti', value: 'effect="confetti"'},
                {text: 'Sliding Glass', value: 'effect="sliding-glass"'},
                {text: 'Sparkle', value: 'effect="sparkle"'},
                {text: 'Rain', value: 'effect="rain"'},
            ]
        },
    ],
        onsubmit: function( e ) {
            var banner_content = '[ux_banner '+e.data.parallax+' bg="'+ux_selected_image+'" '+e.data.height+' '+e.data.banner_effect+'][text_box '+e.data.text_color+' '+e.data.text_layout+'  '+e.data.parallax_text+' '+e.data.text_animation+'] '+e.data.text_content+' [/text_box] [/ux_banner]';
            if(e.data.text_color == 'text_color="dark"'){
              var banner_content = banner_content.replace(/white/g, "dark");
              var banner_content = banner_content.replace(/#000/g, "#fff");
            }
            editor.insertContent(banner_content);
        }
    });
}
// END BANNERS


/* ADD SECTION */
function ux_add_section(editor){
    ux_selected_image = 'http://imageurl';

    editor.windowManager.open( {
        title: 'Insert Section',
        body: [
        {
            type: 'textbox', 
            name: 'padding', 
            label: 'Padding',
            value: '30px',
        },
        {
            type: 'button', 
            name: 'button', 
            label: 'Background Image',
            text: 'Select image',
            icon: 'icon dashicons-format-gallery',
             onclick: function(e) {
               e.preventDefault();
               UXgalleryModal();
            },
        },
        {
            type: 'listbox', 
            name: 'parallax', 
            label: 'Background Parallax', 
            'values': [
                {text: 'Disabled', value:'parallax="0"'},
                {text: 'Low', value: 'parallax="1"'},
                {text: 'Normal', value: 'parallax="3"'},
                {text: 'Stronger', value: 'parallax="6"'},
                {text: 'Strongest', value: 'parallax="9"'},
            ]
        },
        {
            type: 'listbox', 
            name: 'parallax_text', 
            label: 'Text Parallax', 
            'values': [
                {text: 'Disabled', value: 'parallax_text="0"'},
                {text: 'Low', value: 'parallax_text="1"'},
                {text: 'Normal', value: 'parallax_text="3"'},
                {text: 'Stronger', value: 'parallax_text="6"'},
                {text: 'Strongest', value: 'parallax_text="9"'},
            ]
        },
        {
            type: 'textbox', 
            name: 'margin', 
            label: 'Margin bottom',
            value: '0px',
        },
        {
            type: 'listbox', 
            name: 'text_color', 
            label: 'Text Color', 
            'values': [
                {text: 'Normal', value: ''},
                {text: 'Light (for dark backgrounds)', value: 'dark="true"'},
            ]
        }

    ],
        onsubmit: function( e ) {
            editor.insertContent( '[section bg="'+ux_selected_image+'" title="" padding="'+e.data.padding+'" '+e.data.text_color+' '+e.data.parallax_text+' '+e.data.parallax+' margin="'+e.data.margin+'"]<br><br>[/section]');
        }
    });
}
// END SECTIIONS


/* ADD ROW */
function ux_add_row(editor){
    editor.windowManager.open( {
        title: 'Insert Row',
        body: [
        {
            type: 'listbox', 
            name: 'columns', 
            label: 'Columns', 
            'values': [
                {text: '1/1 (Full width)', value: '1'},
                {text: '1/2 | 1/2', value: '2'},
                {text: '1/3 | 1/3 | 1/3', value:'3'},
                {text: '1/4 | 1/4 | 1/4 | 1/4', value:'4'},
                {text: '1/6 | 1/6 | 1/6 | 1/6 | 1/6 | 1/6', value: '6'},
                {text: '1/3 | 2/3', value:'1-3'},
                {text: '2/4 | 1/4 | 1/4', value:'2-1-1'},
            ]
        },
        {
            type: 'listbox', 
            name: 'column_animate', 
            label: 'Animate Columns?', 
            'values': uxAnimations
              
            
        },
        {
            type: 'listbox', 
            name: 'columns_hover', 
            label: 'Column Hover effect', 
            'values': [
                {text: 'No Effect', value:' '},
                {text: 'Focus', value: 'hover="focus"'},
                {text: 'Fade In', value:'hover="fade"'},
                {text: 'Blur', value: 'hover="blur"'},
                {text: 'Grayscale', value: 'hover="grayscale"'},
            ]
        },
        {
            type: 'listbox', 
            name: 'row_style', 
            label: 'Column Style', 
            'values': [
                {text: 'Default', value:' '},
                {text: 'Collapsed (no padding)', value: 'style="collapse"'},
                {text: 'Divided with lines', value:'style="divided"'},
                {text: 'Boxed style', value:'style="boxed"'},
            ]
        },
         {
            type: 'listbox', 
            name: 'column_content', 
            label: 'Column Content', 
            'values': [
                {text: 'Blank', value:'Insert content here...<br>'},
                {text: 'Text', value:'<h3>Add a title here</h3>[divider]<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>'},
                {text: 'Featured Box - Icon Top', value:'[featured_box title="Title text" img="http://iconurl" img_width="" pos="center" link=""]<p>Featured box text</p>[/featured_box]<br>'},
                {text: 'Featured Box - Icon Left', value:'[featured_box title="Title text" img="http://iconurl" img_width="" pos="left" link=""]<p>Featured box text</p>[/featured_box]<br>'},
                {text: 'Team Members', value:'[team_member name="Name" title="Title" facebook="http://" twitter="http://" pinterest="http://"  img="http://imageurl"]<br>Team member description<br>[/team_member]<br>'},
                {text: 'Price Table', value:'[ux_price_table title="Awesome title" featured="false" description="This is a description" button_text="Order Now" button_link="#"]<br>[bullet_item text="This is a bullet item"]<br>[bullet_item text="This is a bullet item"]<br>[bullet_item text="This is a bullet item"]<br>[/ux_price_table]<br>'},
                {text: 'Testimonial', value:'[testimonial image="http://imageurl" name="Author name" company="Company name" stars="5"]<br> Add testimonial text here <br>[/testimonial]<br>'},
            ]
        }

    ],
        onsubmit: function( e ) {
            if(e.data.columns == '1'){
               var insertContent = '[col span="1/1" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>';
            }
             if(e.data.columns == '2'){
               var insertContent = '[col span="1/2" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/2" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>';
            }
            if(e.data.columns == '3'){
               var insertContent = '[col span="1/3" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/3" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/3" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>';
            }
            if(e.data.columns == '4'){
               var insertContent = '[col span="1/4" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/4" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/4" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/4" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>';
            }
            if(e.data.columns == '6'){
               var insertContent = '[col span="1/6" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/6" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/6" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/6" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/6" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/6" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/6" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br> ';
            }
            if(e.data.columns == '1-3'){
               var insertContent = '[col span="1/3" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="2/3" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>';
            }
            if(e.data.columns == '2-1-1'){
               var insertContent = '[col span="2/4" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/4" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>[col span="1/4" '+e.data.columns_hover+' '+e.data.column_animate+']<br>'+e.data.column_content+'<br/>[/col]<br>';
            }
            editor.insertContent('[row '+e.data.row_style+']<p>'+insertContent+'</p>[/row]<br>');
        }
    });
}
// END ROW


var uxAnimations = [
    {text: 'No Animations', value:''},
    {text: 'FadeInLeft', value:'animate="fadeInLeft"'},
    {text: 'FadeInRight', value: 'animate="fadeInRight"'},
    {text: 'Fade In Up', value: 'animate="fadeInUp"'},
    {text: 'Fade In Down', value: 'animate="fadeInDown"'},
    {text: 'Bounce In', value: 'animate="bounceIn"'},
    {text: 'Bounce In Up', value: 'animate="bounceInUp"'},
    {text: 'Bounce In Down', value: 'animate="bounceInDown"'},
    {text: 'Bounce In Left', value: 'animate="bounceInLeft"'},
    {text: 'Bounce In Right', value: 'animate="bounceInRight"'},
    {text: 'Rotate In Left', value: 'animate="rotateInUpLeft"'},
    {text: 'Rotate In Right', value: 'animate="rotateInDownRight"'},
    {text: 'Flip In X', value: 'animate="flipInX"'},
    {text: 'Flip In Y', value: 'animate="flipInY"'},
]


function UXgalleryModal(){
    // Uploading files
var file_frame;
 
    // If the media frame already exists, reopen it.
    if ( file_frame ) {
      file_frame.open();
      return;
    }
 
    // Create the media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
      title: jQuery( this ).data( 'uploader_title' ),
      button: {
        text: jQuery( this ).data( 'uploader_button_text' ),
      },
      multiple: false  // Set to true to allow multiple files to be selected
    });
 
    // When an image is selected, run a callback.
    file_frame.on( 'select', function() {
      // We set multiple to false so only get one image from the uploader
      attachment = file_frame.state().get('selection').first().toJSON();
      ux_selected_image = attachment.url;
      jQuery('.mce-i-icon.dashicons-format-gallery').parent().addClass('image-bg-button');
      jQuery('.mce-i-icon.dashicons-format-gallery').parent().css('background-image','url('+attachment.url+')');
      // Do something with attachment.id and/or attachment.url here
    });
 
    // Finally, open the modal
    file_frame.open();
}

})();
