var MapPoints = Class.create({
	points : [],
	initialize : function(selector) {
		this.selector = selector;
		$$(this.selector + ' a').each(function(el, index) {
			var pos = el.className.split(' ')[0].sub('pos', '', 1).split('x');
			el.setStyle({
				display : 'block',
				top 	: pos[0] + 'px',
				left 	: pos[1] + 'px'
			});
			el.className  = 'point';
			el.onmouseover = function() {
				this.showTip(index);
			}.bind(this);
			el.onmouseout = function() {
				this.hideTip();
			}.bind(this);
			this.points[index] = el;
		}.bind(this));
	},
	showTip : function(index) {
		var tips = $$(this.selector + ' div.tip');
		if (tips.length == 0) {
			var tip = document.createElement('div');
			tip.className = 'tip';
			$$(this.selector)[0].appendChild(tip);
		} else {
			var tip = tips[0];
		}
		
		tip.update(
			'<div class="bgLeft">' + 
				'<div class="bgRight">' + 
					'<div class="bgCenter">' + 
					this.points[index].innerHTML + 
					'</div>' + 
				'</div>' + 
			'</div>'
		);
		var left = this.points[index].style.left.sub('px', '', 1);
		left -= Math.ceil(tip.getWidth() / 2);
		left += Math.ceil(this.points[index].getWidth() / 2);
		
		var top = this.points[index].style.top.sub('px', '', 1);
		top -= tip.getHeight() + 1;
		
		tip.setStyle({
			top		: top + 'px',
			left	: left + 'px',
			display : 'block'
		});
	},
	hideTip : function() {
		$$(this.selector + ' div.tip')[0].setStyle({display : 'none'});
	}
});

Event.observe(window, 'load', function() { new MapPoints('.mapPoints'); });