I’m trying to create a tinymce plugin that generates a shortcode containing two image ids:

[image-fade old="xx" new="yy"]

I would like to let users select images directly from the media selector frame, but haven’t figured out how to do this. I am able to allow the users to enter the ID in an alert box, but can’t do better than that. This is what I have so far:

( function() {
    var open_media_window = function () {
        var first={};

        var window = wp.media({
            title: 'Insert a media',
            library: {type: 'image'},
            multiple: false,
            button: {text: 'Insert'}
        });
        window.on('select', function(){
            var files = window.state().get('selection').toArray();
            first = files[0].toJSON();
            console.log ("first is: " + first);
            return first.id;
        });
        window.open();
        return first.id;

    };
    tinymce.create( 'tinymce.plugins.hhImage', {
    init: function( ed, url ) {
        ed.addButton( 'hh_image', {
        title: 'Insert Historical Image Overlay',
        image: 'http://matttest.hackinghistory.ca/wp-content/plugins/custom-content-type-manager/js/plugins/../../images/wrench.png',
        onclick: function() {       
            //old = prompt( "Enter id of old photo", "" );
            old = open_media_window();
            //newImage = prompt( "Enter id of new photo", "" );
            newImage = open_media_window();
            ed.execCommand( 'mceInsertContent', false, '[image-fade old="' + old + '" new="' + newImage + '"]' );
        }
        });
    },
    createControl: function( n, cm ) { return null; },
    });
    tinymce.PluginManager.add( 'hh_image', tinymce.plugins.hhImage );
})();

The media selector window will open, and I can select two images, but nothing gets logged to the javascript console and the shortcode produced is:

[image-fade old="undefined" new="undefined"]

What am I doing wrong here?
Thanks for the help!
Matt