function showMapDetailLightbox(pointGuid) {

    /* HTML Markup
        <div id="lightbox-overlay-map-detail"></div>
        <div id="lightbox-container-map-detail">
            <div id="lightbox-content-map-detail">
                <div id="lightbox-loading-map-detail"><img src="/images/interactive_map/lightbox-ico-loading.gif" alt="loading" /></div>
                <div id="lightbox-html-map-detail" style="display:none;"></div>
                <div id="lightbox-nav-map-detail">
                    <a href="javascript:void();" id="lightbox-nav-map-detail-btnClose" title="close">
                        <img src="/images/interactive_map/lightbox-btn-close.gif" alt="close" />
                    </a>
                </div>
            </div>
        </div>
    */

    // Apply the HTML markup into body tag
    $('body').append('<div id="lightbox-overlay-map-detail"></div><div id="lightbox-container-map-detail"><div id="lightbox-content-map-detail"><div id="lightbox-loading-map-detail"><img src="/images/interactive_map/lightbox-ico-loading.gif" alt="loading" /></div><div id="lightbox-html-map-detail" style="display:none;"></div><div id="lightbox-nav-map-detail"><a href="javascript:void();" id="lightbox-nav-map-detail-btnClose" title="close"><img src="/images/interactive_map/lightbox-btn-close.gif" alt="close" /></a></div></div></div>');

    // get the page sizes
    var arrPageSizes = ___getPageSizeMap();

    // get the page scroll
    var arrPageScroll = ___getPageScrollMap();

    // set the lightbox overlay css properties and fade in
    $('#lightbox-overlay-map-detail').css({
        width: arrPageSizes[0],
        height: arrPageSizes[1]
    }).fadeIn();

    // calculate top and left offset for the lightbox-container div object and show it
    $('#lightbox-container-map-detail').css({
        top: arrPageScroll[1] + (arrPageSizes[3] / 5),
        left: arrPageScroll[0]
    }).fadeIn();

    // set the loading css and show it
    $('#lightbox-loading-map-detail').show();
    
    // get the html
    $.get("/interactive_map/point_description.aspx", { pointGuid: pointGuid }, 
        function(data) {
            // set the html css and content and show
            $("#lightbox-html-map-detail").html(data).fadeIn();

            // hide the loading
            $('#lightbox-loading-map-detail').hide();
        });

    // assign click events in elements to close overlay
    $('#lightbox-overlay-map-detail').click(function() {
        _finishMapDetail();
    });

    // assign close button click event
    $('#lightbox-nav-map-detail-btnClose').click(function() {
        _finishMapDetail();
        return false;
    });

    // if window is resized, calculate the new overlay dimensions
    $(window).resize(function() {
        // get page sizes
    var arrPageSizes = ___getPageSizeMap();
        // style overlay and show it
        $('#lightbox-overlay-map-detail').css({
            width: arrPageSizes[0],
            height: arrPageSizes[1]
        });
        // get page scroll
        var arrPageScroll = ___getPageScrollMap();
        // calculate top and left offset for the lightbox-container div object and show it
        $('#lightbox-container-map-detail').css({
            top: arrPageScroll[1] + (arrPageSizes[3] / 5),
            left: arrPageScroll[0]
        });
    });
}

/*
* Remove jQuery lightBox plugin HTML markup
*
*/
function _finishMapDetail() {
    $('#lightbox-container-map-detail').empty().remove();
    $('#lightbox-overlay-map-detail').fadeOut(function() { $('#lightbox-overlay-map-detail').remove(); });
}

/*
* getPageSize() by quirksmode.com
*
* @return Array Return an array with page width, height and window width, height
*/
function ___getPageSizeMap() {
    var xScroll, yScroll;
    if (window.innerHeight && window.scrollMaxY) {
        xScroll = window.innerWidth + window.scrollMaxX;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }
    var windowWidth, windowHeight;
    if (self.innerHeight) {	// all except Explorer
        if (document.documentElement.clientWidth) {
            windowWidth = document.documentElement.clientWidth;
        } else {
            windowWidth = self.innerWidth;
        }
        windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }
    // for small pages with total height less then height of the viewport
    if (yScroll < windowHeight) {
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }
    // for small pages with total width less then width of the viewport
    if (xScroll < windowWidth) {
        pageWidth = xScroll;
    } else {
        pageWidth = windowWidth;
    }
    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
    return arrayPageSize;
};

/*
* getPageScroll() by quirksmode.com
*
* @return Array Return an array with x,y page scroll values.
*/
function ___getPageScrollMap() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
        yScroll = self.pageYOffset;
        xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
        yScroll = document.documentElement.scrollTop;
        xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
        yScroll = document.body.scrollTop;
        xScroll = document.body.scrollLeft;
    }
    arrayPageScroll = new Array(xScroll, yScroll);
    return arrayPageScroll;
};