Prototype.require('scriptaculous.js');

PopupEffect=Class.create({
	onBrowserResizeHandler: null,
	options: null,
	element: null,
	oOverlappingFix: null,

	initialize: function(element, options) {
		this.oOverlappingFix=null;
		this.options={
			zIndex: 10,
			className: '',
			showEffect: null /*{method: 'appear', options: {}}*/,
			onShowEffect: null,
			hideEffect: null /*{method: 'appear', options: {}}*/,
			onHideEffect: null,
			onShow: null,
			onHide: null
		};
		this.element=$(element);
		this.setOptions(options);
	},

	setOptions: function(options) {
		Object.extend(this.options, options || {});
	},

	show: function() {
		if (this.element && !this.element.visible()) {
			if (this.options.className!='') {
				this.element.addClassName(this.options.className);
			}

			if (this.options.showEffect==null && this.options.onShowEffect==null) {
				this.element.show();
				this.oOverlappingFix=new OverlappingFix();
				this.oOverlappingFix.show(this.element);
				this.onShow();

			} else {
				// set overlapping fix
				this.element.setStyle({'visibility': 'hidden'});
				this.element.show();
				this.oOverlappingFix=new OverlappingFix();
				this.oOverlappingFix.show(this.element);
				this.element.hide();
				this.element.setStyle({'visibility': 'visible'});

				if (this.options.onShowEffect!=null) {
					this.options.onShowEffect.apply(this, this.element);

				} else {
					this.options.showEffect.options=this.options.showEffect.options || {};

					if (this.options.showEffect.method.toLowerCase()=='appear') {
						newOptions={ from: 0, to: this.options.alpha/100};
						Object.extend(newOptions, this.options.showEffect.options);
						this.options.showEffect.options=newOptions;
					}

					this.options.showEffect.options.afterFinish=this.onShow.bind(this);

					Effect[this.options.showEffect.method.charAt(0).toUpperCase() + this.options.showEffect.method.substring(1)](this.element, this.options.showEffect.options);
				}
			}

			// link event
			this.onBrowserResizeHandler=this.onBrowserResize.bindAsEventListener(this);
			Event.observe(window, 'resize', this.onBrowserResizeHandler);
		}
	},

	onShow: function() {
		if (typeof(this.options.onShow)=='function') {
			this.options.onShow.apply(this, $(arguments));
		}
	},

	hide: function() {
		Event.stopObserving(window, 'resize', this.onBrowserResizeHandler);
		this.onBrowserResizeHandler=null;

		if (this.options.hideEffect==null && this.options.onHideEffect==null) {
			this.element.hide();
			this.onHide();

		} else {
			if (this.options.onHideEffect!=null) {
				this.options.onHideEffect.apply(this, this.element);

			} else {
				this.options.hideEffect.options=this.options.hideEffect.options || {};
				this.options.hideEffect.options.afterFinish=this.onHide.bind(this);

				if (this.options.hideEffect.method.toLowerCase()=='fade') {
					newOptions={ from: this.element.getOpacity() || 1.0, to: 0.0};
					Object.extend(newOptions, this.options.hideEffect.options);
					this.options.hideEffect.options=newOptions;
				}

				Effect[this.options.hideEffect.method.charAt(0).toUpperCase() + this.options.hideEffect.method.substring(1)](this.element, this.options.hideEffect.options);
			}
		}
	},

	onHide: function() {
		if (this.oOverlappingFix!=null) {
			this.oOverlappingFix.remove();
			this.oOverlappingFix=null;
		}

		if (typeof(this.options.onHide)=='function') {
			this.options.onHide.apply(this, $(arguments));
		}
	},

	onBrowserResize: function() {
	}
});