var Avatar = Class.create();
Avatar.prototype = {

	initialize: function (element) {			
		Element.extend(element);
		Element.setStyle(element,{'backgroundImage':'url('+Element.readAttribute(element.down('img'),'src')+')', 'backgroundPosition':'center', 'backgroundRepeat':'no-repeat'});
		Element.hide(element.down('img'));
		var divBlockForeground = new Element('div', {'class':'foreground'+(element.hasClassName('small') ? "Small" : "")});
		element.appendChild(divBlockForeground);
		var foregroundSrc = Element.getStyle(divBlockForeground,'backgroundImage').replace("url(","").replace(")","").replace("\"","").replace("\"","");
		var imgForegroundLink = new Element('a', {'href':element.up('a')});
		var imgForeground = new Element('img', {'src':foregroundSrc});
		Element.hide(divBlockForeground);
		Element.setStyle(imgForeground,{'width':Element.getWidth(element)+'px','height':Element.getHeight(element)+'px'});
		imgForegroundLink.appendChild(imgForeground);
		element.appendChild(imgForegroundLink);
	}
	
}

function initAvatars() {
	$$('.avatar').each(function (avatar, index) {var myBlock = new Avatar(avatar);}.bind(this));
}
Event.observe(document, 'dom:loaded', initAvatars, false);