Reddit enlarge pics

By lazyttrick — Last update Oct 7, 2009 — Installed 277 times.
There are 2 previous versions of this script.
// ==UserScript==
// @name           Reddit enlarge pics
// @namespace      meh
// @include        http://www.reddit.com/*
// ==/UserScript==
var div, img;

xp('//a[contains(@class,"thumbnail")]').forEach( function(a) {
	if( a.href.search(/(\.jpg|\.jpeg|\.gif|\.png|\.bmp)$/i) > -1){
		getTag('img',a)[0].addEventListener('mouseover', enlarge, false);
	}
});

function enlarge(evt) {
	try{
		div = getDiv();
		div.innerHTML = '<img src="'+evt.target.parentNode.href+'" />';
		div.addEventListener('mouseover', imgOverThumb, false);

		//highlight submission
		evt.target.parentNode.parentNode.style.background = '#CEE3F8';
		
		//resize img
		img = getTag('img',div)[0];
		resize();
	}catch(e){
	}
	
	evt.target.addEventListener('mouseout', hide, false);	
}


//thanks to joysazo (http://userscripts.org/users/78916)
function resize()
{	
	if(img.height==0 || img.width==0){
		setTimeout(resize,500);//img not loaded, wait 1/2 sec
		return;
	}

	// need to use clientWidth/Height because it accounts for any scroll bar(s)
	var clientWidth = window.document.documentElement.clientWidth;
	var clientHeight = window.document.documentElement.clientHeight;
	var widthRatio = clientWidth / img.width;
	var heightRatio = clientHeight / img.height;
	
	
	// scale the image to window (check height first since more likely limit)
	if (heightRatio < 1 || widthRatio < 1) {
		if (heightRatio < widthRatio) {
			img.height = clientHeight - 6; //padding
			//img.width *= heightRatio;  //someone else is doing already... firefox?
		} else {
			img.width = clientWidth - 200; // avoid overlapping thumbnails
			//img.height *= widthRatio; //someone else is doing already... firefox?
		}
	}
	
	//undo imgOverThumb
	getId('divenlargepic').style.right = '0px';
	getId('divenlargepic').style.left = null;	
}


function hide(evt) {
	try{
		getId('divenlargepic').style.visibility = 'hidden';
		getId('divenlargepic').style.left = null;
		getId('divenlargepic').style.right = "0px";
	}catch(e){}

	//highlight
	evt.target.parentNode.parentNode.style.background = '#ffffff';
}


function imgOverThumb(evt) {
	getId('divenlargepic').style.right = null;
	getId('divenlargepic').style.left = "200px";
}

function getDiv(){
	var div = getId('divenlargepic');
	if(!div) {
		div = createElement('div', {id:'divenlargepic', style:'position:fixed; right:0px; top:0px; padding:3px; background:#CEE3F8;  z-index:13370'});
		getTag('body')[0].appendChild(div);
	}
	div.style.visibility = 'visible'
	return div;
}


function xp(p, context) {
  if (!context) 
	context = document;
  var i, arr = [], xpr = document.evaluate(p, context, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
  for (i = 0; item = xpr.snapshotItem(i); i++) 
	arr.push(item);
  return arr;
}



function createElement(type, attrArray, evtListener, html)
{
	var node = document.createElement(type);

	for (var attr in attrArray) if (attrArray.hasOwnProperty(attr)){
		node.setAttribute(attr, attrArray[attr]);
	}

	if(evtListener){
		var a = evtListener.split(' ');
		node.addEventListener(a[0], eval(a[1]), eval(a[2]));
	} 
 
	if(html) 
		node.innerHTML = html;
	
	return node;
}

function getId(id, parent){
	if(!parent)
		return document.getElementById(id);
	return parent.getElementById(id);	
}

function getTag(name, parent){
	if(!parent)
		return document.getElementsByTagName(name);
	return parent.getElementsByTagName(name);
}


function debug(str)
{
	
	var d = document.getElementById('debugg');
	if(!d){
		var div = document.createElement('div');
		div.setAttribute('id','divdebug');
		div.setAttribute('style', 'background-color:#000000; position:fixed; bottom:3px; left:3px; width:50%; z-index:9999;');
		
		var closeButton = document.createElement('input');
		closeButton.setAttribute('id','closedebug');
		closeButton.setAttribute('type', 'button');
		closeButton.setAttribute('value', 'close');
		closeButton.setAttribute('onClick', 'this.parentNode.parentNode.removeChild(this.parentNode);');
		
		d = document.createElement('textarea');
		d.setAttribute('id','debugg');
		d.setAttribute('style',"height:200px; width:99%; margin:2px;");
		
		div.appendChild(d);
		div.appendChild(document.createElement('br'));
		div.appendChild(closeButton);
		document.body.appendChild(div);
	}
	d.innerHTML += '\n'+str;
	d.scrollTop = d.scrollHeight;
}