gistfile1.js

/*jslint regexp: true, browser: true */
/*global $: false */
 
$(function () {
	'use strict';
 
	$('div.tright, div.tleft').each(function () {
		var fullWidth = $('#column-content').width(),
			originalImage = $(this).find('img').first(),
			originalImageWidth = originalImage.width(),
			overlayAnchor = $('<a/>'),
			overlayImage = $('<img/>');
 
		overlayImage
			.addClass('jrajav-image-overlay')
			.css({
				'position': 'absolute',
				'top': originalImage.offset().top + 'px'
			})
			.css(
				$(this).is('.tright')
					? { 'right': ($(window).width() - (originalImage.offset().left + originalImageWidth)) + 'px' }
					: { 'left': originalImage.offset().left + 'px' }
			)
			.mouseenter(function () { $(this).css({'z-index': '1', 'width': fullWidth + 'px'}); })
			.mouseleave(function () { $(this).css({'z-index': 'auto', 'width': originalImageWidth + 'px'}); })
			.load(function () {
				fullWidth = this.width < fullWidth ? this.width : fullWidth;
				overlayImage.width(originalImageWidth);
				overlayAnchor.show();
				overlayImage.delay(0).trigger('mouseenter'); //Needed because of animations (not sure why)
			});
 
 
		overlayAnchor
			.hide()
			.attr('href', $(this).find('a').first().attr('href'))
			.append(overlayImage);
 
		$('body').append(overlayAnchor);
 
		originalImage.mouseenter(function () {
			overlayImage.attr('src', originalImage.attr('src').replace('/thumb/', '/').replace(/\/\d*px.*$/, ''));
			$(this).off('mouseenter');
		});
	});
 
	$('#searchInput')
		.attr('tabindex', 1)
		.attr('placeholder', 'Search');
});