﻿(function($) {
    // plugin definition
    var obj;
    $.fn.mkbox = function(options) {
        obj = $(this);
        if ($('#mkbox').length === 0) {
            var defaults = {
                title: '',
                titlecolor: '#000',
                titlebg: '#ccc',
                bordercolor: '#000',
                borderwidth: '10px',
                backgroundcolor: '#fff',
                padding: '10px',
                width: '500px',
                modal: true,
                closebutton: false
            }
            var options = $.extend(defaults, options);
            var mkbox = '\
                <div id="mkbox"> \
                <table cellpadding="0" cellspacing="0"> \
                    <tr><td class="t" colspan="3" style="height:' + options.borderwidth + ';background:' + options.bordercolor + ';"></td></tr> \
                    <tr> \
                        <td class="l" style="width:' + options.borderwidth + ';background:' + options.bordercolor + ';"></td> \
                        <td class="m" style="background:' + options.backgroundcolor + ';padding:' + options.padding + ';"> \
                            <div class="message" style="width:' + options.width + ';"></div>';
            if (options.closebutton) {
                mkbox += '<div class="close"><img class="btn" src="/images/site/close.gif" alt="close" title="close" /></div>';
            }
            mkbox += '</td> \
                        <td class="r" style="width:' + options.borderwidth + ';background:' + options.bordercolor + ';"></td> \
                    </tr> \
                    <tr><td class="b" colspan="3" style="height:' + options.borderwidth + ';background:' + options.bordercolor + ';"></td></tr> \
                </table> \
                </div>';

            var overlay = $('<div id="mkbox_overlay"></div>');
            overlay.css({ 'width': $(document).width(), 'height': $(document).height() });
            if (options.modal) { $('body').append(overlay) }
            $('body').append(mkbox);
            $.getScript('/script/jquery.bgiframe.min.js', function() { $('#mkbox').bgiframe() });
            $(obj).appendTo('#mkbox .message').show();
            $('#mkbox .close').click(function() { hidePopup(obj) });
            $('#mkbox').css({ 'left': $(window).width() / 2 - $('#mkbox').width() / 2, 'top': $(window).height() / 2 - $('#mkbox').height() + $(window).scrollTop() }).fadeIn();
            $(document).keydown(handleEscape);
        }
        return this;
    };
    function hidePopup(obj) {
        $(document).unbind("keydown", handleEscape)
        $(obj).hide().appendTo('body');
        $('#mkbox').fadeOut().remove();
        $('#mkbox_overlay').remove();
        return false;
    }
    function handleEscape(e) {
        if (e.keyCode == 27) { hidePopup(obj) }
    }
})(jQuery);