Ext.onReady(function(){
	Ext.namespace("sts");
});

// cache image
var largeLoadingSpinner = new Image();
largeLoadingSpinner.src = "/images/loading.gif";

/**
 * Displays a modal dialog with a transparent black background
 * @param divID 	The id of the div to use as contents for the dialog (optional)
 * @param htmlContent 	HTML code to use as content for dialog (if div is not provided) (optional)
 * @param width 	The width of the dialog (default = 50%)
 * @param configOverride  An object with configuration properties and values that work on an Ext.Window.  These values will be applied to the default window to allow you to ajust the initial setup
 * @returns the created dialog object
 */
function showDialog(divID, htmlContent, width, configOverride) {
	//close any previos dialog, if there was one
	closeDialog();
	
	//display the grayout div, which makes it modal as well
	getGrayoutDiv().style.display='';
	
	// make sure there's a width.  if there's no width, this will spread more than 100% of the window
	if (!width)
		width = "50%";

	// config 
	var config = {
		closable: true,
		resizable: false,
		modal: false, //this needs to be set to false in order for the transparent background to work in IE 
		renderTo: Ext.getBody(),
		html: htmlContent,
		width: width,
		containerEl: divID,
		listeners: {
			close : function(win) {
				win.destroy();
				delete sts["dialog"];
			}
		}
	};
	
	// if we received a passed in override, apply it
	if (configOverride instanceof Object) {
		for (var prop in configOverride) {
			config[prop] = configOverride[prop];
		}
	}
	
	//create our window
	sts["dialog"] = new Ext.Window(config);
	sts["dialog"].show()
	
	return sts["dialog"];
}

/** hide the dialog */
function closeDialog() {
	if (sts["dialog"]) {
		sts["dialog"].destroy();
		delete sts["dialog"];
	}
	getGrayoutDiv().style.display='none';
}

/**
 * Shows a loading screen by default, or a dialog with contents of div identified by divID
 * @author Jordan Wambaugh
 * @returns the dialog object
 */
function showLoading(divID) {
	if(!divID){
		var htmlContent = '<div style="padding:20px; background:white; width:300px; height:200px; "><p style="font-size:30px;margin-left:25px;margin-top:40px;"><span id="LoadingImageSpan"></span><span style="position:relative;top:-20px">&nbsp;&nbsp;&nbsp;&nbsp;Loading...</span></p><p style="margin-left:40px">Please wait while the page loads</p></div>';
		var config = {
			closable: false, 
			draggable: false, 
			modal: true, 
			resizable: false
		};

		var returnVal = showDialog(null, htmlContent, 355, config);
		//add our already loaded image to the image span so we don't get broken images in firefox
		document.getElementById('LoadingImageSpan').appendChild(largeLoadingSpinner);
		return returnVal;
	}else{
		return showDialog(divID);
	}
}

/*
 @author Jordan Wambaugh
 @returns the element object for the grayout div
*/
function getGrayoutDiv(){
	var div = document.getElementById('grayoutDiv');
	if(div){
		return div;
	}
	
	//create a new div to place the grayoutDiv in
	var container = document.createElement('div');
	
	container.innerHTML= '<div id="grayoutDiv" style="display:none;z-index:100; position:absolute; top:0; left:0; background-color:#000; width:100%;height:'+getPageHeight()+'px; filter:alpha(opacity=70); -moz-opacity:.70; opacity:.70;"></div>';
	document.body.appendChild(container);
	return document.getElementById('grayoutDiv');
}

/*
 @author Byron Whitlock
 @returns the viewport height 
*/
function getPageHeight(){
	if (window.innerHeight && window.scrollMaxY) {// Firefox
		yWithScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		yWithScroll = document.body.scrollHeight;
	} else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari
		yWithScroll = document.body.offsetHeight;
  	}
	
	//alert( 'The height is ' + yWithScroll + ' and the width is ' + xWithScroll );
	return yWithScroll;
}