function avatars(ref) {
	var img = new Image();
	var a = document.createElement("a");
	var posX, posY; 

	loadImage();

	function loadImage() {
		img.src = ref.name;
		img.className = "border5";
		if (img.complete) {
			showUserpic();
		} else {
			img.onload = showUserpic;
		}
	}

	function closeImage() {
		document.body.removeChild(document.body.lastChild);
	}

	function getCenter() {
		if (ref.firstChild.offsetParent.nodeName == "BODY") {
			posX = ref.firstChild.offsetLeft + (ref.firstChild.clientWidth / 2);
			posY = ref.firstChild.offsetTop + (ref.firstChild.clientHeight / 2);
		} else if (ref.firstChild.offsetParent.nodeName == "DIV") {
			var parents = ref.firstChild.offsetParent;
			var x = 0;
			var y = 0;
			while (parents) {
				x = x + parents.offsetLeft;
				y = y + parents.offsetTop;
				parents = parents.offsetParent;
			}
			posX = x + (ref.firstChild.clientWidth / 2);
			posY = y + (ref.firstChild.clientHeight / 2);
		}
	}

	function createLink() {
		document.body.appendChild(a);
		a.appendChild(img);
		a.onmouseout = closeImage;
		a.setAttribute("href", ref.getAttribute("href", 0));
		a.setAttribute("title", ref.getAttribute("title", 0));
	}

	function showUserpic() {
		createLink();
		getCenter();

		img.style.position = "absolute";
		img.style.left = (posX - (img.width / 2)) + "px";
		img.style.top = (posY - (img.height / 2)) + "px";
	}
}