/*
# $Id$
#disabling-overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
	width: 100%;
	background: #000000;
	opacity: 0;
}
*/

if(!self.App) {
	self.App = {};
}

/*
# @class App.PopupDiv
*/
App.PopupDiv = function(popup_element) {

	/*
	# @property private Element popup
	# The Element that will be displayed.
	*/
	var popup = popup_element;

	

	this.clearAll = function() {
		
	}

	/*
	# @method privileged void show( [HtmlElement focusElement] )
	# focusElement	= The element that should take focus when the popup appears
	#
	# Displays this popup, and disables the rest of the interface.
	*/
	this.show = function(focusElement) {
		App.PopupDivManager.showPopup(this, focusElement);
	}

	this.getPopup = function() {
		return popup;
	}

	/*
	# Construct the instance
	*/
	if(!$('App_PopupDiv-overlay')) {
		var ov = new Element('div', {id: 'App_PopupDiv-overlay'});
		ov.addEvent('click', function() {
			App.PopupDivManager.clearAll();
			return true;
		});
		ov.setStyles({
			display: 'none',
			position: 'absolute',
			top: 0,
			left: 0,
			zIndex: 99,
			width: "100%",
			background: "#000000",
			opacity: 0
		});
		ov.inject(document.body, 'top');
	}
	App.PopupDivManager.overlay = $('App_PopupDiv-overlay');
	App.PopupDivManager.addPopup(this);
}

App.PopupDivManager = {

	/*
	# @property Element overlay
	# Reference to the disabling overlay Element.
	*/
	overlay: null,

	/*
	# @property Array popups
	# List of active popups.
	*/
	popups: [],

	popupPositionInterval: null,

	/*
	# @function void clearAll()
	#
	# Clears all active popups and re-enables the underlying interface.
	*/
	clearAll: function() {
		clearInterval(App.PopupDivManager.popupPositionInterval);
		App.PopupDivManager.popupPositionInterval = null;

		var f = new Fx.Tween(App.PopupDivManager.overlay, {
			property: 'opacity',
			duration: 150,
			onComplete: function(el) {
				App.PopupDivManager.overlay.style.height = "10px";
				App.PopupDivManager.overlay.style.visibility = "hidden";	/* display: none causes trouble with WYSIWYG in IE7 */
			}
		});
		for(var i=0; i<App.PopupDivManager.popups.length; i++) {
			App.PopupDivManager.popups[i].getPopup().setStyles({
				display: 'none'
			});
		}
		App.PopupDivManager.popups = [];
		f.start(0.5, 0);
	},

	addPopup: function(p) {
		!App.PopupDivManager.popups.contains(p) ? App.PopupDivManager.popups.push(p) : null;
	},

	showPopup: function(p, focusElement) {
		var f = new Fx.Tween(App.PopupDivManager.overlay, {
			property: 'opacity',
			duration: 150,
			onComplete: function(el) {
				p.getPopup().setStyles({
					position: 'fixed',
					top: 0,
					left: 0,
					display: 'block',
					visibility: 'hidden'
				});
				var eDim = p.getPopup().getSize();
				var wDim = $(document.body).getSize();
				//var wScroll = Window.getScroll();
				p.getPopup().setStyles({
					top: ((wDim.y-eDim.y)/2),
					left: ((wDim.x-eDim.x)/2),
					visibility: 'visible'
				});

				// Focus on specified element
				// IE will throw an error is the element is not visible in the
				// interface, so we'll wrap this in a try...catch.
				if(focusElement && focusElement.focus) {
					try {
						focusElement.focus();
					}
					catch(e) {
						// Element probably not visible (IE)
					}
				}

				// Start window-position poller
				App.PopupDivManager.popupPositionInterval = setInterval("App.PopupDivManager.updatePopupPosition()", 50);
			}
		});
		App.PopupDivManager.overlay.style.display = 'block';
		App.PopupDivManager.overlay.style.height = $(document.body).getScrollSize().y+"px";
		f.start(0, 0.5);
	},

	/*
	# @function void updatePopupPosition()
	#
	# Scrolls active popups to keep them in the centre of the window.
	*/
	updatePopupPosition: function() {

		var padding = 200;
		var wDim = $(document.body).getSize();
		var visibleHeight = wDim.y-padding, popupHeight;
		for(var i=0; i<App.PopupDivManager.popups.length; i++) {

			// Determine size of popup
			var p = App.PopupDivManager.popups[i].getPopup();
			var eDim = p.getSize();
			popupHeight = eDim.y-padding;

			// If the popup height exceeds the visible height in the browser,
			// then reduce all blocks with the CSS class "App-PopupDiv-body"
			// and add scrollbars to them.
			var bodyDiv = p.getElements('.App-PopupDiv-body');
			if(bodyDiv.length>0) {
				if(popupHeight>visibleHeight) {
					bodyDiv.each(function(o, i) {
						o.setStyles({
							height: visibleHeight,
							overflow: 'auto',
							display: 'block'
						});
					});
				}
				else if(visibleHeight-popupHeight>padding) {
					bodyDiv.each(function(o, i) {
						o.setStyles({
							height: 'auto',
							overflow: 'auto',
							display: 'block'
						});
					});
				}
			}

			// Re-evaluate popup height and reposition accordingly
			eDim = p.getSize();
			p.setStyles({
				top: ((wDim.y-eDim.y)/2),
				left: ((wDim.x-eDim.x)/2)
			});
		}

		/*
		var wScroll = Window.getScroll();
		for(var i=0; i<App.PopupDivManager.popups.length; i++) {
			var p = App.PopupDivManager.popups[i].getPopup();
			if(p._isScrolling) continue;

			var eDim = p.getSize();
			var wDim = $(document.body).getSize();
			p.set('tween', {
				duration: 500,
				onStart: function() {
					p._isScrolling = true;
				},
				onComplete: function() {
					p._isScrolling = false;
				}
			});
			p.tween('top', ((wDim.y-eDim.y)/2) + wScroll.y);
		}
		*/
	}
};