(function($) {
    $.fn.extend({
        dialog: function(options) {

            var defaults = {
            	background: {
            		color: '#000',
            		opacity: '0.8'
            	},	
                bind: 'click',
                onContentClose: function() { },
                onContentLoad: function(obj, dialog) { },
                css: {
                    close: 'sys_dialog_close',
                    dialog: 'sys_dialog',
                    header: 'sys_dialog_header',
                    text: 'sys_dialog_text',
                    wrapper: 'sys_dialog_wrapper'
                },
                html: '',
                lang: {
                    close: 'Close',
                    header: 'Dialog Box'
                }
            };

            var config = $.extend(true, {}, defaults, options);

            this.each(function() {
                var me = $(this);
                me.bind(config.bind, function() {

                    // setup divs
                    var wrapper = $(document.createElement('div'))
                    	.addClass(config.css.wrapper)
                    	.css({
                    		'background-color' : config.background.color,
                    		'opacity' : config.background.opacity
                    	});
                    
                    var dialog = $(document.createElement('div')).addClass(config.css.dialog);
                    var header = $(document.createElement('div')).addClass(config.css.header).text(config.lang.header);
                    var text = $(document.createElement('div')).addClass(config.css.text);

                    // close button
                    var close = $(document.createElement('div'))
                    .addClass(config.css.close)
                    .append(
                        $(document.createElement('a'))
                        .attr({
                            'href': 'javascript:void(0)',
                            'title': 'Close'
                        })
                        .text(config.lang.close)
                        .bind('click', function() {
                            $('.' + config.css.wrapper).remove();
                            $('.' + config.css.dialog).remove();
                            config.onContentClose.apply(me);
                            $(document).unbind('keyup');
                        })
                    );
                    
                    $(document).bind('keyup', function(e) {
                    	switch(e.keyCode)
                    	{
                    		// ESC key 
                    		case 27:
                    			$('.' + config.css.wrapper).remove();
                            		$('.' + config.css.dialog).remove();
                            		config.onContentClose.apply(me);
                            		$(document).unbind('keyup');
                    		break;
                    	}
                    });

                    // append to document
                    $(dialog).append(header).append(text);
                    $(dialog).append(close);
                    $(document.body).append(wrapper);
                    $(document.body).append(dialog);

                    // load the content into the dialog
                    config.onContentLoad.apply(me, [me, text]);

                    // put the dialog in the centre of the document
                    var winHeight = $(window).height();
                    var winWidth = $(window).width();

                    $(dialog).css({
                        'left': ((winWidth / 2) - ($(dialog).width() / 2)) + 'px',
                        'top': (((winHeight / 2) - ($(dialog).height() / 2)) + $(window).scrollTop())  + 'px' // accounts for scroll position I think
                    });

                });
            });

        }
    });
})(jQuery);