var overlay;
var lightbox;
var lbContent;
var closebutton;
$(function() {
    lightbox = $('div#lightbox').hide();
    overlay = $('div#overlay').hide();
    closebutton = $('div#lightbox a.closebutton');
    //overlay = $('<div />').addClass('overlay').appendTo('body').height($(document).height()).hide();
    //lightbox = $('<div />').addClass('lightbox').appendTo('body').hide();
    //lbContent = $('<div />').addClass('lightboxcontent').appendTo(lightbox);
    //closebutton = $('<a />').attr('href', 'javascript:void(null);').addClass('closebutton').appendTo(lightbox).text("Sluiten");
    //loading = $('<div />').addClass('loading').appendTo(lightbox);
    $(window).resize(function() {
        PositionLightbox();
    });

    $(overlay).click(function() {
        hideLightbox();
    });

    $(window).keydown(function(evt) {
        if (evt.keyCode == 27) {
            $(overlay).click();
        }
    });
    $(closebutton).click(function() {
        $(overlay).click();
    });

    $('div[rel=lightbox]').live('click', function() {
        showLightbox();
        //toggleLoader(true);
        //var url = $(this).attr('href');
        //$.ajax({
        //    type: "GET",
        //    url: url,
        //    success: function(msg) {
        //        $(lbContent).html(msg);
        //       toggleLoader(false);
        ResizeLightbox();
        //    }
        //});
        return false;
    });
});

showLightbox = function() {
    overlay = $('div#overlay').height($(document).height()).hide();
    $(lightbox).show();
    $(overlay).show();

    PositionLightbox();
}
hideLightbox = function() {
    $(lightbox).hide();
    $(overlay).hide();
}

PositionLightbox = function() {
    var wHeight = $(window).height();
    var wWidth = $(window).width();

    var topPos = (wHeight / 2) - ($(lightbox).height() / 2) + $(window).scrollTop();
    var leftPos = (wWidth / 2) - ($(lightbox).width() / 2);

    if ($(window).scrollTop() > topPos) {
        topPos = topPos + $(window).scrollTop();
    }
    if (($(window).scrollTop() + $(window).height()) < (topPos + $(lightbox).height())) {
        topPos = $(window).height() - $(lightbox).height() + $(window).scrollTop();
    }
    $(lightbox).css({ 'left': leftPos + 'px', 'top': topPos + 'px' });
    //.stop().animate({ 'top': topPos + 'px' }, 150);
}

ResizeLightbox = function() {

PositionLightbox();
}