var popupWidth;
    var popupHeight;
    var popupMarginLeft;
    var popupMarginTop;
    
    function showPopup(mediaId)
    {
        //Look up the media infomation
        var params = "mediaId=" + mediaId;
        myAjax = new Ajax.Request("PopupContent.action", {method: 'post', parameters: params, asynchronous: false, onComplete: displayPopupData});
    }
    
    function displayPopupData(request)
    {
        var response = request.responseText.evalJSON();
        var result = response.ajaxResult;
        if (result == 'error') 
        {
            alert("Error retrieving icon data.");
            return;
        }
        else
        {
            toggleBackground();
            
            var width = response.width;
            var height = response.height;
      
            var htmlToDisplay = response.html;

            var popupObj = document.getElementById("popup");
            
            setDivCoordinates(width,height);
            //Center the popup over the screen
            document.getElementById("infoPopup").style.width = popupWidth + "px";
            document.getElementById("infoPopup").style.height = popupHeight + "px";

            popupObj.style.width      = popupWidth + "px";
            popupObj.style.height     = popupHeight + "px";
            popupObj.style.marginLeft = "-" + popupMarginLeft + "px";
            popupObj.style.marginTop  = "-" + popupMarginTop + "px";
            
            //Do some special stuff for IE6 (What's new)
            var is_ie6 = (window.external && typeof window.XMLHttpRequest == "undefined");
            if (is_ie6)
            {
                popupObj.style.position = "absolute"; 
                var relativeY = document.documentElement.scrollTop;
                popupObj.style.top = relativeY + (document.documentElement.clientHeight /2) + "px";
            }
            
            
            
            var popupContentObj = document.getElementById("innerPopupContent");
            popupContentObj.innerHTML = htmlToDisplay;
            popupObj.style.display = "block";
        }
    }
    
    //****************************************************
    //  Sets the background to a greyed disabled look.
    //  Or, returns it to normal.
    // ***************************************************
    function toggleBackground()
    {
        var disabledPopup = document.getElementById("backgroundDisabled");
        if (disabledPopup.style.display == "none")
        {
            if(document.body.offsetHeight < document.documentElement.clientHeight)
                disabledPopup.style.height = document.documentElement.clientHeight + "px";
            else
                disabledPopup.style.height = document.body.offsetHeight + "px";
            disabledPopup.style.display = "block";
        }
        else
        {
            disabledPopup.style.display = "none";
            document.getElementById("popup").style.display = "none";
        }
    }
    
    //****************************************************
    //  Does the math to figure out how big and where the
    //  the popup div should be.
    // ***************************************************
    function setDivCoordinates(width, height)
    {
        //Add 10px buffer on each side (for borders)
        popupWidth = parseInt(width) + 10 + 10;
        popupHeight = parseInt(height) + 10 + 10;
        
        //Add some height to accommodate for "close" link;
        popupHeight += 14;
        
        //Now, figure out margin adustments
        popupMarginLeft = (popupWidth / 2);
        popupMarginTop = (popupHeight / 2);
        
        return;
    }