//Register sizeLightBoxes to be called when window size changes
//  this will resize the overlay and recenter the light box if they are being displayed
Event.observe(window, "load", function() {
    Event.observe(window, "resize", sizeLightBoxes);
});

var lightBoxList = [];

function openLightBox(lightBoxId, hideLayover, keepExistingLightBox) {
    //scrubbing the optional hideLayover param - default is false
    if (typeof(hideLayover) != "undefined" && hideLayover == true) {
        hideLayover = true;
    }
    else {
        hideLayover = false;
    }

    //scrubbing the optional keepExistingLightBox param - default is false
    if (typeof(keepExistingLightBox) != "undefined" && keepExistingLightBox == true) {
        keepExistingLightBox = true;
    }
    else {
        keepExistingLightBox = false;
    }

    //check to see if a div with same id exists, if so, remove it
    if (!keepExistingLightBox && lightBoxList[lightBoxId]) {
        var oldLightBox = lightBoxList[lightBoxId];
        oldLightBox.remove();
        lightBoxList[lightBoxId] = null;
    }
    
    var lightBox = $(lightBoxId);

    // copy lightbox content to body tag so we can control it better    
    var removedElement = lightBox.remove();
    $(document.body).insert(removedElement);
    lightBox = removedElement;

    lightBox.absolutize();

    if (lightBox) {
        //register lightbox if not registered
        if (!lightBoxList[lightBoxId] || lightBoxList[lightBoxId] == null) {
            lightBoxList[lightBoxId] = lightBox;
        }
        
        //size light boxes
        sizeLightBoxes();

        //check to see if we show overlay
        if (!hideLayover) $('lightbox_overlay').show();
        
        //show light box
        lightBox.show();
    }
    
    return false;
}

function sizeLightBoxes() {
    //get body dimensions
    var bodySize = $(document.body).getDimensions();

    //get mainContent dimensions
    // w3c browsers won't give full height when mainContent is set to 100% height so we need to quickly set it to auto, get dimensions, then switch it back
    var mainContentDiv = $("mainContent");
    if (mainContentDiv == null) {
        return;            // ignore if likely pop up box
    }
    var oldMainContentHeightStyle = mainContentDiv.style.height="auto";
    var mainSize = mainContentDiv.getDimensions();
    mainContentDiv.style.height=oldMainContentHeightStyle;

    //determine page size from body and mainContent dimensions
    var pageSize = {
        "width" : Math.max(bodySize.width, mainSize.width),
        "height" : Math.max(bodySize.height, mainSize.height)
    };
    
    //get view port size
    var viewSize = document.viewport.getDimensions();

    //iterate through list of registered lightboxes
    for (var lightBoxId in lightBoxList) {
        
        var lightBox = lightBoxList[lightBoxId];

        //* need to check for object here, it looks like prototype is having some strange references to the each function
        if (lightBox && typeof(lightBox) == 'object') {
            //position lightbox in current viewport
            var viewportScrollOffsets = document.viewport.getScrollOffsets();

            var lbSize = lightBox.getDimensions();
            //if lightbox size can't be attained, switch to relative position temporarily to be able to get it for w3c browsers
            if (lbSize.height == 0 && lbSize.width == 0) {
                lightBox.relativize();
                lbSize = lightBox.getDimensions();
                lightBox.absolutize();
            }

            //calculate middle position for the light box
            var lightBoxTop = (lbSize.height > viewSize.height ? viewportScrollOffsets.top + 20 : viewportScrollOffsets.top + ((viewSize.height - lbSize.height) / 2));
            var lightBoxLeft = (lbSize.width > viewSize.width ? viewportScrollOffsets.left + 20 : viewportScrollOffsets.left + ((viewSize.width - lbSize.width) / 2));
            
            //set position styles for lightbox
            lightBox.setStyle({
                "top" : lightBoxTop + "px",
                "left" :  lightBoxLeft + "px",
                "width" :  lbSize.width + "px",
                "height" :  lbSize.height + "px"
            });
        }
    }

    //create an overlay if it doesn't exist
    var overlay = $('lightbox_overlay');
    if (!overlay) {
        overlay = new Element('div', { 'id': 'lightbox_overlay' });
        Element.insert(document.body, overlay);
        overlay.setStyle({
            "display" : "none" 
        });
    }
    var overlayOffsets = overlay.cumulativeOffset();
    
    // fit the overlay to cover the entire page
    overlay.setStyle({
        "width" : pageSize.width + "px", 
        "height" : pageSize.height + "px",
        "top" : overlayOffsets.top + "px",
        "left" : overlayOffsets.left + "px"
    });
}

function closeLightBox(lightBoxId) {
    $(lightBoxId).hide();
    $('lightbox_overlay').hide();
    
    return false;
}