TinyMCE – How to write a plugin?

Hello,
i try to add a custom button to the WYSIWYG editor in WordPress and started with a bunch of tutorials, but somewhere i produce errors. In the end the button in the editor should open a popup window where i can add some content and add it to the wordpress editor.

What i try to do is, writing a normal wp-plugin and after activating it the new button should be visible in the WYSIWYG editor in the visual mode.

I created a normal .php file in the themes/plugins folder with the following content:

function myplugin_addbuttons() {
   // Don't bother doing this stuff if the current user lacks permissions
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
     return;

   // Add only in Rich Editor mode
   if ( get_user_option('rich_editing') == 'true') {
     add_filter("mce_external_plugins", "my_custom_plugins");
     add_filter('mce_buttons', 'register_myplugin_button');
   }
}

function register_myplugin_button($buttons) {
   array_push($buttons, "separator", "myplugin");
   return $buttons;
}

function my_custom_plugins() {

        $plugins_array = array();

        $plugins_array['a2mlandingpages'] = plugin_dir_path(__FILE__) . 'a2mlandingpages.js'; 

	return $plugins_array;
}

// init process for button control
add_action('init', 'myplugin_addbuttons');

My assumption is, that the .js file which has the following content is in the same plugin folder as the file above. Because after activating it, no file copying is necessary then. After i activate the plugin, the whole WYSIWYG editor in the visual mode is gone ??

I think something in the .js file is wrong. I am confused by this:

tinymce.create('tinymce.plugins.A2MLandingpagesPlugin', {

because the .js file is not located in wp-includes/js/tinymce/plugins…

The whole .js file which i copied from an example looks like this:

(function() {
        // Load plugin specific language pack
        tinymce.PluginManager.requireLangPack('A2MLandingpages');

        tinymce.create('tinymce.plugins.A2MLandingpagesPlugin', {
                /**
                 * Initializes the plugin, this will be executed after the plugin has been created.
                 * This call is done before the editor instance has finished it's initialization so use the onInit event
                 * of the editor instance to intercept that event.
                 *
                 * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
                 * @param {string} url Absolute URL to where the plugin is located.
                 */
                init : function(ed, url) {
                        // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceA2MLandingpages');
                        ed.addCommand('mceA2MLandingpages', function() {
                                ed.windowManager.open({
                                        file : url + '/dialog.htm',
                                        width : 320 + ed.getLang('A2MLandingpages.delta_width', 0),
                                        height : 120 + ed.getLang('A2MLandingpages.delta_height', 0),
                                        inline : 1
                                }, {
                                        plugin_url : url, // Plugin absolute URL
                                        some_custom_arg : 'custom arg' // Custom argument
                                });
                        });

                        // Register A2MLandingpages button
                        ed.addButton('A2MLandingpages', {
                                title : 'A2MLandingpages.desc',
                                cmd : 'mceA2MLandingpages',
                                image : url + '/img/A2MLandingpages.gif'
                        });

                        // Add a node change handler, selects the button in the UI when a image is selected
                        ed.onNodeChange.add(function(ed, cm, n) {
                                cm.setActive('A2MLandingpages', n.nodeName == 'IMG');
                        });
                },

                /**
                 * Creates control instances based in the incomming name. This method is normally not
                 * needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
                 * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
                 * method can be used to create those.
                 *
                 * @param {String} n Name of the control to create.
                 * @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
                 * @return {tinymce.ui.Control} New control instance or null if no control was created.
                 */
                createControl : function(n, cm) {
                        return null;
                },

                /**
                 * Returns information about the plugin as a name/value array.
                 * The current keys are longname, author, authorurl, infourl and version.
                 *
                 * @return {Object} Name/value array containing information about the plugin.
                 */
                getInfo : function() {
                        return {
                                longname : 'A2MLandingpages plugin',
                                author : 'Some author',
                                authorurl : 'https://tinymce.moxiecode.com',
                                infourl : 'https://wiki.moxiecode.com/index.php/TinyMCE:Plugins/A2MLandingpages',
                                version : "1.0"
                        };
                }
        });

        // Register plugin
        tinymce.PluginManager.add('A2MLandingpages', tinymce.plugins.A2MLandingpagesPlugin);
})();

I would be so glad if somebody can help me on this.

Thanks!