Source for "FB Profile Pic"

By Vaughan Chandler
Has 18 other scripts. 

// ==UserScript==
// @name           FB Profile Pic
// @namespace      http://userscripts.org/people/14536
// @description    Shows bigger profile pics on Facebook when you put the mouse over the small pics.
// @include        http://*.facebook.com/*
// @include        http://facebook.com/*
// @author         Vaughan Chandler
// ==/UserScript==

// Last updated on 2008-03-02


// Makes the location easily available throughout the script.
var loc = window.location.href.toLowerCase();


// Determine where the pic should appear. Valid values are "left" (default) and "right".
var position = GM_getValue('BigPicPosition', -1);
if (position != 'left' && position != 'right') {
	position = 'left';
	GM_setValue('BigPicPosition', position);
}

// Determine whether to make big disappear on mouse out or by clicking the x. Default is clicking the x (false).
var autoclose = GM_getValue('BigPicAutoclose', -1);
if (autoclose == -1) {
	autoclose = false;
	GM_setValue('BigPicAutoclose', autoclose);
}

// Add styles required.
GM_addStyle(
	'#FBPPdiv { display:none; position:fixed !important; top:2px !important; ' + position + ':2px !important; border:1px solid #003366; background:#3b5998; padding:2px 4px; min-width:130px; z-index:99999 !important;}'+
	'#FBPPheader, #FBPPloading { text-align:center; color:white; font-variant:small-caps; font-weight:bold !important; }'+
	'#FBPPclose { float:' + position + '; color:#ffaaaa; cursor:pointer; font-weight:bold; vertical-align:top; }'+
	'#FBPPclose:hover { color:#aa6666; }'+
	'#FBPPimg { text-align:center; }'+
	'#FBPPimg img { color:white; }'
);

// Create placeholder for images.
var div = document.createElement('div');
div.id = 'FBPPdiv';
div.innerHTML = '<div id="FBPPclose" title="Close">x</div><div id="FBPPheader">Big Profile Pic</div><div id="FBPPimg"><span></span></div>';
document.body.insertBefore(div, document.body.lastChild.nextSibling);

// Listen for clicks on the x and make pic disappear.
document.getElementById('FBPPclose').addEventListener('click', function() {
	document.getElementById('FBPPdiv').style.display='none';
}, false);

// Add event listeners
function addEventListeners() {
	var images = document.getElementsByTagName('img');
	var s;
	var newSrc;
	var profileLink;
	for (var i=0, j=0; i<images.length; i++) {
		s = images[i].src;
		// Determine if the image is a small profile picture.
		if (s.indexOf("http://profile") != -1 && (s.indexOf("/s") != -1 || s.indexOf("/t") != -1 || s.indexOf("/q") != -1)) {
			// Listen for mouse overs to show the big pic.
			images[i].addEventListener('mouseover', function() {
				newSrc = this.src.replace(/\/[qst]([\d_]+)\.jpg/, "/n$1.jpg");
				profileLink = 'http://www.facebook.com/profile.php?id=' + newSrc.match(/\/n(\d+)_\d+\.jpg/)[1];
				document.getElementById('FBPPimg').innerHTML = '<a href="' + profileLink + '"><img src="' + newSrc + '" alt="Loading Pic..." /></a>';
				document.getElementById('FBPPdiv').style.display = 'block';
			}, false);
			// If autoclosing, listen for mouse outs to hide the big pic.
			if (autoclose) {
				images[i].addEventListener('mouseout', function() {
					document.getElementById('FBPPdiv').style.display = 'none';
				}, false);
			}
		}
	}
}
addEventListeners();

// Handle special cases on the friends pages
var needsUpdating = false;
if (loc.indexOf('http://www.facebook.com/friends') != -1) {
	// If you change the view then refresh the page, the images load after the page so the listeners must be updated.
	if (loc.indexOf('#') != -1) { needsUpdating = true; }
	// If you change the view the listeners must be updated.
	var links = document.getElementById('ftabs').getElementsByTagName('a');
	for (var i=0; i<links.length; i++) {
		links[i].addEventListener('click', function() { needsUpdating = true; }, false);
		try {
			// If you use the dropdown on the "more" page the listeners must be updated.
			document.getElementById('friends_nk').addEventListener('change', function() { needsUpdating = true; 	}, false);
		} catch(x){}
	}
	// Updated the listeners if required.
	document.getElementById('friends_target').addEventListener('mouseover', function() {
		if (needsUpdating) {
			addEventListeners();
			needsUpdating = false;
		}
	}, false);
}