var currentlightboxcontent;
var currentlightboxplaceholder;
var currentlightbox;
var currentlightboxoverlay;

function openloadingbox()
{
    var loadingicon = document.createElement("img");
    loadingicon.setAttribute("src", "/Assets/images/lightboxloading.gif");
    createlightbox(loadingicon, 64, 64, 2, null, false, false)    
}

function openlightbox(content, width, height, padding, closefunction)
{
    createlightbox(content, width, height, padding, closefunction, true, true)
}

function createlightbox(content, width, height, padding, closefunction, allowclose, showoverlay)
{
    //Close any open lightboxes
    closelightboxcallback();

    //The area to append lightbox stuff to. Try append to the main form first.
    //If there is no form available, append to the document body
    var target = document.forms[0];
    if (target == null)
    {
        target = document.body;
    }

    //Set the close function if it is null
    if (closefunction == null && allowclose)
    {
        closefunction = function() { closelightbox(); }
    }

    if (showoverlay)
    {
        //Create the page overlay
        var overlay = document.createElement("div");
        overlay.id = "cmslightboxoverlay";
        if (allowclose)
        {
            overlay.onclick = closefunction;
        }
        //If jquery is available use it for some transition effects
        if (typeof jQuery != 'undefined')
        {
            overlay.style.display = "none";
        }
        target.insertBefore(overlay, target.firstChild);
    }

    //Determine width, height, and offsets
    var leftoffset = width / 2;
    var topoffset = height / 2;
    var lightboxwidth = width + (padding * 2);
    var lightboxheight = height + (padding * 2);

    //Create the lightbox and set positioning 
    //(Note: IE6 does not support setAttribute for styles so we need to do it the oldschool way)
    var lightbox = document.createElement("div");
    lightbox.style.width = lightboxwidth + "px";
    lightbox.style.height = lightboxheight + "px";
    lightbox.style.marginTop = "-" + topoffset + "px";
    lightbox.style.marginLeft = "-" + leftoffset + "px";
    lightbox.id = "cmslightbox";
    lightbox.setAttribute("class", "cmslightboxshadow");
    //If jquery is available use it for some transition effects
    if (typeof jQuery != 'undefined')
    {
        lightbox.style.display = "none";
    }

    if (allowclose)
    {
        //Create the close icon area
        var closeicon = document.createElement("div");
        closeicon.id = "cmslightboxclose";
        closeicon.onclick = closefunction;
        lightbox.appendChild(closeicon);
    }

    //Create the content box inside of the lightbox
    var cmslightboxcontent = document.createElement("div");
    cmslightboxcontent.id = "cmslightboxcontent";
    cmslightboxcontent.style.width = width + "px";
    cmslightboxcontent.style.height = height + "px";
    cmslightboxcontent.style.marginLeft = padding + "px";
    cmslightboxcontent.style.marginTop = padding + "px";
    cmslightboxcontent.style.marginRight = padding + "px";
    cmslightboxcontent.style.marginBottom = padding + "px";

    //Grab the content from the page that we are putting into the lightbox, 
    //and put a placeholder where it was...only if it has a parent
    if (typeof (content) == "string")
    {
        content = document.getElementById(content);
    }
    content.style.width = "100%";
    content.style.height = "100%";
    content.style.display = "block";

    if (content.parentNode != null)
    {
        var placeholder = document.createElement("div");
        placeholder.id = "cmslightboxplaceholder";
        content.parentNode.insertBefore(placeholder, content);
        currentlightboxplaceholder = placeholder;
    }

    //Add the content to the lightbox
    cmslightboxcontent.appendChild(content);
    lightbox.appendChild(cmslightboxcontent);
    target.appendChild(lightbox);

    //Assign some more current variables
    if (showoverlay)
    {
        currentlightboxoverlay = overlay;
    }
    currentlightbox = lightbox;
    currentlightboxcontent = content;

    //If jquery is available use it for some transition effects
    if (typeof jQuery != 'undefined')
    {
        if (showoverlay)
        {
            $(overlay).css("opacity", ".60").fadeIn(300, function()
            {
                $(lightbox).fadeIn(300);
            });
        }
        else
        {
            $(lightbox).fadeIn(300);
        }
    }
    else
    {
        if (showoverlay)
        {
            overlay.style.display = "block";
        }
        lightbox.style.display = "block";
    }
}

function closelightbox()
{
    //If jquery is available use it for some transition effects
    if (typeof jQuery != 'undefined')
    {
        $(currentlightbox).fadeOut(200, function()
        {
            $(currentlightboxoverlay).fadeOut(300, function()
            {
                closelightboxcallback();
            });
        });
    }
    else
    {
        closelightboxcallback();
    }
}

function closelightboxcallback()
{
    //Place the content back where it was on the page and hide it
    if (currentlightboxplaceholder != null)
    {
        currentlightboxplaceholder.parentNode.insertBefore(currentlightboxcontent, currentlightboxplaceholder);
        currentlightboxcontent.style.display = "none";

        //Remove the placeholder
        currentlightboxplaceholder.parentNode.removeChild(currentlightboxplaceholder);
    }

    //Remove the lightbox
    if(currentlightbox != null)
    {
        currentlightbox.parentNode.removeChild(currentlightbox);
    }

    //Remove the overlay
    if(currentlightboxoverlay != null)
    {
        currentlightboxoverlay.parentNode.removeChild(currentlightboxoverlay);
    }

    currentlightboxcontent = null;
    currentlightboxplaceholder = null;
    currentlightbox = null;
    currentlightboxoverlay = null;
    currentloadingbox = null;
}