(function() {
    tinymce.create('tinymce.plugins.row', {
        init: function(ed, url) {
            ed.addButton('row', {
                title: 'row',
                image: url + '/row.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('row Shortcode', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=row-form');
                }
            });
        },
        createControl: function(n, cm) {
            return null;
        },
        getInfo: function() {
            return {
                longname: "row",
                author: 'Themeonlab',
                authorurl: 'http://www.themeonlab.com',
                infourl: 'http://www.themeonlab.com',
                version: "1.0"
            };
        }
    });
    tinymce.PluginManager.add('row', tinymce.plugins.row);
    // 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="row-form"><table id="row-table" class="form-table">\
			<tr>\
				<th><label for="row_class">CSS Class</label></th>\
				<td><input type="text" name="class" id="row_class" value="" /><br />\
				<small>Class Fro Custome CSS.</small></td>\
			</tr>\
		</table>\
		<p class="submit">\
			<input type="button" id="row_submit" class="button-primary" value="Insert Button" name="submit" />\
		</p>\
		</div>');

        var table = form.find('table');
        form.appendTo('body').hide();

        // handles the click event of the submit button
        form.find('#row_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 = {
                'class'		: ''
            };
            var shortcode = '[rms-row';

            for (var index in options) {
                var value = table.find('#row_' + 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 += '][/rms-row]';

            // inserts the shortcode into the active editor
            tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

            // closes Thickbox
            tb_remove();
        });
    });
})();