var PopOver = new Class({
	initialize: function() {
		var id = '';
		var html = '';
		var domClass = 'popover';
		var styles = {
	        'display': 'none',
	        'border': '1px solid #E6E6E6',
	        'background-color': '#F9F9F9',
	        'position': 'absolute',
	        'left': 100,
	        'top': 100,
	        'width': 150,
	        'padding': 5,
	        'filter': 'alpha(opacity=90)',
	        '-moz-opacity': '0.9',
	        'opacity': '0.9',
	        'z-index': 10
	    };
		if (arguments.length > 0) id = arguments[0];
		if (arguments.length > 1) html = arguments[1];
		if (arguments.length > 2) {
			exStyles = arguments[2];
			for (var key in exStyles) {
				if (key == 'class') {
					domClass = domClass + ' ' + exStyles[key];
				} else {
					styles[key] = exStyles[key];
				}
			}
		}
		this.domElement = new Element('div', {
		    'id': id,
		    'html': html,
	        'class': domClass,
		    'styles': styles
	    });
		
		if (arguments.length > 3) {
			if (window.isIE) {
		    	$('col2_content').adopt(this.domElement);
		    } else {
		    	$(document.body).adopt(this.domElement);
		    }
			this.yOffset = 20;
			this.xOffset = -75;
			if (arguments[3]['yOffset']) {
				this.yOffset = arguments[3]['yOffset'];
			}
			if (arguments[3]['xOffset']) {
				this.xOffset = arguments[3]['xOffset'];
			}
			if (arguments[3]['targets']) {
				this.targets = $$(arguments[3]['targets']);
				this.targets.addEvents({
					'mouseover': this.mouseoverTarget.bind(this),
					'mouseout': this.mouseoutTarget.bind(this)
				});
			}
		}
	},
	getDom: function() {
		return this.domElement;
	},
	mouseoverTarget: function(evt) {
		var coords = evt.target.getCoordinates();
		this.domElement.style.left = (coords['left']+this.xOffset)+'px';
		this.domElement.style.top = (coords['top']+this.yOffset)+'px';
		this.domElement.style.display = 'block';
	},
	mouseoutTarget: function(evt) {
		this.domElement.style.display = 'none';
	}
});