var PopupContent = Class.create();

PopupContent.prototype = {
	initialize : function(container, duration, seconds) {
		this.screenFade = null;
		this.container = $(container);
		this.duration = (duration) ? duration : .2;
		this.autoClose = (seconds) ? (seconds + duration) : 0;
		this.onFinish = null;
	},

	show : function () {
		var screenFade = this.screenFade;
		if (!screenFade) {
			screenFade = new Element("div", { id : "screenFade" });
		}
		
		document.body.appendChild(screenFade);
		screenFade.setStyle({
			height: document.body.clientHeight + "px",
			width: document.body.clientWidth + "px",
			backgroundColor: "#666666",
			opacity: 0.8,
			position: "absolute",
			top: "0",
			left: document.viewport.getScrollOffsets().left + "px"
		});

		var container = this.container;
		var leftOffset = (document.viewport.getWidth() > container.getWidth()) ? ((document.viewport.getWidth() - container.getWidth()) / 2) : 0;
		container.setStyle({
			position: "absolute",
			left : document.viewport.getScrollOffsets().left + (leftOffset - 20) + "px",
			top : (document.viewport.getScrollOffsets().top + 100) + "px"
		});
		new Effect.Appear(this.container, { duration : this.duration });
		
		if(this.autoClose != 0){
			var popupContent = this;

			this.hideTimer = new PeriodicalExecuter(
				function (pe) {
					popupContent.hide();
				},
				this.autoClose
			); 
		}
	},

	hide : function () {
		if(this.hideTimer){
			this.hideTimer.stop();
		}

		new Effect.Fade(this.container, { duration : this.duration, afterFinish : function () {$("screenFade").remove();} });
		if(this.onFinish) {
			this.onFinish();
		}
	}
};