/*	
	bluntModal is designed to show a modal window centered on the browser window
	
	*********************************************************************
	*                                                                   *
	*    NO WARRANTY                                                    *
	*    This code is provided "as is" without warranty of any kind,    *
	*    either expressed or implied, including, but not limited to,    *
	*    the implied warranties of merchantability and fitness for a    *
	*    particular purpose.                                            *
	*	                                                                  *
	*    You expressly acknowledge and agree that use of this code      *
	*    is at your own risk.                                           *
	*                                                                   *
	*********************************************************************
	*/
	
	
/*
	bluntModal
	This class is ued to show a division as a modal type window.
	This function requires the file blunt.disabler.class.js
	If Ajax function will be used then this file also requires blunt.ajax.class.js
	This file requires configuration. For my purposes this is done with blunt.js.config.php
		for an explanation of what is require in the configuration file if you are unable to use the php script
		see the end of this file.
		
	version 2.0.0
	20090630
	Completely rebuilt class to be compatible with new versions of bluntAjax and bluntDisabler
	this version is not compatible with any previous versions of any of these classes
	
	version 1.1.0
	20090419
		Cleaned up code
		Removed the ability to change location of the modal window. It is now placed centered on the screen
	
	version 1.0.0
	20080901
	
	Notes on desired improvements
	****Must create an alternate config file for path and images
	
	Add some type of an aspect ratio feature that will put images into the window and resize them to 
		fit the image and to fit inside the browser window.
	
	Transisions of effects when showing making the modal window visible
			examples: Zoom in Zoom out
								Fade in/out
	Add more loading images
			
	USAGE:
	
	As stated above, this class requires both the bluntAjax class and the bluntWindowDisabler class. There is no need to interact directly with either of those classes when using bluntModal as this class takes care of calling those and setting values. All settings for those classes can be set through bluntModal. This is covered in the following documentation.
	
	As stated above, this class requires Blunt Web Apps' ajax class and Blunt Web Apps' window disable class.
	However, it is not necessary to interact in any way with those classes. This Modal Window class takes care
	of all of the interactions and overhead. You simply need to interact and add setting to the modal class.
	These setting can be extremely easy or very complex, depending of your requirements.
	
	There is only one item that must be set before activiating the Modal Window and this is the URL to retieve
	the data from that will be placed into the modal window. This is done using Ajax.
	
	INSTANTIATION
	
			modal = new bluntModal([id]);
					(see discussion on MODAL WINDOW ID below)
					
				 Note: Instantaition need to be done after the document has been loaded and not before.
				 				Instantaition before the document is loaded can result in an incorrect value being returned
								for the document height and width values
				 				This can be accomplished by calling an onload in the body.
								
								A better way is to attach a listener to the body so that mulitple onload events can be loaded
								
								This is a cross browser example of attaching an event
								
								/////////////////////////////////////////////////////
								
								// inialize the disabler variable in the global scope
								var modal;
								
								// create a funtion that will instantiate the class
								function instantaiteModal() {
									disabler = new bluntModal();
								}
								
								// attach a listener to the load event of the body
								if (window.addEventListener) {
									// most browsers
									window.addEventListener('load', instantaiteModal, false);
								} else if (window.attachEvent) {
									// windows/IE
									window.attachEvent('onload', instantaiteModal);
								}
								
								///////////////////////////////////////////////////////
								
		
		SPECIFYING CONTENT OF THE MODAL WINDOW
			
				modal.url = '/path/file.html'
				
						This value is any valid URL on the same server as this script.
						This URL should not include any parameters, if parameters are to be specified then
						the parameters property of the class should be used. For more information see
						Parameters in the OPTION section below
						
						Browser security will not let you retrieve data
						for a web page that is not on the same host as the page that is loading it.
						
						This file needs to return valid (X)HTML that will be placed into the DIV that is used for the modal window
						
						
		OPTIONS
				
				AJAX OPTIONS:
				
					PARAMETERS
					Sending parameters to the AJAX script						
							modal.parameters = 'x=25&page=somepage';
									This a valid URL encoded query string with variable/value pairs seperated with &s
									This is everything that you would see in a URL past a ? if it exists in a GET
									The ajax class allows for both GET and POST operations, but it expects the parameters
									for both in the same format
								
				
					REQUEST METHOD
							modal.method = 'POST';
								or
							modal.method = 'GET';
									whether to use the post of get method when sending the request
									method is not case sensitive, bluntAjax converts this to the proper case and can detect
									what you mean, even if you did "pOsT"
								
				
				DISABLER OPTIONS
					
					DISABLE BROWSER
							modal.disableBrowser = true;
									this setting determines if the browser will be disabled when the modal window is displayed
									valid values are true or false, the default is true
				
					DISABLER COLOR
							modal.disabler.color = '#000000';
									This sets the background color of the disabler that is placed over the content of the page
									this is a standard CSS type color begining with a #. This is applied to the style property of the
									disable, so any valid CSS color that can be set through JavaScript can be used here
									The default value is black "#000000"
					
					DISABLER OPACITY
							modal.disabler.opacity = 50;
									Give the opacity as a value form 0 to 100 to indicate the percentage of opacity to apply
									to the disabler
									The default value for this setting is 50 = "50%"
									
				
				MODAL WINDOW OPTIONS
					
					SHOW LOADING IMAGE
						modal.showImage = true;
								this setting determines if a "loading" image is show during the AJAX request
								the default value is false. Most AJAX requests do not require long load times
								however, if the load time is expected to be long then having a loading image
								would allow the user to know that something is happening
								
						modal.imageId = 0;
								this setting allows you to specify which image to use for the loading image
								currently there is only one image, so this setting is of little use
								if more images are added or you wish to create your own see the discussion at the end
								of this document about configuration
					
					MODAL WINDOW ID
							if you would like to specify a different ID than the default then suppply the new
							id when instantiating the class:
							
							modal = new bluntModal(id)
							
								any valid value for an element ID, the default value is "bluntModalWindow"
								the main reason that this setting exists is to allow you to change the id
								this could be usefull for an application that requires multiple levels of windows
								for instance if your modal window opens an second modal window, completely possible, but
								you need to make sure that you specify a different id for each window
								(BE SURE ALSO TO SETT A DIFFERENT Z-INDEX
								 
					MODAL WINDOW Z-INDEX
						modal.zIndex = 1000;
								sets the Z index for the modal window element
								the default is 10000
								see discussion of mulitple modal windows in MODAL WINDOW ID above
								the disabler and loading image z-index is evaluated from this value
								the disablers z-index is zIndex-1 and the image is zIndex+1
					
					MODAL WINDOW CLASS
						modal.modalClass = 'ClassName';
								this setting allows you to apply a class to the modal window division
								the default class is 'ModalWindow'
								this allows you to create CSS styles that will be applied to the class
								ClassName is any valid value that can be set for a element class
								
								
					MODAL WINDOW SIZE
						modal.modalWidth = 100;
						modal.modalHeight = 100;
						
								These settings allow you to specify a specific height and width to the modal window
								the default values for both of these settings is "auto" meaning that the modal window will be
								sized according to its content, as in CSS
								
					LIMIT MODAL WINDOW TO BROWSER
						modal.limitModalToWindow = true;
								if set to true, the the Modal Window will not extend beyond the current browser window
								if the modal window is larger than the current browser window then scroll bars will be added to the
								modal window
								
						modal.limitBy = 'bluntModalWindow';	
								this sets the element that will be used if the modal window will be limited for the scroll
								bar attachment. the default is the MODAL WINDOW ID
								THIS IS EXPERIMENTAL AND MAY NEED WORK
								if you apply complex styles to the modal window, you may not want scroll bars to appear on this window itself
								if you would like these scroll bars to appear on some inner element then that element requires an ID
								and you specify that id with this property					
					
						modal.windowMargin = 15;
								this is the amount of space that will be maintained between the modal window and the window border
								specify the value in pixels (but do not include "px" in your value
								valid values are integers and the default is 15
					
					MODAL WINDOW STYLE
							
							you can specify any styles that you want applied directly to the modal window element
							these syles are specified in the same way that you would apply any styles in javascript
							for instance, to set a 1 pixel solid black border to the modal window you might use
							
							modal.style.borderColor = '#000000';
							modal.style.borderStyle = 'solid';
							modal.style.boderWidth = '1px';
							
							The default settings for styles are:
									modal.style.borderColor = '#000000';
									modal.style.borderStyle = 'solid';
									modal.style.borderWidth = '1px';
									modal.style.backgroundColor = '#FFFFFF';
									modal.style.padding = '20px';
	
	
	
	
*/

	function bluntModal(id) {
		
		// default settings for modal window
		if (!id) {
			this.modalId = 'bluntModalWindow';
		} else {
			this.modalId = id;
		}
		this.modalClass = 'ModalWindow';
		this.style = new Array();
		this.style.position = 'absolute';
		this.style.borderColor = '#000000';
		this.style.borderStyle = 'solid';
		this.style.borderWidth = '1px';
		this.style.backgroundColor = '#FFFFFF';
		this.style.padding = '20px';
		this.style.top = '0';
		this.style.left = '0';
		this.style.zIndex = 1000;
		
		this.modalWidth = 'auto';
		this.modalHeight = 'auto';
		
		this.disableBrowser = true;
		
		var windowSize = bluntModalGetWindowSize();
		this.windowWidth = windowSize[0];
		this.windowHeight = windowSize[1];
		
		var ScrollOffest = bluntModalGetScrollOffset();
		this.offsetX = ScrollOffest[0];
		this.offsetY = ScrollOffest[1];
		
		// loading images
		// I want to creat some additional images for this new version
		// loading images
		if (typeof(bluntModalLoadingImages) != 'undefined') {
			this.images = bluntModalLoadingImages;
		} else {
			this.images = bluntModalDefineImages();
		}
		
		// show loading image
		this.showImage = true;
		this.imageId = 0;
		this.minWidth = 50;
		this.minHeight = 50;
		
		// limit to window size settings
		// new feature that will limit the inserted div to confine it inside the current browser window
		// all of this is only used if set to true
		this.limitModalToWindow = true;
		this.windowMargin = 15;					// the number of pixels that the window should be spaced from browser edges
		this.limitBy = this.modalId;			// modal class will use this div to detect width and height
																		//		if width/height are greater than window then scroll bars will be placed into this
																		//		div by setting the overflow property of this div
					
		
		// bluntWindowDisabler properties
		// these are values to pass to the window disabler class
		this.disabler = new bluntWindowDisabler();
		this.disabler.opacity = 50;
		this.disabler.color = '#000000';
		this.disabler.id = this.modalId+'WindowDisabler';
		
		// bluntAjax properties
		this.content = false;
		this.url = null;
		this.parameters = '';
		this.method = 'GET';
		//this.pass = this.id;
		
		// need to make bluntModalReturn not part of the class
		// will send ajax this object so that the return function can call the
		// internal function that will actually do the work
		x = new bluntModalReturn(this);
		this.returnFunction = x.modalReturn;
		this.ajaxParameters = '';
		this.ajaxMethod = 'POST';
		this.ajaxPass = this;
		
		var resizer = new bluntModalResize(this);
		var scroller = new bluntModalScroll(this);
		
		// Public Functions
		
		this.show = function() {
			// show the modal window and get contents through ajax
			
			// if disable is set to true then disable window
			if (this.disableBrowser) {
				this.disabler.zIndex = this.style.zIndex - 1;
				this.disabler.disable();
			}
			
			// if loading image is to be shown then add div for loading image and show it
			// this will need to be centered on the screen
			if (this.showImage) {
				// show loading image
				var div = addDiv('bluntModalLoadingImage');
				var newimg = document.createElement('img');
				newimg.setAttribute('src', this.images[this.imageId].src);
				newimg.setAttribute('width', this.images[this.imageId].width);
				newimg.setAttribute('height', this.images[this.imageId].height);
				newimg.setAttribute('alt', this.images[this.imageId].alt);
				newimg.setAttribute('title', this.images[this.imageId].alt);
				div.appendChild(newimg);
				div.style.position = 'absolute';
				div.style.zIndex = this.style.zIndex+1;
				div.style.padding = '20px';
				div.style.backgroundColor = '#FFFFFF';
				div.style.borderColor = '#000000';
				div.style.borderStyle = 'solid';
				div.style.borderWidth = '1px';
				div.style.top = '0';
				div.style.left = '0';
				width = div.clientWidth;
				height = div.clientHeight;
				posLeft = (this.windowWidth - width) / 2 + this.offsetX;
				posTop = (this.windowHeight - height) /2 + this.offsetY;
				div.style.left = posLeft+'px';
				div.style.top = posTop+'px';
				div.style.visibility = 'visible';
			}
			
			// everything else happens in the return function
			
			// call ajax to get contents
			ajax = new bluntAjax(this.url, this.returnFunction, this.ajaxMethod, this.ajaxParameters);
		} // end function this.show
		
		this.hide = function() {
			// remove modal windowif (document.getElementById(this.id)) {
			// effects would be added here
			//************************************************************************************************
			if (document.getElementById(this.modalId)) {
				// disable the resizeing/scrolling functions
				if (window.removeEventListener) {
					window.removeEventListener('resize', resizer.run, false);
					window.removeEventListener('scroll', scroller.run, false);
				} else if (window.detachEvent) {
					window.detachEvent('onresize', resizer.run);
					window.detachEvent('onscroll', scroller.run);
				}
				var b = document.getElementsByTagName('body')[0];
				var olddiv = document.getElementById(this.modalId);
				b.removeChild(olddiv);
				// remove window listeners
				// if window is disabled then enable window
			} // else div does not exist
			if (this.disableBrowser) {
				this.disabler.enable();
			}
		} // end function this.hide
		
		
		this.setClass = function(className) {
			// sets class name to add to modal div
			this.modalClass = className;
		} // end function this.setClass
		
		this.setImage = function(id) {
			// set loading image to use
			// see if images are loaded, if not then set image
			// turn show loading image on
			if (this.images != null && typeof(this.images[id]) != 'undefined') {
				this.imageId = id;
				this.showImage = true;				
			}
		} // end funciton this.setImage
		
		// internal functions
		
		this.modalReturn = function(server_response, httpConnection, httpStatus, statusText, readError) {
			// when data is returned from the server this fuction should be called with all the returned data
			//alert('Server Response: '+server_response);
			//alert('HTTP Connection: '+httpConnection);
			//alert('HTTP Status: '+httpStatus);
			//alert('HTTP Status Text: '+statusText);
			//alert('HTTP Read Error: '+readError);
			
			//alert(this.modalId);
			
			// lets check for errors first
			//alert(httpStatus);
			if (httpConnection) {
				if (httpStatus == 200) {
					if (readError == '') {
						// call was successfull
						
						// create new div for modal window
						var div = addDiv(this.modalId);
						
						// apply styles to modal window (start with div being hidded)
						// insert content into modal window
						
						div.innerHTML = server_response;
						
						applyStyles(div, this.style);
						
						this.calcLocation(div);
						// some of the styles are already added when we do the
						//			calcLocation, but position: absolute must be applied first
						
						// calculate size of modal window
						// position modal window
						//alert(div.clientWidth+':'+div.clientHeight);
						
						
						// add listeners
						
						if (window.addEventListener) {
							window.addEventListener('resize', resizer.run, false);
							window.addEventListener('scroll', scroller.run, false);
						} else if (window.attachEvent) {
							window.attachEvent('onresize', resizer.run);
							window.attachEvent('onscroll', scroller.run);
						}
						
						// show modal window
						//				this is where effects will be added
						// when effects are added these function will be called at this point
						// right now, just show it
						
						div.style.visibility = 'visible';
						
					} else {
						if (bluntAjaxDebug) {
							alert('Ajax Error reading http response: '+readError);
						}
					}
				} else {
					if (bluntAjaxDebug) {
						alert('Ajax http Error: '+statusText);
					}
				}
			} else {
				if (bluntAjaxDebug) {
					alert('Ajax Error: Failed to create an http connection!');
				}
			}
			
			// if loading image is shown then remove it
			if (this.showImage) {
				removeDiv('bluntModalLoadingImage');
			}
			
		} // end function this.modalReturn
		
		function addDiv(id) {
			// add a child div to the body of the document with id or id
			// return the div object
			//alert(id);
			if (!document.getElementById(id)) {
				var b = document.getElementsByTagName('body')[0];
				var newdiv = document.createElement('div');
				newdiv.setAttribute('id',id);
				if (id == this.modalId) {		
					newdiv.setAttribute('class', this.modalClass);
				}
				b.appendChild(newdiv);	
				// all newly inserted divs start out hiden
				newdiv.style.visibility = 'hidden';
				var div = newdiv;
			} else {
				// div already exists
				// we should not get here, but just in case
				// alert error
				// however, if this is a second layer, which it could be, then
				// the developer should have given this nexxt div a different name as well as
				// increased the z-index
				if (typeof(bluntAjaxDebug) == 'undefined' || bluntAjaxDebug === true) {
					alert('the requested div "'+id+'" already exists');
				}
				var div = false;
			}
			//alert(id);
			// return the new div or the old div it it already exists
			//div = document.getElementById(id);			
			return div;
		} // end function addDiv
		
		function removeDiv(id) {
			if (document.getElementById(id)) {
				// disable the resizeing function
				var b = document.getElementsByTagName('body')[0];
				var olddiv = document.getElementById(id);
				b.removeChild(olddiv);
			} // else div does not exist
		} // enf function removeDiv
		
		this.calcLocation = function(div) {
			// calculate the size and location of the modal window
			//this.modalWidth = 'auto';
			//this.modalHeight = 'auto';
			//this.windowMargin = 15;
			//this.limitBy = 'bluntModal';
			
			
			divWidth = this.modalWidth;
			divHeight = this.modalHeight;
			if (this.limitModalToWindow) {
				if (divWidth != 'auto' && divWidth > this.windowWidth + this.windowMargin * 2) {
					divWidth = this.windowWidth - this.windowMargin *2;
				}
				if (divHeight != 'auto' && divHeight > this.windowHeight + this.windowMargin *2) {
					divheight = this.windowHeight - this.windowMargin *2;
				}
				if (this.limitBy == this.modalId) {
					div.style.overflow = 'auto';
				} else {
					limitDiv = document.getElementById(this.limitBy);
					limitDiv.style.width = '100%';
					limitDiv.style.height = '100%';
					limitDiv.style.overflow = 'auto';
				}
			}
			if (divWidth < this.minWidth) {
				divWidth = this.minWidth;
			}
			if (divHeight < this.minHeign) {
				divHeight = this.minHeight;
			}
			this.style.width = divWidth;
			if (divWidth != 'auto') {
				this.style.width += 'px';
			}
			this.style.height = divHeight;
			if (divHeight != 'auto') {
				this.style.height += 'px';
			}
			div.style.position = 'absolute';
			div.style.width = this.style.width;
			div.style.height = this.style.height;
			//alert(this.windowHeight);
			//alert(div.clientHeight);
			
			var left = ((this.windowWidth - div.clientWidth) / 2) + this.offsetX;
			if (left < this.windowMargin) {
				left = this.windowMargin;
			}
			//alert(this.windowHeight+':'+div.clientHeight+':'+this.offsetY);
			
			var top = ((this.windowHeight - div.clientHeight) / 2) + this.offsetY;
			if (top < this.windowMargin) {
				top = this.windowMargin;
			}
			this.style.left = left+'px';
			this.style.top = top+'px';
			div.style.left = left+'px';
			div.style.top = top+'px';
			// see if div should be constrained by window
			// see if height or width is set
			// calculate new size??? based on the above
			// set overflow???
			// calculate position for placement
			// set div.style.??? with values
			
			// set overflow of limiting division
			// set height and width of limiting division
			// this may not be perfect
			
		} // end function this.calcLocation
		
		function applyStyles(div, styles) {
			// apply the styles in the array styles to the div with id of id
			// array in form styles['width'] = '200px' etc
			for (var sIndex in styles) {
				div.style[sIndex] = styles[sIndex];
				//alert(sIndex+': '+styles[sIndex]+'; ==== '+div.style[sIndex]);
			}
		} // end function applyStyles
		
		function bluntModalGetWindowSize() {
			var WindowWidth = 100000, WindowHeight = 100000;
			var D = document;
			var W = window;
			
			if (typeof(W.innerWidth) != 'undefined' &&
								 W.innerWidth !== null) {
				WindowWidth = Math.min(WindowWidth, W.innerWidth);
				WindowHeight = Math.min(WindowHeight, W.innerHeight);
			}
			
			if (typeof(D.body) != 'undefined' && D.body !== null) {
				if (typeof(D.body.clientWidth) != 'undefined' && D.body.clientWidth !== null) {
					//WindowWidth = Math.min(WindowWidth, D.body.clientWidth);
					//WindowHeight = Math.min(WindowHeight, D.body.clientHeight);
				}
				if (typeof(D.body.scrollWidth) !== 'undefined' && D.body.scrollWidth !== null) {
					//WindowWidth = Math.min(WindowWidth, D.body.scrollWidth);
					//WindowHeight = Math.min(WindowHeight, D.body.scrollHeight);
				}
				if (typeof(D.body.offsetWidth) != 'undefined' && D.body.offsetWidth !== null) {
					//WindowWidth = Math.min(WindowWidth, D.body.offsetWidth);
					//WindowHeight = Math.min(WindowHeight, D.body.offsetHeight);
				}
			}
			
			if (typeof(D.documentElement) != 'undefined' && D.documentElement !== null) {
				if (typeof(D.documentElement.clientWidth) != 'undefined' && D.documentElement.clientWidth !== null) {
					WindowWidth = Math.min(WindowWidth, D.documentElement.clientWidth);
					WindowHeight = Math.min(WindowHeight, D.documentElement.clientHeight);
				}
				if (typeof(D.documentElement.scrollWidth) != 'undefined' && D.documentElement.scrollWidth !== null) {
					//WindowWidth = Math.min(WindowWidth, D.documentElement.scrollWidth);
					//WindowHeight = Math.min(WindowHeight, D.documentElement.scrollHeight);
				}
				if (typeof(D.documentElement.offsetWidth) != 'undefined' && D.documentElement.offsetWidth !== null) {
					if (WindowWidth, D.documentElement.offsetWidth > 0) {
						//WindowWidth = Math.min(WindowWidth, D.documentElement.offsetWidth);
					}
					if (D.documentElement.offsetHeight > 0) {
						//WindowHeight = Math.min(WindowHeight, D.documentElement.offsetHeight);
					}
				}
			}
			
			if (typeof(D.getElementsByTagName('body')[0]) != 'undefined' && D.getElementsByTagName('body')[0] !== null) {
				if (typeof(D.getElementsByTagName('body')[0].clientWidth) != 'undefined' && D.getElementsByTagName('body')[0].clientWidth !== null) {
					if (D.getElementsByTagName('body')[0].clientWidth > 0) {
						//WindowWidth = Math.min(WindowWidth, D.getElementsByTagName('body')[0].clientWidth);
					}
					if (D.getElementsByTagName('body')[0].clientHeight > 0) {
						//WindowHeight = Math.min(WindowHeight, D.getElementsByTagName('body')[0].clientHeight);
					}
				}
			}
			
			// final check
			/*
			div = addDiv('testsizediv');
			div.style.position = 'absolute';
			div.style.width = '100%';
			div.style.height = '100%'
			WindowWidth = Math.min(WindowWidth, div.clientWidth);
			WindowHeight = Math.min(WindowHeight, div.clientHeight);
			removeDiv('testsizediv');
			*/
			return [WindowWidth, WindowHeight];
		} // end function getWindowSize
	
		function bluntModalDefineImages() {
			// need to rewrite this to use bluntScriptPath
			// may want to add image list to the php script that sets the above variable
			// to dynamically set up the images with php rather than js
			// ***************************************************************************************
			//	A PHP script should be written that will auto populate the images array
			//	based on the images located in the images/loading/ folder
			
			// ***************************************************************************************
			var images = new Array();
			images[0] = new Array();
			images[0]['src'] = bluntModalScriptPath+'images/loading/please-wait.000.gif';
			images[0]['width'] = 92;
			images[0]['height'] = 28;
			images[0]['alt'] = 'Please Wait';
			images[0]['title'] = 'Please Wait';
			return images;
		} // end function bluntModalDefineImages
	
		function bluntModalGetScrollOffset() {
			var ScrollOffsetX = 0, ScrollOffsetY = 0;
			if( typeof( window.pageYOffset ) == 'number' ) {
					//Netscape compliant
				ScrollOffsetY = window.pageYOffset;
				ScrollOffsetX = window.pageXOffset;
			} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
				//DOM compliant
				ScrollOffsetY = document.body.scrollTop;
				ScrollOffsetX = document.body.scrollLeft;
			} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
				//IE6 standards compliant mode
				ScrollOffsetY = document.documentElement.scrollTop;
				ScrollOffsetX = document.documentElement.scrollLeft;
			}
			return [ScrollOffsetX, ScrollOffsetY];
		} // end bluntModalGetScrollOffset
		
		this.recalc = function() {
			div = document.getElementById(this.modalId);
			var size = bluntModalGetWindowSize();
			this.windowWidth = size[0];
			this.windowHeight = size[1];
			var offset = bluntModalGetScrollOffset();
			this.offsetX = offset[0];
			this.offsetY = offset[1];
			this.calcLocation(div);
		} // end function this.resizeFunction
		
	} // end function bluntModal
	
	function bluntModalReturn(obj) {
		//alert(obj);
		// this function will just pass everything back to the class
		this.modalReturn = function(server_response, div, pass, httpConnection, httpStatus, statusText, readError) {
			obj.modalReturn(server_response, httpConnection, httpStatus, statusText, readError);
		}
	} // end function bluntModalReturn
	
	function bluntModalResize(obj) {
		// function to call resize function of class
		this.run = function() {
			obj.recalc();
		}
	} // end function bluntModalResize
	
	function bluntModalScroll(obj) {
		// function to call scroll function of class
		this.run = function() {
			obj.recalc();
		}
	} // end function bluntModalScroll
	
	/*
	
		CONFUGURATION
		
		a discussion of configuration requirments of this class (bluntModal)
		
		This class (bluntModal) requires certain variables to be set up and the inclusion of 2 other classes as mentioned at the top of this document. This configuration is occomplished by calling the script blunt.js.config.php as the src to a script tag. This php script automatically reads and output all the files that end in the extension '.js' and sets up the required variables. If you are unable to use php on the server then there are two choices. The first is to create a similar script in the language of your choice and the second id to manually create the configuration script and manually include the .js files in your web page.
		
		The following variables are required by this class
		
		bluntScriptPath = '/path/to/script/directory
			This variable tells this class where it is located on the server. This is an absolute path from the root of the website to the folder that contains this file.
			
		bluntModalLoadingImages
			This is an array that contains information pertaining to the various loading images. This information is optional and only required if you intend to use the loading image fearture of this class. The array is in the following format.
			
			bluntModalLoadingImages = new Array();
					This is the base array
			bluntModalLoadingImages[0] = new Array();
					Each inmodalIdual images in itself an array, the subscript is the image number and the format of each image array is as follows:
					
					bluntModalLoadingImages['.$image_number.'] = new Array();'."\r\n";
						bluntModalLoadingImages[0]['url']			// path to image from bluntScriptPath
						bluntModalLoadingImages[0]['width'] 	// the width of the image in pixels
						bluntModalLoadingImages[0]['height']	// the height of the image in pixels
						bluntModalLoadingImages[0]['alt']			// the text that will be used as the alt text of the image
		
		
		ADDING NEW IMAGES
			
			Images are optional. The class will check that the varaiable bluntModalLoadingImages is defined and if it is it will setup image use. If the varaible is undefined, then no loading images will be used (even if you use the functions that would call a specific image)
			
			Any number of images can be added, especially when using the automated script to set up the image array. All that is required is to name the file in the proper format. This format is as follows "alt-text.image_number.ext", where"
			
				alt-text = the alt text to be used for the image. This is simlpe text and - (dashes) are interpreted as spaces.
											if you want you alt text to be "data loading" then this portion of the file name would simply be "data-loading"
				image-number = the image number for this image. Each image number, when evaluated to an intiger, must be unique. (0, 1, 2, etc...)
				
				ext = the file extension: jpg, giv, png, etc...
				
					So, to have a gif image that uses the alt text of "data-loading" in image number 10 you would name the file something like:
						"data-loading.010.gif"
	
	*/