var Pox = {
	scrollTop: 0,
	scrollLeft: 0,
	
	disable: function(element)
	{
		element = $(element);
		
		if ( !element )
		{
			return;
		}
		
		// Check if the element is not already disabled
		if ( Pox.isDisabled(element) )
		{
			return;
		}
		
		// Deal with td elements, cannot make these positioned
		if ( element.tagName.toLowerCase() == "td" )
		{
			// Collect the children
			var children = element.immediateDescendants();
			
			// Create a div element to insert into the td
			var div = new Element('div', {'class': 'pox-container'});
			
			// Insert the div element in the td element
			Element.insert(element, {top: div});
			
			// Move all the td children to the div
			children.each( function(child) {
				div.insert({bottom: child});
			});
			
			// Make the element to disable the div element
			element = div;
		}
		
		var pox_bg = new Element('div', {'class': 'pox-bg', style: 'display: none;'}).insert(' ');
		
		// Insert the background into the body
		Element.insert(element, {top: pox_bg});
		
		// Make the container positioned
		Element.makePositioned(element);
		
		var dimensions = Element.getDimensions(element);
		
		pox_bg.setStyle({
			position: 'absolute',
			display: 'block',
			top: '0px',
			left: '0px',
			width: dimensions.width + 'px',
			height: dimensions.height + 'px',
			background: '#FFFFFF',
			opacity: 0.65,
			zIndex: 999
		});
	},
	
	enable: function(element)
	{
		element = $(element);
		
		if ( !Pox.isDisabled(element) )
		{
			return;
		}
		
		if ( element.tagName.toLowerCase() == "td" )
		{
			var div = element.down('div');
			
			// Collect the children
			var children = div.immediateDescendants();
			
			// Move all the div children back to the td element
			children.each( function(child) {
				element.insert({bottom: child});
			});
			
			div.remove();
		}
		
		// Get the background
		var pox_bg = Pox.getBackground(element);
		
		if ( !pox_bg )
		{
			return;
		}
		
		Element.remove(pox_bg);
	},
	
	disableWindow: function(element)
	{
		// Get the body element
		var body = element.document.body;
		
		if ( !Prototype.Browser.IE ) // Quicker way of inserting for non-ie browsers
		{
			var pox_bg = new Element('div', {'class': 'pox-bg', style: 'display: none;'}).insert(' ');
			
			Element.insert(body, {top: pox_bg});
		}
		else
		{
			var pox_bg = "<div class='pox-bg' style='display: none;'>&nbsp;</div>";
			
			Element.insert(body, {top: pox_bg});
			
			pox_bg = Pox.getBackground(element);
		}
		
		var dimensions = element.document.viewport.getDimensions();
		
		pox_bg.setStyle({
			position: 'absolute',
			display: 'block',
			top: '0px',
			left: '0px',
			width: dimensions.width + 'px',
			height: dimensions.height + 'px',
			background: '#000000',
			opacity: 0.1,
			zIndex: 999
		});
	},
	
	enableWindow: function(element)
	{
		// Get the background
		var pox_bg = Pox.getBackground(element);
		
		if ( !pox_bg )
		{
			return;
		}
		
		Element.remove(pox_bg);
	},
	
	resizeWindow: function(element)
	{
		var dimensions = element.document.viewport.getDimensions();
		
		// Get the background
		var pox_bg = Pox.getBackground(element);
		
		if ( !pox_bg )
		{
			return;
		}
				
		pox_bg.setStyle({
			width: dimensions.width + 'px',
			height: dimensions.height + 'px'
		});
	},
	
	showHTML: function(element, html)
	{
		element = $(element);
		
		// Stop the window from scrolling
		if ( element == document.body )
		{
			var scroll_offset = Util.getScrollOffset();
		
			Pox.scrollTop = scroll_offset.top;
			Pox.scrollLeft = scroll_offset.left;
			
			Element.observe(window, 'scroll', Pox.stopScroll);
		}
		
		// The the element's minimum height so that Pox displays correct in it
		Element.setStyle(element, {
			minHeight: "70px"
		});
		
		// Get the element dimensions
		var el_dimensions = Element.getDimensions(element);
		var el_width = el_dimensions.width;
		var el_height = el_dimensions.height;
		
		// Make the container positioned
		Element.makePositioned(element);
		
		var pox_bg = new Element('div', {'class': 'pox-bg', style: 'display: none;'}).insert('&nbsp;');
		var pox_box = new Element('div', {'class': 'pox-box', style: 'display: none;'}).insert(html);
		
		// Insert the background and message box in reverse order to put the
		// background before the message box in the DOM
		Element.insert(element, {top: pox_box});
		Element.insert(element, {top: pox_bg});
		
		// Set the background styles
		pox_bg.setStyle({
			position: 'absolute',
			display: 'block',
			top: '0px',
			left: '0px',
			width: el_width + 'px',
			height: el_height + 'px',
			background: '#000000',
			opacity: 0.1,
			zIndex: 999
		});
		
		// Setup the initial box styles for positioning later
		pox_box.setStyle({
			position: 'absolute',
			display: 'inline',
			border: '3px solid #787878',
			background: '#FFFFFF',
			padding: '10px',
			color: '#373737',
			fontSize: '16px',
			fontWeight: 'bold',
			zIndex: 999
		});
		
		// Get the message box dimensions
		var box_dimensions = pox_box.getDimensions();
		var box_width = box_dimensions.width;
		var box_height = box_dimensions.height;
		
		// Calculate the top and left positions
		if ( element == document.body )
		{
			var window_dimensions = document.viewport.getDimensions();
			
			var box_left = Math.floor((window_dimensions.width - box_width) / 2) + Pox.scrollLeft;
			var box_top = Math.floor((window_dimensions.height - box_height) / 2) + Pox.scrollTop;
			
			var max_width = Math.floor(window_dimensions.width / 2);
			var max_height =  Math.floor(window_dimensions.height * 0.6);
		}
		else
		{
			var box_left = Math.floor((el_width - box_width) / 2);
			var box_top = Math.floor((el_height - box_height) / 2);
			
			var max_width = Math.floor(el_width / 2);
			var max_height =  Math.floor(el_height * 0.6);
		}
	
				
		var _box_width = ( box_width > max_width ) ? max_width : box_width;
		var _box_height = ( box_height > max_height ) ? max_height : box_height;
		
		// Set all the box position and maximum dimensions
		pox_box.setStyle({
			top: box_top + 'px',
			left: box_left + 'px',
			width: _box_width + 'px',
			height: _box_height + 'px'
		});
	}, 
	
	hideHTML: function(element)
	{
		element = $(element);
		
		// Allow the user to scroll
		if ( element == document.body )
		{
			Element.stopObserving(window, 'scroll', Pox.stopScroll);
		}
		
		// Get the background and box
		var pox_bg = Pox.getBackground(element);
		var pox_box = Pox.getBox(element);
		
		// Remove the background if it exists
		if ( pox_bg )
		{
			pox_bg.remove();
		}
		
		// Remove the box if it exists
		if ( pox_box )
		{
			pox_box.remove();
		}
		
		// Un-position the element
		Element.setStyle(element, {position: ''});
	},
	
	showLoading: function(element)
	{
		element = $(element);
		
		var html = "<img src=\"http://prefixtech.vo.llnwd.net/o23/cr/template/mw/loader.gif\" align=\"absmiddle\" /><span>&nbsp;&nbsp;Loading</span>";
		
		Pox.showHTML(element, html);
	},
	
	hideLoading: function(element)
	{
		Pox.hideHTML(element);
	},
	
	resize: function(element)
	{
		element = $(element);
		
		// Get the element dimensions
		var dimensions = Element.getDimensions(element);
		
		// Get the background element
		var bg = Element.firstDescendant(element);
		
		// Resize the background
		bg.setStyle({
			width: dimensions.width + 'px',
			height: dimensions.height + 'px'
		});
	},
	
	stopScroll: function()
	{
		window.scrollTo(Pox.scrollLeft, Pox.scrollTop);
	},
	
	isDisabled: function(element)
	{
		if ( element == null )
		{
			return false;
		}
		
		var first_descendant = element.firstDescendant();
		
		if ( !first_descendant )
		{
			return false;
		}
		
		if ( (element.tagName.toLowerCase() == "td" && first_descendant.hasClassName('pox-container')) || element.firstDescendant().hasClassName('pox-bg') )
		{
			return true;
		}
		
		return false;
	},
	
	getBackground: function(element)
	{
		// Check if the element is a window then get the body
		if ( !Object.isElement(element) )
		{
			element = element.document.body;
		}
		
		// Get the background
		var pox_bg = Element.firstDescendant(element);
		
		// Make sure that we have the background, if not try to find it
		while ( pox_bg && !pox_bg.hasClassName('pox-bg') )
		{
			pox_bg = pox_bg.next();
			
			// Check if no more siblings exist
			if ( !pox_bg )
			{
				return false;
			}
		}
		
		return pox_bg;
	},
	
	getBox: function(element)
	{
		// Check if the element is a window then get the body
		if ( !Object.isElement(element) )
		{
			element = element.document.body;
		}
		
		// Get the box
		var pox_box = Element.firstDescendant(element);
		
		// Make sure that we have the box, if not try to find it
		while ( pox_box && !pox_box.hasClassName('pox-box') )
		{
			pox_box = pox_box.next();
			
			// Check if no more siblings exist
			if ( !pox_box )
			{
				return false;
			}
		}
		
		return pox_box;
	}
};