(function($)
{
	$.Redactor.prototype.clips = function()
	{
		return {
			init: function()
			{
				var items = [
					// ['Media Object', '[mediaobject id=1,2,3,4]'],
					// ['Tabs', '[tabs id=1,2,3,4]'],
					// ['Cards', '[cards id=1,2,3,4]'],
					// ['Programme structure', '[programme-structure]'],
					// ['Programme duration', '[programme-duration]'],
					// ['Two column', '<div class="row"><div class="col-sm-6"><div class="row"><div class="col-sm-4"><img src="http://via.placeholder.com/150x150"></div><div class="col-sm-8">Content here...</div></div></div><div class="col-sm-6"><div class="row"><div class="col-sm-4"><img src="http://via.placeholder.com/150x150"></div><div class="col-sm-8">Content here...</div></div></div></div><hr style="opacity: 0">'],
					// ['Tabs', '<ul class="nav nav-tabs"><li class="active"><a data-toggle="tab" href="#tab1" aria-expanded="true">Tab 1</a></li><li class=""><a data-toggle="tab" href="#tab2" aria-expanded="false">Tab 2</a></li><li class=""><a data-toggle="tab" href="#tab3" aria-expanded="false">Tab 3</a></li></ul><div class="tab-content"><div class="tab-pane fade active in" id="tab1"> Content 1</div><div class="tab-pane fade" id="tab2"> Content 2</div><div class="tab-pane fade" id="tab3"> Content 3</div></div>'],
					// ['Thumbnail', '<div class="thumbnail-black text-center"><img src="http://via.placeholder.com/150x150" style="object-fit:cover;width:100%;height:100%;"><p>Title here...</p></div>']
				];

				this.clips.template = $('<ul id="redactor-modal-list">');

				for (var i = 0; i < items.length; i++)
				{
					var li = $('<li>');
					var a = $('<a href="#" class="redactor-clips-link">').html(items[i][0]);
					var div = $('<div class="redactor-clips">').hide().html(items[i][1]);

					li.append(a);
					li.append(div);
					this.clips.template.append(li);
				}

				this.modal.addTemplate('clips', '<div class="modal-section">' + this.utils.getOuterHtml(this.clips.template) + '</div>');

				var button = this.button.add('clips', 'Clips');
                this.button.setIcon(button, '<i class="re-icon-clips"></i>');
				this.button.addCallback(button, this.clips.show);

			},
			show: function()
			{
				this.modal.load('clips', 'Insert Clips', 500);

				$('#redactor-modal-list').find('.redactor-clips-link').each($.proxy(this.clips.load, this));

				this.modal.show();
			},
			load: function(i,s)
			{
				$(s).on('click', $.proxy(function(e)
				{
					e.preventDefault();
					this.clips.insert($(s).next().html());

				}, this));
			},
			insert: function(html)
			{
				this.buffer.set();
				this.air.collapsedEnd();
				this.insert.html(html);
				this.modal.close();
			}
		};
	};
})(jQuery);
