(function($) {
    tinymce.PluginManager.add('HS_Shortcodes', function( editor, url ) {
	

        editor.addButton( 'HS_Shortcodes', {
            title: 'Insert Shortcode',
			type: 'menubutton',
            icon: 'icon hs-own-icon',
			// Menu
			menu: [
									   
			// hercules gallery
						   {
                    text: 'Hercules Carousel',
                    onclick: function() {
                        editor.windowManager.open( {

                            title: 'Insert Hercules Carousel Shortcode',
                            body: [
							{
    type: 'button',
	label: 'Select images',
    name: 'selectimagee',
    text: 'Select Images',
								classes: 'my_upload_button',

},{
                            type: 'textbox',
                            name: 'ids',
                            label: 'Selected image ids',
                            value: '',
                            classes: 'my_input_image',
							disabled: true
                        },

                            {
                                type: 'textbox',
                                name: 'rowheight',
                                label: 'Row height',
								tooltip: 'The preferred height of the carousel.',
								value: '300'
								
                            },{
                                type: 'textbox',
                                name: 'margins',
                                label: 'Margin',
								tooltip: 'Margin between the images.',
                                value: '0'
                            },{
                                type: 'listbox',
                                name: 'autoplay',
								tooltip: 'Enable autplay.',
                                label: 'Autoplay',
                                'values': [
                                    {text: 'true', value: 'true'},
                                    {text: 'false', value: 'false'}
                                ]
                            }],
			
                            onsubmit: function( e ) {
							
                                editor.insertContent( '[hercules-carousel ids="' + e.data.ids + '" rowheight="' + e.data.rowheight + '" margins="' + e.data.margins + '" autoplay="' + e.data.autoplay + '"]');
								imagesids = '';
                            }
                        });
                    }
                },
				// End hercules gallery
			// Post grid
						   {
                    text: 'Post grid',
                    onclick: function() {
                        editor.windowManager.open( {
                            title: 'Insert Post grid Shortcode',
                            body: [{
                                type: 'textbox',
                                name: 'type',
                                label: 'Type of posts',
								tooltip: 'This is the type of posts. Leave blank for posts from Blog'
  
                            },{
                                type: 'textbox',
                                name: 'num',
                                label: 'Columns',
								tooltip: 'Number of posts per row'
  
                            },{
                                type: 'textbox',
                                name: 'rows',
                                label: 'Rows',
								tooltip: 'Number of rows'
  
                            },{
                                type: 'listbox',
                                name: 'orderby',
								tooltip: 'Choose the order by mode.',
                                label: 'Order by',
                                'values': [
                                    {text: 'date', value: 'date'},
                                    {text: 'title', value: 'title'},
									{text: 'popular', value: 'popular'},
									{text: 'random', value: 'random'}
                                ]
                            },{
                                type: 'listbox',
                                name: 'order',
								tooltip: 'Choose the order mode ( from Z to A or from A to Z).',
                                label: 'Order',
                                'values': [
                                    {text: 'DESC', value: 'DESC'},
                                    {text: 'ASC', value: 'ASC'}
                                ]
                            },{
                                type: 'textbox',
                                name: 'thumbwidth',
                                label: 'Image width',
								tooltip: 'Set width for your featured images.'
  
                            },{
                                type: 'textbox',
                                name: 'thumbheight',
                                label: 'Image height',
								tooltip: 'Set height for your featured images.'
  
                            },{
                                type: 'listbox',
                                name: 'meta',
								tooltip: 'Show a post meta?',
                                label: 'Meta',
                                'values': [
                                    {text: 'yes', value: 'yes'},
                                    {text: 'no', value: 'no'}
                                ]
                            },{
                                type: 'textbox',
                                name: 'excerpt',
                                label: 'The number of words in the excerpt',
								tooltip: 'How many words are displayed in the excerpt?'
  
                            },{
                                type: 'listbox',
                                name: 'link',
								tooltip: 'Show link after posts, yes or no.',
                                label: 'Link',
                                'values': [
                                    {text: 'yes', value: 'yes'},
                                    {text: 'no', value: 'no'}
                                ]
                            },{
                                type: 'textbox',
                                name: 'linktxt',
                                label: 'Link Text',
								tooltip: 'Text for the link.'
  
                            },{
                                type: 'textbox',
                                name: 'category',
                                label: 'Which category to pull from? (for Blog posts)',
								tooltip: 'Enter the slug of the category you would like to pull posts from. Leave blank if you would like to pull from all categories.'
  
                            },{
                                type: 'textbox',
                                name: 'customcategory',
                                label: 'Which category to pull from? (for Custom posts)',
								tooltip: 'Enter the slug of the category you would like to pull posts from. Leave blank if you would like to pull from all categories.'
  
                            },{
                                type: 'textbox',
                                name: 'tag',
                                label: 'Posts tag',
								tooltip: 'Enter tags for posts filtering. Leave blank to pull all tags'
  
                            },{
                                type: 'textbox',
                                name: 'classc',
                                label: 'Custom class',
								tooltip: 'Use this field if you want to use a custom class for posts.'
  
                            }],
                            onsubmit: function( e ) {
                                editor.insertContent( '[posts_grid type="' + e.data.type + '" columns="' + e.data.num + '" rows="' + e.data.rows + '" order_by="' + e.data.orderby + '" order="' + e.data.order + '" thumb_width="' + e.data.thumbwidth + '" thumb_height="' + e.data.thumbheight + '" meta="' + e.data.meta + '" excerpt_count="' + e.data.excerpt + '" link="' + e.data.link + '" link_text="' + e.data.linktxt + '" category="' + e.data.category + '" custom_category="' + e.data.customcategory + '" tag="' + e.data.tag + '" custom_class="' + e.data.classc + '"]');
                            }
                        });
                    }
                },
				// End Post grid
			// Elements
			{
                    text: 'Elements',
            menu: [
            	{
            		text: 'Text highlight', value: '[highlight][/highlight]', onclick: function() {editor.insertContent(this.value()); }
           		},
				            	{
            		text: 'Intro text', value: '[intro][/intro]', onclick: function() {editor.insertContent(this.value()); }
           		},
				{
            		text: 'Blockquote', value: '[blockquote][/blockquote]', onclick: function() {editor.insertContent(this.value()); }
           		},
				{
            		text: 'Spacer', value: '[spacer]', onclick: function() {editor.insertContent(this.value()); }
           		},	
				// Skills
		   {
                    text: 'Skills',
                    onclick: function() {
                        editor.windowManager.open( {
                            title: 'Insert Skills Shortcode',
                            body: [{
                                type: 'textbox',
                                name: 'val',
                                label: 'Value',
								tooltip: 'Enter the value for circle (%).'
                            },
                            {
                                type: 'textbox',
                                name: 'size',
                                label: 'Size',
								tooltip: 'Enter the size of the circle. Default is 180'
                            },
                            {
                                type: 'textbox',
                                name: 'bg',
                                label: 'Background Color',
								tooltip: 'Enter the Background Color. Default is #f2f2f2'
  
                            },
							{
                                type: 'textbox',
                                name: 'fg',
                                label: 'Foreground Color',
								tooltip: 'Enter the Foreground Color. Default is #000000'
  
                            },{
                                type: 'textbox',
                                name: 'thick',
                                label: 'Thickness',
								tooltip: 'Enter the thickness of the wheel. Default is 27.'
  
                            },{
                                type: 'textbox',
                                name: 'title',
                                label: 'Title',
								tooltip: 'Enter the title.'
  
                            },{
                                type: 'textbox',
                                name: 'fm',
                                label: 'Font Family',
								tooltip: 'Enter the Font Family.'
  
                            },{
                                type: 'textbox',
                                name: 'fsize',
                                label: 'Font Size',
								tooltip: 'Enter Font Size.'
  
                            },{
                                type: 'textbox',
                                name: 'fstyle',
                                label: 'Font Style',
								tooltip: 'Enter Font Style.'
  
                            },{
                                type: 'textbox',
                                name: 'cclass',
                                label: 'Custom class',
								tooltip: 'Use this field if you want to use a custom class.'
  
                            }],
                            onsubmit: function( e ) {
                                editor.insertContent( '[skills value="' + e.data.val + '" size="' + e.data.size + '"' + ' bgcolor="' + e.data.bg + '" fgcolor="' + e.data.fg + '" donutwidth="' + e.data.thick + '" title="' + e.data.title + '" font="' + e.data.fm + '" fontsize="' + e.data.fsize + '" fontstyle="' + e.data.fstyle + '" custom_class="' + e.data.cclass + '"][/skills]');
                            }
                        });
                    }
                },
				// End Skills
				// Progressbar
						   {
                    text: 'Progressbar',
                    onclick: function() {
                        editor.windowManager.open( {
                            title: 'Insert Progressbar Shortcode',
                            body: [{
                                type: 'textbox',
                                name: 'val',
                                label: 'Value',
								tooltip: 'Enter the value for bar (%).'
                            },
                            {
                                type: 'textbox',
                                name: 'label',
                                label: 'Label',
								tooltip: 'Enter label.'
                            },{
                                type: 'textbox',
                                name: 'cclass',
                                label: 'Custom class',
								tooltip: 'Use this field if you want to use a custom class.'
  
                            }],
                            onsubmit: function( e ) {
                                editor.insertContent( '[progressbar value="' + e.data.val + '" label="' + e.data.label + '" custom_class="' + e.data.cclass + '"]');
                            }
                        });
                    }
                },
				// End Progressbar
				// Drop Cap
						   {
                    text: 'Drop Cap',
                    onclick: function() {
                        editor.windowManager.open( {
                            title: 'Insert Drop Cap Shortcode',
                            body: [{
                                type: 'listbox',
                                name: 'cclass',
								tooltip: 'Choose CSS class.',
                                label: 'Css Class',
                                'values': [
                                    {text: 'normal', value: 'normal'},
                                    {text: 'black', value: 'bl'},
                                    {text: 'white', value: 'wh'}
                                ]
                            }],
                            onsubmit: function( e ) {
                                editor.insertContent( '[dropcap custom_class="' + e.data.cclass + '"] ... [/dropcap]');
                            }
                        });
                    }
                },
				// End Drop Cap
				// Button
						   {
                    text: 'Button',
                    onclick: function() {
                        editor.windowManager.open( {
                            title: 'Insert Button Shortcode',
                            body: [{
                                type: 'textbox',
                                name: 'btxt',
                                label: 'Button Text',
								tooltip: 'Enter the text for button.'
  
                            },{
                                type: 'textbox',
                                name: 'iconame',
                                label: 'Icon name',
								tooltip: 'Enter the name of the icon. Example: icon-shopping-cart. Complete list of the icons you will find in Documentation/Icons/demo.html file.'
  
                            },{
                                type: 'textbox',
                                name: 'btlink',
                                label: 'Button Link',
								tooltip: 'Enter the link for button. (e.g. http://demolink.org)'
  
                            },{
                                type: 'listbox',
                                name: 'style',
								tooltip: 'Choose button style.',
                                label: 'Style',
                                'values': [
								    {text: 'default', value: 'default'},
                                    {text: 'primary', value: 'primary'},
                                    {text: 'success', value: 'success'},
                                    {text: 'info', value: 'info'},
									{text: 'warning', value: 'warning'},
									{text: 'danger', value: 'danger'},
									{text: 'link', value: 'link'}
                                ]
                            },{
                                type: 'listbox',
                                name: 'size',
								tooltip: 'Choose button size.',
                                label: 'Size',
                                'values': [
                                    {text: 'mini', value: 'xs'},
                                    {text: 'small', value: 'sm'},
                                    {text: 'normal', value: 'normal'},
									{text: 'large', value: 'lg'}
                                ]
                            },{
                                type: 'listbox',
                                name: 'target',
								tooltip: 'The target attribute specifies a window or a frame where the linked document is loaded.',
                                label: 'Target',
                                'values': [
                                    {text: '_blank', value: '_blank'},
                                    {text: '_self', value: '_self'},
                                    {text: '_parent', value: '_parent'},
									{text: '_top', value: '_top'}
                                ]
                            },{
                                type: 'listbox',
                                name: 'display',
								tooltip: 'Choose between inline and block display options.',
                                label: 'Display',
                                'values': [
                                    {text: 'inline', value: 'inline'},
                                    {text: 'block', value: 'block'}
                                ]
                            },{
                                type: 'textbox',
                                name: 'class',
                                label: 'Class',
								tooltip: 'Any CSS classes you want to add'
  
                            }],
                            onsubmit: function( e ) {
                                editor.insertContent( '[button text="' + e.data.btxt + '" link="' + e.data.btlink + '" style="' + e.data.style + '" size="' + e.data.size + '" target="' + e.data.target + '" display="' + e.data.display + '" class="' + e.data.class + '" icon="' + e.data.iconame + '"]');
                            }
                        });
                    }
                },
				// End Button
								// Icon
						   {
                    text: 'Icon',
                    onclick: function() {
                        editor.windowManager.open( {
                            title: 'Insert Iocn Shortcode',
                            body: [{
                                type: 'textbox',
                                name: 'iconame',
                                label: 'Icon name',
								tooltip: 'Enter the name of the icon. Example: icon-shopping-cart. Complete list of the icons you will find in Documentation/Icons/demo.html file.'
  
                            },{
                                type: 'listbox',
                                name: 'align',
								tooltip: 'Choose icons align.',
                                label: 'Align',
                                'values': [
                                    {text: 'left', value: 'left'},
                                    {text: 'right', value: 'right'},
                                    {text: 'center', value: 'center'},
									{text: 'none', value: 'none'}
                                ]
                            },{
                                type: 'listbox',
                                name: 'size',
								tooltip: 'Choose icons size.',
                                label: 'Size',
                                'values': [
                                    {text: 'icon-1x', value: 'icon-1x'},
                                    {text: 'icon-2x', value: 'icon-2x'},
                                    {text: 'icon-3x', value: 'icon-3x'},
									{text: 'icon-4x', value: 'icon-4x'},
									{text: 'icon-5x', value: 'icon-5x'},
									{text: 'icon-6x', value: 'icon-6x'},
									{text: 'icon-7x', value: 'icon-7x'},
									{text: 'icon-8x', value: 'icon-8x'},
									{text: 'icon-9x', value: 'icon-9x'}
                                ]
                            },{
                                type: 'textbox',
                                name: 'icocolor',
                                label: 'Icon color',
								tooltip: 'Enter icons color'
  
                            }],
                            onsubmit: function( e ) {
                                editor.insertContent( '[icon icons="' + e.data.iconame + '" align="' + e.data.align + '" size="' + e.data.size + '" color="' + e.data.icocolor + '"]');
                            }
                        });
                    }
                },
				// End Icon
           ]
		   },
		   // End Elements
			// Lists
			{
                    text: 'Lists',
            menu: [
            	{
            		text: 'Unstyled', value: '[list_un][/list_un]', onclick: function() {editor.insertContent(this.value()); }
           		},
				{
            		text: 'Check List 1', value: '[check_list][/check_list]', onclick: function() {editor.insertContent(this.value()); }
           		},
				{
            		text: 'Check List 2', value: '[check2_list][/check2_list]', onclick: function() {editor.insertContent(this.value()); }
           		},
				{
            		text: 'Arrow list 1', value: '[arrow_list][/arrow_list]', onclick: function() {editor.insertContent(this.value()); }
           		},
				{
            		text: 'Arrow list 2', value: '[arrow2_list][/arrow2_list]', onclick: function() {editor.insertContent(this.value()); }
           		},
				{
            		text: 'Circle List', value: '[circle_list][/circle_list]', onclick: function() {editor.insertContent(this.value()); }
           		},
				{
            		text: 'Plus List', value: '[plus_list][/plus_list]', onclick: function() {editor.insertContent(this.value()); }
           		},
				{
            		text: 'Minus List', value: '[minus_list][/minus_list]', onclick: function() {editor.insertContent(this.value()); }
           		}
           ]
		   },
		   // End Lists
		   // Video
		   {
                    text: 'Video',
                    onclick: function() {
                        editor.windowManager.open( {
                            title: 'Insert Video Shortcode',
                            body: [{
                                type: 'textbox',
                                name: 'fileURL',
                                label: 'File URL',
								tooltip: 'Enter the url to the video file. YouTube example: http://youtube.com/watch?v=3H8bnKdf654. Vimeo example: http://vimeo.com/9679622'
                            }],
                            onsubmit: function( e ) {
                                editor.insertContent( '[videos file="' + e.data.fileURL + '"][/videos]');
                            }
                        });
                    }
                },
				// End Video

				// Full width image
		   {
                    text: 'Full width image',
                    onclick: function() {
                        editor.windowManager.open( {
                            title: 'Insert Full width image Shortcode',
                            body: [{
                                type: 'textbox',
                                name: 'image',
                                label: 'Image',
								tooltip: 'Enter the image URL'
                            }],
                            onsubmit: function( e ) {
                                editor.insertContent( '[fullwidthimage photourl="' + e.data.image + '"]');
                            }
                        });
                    }
                },
				// End Full width image
				// Table
				{
            		text: 'Table', value: '[table td1="#" td2="Title" td3="Value"] [td1] 1 [/td1] [td2] some title 1 [/td2] [td3] some value 1 [/td3] [/table]', onclick: function() { editor.insertContent(this.value()); }
           		},
				// End Table
				// Accordion
				{
            		text: 'Accordion', value: '[accordions] [accordion title="title1" visible="yes"] tab content [/accordion] [accordion title="title2"] another content tab [/accordion] [/accordions]', onclick: function() { editor.insertContent(this.value()); }
           		},
				// End Accordion
				// Tabs
				{
            		text: 'Tabs', value: '[tabs tab1="Title #1" tab2="Title #2" tab3="Title #3"] [tab1] Tab 1 content... [/tab1] [tab2] Tab 2 content... [/tab2] [tab3] Tab 3 content... [/tab3] [/tabs]', onclick: function() { editor.insertContent(this.value()); }
           		},
				// End Tabs
				
		   ] 
//End
        });
    });
})(jQuery);

jQuery(document).ready(function($){
    $(document).on('click', '.mce-my_upload_button', upload_image_tinymce);
 
    function upload_image_tinymce(e) {
        e.preventDefault();
        var $input_field = $('.mce-my_input_image');
		var imagesids = '';
       var insertImage = wp.media.controller.Library.extend({
    defaults :  _.defaults({
            id:        'insert-image',
            title:      'Insert Image Url',
            allowLocalEdits: true,
            displaySettings: true,
            displayUserSettings: true,
            multiple : true,
            type : 'image'
      }, wp.media.controller.Library.prototype.defaults )
});

var frame = wp.media({
    button : { text : 'Select' },
    state : 'insert-image',
    states : [
        new insertImage()
    ]
});
		
      frame.on( 'select',function() {
var state = frame.state('insert-image');
    var selection = state.get('selection');
    var imageArray = [];

    if ( ! selection ) return;

    //#remove file nodes
    //#such as: jq("#my_file_group_field").children('div.image_group_row').remove();
    //#...

    //to get right side attachment UI info, such as: size and alignments
    //org code from /wp-includes/js/media-editor.js, arround `line 603 -- send: { ... attachment: function( props, attachment ) { ... `
    selection.each(function(attachment) {
        var display = state.display( attachment ).toJSON();
        var obj_attachment = attachment.toJSON()
        var caption = obj_attachment.caption, options, html;

        // If captions are disabled, clear the caption.
        if ( ! wp.media.view.settings.captions )
            delete obj_attachment.caption;

        display = wp.media.string.props( display, obj_attachment );

        options = {
            id:        obj_attachment.id,
            post_content: obj_attachment.description,
            post_excerpt: caption
        };

        if ( display.linkUrl )
            options.url = display.linkUrl;

        if ( 'image' === obj_attachment.type ) {
            html = wp.media.string.image( display );
            _.each({
           // align: 'align',
           // size:  'image-size',
            alt:   'image_alt'
            }, function( option, prop ) {
            if ( display[ prop ] )
                options[ option ] = display[ prop ];
            });
        } 

        //attach info to attachment.attributes object
        attachment.attributes['nonce'] = wp.media.view.settings.nonce.sendToEditor;
        attachment.attributes['attachment'] = options;
        attachment.attributes['html'] = html;
        attachment.attributes['post_id'] = wp.media.view.settings.post.id;
		
		imagesids += '' + attachment.attributes['id'] + ',';
	
});
$input_field.val(imagesids.slice(0,-1));
});
        frame.open();
    }
});