// closure to avoid namespace collision
(function(){
	// creates the plugin
	tinymce.create('tinymce.plugins.tinymce_button', {
		// creates control instances based on the control's id.
		// our button's id is "dd_button"
		createControl : function(id, controlManager) {
			if (id == 'dd_button') {
				// creates the button
				var button = controlManager.createButton('dd_button', {
					title : 'Custom Shortcodes', // title of the button
					image : '../wp-content/themes/aerial/lib/admin/images/avatar.png',  // path to the button's image
					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( 'Styles Shortcodes', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=shortcode-form' );
					}
				});
				return button;
			}
			return null;
		}
	});
	
	// registers the plugin. DON'T MISS THIS STEP!!!
	tinymce.PluginManager.add('tinymce_button', tinymce.plugins.tinymce_button);
	
	// 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="shortcode-form"><table id="shortcode-table" class="form-table">\
				<th><label for="shortcode-code">Select Custom Style Shortcode</label></th>\
				<td><select name="code" id="shortcode-code">\
					<option value="checklist">Check list</option>\
					<option value="arrowlist">Arrow list</option>\
					<option value="infobox">Info box</option>\
					<option value="notebox">Note box</option>\
					<option value="successbox">Success box</option>\
					<option value="warningbox">Warning box</option>\
					<option value="errorbox">Error box</option>\
					<option value="one_third">One third</option>\
					<option value="one_third_last">One third last</option>\
					<option value="two_third">Two third</option>\
					<option value="two_third_last">Two third last</option>\
					<option value="one_half">One half</option>\
					<option value="one_half_last">One half last</option>\
				</select>\
			</tr>\
		</table>\
		<p class="submit">\
			<input type="button" id="shortcode-submit" class="button-primary" value="Insert Shortcode" name="submit" />\
		</p>\
		</div>');
		
		var table = form.find('table');
		form.appendTo('body').hide();
		
		// handles the click event of the submit button
		form.find('#shortcode-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 = { 
				'code'       : '',
				};
			var shortcode = '[';
			
			for( var index in options) {
				var value = table.find('#shortcode-' + index).val();
				
				// attaches the attribute to the shortcode only if it's different from the default value
				if ( value !== options[index] )
					shortcode +=  value + ']Insert text here[/' + value + ']';
			}
			
			
			// inserts the shortcode into the active editor
			tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);
			
			// closes Thickbox
			tb_remove();
		});
	});
})()