/**
 * Shows an overlay mssage panel with content from an AJAX call
 * 
 * @author Tim Stirrat <tim.stirrat@gmail.com>
 * @author Scott Mackenzie
 * @revision SVN: $Revision: 12174 $
 * @class AjaxMessagePanel
 */
var AjaxMessagePanel = Class.create(
{
	/**
	 * 
	 * @type string
	 */
	overlayId: null,

	/**
	 * 
	 * @type Element
	 */
	overlayDiv: null,

	/**
	 * 
	 * @type string
	 */
	wrapId: null,

	/**
	 * 
	 * @type Element
	 */
	wrapDiv: null,

	/**
	 * 
	 * @type string
	 */
	boxId: null,

	/**
	 * 
	 * @type Element
	 */
	boxDiv: null,

	/**
	 * 
	 * @type string
	 */
	textId: null,

	/**
	 * 
	 * @type string
	 */
	closeId: null,

	/**
	 * The url to the AJAX script
	 * 
	 * @type string
	 */
	messageUrl: null,

	/**
	 * Determines if the panel is visible or not
	 * 
	 * @type boolean
	 */
	visible: false,

	/**
	 * Constructor
	 * 
	 * @param string id						The id of the box to be created, and the prefix for it's children
	 * @param string messageURl		The url to retrieve the AJAX content from
	 * @constructor
	 */
	initialize: function (id, messageUrl)
	{
		this.messageUrl = messageUrl;
		this.changeId(id);
	},

	/**
	 * Sets the internal id strings
	 */
	changeId: function (id)
	{
		// force close
		this.close();
		this.boxId			= id;
		this.overlayId 	= id + '-overlay';
		this.wrapId			= id + '-wrap';
		this.textId 		= id + '-text';
		this.closeId 		= id + '-close';
	},

	/**
	 * Shows the message panel
	 */
	show: function ()
	{
		/* outer */
		var m_overlay = document.createElement('div');
		m_overlay.id = this.overlayId;
		var m_wrap = document.createElement('div');
		m_wrap.id = this.wrapId;
		var m_box = document.createElement('div');
		m_box.id = this.boxId;

		Event.observe(m_wrap, 'click', this.close.bind(this));

		m_wrap.appendChild(m_box);

		document.body.appendChild(m_overlay);
		document.body.appendChild(m_wrap);
		$(this.overlayId).addClassName('transparent-overlay');

		// store elements for easy resize and close
		// using prototype $ function here to make sure
		// they have been Element.extend()
		this.overlayDiv = $(this.overlayId);
		this.wrapDiv 		= $(this.wrapId);
		this.boxDiv 		= $(this.boxId);

		// hide select elements for IE
		this.setSelects('hidden');

		var resize = this.resize.bind(this);

		Event.observe(window, 'resize', resize);

		// ajax load the information
		new Ajax.Updater(this.boxId, this.messageUrl, { onComplete: resize });

		this.visible = true;
	},

	/**
	 * Closes the message panel
	 */
	close: function ()
	{
		var resize = this.resize.bind(this);

		if (this.visible && (typeof(this.overlayDiv) != 'undefined'))
		{
			this.overlayDiv.remove();
			this.wrapDiv.remove();
			Event.stopObserving(window, 'resize', resize);
		}

		// force close and unset
		this.visible = false;

		// unset pointers
		this.overlayDiv = null;
		this.wrapDiv = null;
		this.boxDiv = null;

		// show selects again
		this.setSelects('visible');
	},

	/**
	 * 
	 */
	getPageScroll: function ()
	{
		var yScroll;

		if (self.pageYOffset)
		{
			yScroll = self.pageYOffset;
		}
		else if (document.documentElement && document.documentElement.scrollTop)
		{
			// Explorer 6 Strict
			yScroll = document.documentElement.scrollTop;
		}
		else if (document.body)
		{
			// all other Explorers
			yScroll = document.body.scrollTop;
		}

		arrayPageScroll = new Array('',yScroll);

		return arrayPageScroll;
	},

	/**
	 * Gets page size
	 */
	getPageSize: function ()
	{
		var xScroll, yScroll;

		if (window.innerHeight && window.scrollMaxY)
		{
			xScroll = document.body.scrollWidth;
			yScroll = window.innerHeight + window.scrollMaxY;
		}
		else if (document.body.scrollHeight > document.body.offsetHeight)
		{
			// all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		}
		else
		{
			// Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}

		var windowWidth, windowHeight;

		if (self.innerHeight)
		{
			// all except Explorer
			windowWidth = self.innerWidth;
			windowHeight = self.innerHeight;
		}
		else if (document.documentElement && document.documentElement.clientHeight)
		{
			// Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		}
		else if (document.body)
		{
			// other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}

		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight)
		{
			pageHeight = windowHeight;
		}
		else
		{ 
			pageHeight = yScroll;
		}

		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth)
		{
			pageWidth = windowWidth;
		}
		else
		{
			pageWidth = xScroll;
		}

		arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);

		return arrayPageSize;
	},

	/**
	 * Resizes the panel on window resize
	 */
	resize: function ()
	{
		var arrayPageSize = this.getPageSize();
		var arrayPageScroll = this.getPageScroll();
		
		if (this.visible && (typeof(this.overlayDiv) != 'undefined'))
		{
			this.overlayDiv.style.height = (arrayPageSize[1] + 'px');
			this.wrapDiv.style.height 	= (arrayPageSize[1] + 'px');
	
			var messageTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - this.boxDiv.getHeight()) / 2);
			this.boxDiv.style.top = (messageTop < 0) ? "0px" : messageTop + "px";
		}
	},

	/**
	 * Changes the visibility of selects (they show through the message panel in IE)
	 * 
	 * @param string action			The 'visibility' css value to apply (visible/hidden)
	 */
	setSelects: function (action)
	{
		if ( action != 'visible' )
		{
			action='hidden';
		}

		if ( navigator.appName.indexOf("Microsoft") >= 0 || navigator.appName.indexOf("MSIE") >= 0 )
		{
			var selects = document.body.getElementsByTagName('SELECT');

			for (var i = 0; i < selects.length; i++){
				selects[i].style.visibility = action;
			}
		}
	}
});