/*popup = {
div: null,
show: function(id, opts, afterAction) {
opts = opts || {};
opts.createTemplate = true;
lightBox.show(id, opts, afterAction);
}
}*/

function LightBox(BlockId) {

    var This = this;

    var TemplateHtml =
		'<table style="" id="LightBoxTemplate"><tr><td>\
				<div style="border:solid 1px #333;background:#fff;padding:15px;">\
					<a style="float:right;" href="javascript:void(0);" id="LightBoxClose">x</a>\
					<div id="LightBoxContent"></div>\
				</div>\
		</td></tr></table>';
    var TemplateId = "LightBoxTemplate";
    var ContentId = 'LightBoxContent';
    var CloseId = 'LightBoxClose';
    var OnBlur = true;
    var OnEsc = true;
    var Background = '#000';
    var Opacity = 0.4;

    var Div;
    var DocWidth = 0;
    var AfterHide;
    var ScrollPos = { x: 0, y: 0 };

    this.LoadTemplate = LoadTemplate;

    function LoadTemplate(Options) {
        if (!Options) {
            TemplateHtml = '';
            return;
        }
        TemplateId = Options.TemplateId || TemplateId
        ContentId = Options.ContentId || ContentId;
        CloseId = Options.CloseId || CloseId;
        OnBlur = Options.OnBlur === undefined ? true : Options.OnBlur;
        OnEsc = Options.OnEsc === undefined ? true : Options.OnEsc;
        Background = Options.Background || Background;
        Opacity = Options.Opacity || Opacity;

        var Template = $('#' + TemplateId);
        var Div = $('<div>');

        $(document.body).append(Div);
        Div.append(Template.remove());

        This.TemplateHtml = Div.html();

        Div.remove();
    }

    this.show = Show;
    function Show(BlockId, Options) {
        Options = Options || {};

        Options.background = Options.background || Background;
        Options.opacity = Options.opacity || Opacity;

        Div = $('<div>');

        if (!(Div.msg = $('#' + BlockId))) return;
        Div.msgparent = Div.msg.parent();

        $(document.body).append(Div);

        ScrollPos.x = $(document).scrollLeft();
        ScrollPos.y = $(document).scrollTop();

        //setTimeout(function () {
        $(document.documentElement).css('overflow', 'hidden');
        //}, 0);

        if (document.documentElement.clientHeight < document.documentElement.scrollHeight) {
            DocWidth = document.documentElement.currentStyle ? document.documentElement.currentStyle.width : "auto";
            document.documentElement.style.width = (document.documentElement.clientWidth - 17) + "px";
        }
        $(document).scrollLeft(ScrollPos.x);
        $(document).scrollTop(ScrollPos.y);

        Div.attr('style', 'width:100%;_width:expression(documentElement.clientWidth);\
								height:100%;_height:expression(documentElement.clientHeight);\
								position:fixed;_position:absolute;z-index:10;overflow:hidden;\
								left:0;_left:expression(documentElement.scrollLeft-document.body.offsetLeft);\
								top:0;_top:expression(documentElement.scrollTop-document.body.offsetTop);');

        Div.append(Div.bg = $('<div>'));
        Div.bg.attr('style', 'width:100%;height:100%;position:absolute;left:0;top:0;\
								background:' + Options.background + ';\
								opacity:' + Options.opacity + ';\
								filter:alpha(opacity=' + (Options.opacity * 100) + ');');

        Div.ifr = $('<iframe>');
        Div.ifr.attr('style', 'display:block;width:100%;height:100%;position:absolute;left:0;top:0;filter:alpha(opacity=0);opacity:0;');
        Div.append(Div.ifr);

        Div.append(Div.scroll = $('<div>'));
        Div.scroll.attr('style', 'width:100%;height:100%;position:absolute;left:0;top:0;overflow:auto;');

        Div.scroll.append(Div.rel = $('<div>'));
        Div.rel.attr('style', 'height:100%;_height:100%;position:relative;');

        Div.rel.append(Div.table = $('<table>'));
        Div.table.attr('style', 'width:100%;_width:expression(documentElement.clientWidth);height:100%;_height:expression(documentElement.clientHeight);\
								position:absolute;left:0;top:0;border-collapse:collapse;border:solid 0;');

        Div.td = $(Div.table[0].insertRow(0).insertCell(0));

        Div.td.css({
            textAlign: Options.align || 'center',
            verticalAlign: Options.valign || 'middle'
        });

        Div.append(Div.over = $('<div>'));
        Div.over.attr('style', 'width:100%;height:100%;position:absolute;left:0;top:0;display:none;');

        Div.td.append(Div.cop = $('<div>'));
        Div.cop.attr('style', 'width:100%;height:100%;_height:expression(this.parentNode.clientHeight);position:absolute;left:0;top:0;');

        Div.td.append(Div.abs = $('<div>'));
        Div.abs.html(This.TemplateHtml);
        
        $('#' + ContentId).append(Div.box = Div.msg.remove());

        Div.box.attr('style', 'display:inline-block;_display:inline;visibility:visible;');
        Div.box.focus();

        Div.abs.css({
            paddingTop: Options.top,
            paddingRight: Options.right,
            paddingBottom: Options.bottom,
            paddingLeft: Options.left
        });

        var Template = $('#' + TemplateId)
        Template.attr('style', 'display:inline-block;//display:inline;zoom:1;');
        Template.css({
            width: Options.width,
            height: Options.height
        });

        if (OnEsc) {
            $(document).bind('keydown.lightbox', function (ev) {
                if (ev.keyCode == 27) {
                    This.hide();
                }
            });
        }

        if (OnBlur) {
            Div.cop.click(This.hide);
        }

        $('#' + CloseId).click(This.hide);

        if (Options.AfterShow) Options.AfterShow();
        AfterHide = Options.AfterHide;
    }

    this.hide = Hide;

    function Hide() {
        function Destroy() {
            Div.box.css('display', 'none');
            Div.msgparent.append(Div.box.remove());
            setTimeout(function () { Div.html(''); Div.remove(); }, 0);

            $(document).unbind('keydown.lightbox');

            $(document.documentElement).css('overflow', '');
            $(document).scrollLeft(ScrollPos.x);
            $(document).scrollTop(ScrollPos.y);
            if (DocWidth) {
                $(document.documentElement).css('width', DocWidth);
            }

            var sdiv = $('<div>');
            $(document.body).append(sdiv);
            sdiv.css('height', 1);

            setTimeout(function () {
                sdiv.remove();
                $(document).scrollLeft(ScrollPos.x);
                $(document).scrollTop(ScrollPos.y);
            }, 0);

            if (AfterHide) AfterHide();
        }
        Div.over.css('display', 'block');
        Div.abs.fadeOut(300);
        Div.bg.fadeOut(300, Destroy);
        return false;
    }

    if (BlockId) {
        Show(BlockId);
    } else {
        return this;
    }
}
LightBox = new LightBox();