var WebModal = {
	bgMaskUrl : 'http://mirror.altrec.com/new_includes/images/maskBG.png',
	PositionElements : function()
	{
		var theBody = this.theBody;
		var screenWidth = 0;
		if (window.innerWidth!=window.undefined) screenWidth = window.innerWidth; 
		else if (document.compatMode=='CSS1Compat') screenWidth = document.documentElement.clientWidth; 
		else if (document.body) screenWidth = document.body.clientWidth; 
		
		var screenHeight = 0;
		if (window.innerHeight!=window.undefined) screenHeight = window.innerHeight;
		else if (document.compatMode=='CSS1Compat') screenHeight = document.documentElement.clientHeight;
		else if (document.body) screenHeight = document.body.clientHeight; 
		var windowHeight = screenHeight;
		
		if (screenHeight < theBody.scrollHeight) 
		{
			screenHeight = theBody.scrollHeight;
		}
	
		if (screenWidth > theBody.scrollWidth) {
			screenWidth = theBody.scrollWidth;
		}
		
		var scrollTop = 0;
		if (self.pageYOffset){scrollTop = self.pageYOffset;}
		else if (document.documentElement && document.documentElement.scrollTop){scrollTop = document.documentElement.scrollTop;}
		else if (document.body) {scrollTop = document.body.scrollTop;}

		if (this.options.reposition || !this.placedOnce) 
		{
			this.container.style.top = (scrollTop + Math.round(windowHeight * (this.options.topPercentage / 100))) + "px";
		}

		this.bgMask.style.width = screenWidth+'px';
		var bgMaskTop = scrollTop - 200;
		if (scrollTop<0)
			scrollTop =0;
		var bgMaskLeft = 0;
		if (!(document.all && !/opera/i.test(navigator.userAgent)) && this.theBody.style.marginLeft)
			bgMaskLeft = -1 * Number(this.theBody.style.marginLeft.split('px')[0]);
		this.bgMask.style.left = bgMaskLeft + 'px';
		this.bgMask.style.top = scrollTop+'px';
		this.bgMask.style.height = windowHeight + 400 +'px';
		this.container.style.marginLeft = '-'+(Element.getWidth(this.container)/2)+'px';
		this.placedOnce = true;

	},
	
	Show : function(modalElement, options)
		{
			var defaults = {
				width : 400,
				height : null,
				topPercentage : 10,
				maxOpacity : 1,
				effects : true,
				reposition : true,
				callback : null,
				nocontent : false,
				animation : .4
			};
			if (document.all && !/opera/i.test(navigator.userAgent))
				defaults.maxOpacity = .80;
	
			this.options = Object.extend(defaults, options || {});
			if (!this.initialized)
			{
				this.initialized = true;
				this.theBody = document.body;
		
				this.bgMask = document.createElement('img');
				this.bgMask.src = this.bgMaskUrl;
				this.bgMask.style.zIndex = 11000;
				this.bgMask.style.position = 'absolute';
				this.bgMask.style.top = '0px';
				this.bgMask.style.left = '0px';
				
				this.bgMask.style.display = 'none';
				this.theBody.appendChild(this.bgMask);
				this.eventWindowResize = this.PositionElements.bindAsEventListener(this);
				this.eventKeyPress = this.KeyPress.bindAsEventListener(this);
				this.eventKeyPressBody = this.KeyPress.bindAsEventListener(this);
				
				this.container = document.createElement('div');
				this.container.style.position = 'absolute';
				this.container.style.zIndex = 11005;
				this.container.style.backgroundColor = 'white';
				this.container.style.left = '50%';
				if (this.options.width)
					this.container.style.width = this.options.width+'px';
				if (this.options.height)
					this.container.style.height = this.options.height+'px';
				this.container.style.display = 'none';
				this.theBody.appendChild(this.container);
			}
			
			//otherwise these will bleed
			for(var i = 0; i < document.forms.length; i++) {
				for(var e = 0; e < document.forms[i].length; e++){
					if(document.forms[i].elements[e].tagName == "SELECT") {
						document.forms[i].elements[e].style.visibility="hidden";
					}
				}
			}
			
			Event.observe(window, "resize", this.eventWindowResize);
			Event.observe(window, "scroll", this.eventWindowResize);
			Event.observe(window, "keypress", this.eventKeyPress);
			Event.observe(this.theBody, "keyup", this.eventKeyPressBody);
			Event.observe(this.bgMask, "click", this.Hide.bind(this));
			
			this.container.style.opacity = 0;
			this.bgMask.style.opacity = 0;

			if (this.options.nocontent)
			{
				this.container.style.visibility = 'hidden';
				modalElement = document.createElement('span');
			}
				
			if (this.options.effects)
			{
				new Effect.Opacity(this.bgMask, { from: 0, to: this.options.maxOpacity, duration: this.options.animation });
				new Effect.Opacity(this.container, { from: 0, to: 1, duration: this.options.animation});
			}
			else
			{
				Element.setOpacity(this.container, 1);
				Element.setOpacity(this.bgMask, 1);
			}
			this.bgMask.style.display = 'block';
			this.container.style.display = 'block';
			
			this.modalDiv = $(modalElement);
			this.modalDiv.style.display = 'block';
			
			this.parent = Element.up(this.modalDiv);
			this.container.appendChild(this.modalDiv);
			this.PositionElements();
			if (this.options.callback)
				this.options.callback();
			return this.container;
		},
	KeyPress : function(e)
	{
      	if(e.keyCode == Event.KEY_ESC)
         	this.Hide();
	},
	Hide : function()
		{
			if (!this.modalDiv)
				return;
			for(var i = 0; i < document.forms.length; i++) {
				for(var e = 0; e < document.forms[i].length; e++){
					if(document.forms[i].elements[e].tagName == "SELECT") {
						document.forms[i].elements[e].style.visibility="visible";
					}
				}
			}
			
			this.placedOnce = false;
			Event.stopObserving(window, 'resize', this.eventWindowResize);
			Event.stopObserving(window, "scroll", this.eventWindowResize);
			Event.stopObserving(window, "keypress", this.eventKeyPress);
			Event.stopObserving(this.theBody, "keyup", this.eventKeyPressBody);
			if (this.options.effects)
			{
				new Effect.Opacity(this.container, { from: 1, to: 0, duration: this.options.animation/2});
				new Effect.Opacity(this.bgMask, { from: this.options.maxOpacity, to: 0, duration : this.options.animation-.1 });
				this.timer = setTimeout('WebModal.RemoveFromDom()', this.options.animation*1000);
			}
			else
			{
				this.timer = null;
				this.RemoveFromDom();
			}
		},
		
	RemoveFromDom : function()
		{	
			this.bgMask.style.display = 'none';
			if (this.modalDiv) 
			{
				this.modalDiv.style.display = 'none';
				this.container.style.display = 'none';
				if (this.parent) 
					this.parent.appendChild(this.modalDiv);
				else this.theBody.appendChild(this.modalDiv);
				if (this.timer) clearTimeout(this.timer);
				this.timer = null;
				this.modalDiv = null;
			}
		}
};