var ShowOnHover = {
	init: function() {
		var triggers = $A($(document).getElementsByClassName('doShowOnHover'));
		$A($(document).getElementsByClassName('ShowOnHover')).each(function(obj){obj.setStyle({'display':'none'})});
		this.offsetObj = $('body');
		if (triggers.length) {
			this.showObject = this._showObject.bindAsEventListener(this)
			this.hideObject = this._hideObject.bindAsEventListener(this)
			this.positionCurrentTrigger = this._positionCurrentTrigger.bindAsEventListener(this)
			triggers.each(function(trigger){
				var applyToMatch = trigger.className.match(/applyTo_([^\s]+)/);
				if (applyToMatch) {
					var applyTo = $(document.getElementById(applyToMatch[1]));
					if (applyTo) {
						trigger.applyTo = applyTo;
						//applyTo
						//alert('huy')
						//alert(applyTo)
						trigger.observe('mouseover', this.showObject);
						trigger.observe('mouseout', this.hideObject);
						trigger.observe('mousemove', this.positionCurrentTrigger);
					}
				}
			}.bind(this))
		}
	},
	_hideObject: function(event) {
		if (this.currentTrigger)
			this.currentTrigger.applyTo.setStyle({'display': 'none'});
	},
	_showObject: function(event) {
		this.hideObject();
		this.currentTrigger = Event.element(event);
		this.currentTrigger.applyTo.setStyle({'display': 'block'});
		this.positionCurrentTrigger(event);
	},
	_positionCurrentTrigger: function(event) {
		this.currentTrigger = Event.element(event);
		var offset = Position.cumulativeOffset(this.offsetObj);
		var marginTop = (Event.pointerY(event)+15);
		marginTop = Math.min(WindowDimensions.height()-260, marginTop)-offset[1];

		if (Event.pointerX(event) > WindowDimensions.width()/2) {
			var marginLeft = (Event.pointerX(event) - 10 - 410);
		} else {
			var marginLeft = (Event.pointerX(event)+10);
		}
		marginLeft -= offset[0];
		this.currentTrigger.applyTo.setStyle({'margin-left': marginLeft+'px', 'margin-top': marginTop+'px', 'left': '0', 'top': '0'});
	}
}




var WindowDimensions = {
	getWindowDimensions: function() {
		var x, y;
		if (self.innerHeight) { x = self.innerWidth; y = self.innerHeight; }
		else if (document.documentElement && document.documentElement.clientHeight) { x = document.documentElement.clientWidth; y = document.documentElement.clientHeight; }
		else if (document.body) { x = document.body.clientWidth; y = document.body.clientHeight; }
		return {'width' : x, 'height' : y};
	},
	height: function() {return this.getWindowDimensions().height;},
	width: function() {
		return this.getWindowDimensions().width;
	}
}



Event.observe(window, 'load', function() {
	ShowOnHover.init();
});