/**
 * Object to handle an information window that displays text and an image upon mouse over.
 */
var InfoWindow = {

	container: null,
	timeout: null,
	element: null,
	leftOffset: 10,
	topOffset: 20,

	/**
	 * Returns the body element.
	 */
	body: function() {
		return ( !window.opera && document.compatMode && document.compatMode!="BackCompat" ) ? document.documentElement : document.body;
	},

	/**
	 * Initializes a new information window with the specified name.
	 * @param	string name The name of the window element
	 * @param	object options The options of the window
	 */
	initialize: function( name, options ) {
		if( document.getElementById != null && document.createElement != null && document.createTextNode != null ) {
			this.container = document.getElementById( name );
			if( options != null ) {
				if( options.leftOffset != null ) this.leftOffset = options.leftOffset;
				if( options.topOffset != null ) this.topOffset = options.topOffset;
			}
		}
	},

	/**
	 * Hides the information window.
	 */
	hide: function( force ) {
		if( this.container != null ) {
			this.container.style.visibility = "hidden";
			this.container.style.left = "-500px";
			document.onmousemove = "";
		}
	},
	
	/**
	 * Moves the info window to the specified position.
	 * @param	integer left The left position
	 * @param	integer top The top position
	 */
	move: function( e ) {
	
		var body = this.body();
		var docWidth = ( document.all ? ( body.scrollLeft + body.clientWidth ) : ( pageXOffset + window.innerWidth - 15 ) );
		var docHeight = ( document.all ? Math.min( body.scrollHeight, body.clientHeight ) : Math.min( document.body.offsetHeight, window.innerHeight ) );
		var conWidth = this.container.clientWidth;
		var conHeight = this.container.clientHeight;
		
		var left = 0, top = 0;
		if( typeof e != "undefined" ) {
			if( ( docWidth - e.pageX ) < ( conWidth + 30 ) ) {
				left = e.pageX - conWidth - this.leftOffset * 2;
			} else {
				left = e.pageX;
			}
			if( ( docHeight - e.pageY ) < ( conHeight + this.topOffset + 40 ) ) {
				top = e.pageY - Math.max( 0, ( this.topOffset + 40 + conHeight + e.pageY - docHeight - body.scrollTop) );
			} else {
				top = e.pageY;
			}
		} else if( typeof window.event != "undefined" ) {
			if( ( docWidth - event.clientX ) < ( conWidth + 30 ) ) {
				left = event.clientX + body.scrollLeft - conWidth - this.leftOffset * 2;
			} else {
				left = body.scrollLeft + event.clientX;
			}
			if( ( docHeight - event.clientY ) < ( conHeight + this.topOffset + 40 ) ) {
				top = event.clientY + body.scrollTop - Math.max( 0, ( this.topOffset + 40 + conHeight + event.clientY - docHeight ) );
			} else {
				top = body.scrollTop + event.clientY;
			}
		}
		
		this.container.style.left = ( left + this.leftOffset ) + "px";
		this.container.style.top = ( top + this.topOffset ) + "px";
		
	},
	
	/**
	 * Handles the movement of the information window.
	 */
	onMouseMove: function(e) {
		InfoWindow.move(e);
	},

	/**
	 * Displays the information window with the following content.
	 * @param	object element The DOM element to monitor
	 * @param	string title The title to display
	 * @param	string src The src of the image
	 */
	show: function( element, title, src ) {
		this.hide( true );
		if( this.container != null ) {
			this.element = element;
			while( this.container.childNodes.length > 0 ) this.container.removeChild( this.container.childNodes[0] );
			var container = document.createElement( "div" );
			container.className = "image";
			var image = document.createElement( "img" );
			image.src = src;
			container.appendChild( image );
			this.container.appendChild( container );
			container = document.createElement( "p" );
			container.className = "title";
			container.appendChild( document.createTextNode( title ) );
			this.container.appendChild( container );
			this.container.style.visibility = "visible";
			document.onmousemove = this.onMouseMove;
		}
	}
	
};