var dptips = new Class({
	getOptions: function(){
		return {
			elements: $$('[rel^=tooltip]'),
			position: 'top'
		}
	},
	
	initialize: function(options){
		this.setOptions(this.getOptions(), options);
		
		position = this.options.position;
		
		this.options.elements.each(function(el){
			el.addEvent('mouseenter', function(event) {
				tooltip = new Element('div').addClass('dptooltip');
				content = new Element('div').addClass('content');
				arrow = new Element('div').addClass('arrowfor'+position);
				
				content.set('html', el.get('title').replace(/\[img\:(.*)\]/, '<img src="$1" />'));
				el.set('title');
				tooltip.setStyles({
					position: 'absolute',
					top: 0,
					left: 0,
					visibility: 'hidden'
				});
				
				tooltip.inject(document.body);
				content.inject(tooltip);
				tooltip.setStyle('width', content.getSize().x+2);
				tooltip.setStyle('text-align', 'center');
				arrow.inject(tooltip);
				
				if (position == 'top') {
					var y = el.getPosition().y-tooltip.getSize().y;
					var x = el.getPosition().x-(content.getSize().x/2)+8;
				}
				
				(function(){
					tooltip.setStyles({
						top: y,
						left: x,
						visibility: 'visible'
					});
				}).delay(50)
			})
			el.addEvent('mouseleave', function(event) {
				el.set('title', content.get('html'));
				tooltip.dispose();
			});
		});
	}
});
dptips.implement(new Options)