var extModalDialogObject;

///
/// Shows a modal dialog using the ExtJs libraries.
///
function showModalDialog(hasRemoteContent, remoteContentUrl, contentHtml, windowId,
     windowTitle, width, height, minWidth, minHeight, isAutoScroll, hasShadow, isResizable, 
     isDraggable, bodyCssClass, bodyStyle, animateOpenFromObject, closable, dismissButtonText, dismissButtonAlign)
{
    if (window.Ext)
    {
    }
    else
    {
        //uh-oh, we must have forgotten to include the ext js libraries
        alert('Error launching dialog.');
        return;
    }

    if (!Ext.isReady) 
    {
        //the Ext-js libraries are not ready yet...
        return;
    }

    if (extModalDialogObject)
    {
        //uh-oh, this shouldn't exist...let's destroy it
        extModalDialogObject.destroy();
        extModalDialogObject = null;
    }
        
    extModalDialogObject = new Ext.Window(
    {
        id:             windowId,
        height:			height,
        width:			width,
        minHeight:		minHeight,
        minWidth:		minWidth,				
        autoScroll:		isAutoScroll,
        modal:			true,
        shadow:			hasShadow,
        title:			windowTitle,
        resizable:		isResizable,
        draggable:		isDraggable,
        bodyStyle	:	bodyStyle,
        animateTarget:	animateOpenFromObject,
        closable:		closable,
        buttons:		[ ], // we'll add any necessary buttons later
        buttonAlign:    dismissButtonAlign
    });
    
    //add a dismiss button, if applicable
    if (dismissButtonText && dismissButtonText != '')
    {
    	extModalDialogObject.addButton({
    	    text: dismissButtonText, 
            handler: function() {
                hideModalDialog();
            }
        });
    }
    
    //display the dialog
    extModalDialogObject.show();    
    
    //add the css class to the body of the dialog, if applicable
    if (bodyCssClass && bodyCssClass != '')
    {
        extModalDialogObject.body.addClass(bodyCssClass);
    }
    
    //see if we need to use ajax to get the content of the dialog
    if (hasRemoteContent)
    {
        //create a load mask for the window that will tell the user it's loading while ajax requests are pending
        var loadingModalDialogMask = new Ext.LoadMask(windowId,
            {
  	            removeMask : true
            });        
        loadingModalDialogMask.show();
            
        //use ajax to load the content based on the url
        loadRemoteContent(extModalDialogObject, loadingModalDialogMask, remoteContentUrl, null);
    }
    else
    {
        //we can just dump our content right in
        extModalDialogObject.body.dom.innerHTML = contentHtml;
    }
    
    function loadRemoteContent(extWindowObject, loadingMask, pageUrl, params)
    {
        Ext.Ajax.request(
        {
            url: pageUrl,
            params: params,
            success: function(response, options)
            {
                extWindowObject.body.dom.innerHTML = response.responseText;
                loadingMask.hide();
            },
            failure: function()
            {
                alert('Error loading dialog.');
                loadingMask.hide();
            }
        });
    }    
}

///
/// Hides the modal dialog and attempts to destroy any resources it created.
///
function hideModalDialog()
{
    if (extModalDialogObject)
    {
        //closing the dialog should "hide" it and destroy the resources
        extModalDialogObject.close();
    }
    else
    {
        //the object doesn't exist anymore, so no need to hide it
    }
}