Prototype.require('jojoPopupEffect.js');

Popup=Class.create(PopupEffect, {
	onResizeHandler: null,
	scrollX: 0,
	scrollY: 0,
	fadeBackgroundElement: null,

	initialize: function($super, element, options) {
		$super(element, options);
		this.fadeBackgroundElement=null;
		this.setOptions({
			fadeBackground: false,
			fadeBackgroundOption: {
				backgroundColor: '#888'
			},
			zIndex: 100
		});
		this.setOptions(options);
	},

	show: function($super) {
		if (this.options.fadeBackground) {
			Prototype.require('jojoFullscreenElement.js');

			var fadeOptions=this.options.fadeBackgroundOption;
			fadeOptions.zIndex=this.options.zIndex-1;
			this.fadeBackgroundElement=new FullScreenElement('', fadeOptions);
			this.fadeBackgroundElement.show();
		}

		dimension=Prototype.Browser.getDimensions();
		this.scrollX=dimension.offsetX;
		this.scrollY=dimension.offsetY;

		var popupDimension=this.element.getDimensions();
		var centerX=parseInt(((dimension.clientWidth-popupDimension.width)/2)+dimension.offsetX);
		var centerY=parseInt(((dimension.clientHeight-popupDimension.height)/2)+dimension.offsetY);
		var x;
		var y;

		if (popupDimension.height>dimension.clientHeight) {
			if (popupDimension.height>=dimension.height) {
				y=0;

			} else {
				y=[[0, centerY].max(), dimension.height-popupDimension.height].min();
			}

		} else {
			y=centerY;
		}

		if (popupDimension.width>dimension.clientWidth) {
			if (popupDimension.width>=dimension.width) {
				x=0;

			} else {
				x=[[0, centerX].max(), dimension.width-popupDimension.width].min();
			}

		} else {
			x=centerX;
		}

		this.element.setStyle({
			position: 'absolute',
			top: y+'px',
			left: x+'px',
			zIndex: this.options.zIndex
		});

		$super();

		// link event
		this.onResizeHandler=this.onResize.bindAsEventListener(this);
//		this.onBrowserResizeHandler=this.onBrowserResize.bindAsEventListener(this);
		this.onScrollHandler=this.onScroll.bindAsEventListener(this);
		this.element.observe('resize', this.onResizeHandler);
//		Event.observe(window, 'resize', this.onBrowserResizeHandler);
		Event.observe(window, 'scroll', this.onScrollHandler);
	},

	hide: function($super) {
		if (this.fadeBackgroundElement!=null) {
			this.fadeBackgroundElement.hide();
			this.fadeBackgroundElement=null;
		}

		// unlink event
		Event.stopObserving(this.element, 'resize', this.onResizeHandler);
//		Event.stopObserving(window, 'resize', this.onBrowserResizeHandler)
		Event.stopObserving(window, 'scroll', this.onScrollHandler)
		this.onResizeHandler=null;
//		this.onBrowserResizeHandler=null;
		this.onScrollHandler=null;

		$super();
	},

	onBrowserResize: function() {
		// change scroll reference
		var dimension=Prototype.Browser.getDimensions();
		this.scrollX=dimension.offsetX;
		this.scrollY=dimension.offsetY;

		this.onResize();

		// recall it after popup was repositionned
		if (this.fadeBackgroundElement!=null) {
			this.fadeBackgroundElement.onBrowserResize();
		}
	},

	onScroll: function() {
		this.onResize();
	},

	onResize: function() {
		var dimension=Prototype.Browser.getDimensions();
		var popupDimension=this.element.getDimensions();
		var centerX=parseInt(((dimension.clientWidth-popupDimension.width)/2)+dimension.offsetX);
		var centerY=parseInt(((dimension.clientHeight-popupDimension.height)/2)+dimension.offsetY);
		var x;
		var y;

		if (popupDimension.height>dimension.clientHeight) {
			if (popupDimension.height>=dimension.height) {
				y=0;

			} else {
				scrollOffsetY=parseInt((popupDimension.height-dimension.clientHeight)/2);
				direction=1;

				if (dimension.offsetY>=this.scrollY) {
					direction=-1;
				}

				if (this.scrollY<scrollOffsetY) {
					this.scrollY=scrollOffsetY;

				} else if (this.scrollY>dimension.height-dimension.clientHeight-scrollOffsetY) {
					this.scrollY=dimension.height-dimension.clientHeight-scrollOffsetY;
				}

				offset=parseInt(Math.abs(this.scrollY-dimension.offsetY));
				y=centerY+[scrollOffsetY, offset].min()*direction;

				if (scrollOffsetY<=offset) {
					this.scrollY=dimension.offsetY+scrollOffsetY*direction;
				}
			}

		} else {
			y=centerY;
		}

		if (popupDimension.width>dimension.clientWidth) {
			if (popupDimension.width>=dimension.width) {
				x=0;

			} else {
				scrollOffsetX=parseInt((popupDimension.width-dimension.clientWidth)/2);
				direction=1;

				if (this.scrollX<scrollOffsetX) {
					this.scrollX=scrollOffsetX;

				} else if (this.scrollX>dimension.width-dimension.clientWidth-scrollOffsetX) {
					this.scrollX=dimension.width-dimension.clientWidth-scrollOffsetX;
				}

				if (dimension.offsetX>=this.scrollX) {
					direction=-1;
				}

				offset=parseInt(Math.abs(this.scrollX-dimension.offsetX));
				x=centerX+[scrollOffsetX, offset].min()*direction;

				if (scrollOffsetX<=offset) {
					this.scrollX=dimensions.offsetX+scrollOffsetX*direction;
				}
			}

		} else {
			x=centerX;
		}

		this.element.setStyle({
			top: y+'px',
			left: x+'px'
		});
		this.oOverlappingFix.update(this.element);
	}
});