var ttfLink = new Class({	
	
	/* requires ttf.php with corresponding rel */
	
	initialize:function(element)
	{
		
		this.setElement(element);
		//this.vo = eval("(" + this.e.get('id') + ")");
		this.c = this.e.get('class').split(' ');
		this.text = this.e.get('html');
		this.e.set('html','');
		
		this.container = new Element('span');
		this.container.inject(this.e);
		
		this.show = {'vertical-align':'middle', 'border':'none', 'display':'inline'};
		this.hide = {'vertical-align':'middle', 'border':'none', 'display':'none'};
		
		this.out  = new Asset.image(PATH.root +'_font/ttf.php?where='+ this.c[1] + '&text=' + escape(this.text),{title : this.text, alt : this.text});
		//this.out  = new Asset.image('../_font/ttf.php?where='+ this.c[1] + '&text=' + escape(this.text),{title : this.text, alt : this.text});
		this.over = new Asset.image(PATH.root +'_font/ttf.php?where='+ this.c[1] + 'Over&text=' + escape(this.text),{title : this.text, alt : this.text});
		//this.over = new Asset.image('../_font/ttf.php?where='+ this.c[1] + 'Over&text=' + escape(this.text),{title : this.text, alt : this.text});

		this.out.setStyles(this.show);
		this.over.setStyles(this.hide);
		
		this.out.inject(this.container);
		this.over.inject(this.container);
	},

	setElement: function(element)
	{
		this.e = element;
		this.setEvents();
	},
	
	setEvents: function()
	{
		this.e.addEvents
		({
			'mouseover': this.doMouseover.bind(this),
			'mouseout': this.doMouseout.bind(this)
		});
		
		
		this.e.onmouseover = function()
		{
			return false;
		};
		
		this.e.onmouseout = function()
		{
			return false;
		};
	},
	
	doMouseover: function()
	{
		this.e.style.cursor = 'pointer';
		this.over.setStyles(this.show);
		this.out.setStyles(this.hide);
	},
	
	doMouseout: function()
	{
		this.e.style.cursor = 'default';
		this.over.setStyles(this.hide);
		this.out.setStyles(this.show);
	}
});