/**
	Basic Usage:
	hover.set_title('this is a title');
	hover.render_path(path);  or hover.render_div(id);

	Onclick Example:
	onclick="hover.set_title('My Title'); hover.set_width('870px'); hover.set_height('770px'); hover.render_path('myHover.php'); return false;"

	Sample CSS Rules

	#mu_hover_blocking
	{
		background-color: #000000;
		opacity: 0.70;
		filter: alpha(opacity=70);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
	}

	#mu_hover
	{
		width: 500px;
		height: 300px;
		position: absolute;
		top: 100px;
		left: 35%;
		border: 1px solid black;
	}

	#mu_hover_close
	{
		background: #E76F53;
		border: 1px solid white;
		text-align:center;
		width:16px;
		color: white;
		text-decoration:none;
		font-weight: bold;
		font-family : verdana, arial, helvetica, sans-serif;
		font-size: 12px;
		height:16px;
		position: absolute;
		top: 2px;
		right: 2px;
		cursor: default;
	}


	#mu_hover_close:hover
	{
		background: red;
	}

	#mu_hover_title
	{
		height: 20px;
		width: 100;
		background: #eaeaeb;
		padding: 2px;
		paddingRight: 4px;
	}

*/
var hover = new function()
{
	//
	// -----------------------------------------------------------
	// PROPERTIES
	//

	var _id = 'mu_hover';
	var _class = '';
	var _title = '';
	var _use_title = true;
	var _height = null;
	var _width = null;
	var _top = null;
	var _left = null;

	//
	// -----------------------------------------------------------
	// PUBLIC METHODS
	//

	/**
	*	Render the hover using an iframe for content.
	*	@param string path
	*
	*/
	this.render_path = function(path)
	{
		// Create the iframe
		var content = document.createElement('iframe');
		content.setAttribute('id', _id + '_content');
		content.setAttribute('frameBorder', 0);

		content.src = path;
		render(content);
	};

	/**
	*	Render the hover using an the content of another element for content.
	*	@param string path
	*
	*/
	this.render_div = function(id)
	{
		// Create the div
		var content = document.createElement('div');
		content.setAttribute('id', _id + '_content');

		var replace_content = document.getElementById(id);
		if( replace_content )
		{
			content.innerHTML = replace_content.innerHTML;
		}
		else
		{
			devAlert('Could not find id: ' + id + ' to render');
		}

		render(content);
	};

	this.close = function()
	{
		var container = document.getElementById(_id);
		container.parentNode.removeChild(container);

		var blocking = document.getElementById(_id + '_blocking');
		blocking.parentNode.removeChild(blocking);

		document.documentElement.style.overflow = 'auto';
	}

	this.set_title = function(title)
	{
		_title = title;
	}

	this.set_class = function(class_name)
	{
		_class = class_name;
	}

	this.disable_title = function()
	{
		_use_title = false;
	}

	this.enable_title = function()
	{
		_use_title = true;
	}

	this.set_width = function(width)
	{
		_width = width;
	}

	this.set_height = function(height)
	{
		_height = height;
	}

	this.set_top = function(top)
	{
		_top = top;
	}

	this.set_left = function(left)
	{
		_left = left;
	}

	//
	// -----------------------------------------------------------
	// PRIVATE METHODS
	//

	function render(content)
	{
		// Set defaults for content
		content.style.width = '100%';
		content.style.border = '0px none';

		// Create the blocking div
		var blocking = document.createElement('div');
		blocking.setAttribute('id', _id + '_blocking');

		var page = getPageSize();
		blocking.style.height = page.height + 'px';
		blocking.style.width = page.width + 'px';

		// Create the container
		var container = document.createElement('div');
		container.setAttribute('id', _id);
		container.className = _class;

		if( _use_title )
		{
			var title_close_box = document.createElement('div')
			title_close_box.setAttribute('id', _id + '_close');
			title_close_box.innerHTML = 'x';
			title_close_box.onclick = function(){ hover.close(); };

			// Create the title bar
			var title_bar = document.createElement('div');
			title_bar.innerHTML = _title;
			title_bar.setAttribute('id', _id + '_title');

			title_bar.appendChild(title_close_box);
			container.appendChild(title_bar);
		}

		if( _height )
		{
			container.style.height = _height;
		}

		if( _width )
		{
			container.style.width = _width;
		}

		if( _top )
		{
			container.style.top = _top;
		}

		if( _left )
		{
			container.style.left = _left;
		}

		container.appendChild(content);

		document.body.appendChild(blocking);
		document.body.appendChild(container);

		var container_height = container.offsetHeight;
		var content_height = (container_height - 2)

		if( _use_title )
		{
			content_height = content_height - title_bar.offsetHeight
		}
		content.style.height = content_height + "px";
	};
};
