//////////////////////////////////////////////////////////////////
// Add KatonPress Button
//////////////////////////////////////////////////////////////////

(function() {
    tinymce.PluginManager.add('kb_button', function( editor, url ) {
        editor.addButton( 'kb_button', {
            title: 'KB Shortcodes',
			type: 'menubutton',
            icon: 'icon',
            menu: [
			
				{
                    text: 'Layout',
                    value: '',
                    onclick: function() {
                        //editor.insertContent(this.value());
                    },
                    menu: [
                       				{
                    text: 'Row',
                    value: '',
            
			
					   onclick: function() {
						editor.windowManager.open( {
						title: 'Add Row',
						body: [
						{
							type: 'textbox',
							name: 'padding',
							label: 'Padding'
						},
						{
							type: 'textbox',
							name: 'custom_class',
							label: 'Custom Class'
						},
						],
						onsubmit: function( e ) {
							editor.insertContent( '[row padding="' + e.data.padding + '" class="' + e.data.custom_class + '"] Your Content Here [/row]');
						}
						});
					} 
					
					
						},
                        				{
                    text: 'Column',
                    value: '',
            
			
               onclick: function() {
				editor.windowManager.open( {
				title: 'Choose column',
				body: [{
					type: 'listbox', 
					name: 'width', 
					label: 'Column Width', 
					'values': [
						{text: '1/1', value: '1/1'},
						{text: '1/2', value: '1/2'},
						{text: '1/3', value: '1/3'},
						{text: '1/4', value: '1/4'},
						{text: '1/6', value: '1/6'},
						{text: '2/3', value: '2/3'},
						{text: '3/4', value: '3/4'}
					]
				},
				{
					type: 'textbox',
					name: 'padding',
					label: 'Padding'
				},
				{
					type: 'textbox',
					name: 'custom_class',
					label: 'Custom Class'
				},
				{
					type: 'listbox', 
					name: 'animation', 
					label: 'Animation', 
					'values': [
						{text: 'None', value: ''},
						{text: 'Fade In', value: 'fadeIn'},
						{text: 'fade In Right', value: 'fadeInRight'},
						{text: 'fade In Left', value: 'fadeInLeft'},
						{text: 'fade In Top', value: 'fadeInUp'},
						{text: 'fade In Bottom', value: 'fadeInDown'},
						{text: 'fade In Right Big', value: 'fadeInRightBig'},
						{text: 'fade In Left Big', value: 'fadeInLeftBig'},
						{text: 'fade In Top Big', value: 'fadeInUpBig'},
						{text: 'fade In Bottom Big', value: 'fadeInDownBig'},
					]
				},
				],
				onsubmit: function( e ) {
					editor.insertContent( '[column width="' + e.data.width + '" padding="' + e.data.padding + '" class="' + e.data.custom_class + '" animation="' + e.data.animation + '"] Your Content Here [/column]');
				}
					});
				} 
					
					
						},
                    ]
                },
				
				{
                    text: 'Divider',
                    value: '[divider]',
                    onclick: function() {
                        editor.insertContent(this.value());
                    }
                },
				
				
				{
                    text: 'Title',
                    value: '[title]Your Title Here[/title]',
                    onclick: function() {
                        editor.insertContent(this.value());
                    }
                },
				
								
                {
                    text: 'Button',
                    value: '',
            
			onclick: function() {
			editor.windowManager.open( {
				title: 'Insert Button',
				body: [{
					type: 'textbox',
					name: 'title',
					label: 'Button title'
				},
				{
					type: 'textbox',
					name: 'url',
					label: 'Button Link'
				},
				{
					type: 'listbox', 
					name: 'target', 
					label: 'Target', 
					'values': [
						{text: 'Open in new window', value: '_blank'},
						{text: 'Open in same window', value: '_self'},
					]
				},
				{
					type: 'listbox', 
					name: 'bgcolor', 
					label: 'Background Color', 
					'values': [
						{text: 'Theme Color', value: 'theme_color'},
						{text: 'Border', value: 'border'},
					]
				},
				{
					type: 'listbox', 
					name: 'textcolor', 
					label: 'Text Color', 
					'values': [
						{text: 'Theme Color', value: 'theme_color'},
						{text: 'White', value: 'white'},
						{text: 'Dark', value: 'dark'},
					]
				},
				{
					type: 'listbox', 
					name: 'type', 
					label: 'Style', 
					'values': [
						{text: 'Slant Button', value: 'slant'},
						{text: 'Default', value: 'default'},
					]
				},
				{
					type: 'textbox',
					name: 'icon',
					label: 'Icon'
				},
				{
					type: 'listbox', 
					name: 'align', 
					label: 'Align', 
					'values': [
						{text: 'Left', value: 'left'},
						{text: 'Center', value: 'center'},
						{text: 'Right', value: 'right'},
					]
				}],
				onsubmit: function( e ) {
					editor.insertContent( '[button title="' + e.data.title + '" link="' + e.data.url + '" target="' + e.data.target + '" bgcolor="' + e.data.bgcolor + '" textcolor="' + e.data.textcolor + '" icon="' + e.data.icon + '" type="' + e.data.type + '" align="' + e.data.align + '"]');
				}
			});
		}
			

                },
				
				{
                    text: 'Icon',
                    value: '[icon name="icon name"]',
                    onclick: function() {
                        editor.insertContent(this.value());
                    }
                },
				
				
				{
                    text: 'Portfolio',
                    value: '',
                
				onclick: function() {
				editor.windowManager.open( {
				title: 'Porfolio Option',
				body: [{
					type: 'listbox', 
					name: 'col', 
					label: 'Column Grid', 
					'values': [
						{text: 'Three', value: '3'},
						{text: 'Four', value: '4'},
					]
				},
				{
					type: 'textbox',
					name: 'items',
					label: 'Items'
				},
				{
					type: 'textbox',
					name: 'hide_cat',
					label:'Hide Cat'
				},
				],
				onsubmit: function( e ) {
					editor.insertContent( '[portfolio items="' + e.data.items + '" col="' + e.data.col + '" hide_cat="' + e.data.hide_cat + '" ]');
				}
			});
		} 
                },
						
				{
                    text: 'Team',
                    value: '',
                
				onclick: function() {
				editor.windowManager.open( {
				title: 'Team Option',
				body: [{
					type: 'listbox', 
					name: 'style', 
					label: 'Team Style', 
					'values': [
						{text: 'Modern', value: 'modern'},
						{text: 'Classic', value: 'classic'},
					]
				},
				{
					type: 'textbox',
					name: 'items',
					label: 'Items'
				},

				],
				onsubmit: function( e ) {
					editor.insertContent( '[team items="' + e.data.items + '" style="' + e.data.style + '" ]');
				}
			});
		} 
                },
				
				{
                    text: 'Testimonial',
                    value: '[testimonial items="8"]',
                    onclick: function() {
                        editor.insertContent(this.value());
                    }
                },
				
				{
                    text: 'Logos',
                    value: '[logos][logo]image url[/logo][logo]image url[/logo][/logos]',
                    onclick: function() {
                        editor.insertContent(this.value());
                    }
                },
				
				{
                    text: 'Recent Posts',
                    value: '[recent_posts col="3"]',
                    onclick: function() {
                        editor.insertContent(this.value());
                    }
                },
				
				
				{
                    text: 'Boxes',
                    value: '',
                    onclick: function() {
                       // editor.insertContent(this.value());
                    },
                    menu: [
                   {
                    text: 'Icon Box',
                    value: '',
            
						onclick: function() {
						editor.windowManager.open( {
							title: 'Insert Icon Box',
							body: [{
								type: 'textbox',
								name: 'title',
								label: 'Box title'
							},
							{
								type: 'textbox',
								name: 'content',
								label: 'Box Content'
							},
							{
								type: 'textbox',
								name: 'icon',
								label: 'Icon Name'
							},
							{
								type: 'listbox', 
								name: 'position', 
								label: 'Icon Position', 
								'values': [
									{text: 'Top', value: 'top'},
									{text: 'Left', value: 'left'},
								]
							},
							{
								type: 'textbox', 
								name: 'btntxt', 
								label: 'Button Text', 
							},
							{
								type: 'textbox', 
								name: 'btnlink', 
								label: 'Button Link', 
							}
							],
							onsubmit: function( e ) {
								editor.insertContent( '[iconbox title="' + e.data.title + '" content="' + e.data.content + '" icon="' + e.data.icon + '" position="' + e.data.position + '" btntxt="' + e.data.btntxt + '" btnlink="' + e.data.btnlink + '"]');
							}
						});
					}
						

					},
				
                    {
						text: 'Image Box',
						value: '',
						onclick: function() {
						editor.insertContent( '[imagebox title="Title" content="Content" image="" link="#" btntxt=""]');
					}
					},
					
                    ]
                },
				
				
				{
                    text: 'Elements',
                    value: '',
                    onclick: function() {
                        //editor.insertContent(this.value());
                    },
                    menu: [
						{
						text: 'Piechart',
						value: '[piechart title="Your Title" percent="50" color=""]',
						onclick: function() {
							editor.insertContent(this.value());
							}
						},
						{
						text: 'Progress',
						value: '[progress title="Your Title" percent="50"]',
						onclick: function() {
							editor.insertContent(this.value());
						}
						},
						{
						text: 'Count',
						value: '[count title="Your Title" num="50" icon=""]',
						onclick: function() {
							editor.insertContent(this.value());
						}
						},
                    ]
                },
				
				
           ]
        });
    });
})();
