var c_page = {
	width : null,
	height : null,
	sTop : null,
	sLeft : null,
	getSize : function(element) {
		var element = (element)?element:(window.clientHeight)?window:document.body;

		this.height = element.clientHeight;
		this.width = element.clientWidth;

		var size = {};
		size.h = this.height;
		size.w = this.width;

		return size;
	},
	getScrollPosition : function(element) {
		var element = (element)?element:document.body;

		this.sTop = element.scrollTop;
		this.sLeft = element.scrollLeft;

		var position = {};
		position.t = this.sTop;
		position.l = this.sLeft;

		return position;
	}
}

if(!window.modal) {
	var modal = {
		size : {
			width : null,
			height : null
		},
		position : {
			top : null,
			left : null
		},
		background : {
			color : null,
			opacity : null
		},
		HTML : null,
		show : function(options) {
			this.setPosition();
			var pu_ContainerObj = document.getElementById('pup_container');
			pu_ContainerObj.style.display = 'block';
		},
		close : function() {
			var pu_ContainerObj = document.getElementById('pup_container');
			pu_ContainerObj.style.display = 'none';
		},
		setPosition : function(options) {
			if(options && options != 'undefined') {
				this.position.top = (options['top'])?options['top']:'middle';
				this.position.left = (options['left'])?options['left']:'middle';
			}
			
			pu_windowObj = document.getElementById('pu_window');
			
			var theTop, theLeft;
			
			theTop = (this.position.top == 'middle')?((c_page.getSize().h > c_page.getSize(pu_windowObj).h)?((c_page.getSize().h - c_page.getSize(pu_windowObj).h) / 2):0) + 'px':this.position.top;
			theLeft = (this.position.left == 'middle')?((c_page.getSize().w > c_page.getSize(pu_windowObj).w)?((c_page.getSize().w - c_page.getSize(pu_windowObj).w) / 2):0) + 'px':this.position.left;
			
			pu_windowObj.style.top = theTop;
			pu_windowObj.style.left = theLeft;
		},
		setSize : function(options) {
			if(options && options != 'undefined') {
				this.size.width = (options['width'])?options['width']:'auto';
				this.size.height = (options['height'])?options['height']:'auto';
			}
			
			pu_windowObj = document.getElementById('pu_window');
			
			pu_windowObj.style.width = this.size.width;
			pu_windowObj.style.height = this.size.height;
		},
		setBackground : function(options) {
			if(options && options != 'undefined') {
				this.background.color = (options['bgColor'])?options['bgColor']:'transparent';
				this.background.opacity = (options['bgOpacity'])?options['bgOpacity']:0;
			}
			pu_backgroundObj = document.getElementById('pup_background');
			
			pu_backgroundObj.style.background = this.background.color;
			if(!document.all) {
				pu_backgroundObj.style.opacity = this.background.opacity;
			} else {
				pu_backgroundObj.style.filter = 'alpha(opacity = ' + (this.background.opacity * 100) + ')';
			}
		},
		setContent : function(cHtml) {
			this.HTML = (cHtml)?cHtml:'';
			
			var pu_windowInnerObj = document.getElementById('pu_inner');
			if(pu_windowInnerObj) {
				pu_windowInnerObj.innerHTML = this.HTML;
			}
		},
		_createLayout : function() {
			// Obtain the body to put the popup
			var bodyTag = document.getElementsByTagName('body');
			bodyTag = (bodyTag)?bodyTag[0]:null;

			if(!bodyTag) {
				setTimeout(this._createLayout, 200);
				return false;
			}

			// If pup_container don't exist, then I crate that
			if(!document.getElementById('pup_container')) {
				// Create the popup container and put it in body
				var pu_Container = '<div class="pup_container" id="pup_container"></div>';
				//bodyTag.innerHTML += pu_Container;
				jQuery(bodyTag).append(pu_Container);
			}
			
			// Set the pup container attributes
			var pu_ContainerObj = document.getElementById('pup_container');
			pu_ContainerObj.style.display = 'none';
			
			pu_ContainerObj.style.position = (document.all)?'absolute':'fixed';
			
			pu_ContainerObj.style.width = '100%';
			pu_ContainerObj.style.height = '100%';
			
			pu_ContainerObj.style.top = '0';
			pu_ContainerObj.style.left = '0';
			pu_ContainerObj.style.zIndex = '99999999';
			
			// If pup_background don't exist, then I crate that
			if(!document.getElementById('pup_background')) {
				// Create the modal background
				var pu_background = '<div class="pup_background" id="pup_background"></div>';
				pu_ContainerObj.innerHTML += pu_background;
			}
			
			var pu_backgroundObj = document.getElementById('pup_background');
			pu_backgroundObj.style.position = 'absolute';
			
			pu_backgroundObj.style.width = '100%';
			pu_backgroundObj.style.height = '100%';
			
			pu_backgroundObj.style.top = '0';
			pu_backgroundObj.style.left = '0';
			
			if(!document.getElementById('pu_window')) {
				// Create the modal window
				var pu_window = '<div class="pu_window" id="pu_window"><div class="pu_inner" id="pu_inner"></div>';
				pu_ContainerObj.innerHTML += pu_window;
			}
			var pu_windowObj = document.getElementById('pu_window');
			
			pu_windowObj.style.position = 'absolute';
		},
		ie_onScroll : function() {
			var pu_ContainerObj = document.getElementById('pup_container');
			if(!pu_ContainerObj) return;
			
			pu_ContainerObj.style.top = c_page.getScrollPosition().t;
		},
		init : function(options) {
			this._createLayout();
			
			if(options && options != 'undefined') {
				this.setSize(options);
				this.setPosition(options);
				this.setBackground(options);
				this.setContent((options['HTML'])?options['HTML']:'');
			}
			
			var _this = this;
			var pu_backgroundObj = document.getElementById('pup_background');
			
			// Set events
			if(document.all) {
				window.attachEvent('onscroll',_this.ie_onScroll);
				window.attachEvent('onresize',function() {
					_this.setPosition();
				});
				pu_backgroundObj.attachEvent('onclick',_this.close);
			} else {
				window.addEventListener('resize',function() {
					_this.setPosition();
				},true);
				pu_backgroundObj.addEventListener('click',_this.close,false);
			}
		}
	}
}

var modOptions = {
	//'width' : '200px',
	//'height' : '200px',
	'top' : 'middle',
	'left' : 'middle',
	'bgColor' : 'white',
	'bgOpacity' : 0.75
}

function startModalComponent() {
	modal.init(modOptions);
}

function showModal(html) {
	modal.setContent(html);
	modal.show();
	modal.setPosition(modOptions);
}

//startModalComponent();
jQuery(document).ready(function() {
	startModalComponent();
});
/*if(document.all) {
	window.attachEvent('onload',function() {
		startModalComponent();
	});
} else {
	window.addEventListener('load',function() {
		startModalComponent();
	}, true);
}*/