/**
	 *	Functions to hide and re-show all select fields as there is a bug in IE6
	 *  that means these will always be above any overlay. 
	 */ 
	function hideSelects() {
		$('select').hide();
	}
				
	function showSelects() {
		$('select').show();
	}
	
	
	/**
	*	Function to output the passed system message.
	*	Pass NULL for the clostButtonText to not show the button at all.
	*
	*/
	function displaySystemMessage(message, messageTitle, messageType, closeButtonText) {
		
		// Hide all select fields
		hideSelects();

		// create overlay using JQuery fade function to hide the overlay on click
		var overlayDiv = document.createElement('div');
		overlayDiv.setAttribute('id', 'overlay');
		overlayDiv.setAttribute('onclick','$(\'#overlay\').fadeOut(500); $(\'#systemMessage\').fadeOut(500);showSelects();return false;');
		
		// create system message using JQuery to fade in and a close button using JQuery to fade out
		var messageDiv = document.createElement('div');
		messageDiv.setAttribute('id', 'systemMessage');
		messageDiv.setAttribute('class', messageType);
		messageDiv.setAttribute('style', 'display:none;');
		var html = '<h2>'+messageTitle+'</h2>'+message;
		if(closeButtonText != null) {
			html += '<ul><li><a href="#" class="button buttonClose" onclick="$(\'#overlay\').fadeOut(500); $(\'#systemMessage\').fadeOut(500);showSelects();return false;">'+closeButtonText+'</a></li></ul>';
		} 
		messageDiv.innerHTML = html;
		
		// Get page height
		var docHeight = $(document).height();
		
		// Get the top of the viewport
		var viewportTop = $(window).scrollTop();
		
		// Get the height of the viewport
		var viewportHeight = $(window).height();
		
		// Set the overlay to be the full available height
		if(viewportHeight > docHeight) {
			docHeight = viewportHeight;
		}
		overlayDiv.style.cssText = 'height:'+docHeight+'px;';
		
		// Set the system message to be positioned relative to the top of the viewport
		var y = viewportTop + (0.3 * viewportHeight);
		messageDiv.style.cssText = 'top:'+y+'px;';
		
		// Remove overlay and message if currently part of the document
		if(document.getElementById('overlay') != null) {
			document.body.removeChild(document.getElementById('overlay'));
		}
		if(document.getElementById('systemMessage') != null) {
			document.body.removeChild(document.getElementById('systemMessage'));
		}
		
		// Add overlay and message to document
		document.body.appendChild(overlayDiv);
		document.body.appendChild(messageDiv);
		
		$('#systemMessage').show();
		
	}