$(document).ready( function() {
	PEPS.rollover.init();
});

PEPS = {};

PEPS.rollover = {
	init : function() {
		this.preload();

		$(".ro").hover( function() {
			$(this).attr('src', PEPS.rollover.newimage($(this).attr('src')));
		}, function() {
			$(this).attr('src', PEPS.rollover.oldimage($(this).attr('src')));
		});
	},

	preload : function() {
		$(window).bind(
				'load',
				function() {
					$('.ro').each(
							function(key, elm) {
								$('<img>').attr(
										'src',
										PEPS.rollover.newimage($(this).attr(
												'src')));
							});
				});
	},

	newimage : function(src) {
		return src.replace(/_off/, '_on');
	},
	oldimage : function(src) {
		return src.replace(/_on/, '_off');
	}
};