var _offset = 0;
(function($) {
    $.fn.blackBox = function(options) {
        var defaults = {
            width: 524,
            height: 546,
            trans: .75,
            animSpeed: 500,
            url: "ajax.html",
            urlVars: {},
            offset: 0
        }

        var options = $.extend(defaults, options);
        var obj = $("#blackbox");

        // init
        $(".background", obj).css(
			{
			    opacity: 0,
			    width: $(document).width(),
			    height: $(document).height()
			});
        options.urlVars.random = Math.random();
        return this.each(function() {
            var loaded = false;
            $(this).click(function() { open() });
            $(window).scroll(function() { setTop() });
            $(window).resize(function() { setTop() });
            // show
            function open() {
                //$("html").css("overflow","hidden");
                if ($.browser.msie && $.browser.version.substr(0, 1) == 6)
                    $("select").css("visibility", "hidden");

                $(obj).show();
                $(".background", obj).fadeTo(options.animSpeed, options.trans);
                $(".container, .bgimage", obj).css(
					{
					    width: options.width,
					    height: options.height,
					    opacity: 0,
					    display: "block"
					});
                // .content komt de html in te staan. deze eerst oznichtbaar maken
                $(".container .content", obj).css({ opacity: 0, width: options.width });

                setTop();
                $(".png", obj).css({ width: options.width, height: options.height });
                if ($.browser.safari)
                    $(".bgimage", obj).css({ position: "absolute", left: $(".background", obj).width() / 2 - $(".bgimage", obj).width() / 2 - 9 });

                $(".container", obj).fadeTo(options.animSpeed, 1);
                $(".bgimage", obj).fadeTo(options.animSpeed, 1, visible);
            }
            function close() {
                $(".container, .bgimage", obj).fadeTo(options.animSpeed, 0);
                $(".background", obj).fadeTo(options.animSpeed, 0, hidden);
            }

            function visible() {
                $(".content", obj).load(options.url, options.urlVars, ajaxLoaded);
            }

            function hidden() {
                $(obj).hide();
                //$("html").css("overflow-y","auto");
                $(".content", obj).html("");
                $("select").css("visibility", "visible");
            }

            function ajaxLoaded(rText, rStatus, req) {
                //alert(rStatus);
                $(".content", obj).html(rText);
                $(".close", obj).click(function() {
                    close();
                });
                // custom code
                $("#slider").easySlider({ speed: 500, prevId: "left", nextId: "right", autoReturn: true, offset: _offset });
                $("#sliderImage").easySlider({ speed: 500, prevId: "left", nextId: "right", autoReturn: true, overrideWidth: 485, offset: _offset });
                $(".container .content", obj).fadeTo(options.animSpeed, 1);
                //applyCufon();
                //$("div").css("border","1px solid red");
            }

            function setTop() {
                var h = $.browser.msie ? $("html").innerHeight() : window.innerHeight;
                var w = $.browser.msie ? $("html").innerWidth() : window.innerWidth;
                $(".container, .bgimage", obj).css(
					{
					    top: h / 2 - $(".container", obj).height() / 2 + $(document).scrollTop()
					});
                $(".bgimage", obj).css({ left: $(".container", obj).position().left });
                if ($.browser.safari) {
                    $(".background", obj).css(
					{
					    width: w,
					    height: $(document).height()
					});
                    $(".bgimage", obj).css({ position: "absolute", left: $(".background", obj).width() / 2 - $(".bgimage", obj).width() / 2 });
                }
            }
        });
    }
})(jQuery);