(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="list1">List1</option>\
					<option value="list2">List2</option>\
					<option value="list3">List3</option>\
					<option value="list4">List4</option>\
					<option value="list5">List5</option>\
					<option value="list6">List6</option>\
					<option value="list7">List7</option>\
					<option value="list8">List8</option>\
					<option value="list9">List9</option>\
					<option value="list10">List10</option>\
					<option value="list11">List11</option>\
					<option value="list12">List12</option>\
				</select><br />\
				<small>select a list color.</small></td>\
			</tr>\
			<tr>\
				<th><label for="list-color">List Color</label></th>\
				<td><select name="color" id="list-color">\
					<option value="black">Black</option>\
					<option value="blue">Blue</option>\
					<option value="gray">Gray</option>\
					<option value="green">Green</option>\
					<option value="orange">Orange</option>\
					<option value="pink">Pink</option>\
					<option value="red">Red</option>\
				</select><br />\
				<small>select a list color.</small></td>\
			</tr>\
		</table>\
		<p class="submit">\
			<input type="button" id="list-submit" class="button-primary" 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':'',
				'color':''
		};
			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>\
	<li>Content Here...</li>\
	<li>Content Here...</li>\
	<li>Content Here...</li>\
	</ul>\[/list]';
			
			// inserts the shortcode into the active editor
			tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);
			
			// closes Thickbox
			tb_remove();
		});
	});
})();
