Opacity = {

	frameSrc: "/community/blank.html",
	needStretch: true,


	create: function() {
		// creating an iframe to put it behind the opacity div
		var bgFrame = document.createElement("iframe");
		bgFrame.className = "opacity_bg_frame";
		bgFrame.setAttribute("frameborder", "0");
		bgFrame.setAttribute("src", this.frameSrc);
		bgFrame.style.width = this.getPageSize()[2] + "px";
		bgFrame.style.height = this.getPageSize()[3] + "px";
		document.body.appendChild(bgFrame);
		this.frameObj = bgFrame;

		// creating a div which covers all the window's area
		var bgDiv = document.createElement("div");
		bgDiv.className = "opacity_bg";
		bgDiv.style.width = this.getPageSize()[2] + "px";
		bgDiv.style.height = this.getPageSize()[3] + "px";
		document.body.appendChild(bgDiv);
		this.divObj = bgDiv;

		// creating a div where the user can put content
		var contentDiv = document.createElement("div");
		contentDiv.className = "opacity_content";
		document.body.appendChild(contentDiv);
		this.contentDivObj = contentDiv;

		// attaching a listener which resizes the opacity elements to cover all the window
		//this.needStretch = true;
		//this.stretch();

		// attaching a key listener to make possible destroying all the opacity elements by pressing the Escape key
		if (document.addEventListener) document.addEventListener("keyup", Opacity.keyUp, false);
    	else if (document.attachEvent) document.attachEvent("onkeyup", Opacity.keyUp);
		else document.onkeyup = Opacity.keyUp;
	},


	add: function(newTitle, newContent, newWidth, newHeight, isAppendable) {
		var hdr = '<div class="hdr_title">' + newTitle + '</div><div class="hdr_slanty"></div><div class="hdr_close" title="Close" onclick="Opacity.destroy()">X</div><div class="defloater">&nbsp;</div>';

		var sizeArray = this.getPageSize();
		var scrollArray = this.getPageScroll();

		var newLeft = /*scrollArray[0] + */parseInt((sizeArray[2] - newWidth) / 2);
		var newTop  = /*scrollArray[1] + */parseInt((sizeArray[3] - newHeight) / 2);

		var contentDiv = this.contentDivObj;
		contentDiv.style.left = (newLeft - 2) + "px";
		contentDiv.style.top = (newTop - 2) + "px";
		contentDiv.style.width = newWidth + "px";
		contentDiv.style.height = newHeight + "px";
		if (isAppendable && document.getElementById(newContent)) {
			contentDiv.innerHTML = hdr + '<div class="cntnt" id="opacity_cntnt" style="height:' + (newHeight - 60) + 'px"></div>';
			document.getElementById('opacity_cntnt').appendChild(document.getElementById(newContent));
			document.getElementById(newContent).style.display = "block";
		}
		else
			contentDiv.innerHTML = hdr + '<div class="cntnt" style="height:' + (newHeight - 60) + 'px">' + newContent + '</div>';

        this.stretch();
	},


	stretch: function() {
		var sizeArray = this.getPageSize();
		var scrollArray = this.getPageScroll();

		this.divObj.style.width = (sizeArray[0] + scrollArray[0])+ "px";
		this.frameObj.style.width = (sizeArray[0] + scrollArray[0])+ "px";
		this.divObj.style.height = sizeArray[1] + "px";
		this.frameObj.style.height = sizeArray[1] + "px";

		var newLeft = /*scrollArray[0] + */parseInt((sizeArray[2] - this.contentDivObj.offsetWidth) / 2);
		var newTop  = /*scrollArray[1] + */parseInt((sizeArray[3] - this.contentDivObj.offsetHeight) / 2);

		this.contentDivObj.style.left = newLeft + "px";
		this.contentDivObj.style.top = newTop + "px";

		if (false && this.needStretch)
            window.setTimeout(function () { Opacity.stretch() }, 1000);
	},


	keyUp: function(e) {
		if (!e) e = event;

		var keyVal = null;
		if (e.keyCode) keyVal = e.keyCode;
		else if (e.which) keyVal = e.which;
		else if (e.charCode) keyVal = e.charCode;
		else if (e.keyIdentifier) keyVal = e.keyIdentifier;
		else return;

		if (parseInt(keyVal) == 27) Opacity.destroy();
	},


	destroy: function() {
		this.needStretch = false;
		this.stretch();
        document.body.removeChild(this.contentDivObj);
        document.body.removeChild(this.divObj);
        document.body.removeChild(this.frameObj);
	},


	getPageScroll: function() {
		var xScroll = 0, yScroll = 0;

		if (typeof(window.pageYOffset) == 'number') {
			xScroll = window.pageYOffset;
			yScroll = window.pageXOffset;
		} else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
			xScroll = document.body.scrollTop;
			yScroll = document.body.scrollLeft;
		} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
			xScroll = document.documentElement.scrollTop;
			yScroll = document.documentElement.scrollLeft;
		}

		return Array(yScroll, xScroll);
	},


	getPageSize: function() {
		var xPage, yPage;

		if (window.innerHeight && window.scrollMaxY) {
			xPage = window.innerWidth + window.scrollMaxX;
			yPage = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight) {
			xPage = document.body.scrollWidth;
			yPage = document.body.scrollHeight;
		} else {
			xPage = document.body.offsetWidth;
			yPage = document.body.offsetHeight;
		}

		var windowWidth, windowHeight;

		if (self.innerHeight) {
			if (document.documentElement.clientWidth) windowWidth = document.documentElement.clientWidth; 
			else windowWidth = window.innerWidth;
			if (document.documentElement.clientHeight == (window.innerHeight - 16)) windowHeight = document.documentElement.clientHeight;
			else windowHeight = window.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) {
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) {
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}

		pageWidth = windowWidth;

		if (windowHeight < yPage) pageHeight = yPage;
		else pageHeight = windowHeight;

		return Array(pageWidth, pageHeight, windowWidth, windowHeight)
	}

};