(function() {
    tinymce.create('tinymce.plugins.lists', {
        init : function(ed, url) {
            ed.addButton('lists', {
                title : 'Add a List',
                image : url+'/images/lists.png',
                onclick : function() {
// triggers the thickbox
						var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
						W = W - 80;
						H = H - 84;
						tb_show( 'Lists Shortcodes', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=list-form' );
						                }
            });
        },
        createControl : function(n, cm) {
            return null;
        }
    });
    tinymce.PluginManager.add('lists', tinymce.plugins.lists);
    
    // executes this when the DOM is ready
	jQuery(function(){
		// creates a form to be displayed everytime the button is clicked
		// you should achieve this using AJAX instead of direct html code like this
		var form = jQuery('<div id="list-form"><table id="list-table" class="form-table">\
			<tr>\
				<th><label for="list-type">List Type</label></th>\
				<td><select name="type" id="list-type">\
					<option value="icon-glass">icon-glass</option>\
					<option value="icon-music"> icon-music</option>\
					<option value="icon-search">icon-search</option>\
					<option value="icon-envelope">icon-envelope</option>\
					<option value="icon-heart">icon-heart</option>\
					<option value="icon-star">icon-star</option>\
					<option value="icon-star-empty">icon-star-empty</option>\
					<option value="icon-user">icon-user</option>\
					<option value="icon-film">icon-film</option>\
					<option value="icon-th-large">icon-th-large</option>\
					<option value="icon-th">icon-th</option>\
					<option value="icon-th-list">icon-th-list</option>\
					<option value="icon-ok">icon-ok</option>\
					<option value="icon-remove">icon-remove</option>\
					<option value="icon-zoom-in">icon-zoom-in</option>\
					<option value="icon-zoom-out">icon-zoom-out</option>\
					<option value="icon-off">icon-off</option>\
					<option value="icon-signal">icon-signal</option>\
					<option value="icon-cog">icon-cog</option>\
					<option value="icon-trash">icon-trash</option>\
					<option value="icon-home">icon-home</option>\
					<option value="icon-file">icon-file</option>\
					<option value="icon-time">icon-time</option>\
					<option value="icon-road">icon-road</option>\
					<option value="icon-download-alt">icon-download-alt</option>\
					<option value="icon-download">icon-download</option>\
					<option value="icon-upload">icon-upload</option>\
					<option value="icon-inbox">icon-inbox</option>\
					<option value="icon-play-circle">icon-play-circle</option>\
					<option value="icon-repeat">icon-repeat</option>\
					<option value="icon-refresh">icon-refresh</option>\
					<option value="icon-list-alt">icon-list-alt</option>\
					<option value="icon-lock">icon-lock</option>\
					<option value="icon-flag">icon-flag</option>\
					<option value="icon-headphones">icon-headphones</option>\
					<option value="icon-volume-off">icon-volume-off</option>\
					<option value="icon-volume-down">icon-volume-down</option>\
					<option value="icon-volume-up">icon-volume-up</option>\
					<option value="icon-qrcode">icon-qrcode</option>\
					<option value="icon-barcode">icon-barcode</option>\
					<option value="icon-tag">icon-tag</option>\
					<option value="icon-tags">icon-tags</option>\
					<option value="icon-book">icon-book</option>\
					<option value="icon-bookmark">icon-bookmark</option>\
					<option value="icon-print">icon-print</option>\
					<option value="icon-camera">icon-camera</option>\
					<option value="icon-facetime-video">icon-facetime-video</option>\
					<option value="icon-picture">icon-picture</option>\
					<option value="icon-pencil">icon-pencil</option>\
					<option value="icon-map-marker">icon-map-marker</option>\
					<option value="icon-edit">icon-edit</option>\
					<option value="icon-share">icon-share</option>\
					<option value="icon-check">icon-check</option>\
					<option value="icon-move">icon-move</option>\
					<option value="icon-chevron-right">icon-chevron-right</option>\
					<option value="icon-chevron-left">icon-chevron-left</option>\
					<option value="icon-plus-sign">icon-plus-sign</option>\
					<option value="icon-minus-sign">icon-minus-sign</option>\
					<option value="icon-remove-sign">icon-remove-sign</option>\
					<option value="icon-ok-sign">icon-ok-sign</option>\
					<option value="icon-question-sign">icon-question-sign</option>\
					<option value="icon-info-sign">icon-info-sign</option>\
					<option value="icon-screenshot">icon-screenshot</option>\
					<option value="icon-remove-circle">icon-remove-circle</option>\
					<option value="icon-ok-circle">icon-ok-circle</option>\
					<option value="icon-ban-circle">icon-ban-circle</option>\
					<option value="icon-arrow-right">icon-arrow-right</option>\
					<option value="icon-arrow-left">icon-arrow-left</option>\
					<option value="icon-share-alt">icon-share-alt</option>\
					<option value="icon-plus">icon-plus</option>\
					<option value="icon-minus">icon-minus</option>\
					<option value="icon-asterisk">icon-asterisk</option>\
					<option value="icon-exclamation-sign">icon-exclamation-sign</option>\
					<option value="icon-gift">icon-gift</option>\
					<option value="icon-leaf">icon-leaf</option>\
					<option value="icon-fire">icon-fire</option>\
					<option value="icon-eye-open">icon-eye-open</option>\
					<option value="icon-eye-close">icon-eye-close</option>\
					<option value="icon-warning-sign">icon-warning-sign</option>\
					<option value="icon-plane">icon-plane</option>\
					<option value="icon-calendar">icon-calendar</option>\
					<option value="icon-random">icon-random</option>\
					<option value="icon-comment">icon-comment</option>\
					<option value="icon-retweet">icon-retweet</option>\
					<option value="icon-shopping-cart">icon-shopping-cart</option>\
					<option value="icon-folder-close">icon-folder-close</option>\
					<option value="icon-folder-open">icon-folder-open</option>\
					<option value="icon-hdd">icon-hdd</option>\
					<option value="icon-bullhorn">icon-bullhorn</option>\
					<option value="icon-bell">icon-bell</option>\
					<option value="icon-certificate">icon-certificate</option>\
					<option value="icon-thumbs-up">icon-thumbs-up</option>\
					<option value="icon-thumbs-down">icon-thumbs-down</option>\
					<option value="icon-hand-right">icon-hand-right</option>\
					<option value="icon-hand-left">icon-hand-left</option>\
					<option value="icon-hand-up">icon-hand-up</option>\
					<option value="icon-hand-down">icon-hand-down</option>\
					<option value="icon-circle-arrow-right">icon-circle-arrow-right</option>\
					<option value="icon-circle-arrow-left">icon-circle-arrow-left</option>\
					<option value="icon-circle-arrow-up">icon-circle-arrow-up</option>\
					<option value="icon-circle-arrow-down">icon-circle-arrow-down</option>\
					<option value="icon-globe">icon-globe</option>\
					<option value="icon-wrench">icon-wrench</option>\
					<option value="icon-tasks">icon-tasks</option>\
					<option value="icon-filter">icon-filter</option>\
					<option value="icon-briefcase">icon-briefcase</option>\
					<option value="icon-fullscreen">icon-fullscreen</option>\
				</select><br />\
		<p class="submit">\
			<input type="button" id="list-submit" class="lioButton" value="Insert List" name="submit" />\
		</p>\
		</div>');
		var table = form.find('table');
		form.appendTo('body').hide();
		
		// handles the click event of the submit button
		form.find('#list-submit').click(function(){
			// defines the options and their default values
			// again, this is not the most elegant way to do this
			// but well, this gets the job done nonetheless
			var options = { 
				'type':'',
		};
			var shortcode = '[list';
			
			for( var index in options) {
				var value = table.find('#list-' + index).val();
				
				// attaches the attribute to the shortcode only if it's different from the default value
				if ( value !== options[index] )
					shortcode += ' ' + index + '="' + value + '"';
			}
			
			shortcode += ']<ul>\
	<li>Content Here...</li>\
	</ul>\[/list]';
			
			// inserts the shortcode into the active editor
			tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);
			
			// closes Thickbox
			tb_remove();
		});
	});
})();
