// Modal Widow Class
// this class uses the Window Disabler Class and the Hajax Class
// this class will disable the borwser window and show a div to contain content
// this acts as a modal type window since the absolutely positioned "window" must be acted upon

// usage

// instantiate Modal Window
//		var modal = new w3tModal();
//
// Modal Properties
//
// set modal window width
//		modal.width = 200; // default = 200
// set modal window height
//		modal.height = 200; // default = 200
// enable/disable window disabler
//		modal.disable = true/false // default = true
// set modal window class
//		modal.cssClass = 'MyClass'; // default = none
// set modal z-index
//		modal.zIndex = 1000; // default = 1000;
// set modal id
//		in most situations there should be no reason to change the modal id.
//		this is provided in those rare conditions where a different id is usefull
//		in this case you should use the following, and you will have to use the same id each time you wish to
//		refer to the same div // default id = "w3tModalWindow"
//			modal.setId = 'MyId';
// set modal position
//		there are several ways to set the locaton of the modal "window"
//		the first is to simple give the left and top postion
//				modal.left = 100; // = number of pixels from left
//				modal.top = 100;	// default for both is 0 (zero)
//		the second way is to specify both locations at once
//				modal.setPosition(left, top);
//		the last way is to specify a location in one of the following terms and to give a padding from the edge of the browser
//				modal.setLocation(string locaion [, integer left/right padding [, integer top/bottom padding]])
//						example: modal('tl', 10, 10);
//								this would place the modal window in the top left or the browser window
//								10 pixels from the left edge and 10 pixels from the top edge of the browser window
//						location parameter may be one of the following
//								tl = top left
//								tc = top center
//								tr = top right
//								ml = middle left
//								mc = middle center
//								mr = middle right
//								bl = bottom left
//								bc = bottom center
//								br = bottom right
// set modal "window" style
//		this enable the setting of all styles for the modal window
//		while you can use a class and include the style rules in a css style sheet for the class
//		some may prefer to set the style here
// 		this can be done by setting modal styles the same way that you normally set style is JavaScript
//				to set background color
//						modal.style.backgroundColor = '#FFFFFF';
//				to set border properties
//						modal.style.border = '1px solid #000000';
//		Any style that can be set using JavaScript can be set in this way
//		There are no default styles, so if you want the widow to appear as a window then styles need to be set
//		the minimum suggested are the example given above

// Disabler Properties
//
// set opacity of disabler (set as a percentage from 0 to 100 percent opaque) - default is 50
//		modal.disabler.opacity = 50;
// set color of disabler - default is #000000 (black)
//		modal.disabler.color = '#000000';  // use only valid color values

// Hajax Properites
//		Hajax id the Ajax Class that this class uses for getting content to display in the modal window
//
// to set the URL
//		modal.url = '/mypage.html';
// to set parameters
//		modal.parameters = 'a=1&b=4'
//				parameters look like a url query string
// to set the method
//		modal.method = 'GET'
//			posible values are GET and POST, default value is GET
// after all ajax properties are set then you need to set content to true
//		modal.content = true
//			if you do not set this to true then this class will not attempt to retrive the content
//			to turn if off set it to false
// show a loading image
//		modal.showImage = true; default = true. to not show an image set to false
// select image to show
//		modal.image = 0; default = 0;
//				currently there is only 1 image, with more images you could select which image to show
//
// there are other more advanced features
// 		modal.pass
//		modal.returnFunction
//			these set the funtion to call to deal with the server response and values to pass to this function
//			by default the data retrieved from the server is put into the modal "window" as this is the purpose of
//			having a modal window. For a more detailed discussion of call functions and pass values, see the hajax class file
//			a detailed explanation is not included here because in most cercumstances they should not be needed

function w3tModal() {
	
	// modal window properties and defaults
	this.id = 'w3tModalWindow';
	
	this.cssClass = null;
	this.style = new Array();
	this.width = 200;
	this.height = 200;
	this.disable = true;
	this.windowSize = w3tModalGetWindowSize();
	this.windowWidth = this.windowSize[0];
	this.windowHeight = this.windowSize[1];
	this.ScrollOffest = w3tModalGetScrollOffset();
	this.offsetX = this.ScrollOffest[0];
	this.offsetY = this.ScrollOffest[1];
	this.top = 0;
	this.left = 0;
	this.zIndex = 1000;
	
	// these are values to pass to the window disabler class
	this.disabler = new w3tWindowDisabler();
	this.disabler.opacity = 50;
	this.disabler.color = '#000000';
	this.disabler.id = this.id+'WindowDisabler';
	
	// loading images
	/*
	var images = w3tModalDefineImages();
	this.showImage = true;
	this.image = 0;
	*/
	// hajax properties
	this.content = false;
	this.url = 'asktheexpert.php';
	this.parameters = '';
	this.method = 'GET';
	this.pass = this.id;
	
	this.setId = function(id) {
		if (this.pass == this.id) {
			this.pass = id;
		}
		this.id = id;
		this.disabler.id = this.id+'WindowDisabler';
	}
	
	this.setLocation = function(location, padLeftRight, padTopBottom) {
		this.offsetX = this.ScrollOffest[0];
		this.offsetY = this.ScrollOffest[1];
		if (location in {'tl':'', 'tc':'', 'tr':'', 'ml':'', 'mc':'', 'mr':'', 'bl':'', 'bc':'', 'br':''}) {
			if (!padLeftRight) {
				padLeftRight = 0;
			}
			if (!padTopBottom) {
				padTopBottom = 0;
			}
			var modalLeft = 0;
			var modalTop = 0;
			var xLocation = location.substring(1);
			if (xLocation == 'l') {
				modalLeft = padLeftRight;
			} else if (xLocation == 'c') {
				modalLeft = Math.floor(this.windowWidth/2 - this.width/2);
			} else {
				// r
				modalLeft = this.windowWidth-padLeftRight-this.width;
			}
			var yLocation = location.substr(0,1);
			if (yLocation == 't') {
				modalTop = padTopBottom;
			} else if (yLocation == 'm') {
				modalTop = Math.floor(this.windowHeight/2 - this.height/2);
			} else {
				// b
				modalTop = this.windowHeight-padTopBottom-this.height;
			}
			modalLeft = modalLeft + this.offsetX;
			modalTop = modalTop + this.offsetY;
			if (modalLeft < 0) {
				modalLeft = 0;
			}
			if (modalTop < 0) {
				modalTop = 0;
			}
			this.left = modalLeft;
			this.top = modalTop;
		} else {
			alert('Invalid location value for Modal set Location! Please see documentation');
		}
	}
	
	this.setPosition = function (left, top) {
		if (!isNaN(left) && !isNaN(top)) {
			this.left = Math.floor(left) + this.offsetX;
			this.top = Math.floor(top) + this.offsetY;
			if (this.left < 0) {
				this.left = 0;
			}
			if (this.top < 0) {
				this.top = 0;
			}
		} else {
			alert('modal Set Position only accespts Integer Values');
		}
	}
	
	this.returnFunction = function(response, id, httpConnection, httpStatus, statusText, readError) {
		modal = new w3tModal();
		modal.removeImage(id);
		if (httpConnection) {
			if (httpStatus == 200) {
				if (readError == '') {
					// call was successfull
					// throw response into inner html of passes div
					// check for existance of div
					div = document.getElementById(id);
					div.innerHTML = response;
				} else {
					alert('Ajax Error reading http response: '+readError);
				}
			} else {
				alert('Ajax http Error: '+httpStatus+': '+statusText);
			}
		} else {
			alert('Ajax Error: Failed to create an http connection!');
		}
	}
	
	this.show = function() {
		this.disabler.zIndex = this.zIndex - 1;
		this.disabler.disable();
		if (!document.getElementById(this.id)) {
			var b = document.getElementsByTagName('body')[0];
			var newdiv = document.createElement('div');
			var divIdName = this.id;
			newdiv.setAttribute('id',divIdName);
			b.appendChild(newdiv);
			div = document.getElementById(divIdName);
			div.style.width = this.width+'px';
			//div.style.height = this.height+'px';
			div.style.position = 'absolute';
			div.style.left = this.left+'px';
			div.style.top = this.top+'px';
			div.style.zIndex = this.zIndex;
			div.className = this.cssClass;
				
			for (var sIndex in this.style) {
				div.style[sIndex] = this.style[sIndex];
			}
			
			// show loading image
			if (this.showImage) {
				// insert image into modal window
				newImage = document.createElement('img');
				//alert(images[imageNumber]);
				newImage.setAttribute('src', images[this.image]['url']);
				newImage.setAttribute('alt', images[this.image]['alt']);
				newImage.setAttribute('id', this.id+'_image');
				newImage.setAttribute('width', images[this.image]['width']);
				newImage.setAttribute('height', images[this.image]['height']);
				newImage.setAttribute('title', images[this.image]['title']);
				div.appendChild(newImage);
				imageElement = document.getElementById(this.id+'_image');
				leftPos = Math.floor(this.width/2 - images[this.image]['width']/2);
				topPos = Math.floor(this.height/2 - images[this.image]['height']/2);
				with (imageElement.style) {
					position = 'absolute';
					left = leftPos+'px';
					top = topPos+'px';
				}
			}
			
			if (this.content) {
				// content set to true, use ajax to retrieve content
				if (this.url != null) {
					hajax(this.url, this.returnFunction, this.parameters, this.method, this.pass)
				} else {
					alert ('No URL Specified');
				}
			}
			
		} // else modal window is alread open
	}
	
	this.removeImage = function(id) {
		if (document.getElementById(id+'_image')) {
			parentDiv = document.getElementById(id);
			image = document.getElementById(id+'_image');
			parentDiv.removeChild(image);
		} // else image does not exist
	}
	
	this.hide = function() {
		// remove modal window
		var b = document.getElementsByTagName('body')[0];
		var olddiv = document.getElementById(this.id);
		b.removeChild(olddiv);
		// if browser is disabled with this id
		this.disabler.enable();
	}
	
	// example loop through an array an using key => value
	this.showStyles = function() {
		for (var sIndex in this.style) {
			alert(sIndex+'='+this.style[sIndex]);
		}
	}
	
	function w3tModalDefineImages() {
		var images = new Array();
		images[0] = new Array();
		images[0]['url'] = '/shared/js/images/loading/loading1.gif';
		images[0]['width'] = 92;
		images[0]['height'] = 28;
		images[0]['alt'] = 'Loading';
		images[0]['title'] = 'Loading';
		return images;
	}
	
	function w3tModalGetWindowSize() {
    var WindowWidth = 0, WindowHeight = 0;
    if (typeof(window.innerWidth) == 'number') {
      WindowHeight = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
      WindowHeight = document.documentElement.clientHeight;
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
      WindowHeight = document.body.clientHeight;
    }
		
		
    if (typeof(window.innerWidth) != 'undefined') {
        WindowWidth = window.innerWidth;
    }
    if (typeof(document.documentElement) != 'undefined' 
							 && typeof(document.documentElement.clientWidth) != 'undefined' 
							 && document.documentElement.clientWidth != 0) {
      if (document.documentElement.clientWidth > WindowWidth) {
        WindowWidth = document.documentElement.clientWidth;
			}
    }
    if (typeof(document.body) != 'undefined' 
							 && typeof(document.body.clientWidth) != 'undefined' 
							 && document.body.clientWidth != 0) {
      if (document.body.clientWidth > WindowWidth) {
        WindowWidth = document.body.clientWidth;
      }
    }
		if (document.getElementsByTagName('body')[0].clientWidth > WindowWidth) {
			WindowWidth = document.getElementsByTagName('body')[0].clientWidth;
		}
    return [WindowWidth, WindowHeight];
  }
	
	function w3tModalGetScrollOffset() {
		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];
	}
	
}