(function() {
    tinymce.PluginManager.add('vf_layouts_mce_button', function( editor, url ) {
        editor.addButton( 'vf_layouts_mce_button', {
            title:'Layouts',
            text: 'Layouts',
            type: 'menubutton',
			// icon: 'vf_layouts_icon',
			type: 'menubutton',
			menu: [
				{
					text: 'Columns',
					menu: [
						{
            		text: 'Row',
            		value: '[ventoux_row]<br/><p>PLACE LAYOUTS INSIDE THIS ROW</p><br/> [/ventoux_row]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
						{
            		text: 'Row full width',
            		value: '[ventoux_row_full]<br/> <p>PLACE LAYOUTS INSIDE THIS ROW</p><br/> [/ventoux_row_full]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
            	{
            		text: '12 columns',
            		value: '[twelve_columns]<br/><p>PLACE YOUR CONTENT HERE</p><br/> [/twelve_columns]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
				{
            		text: '11 columns',
            		value: '[eleven_columns]<br/><p>PLACE YOUR CONTENT HERE</p><br/> [/eleven_columns]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
				{
            		text: '10 columns',
            		value: '[ten_columns]<br/>PLACE YOUR CONTENT HERE</p><br/> [/ten_columns]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
				{
            		text: '9 columns',
            		value: '[nine_columns]<br/> <p>PLACE YOUR CONTENT HERE</p><br/> [/nine_columns]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
				{
            		text: '8 columns',
            		value: '[eight_columns]<br/> <p>PLACE YOUR CONTENT HERE</p><br/> [/eight_columns]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
				{
            		text: '7 columns',
            		value: '[seven_columns]<br/><p>PLACE YOUR CONTENT HERE</p><br/> [/seven_columns]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
				{
            		text: '6 columns',
            		value: '[six_columns]<br/><p>PLACE YOUR CONTENT HERE</p><br/> [/six_columns]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
				{
            		text: '5 columns',
            		value: '[five_columns]<br/><p>PLACE YOUR CONTENT HERE</p><br/> [/five_columns]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
				{
            		text: '4 columns',
            		value: '[four_columns]<br/><p>PLACE YOUR CONTENT HERE</p><br/> [/four_columns]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
				{
            		text: '3 columns',
            		value: '[three_columns]<br/><p>PLACE YOUR CONTENT HERE</p><br/> [/three_columns]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
				{
            		text: '2 columns',
            		value: '[two_columns]<br/><p>PLACE YOUR CONTENT HERE</p><br/> [/two_columns]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
				{
            		text: '1 column',
            		value: '[one_column]<br/><p>PLACE YOUR CONTENT HERE</p><br/> [/one_column]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
				{
            		text: 'Clearing',
					classes: 'tester',
            		value: '[clearing][/clearing]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
					]
				},
			
				
				{
					text: 'Pre defined layouts',
					menu: [
						{
            		text: 'Full width',
            		value: '[ventoux_row]<br/><br/>[twelve_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/twelve_columns]<br/><br/>[/ventoux_row]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
						{
            		text: 'Half and half',
            		value: '[ventoux_row]<br/><br/>[six_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/six_columns]<br/><br/>[six_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/six_columns]<br/><br/>[/ventoux_row]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
						{
            		text: 'Three columns',
            		value: '[ventoux_row]<br/><br/>[four_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/four_columns]<br/><br/>[four_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/four_columns]<br/><br/>[four_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/four_columns]<br/><br/>[/ventoux_row]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
						{
            		text: 'Four columns',
            		value: '[ventoux_row]<br/><br/>[three_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/three_columns]<br/><br/>[three_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/three_columns]<br/><br/>[three_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/three_columns]<br/><br/>[three_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/three_columns]<br/><br/>[/ventoux_row]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
						
						{
            		text: 'Left sidebar',
            		value: '[ventoux_row]<br/><br/>[three_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/three_columns]<br/><br/>[nine_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/nine_columns]<br/><br/>[/ventoux_row]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},
					{
            		text: 'Right sidebar',
            		value: '[ventoux_row]<br/><br/>[nine_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/nine_columns]<br/><br/>[three_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/three_columns]<br/><br/>[/ventoux_row]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},	
						
					{
            		text: 'Three six three',
            		value: '[ventoux_row]<br/><br/>[three_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/three_columns]<br/><br/>[six_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/six_columns]<br/><br/>[three_columns]<br/><br/><p>YOUR CONTENT HERE</p><br/><br/>[/three_columns]<br/><br/>[/ventoux_row]',
            		onclick: function() {
            			editor.insertContent(this.value());
            		}
           		},		
            	
					]
				},
			]
		});
	});
})();

