var PopOver = Class.create({
	initialize: function() {
		var id = '';
		var html = '';
		var domClass = 'popover';
		var styles = {
	        'display': 'none',
	        'position': 'absolute',
	        'left': 100,
	        'top': 100,
	        '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,
	        'class': domClass
	    });
		this.domElement.setStyle(styles).update(html);
		
		if (arguments.length > 3) {
	    	$(document.body).appendChild(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.each(this.addMouseListeners.bind(this));
			}
		}
	},
	getDom: function() {
		return this.domElement;
	},
	mouseoverTarget: function(evt) {
		this.domElement.style.left = (evt.pointerX()+this.xOffset)+'px';
		this.domElement.style.top = (evt.pointerY()+this.yOffset)+'px';
		this.domElement.show();
	},
	mouseoutTarget: function(evt) {
		this.domElement.hide();
	},
	addMouseListeners: function(target) {
		target.observe('mouseover', this.mouseoverTarget.bindAsEventListener(this));
		target.observe('mouseout', this.mouseoutTarget.bindAsEventListener(this));
	}
});