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

PEPS = {};

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

        $(".rollon").hover(
         function() { $(this).attr('src', PEPS.rollover.newimageon($(this).attr('src'))); },
         function() { $(this).attr('src', PEPS.rollover.oldimageon($(this).attr('src'))); }
      );
        $(".roll01").hover(
         function() { $(this).attr('src', PEPS.rollover.newimage01($(this).attr('src'))); },
         function() { $(this).attr('src', PEPS.rollover.oldimage01($(this).attr('src'))); }
      );
    },

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

    newimageon: function(src) {
        return src.substring(0, src.search(/(\.[a-z]+)$/)) + '_on' + src.match(/(\.[a-z]+)$/)[0];
    },

    oldimageon: function(src) {
        return src.replace(/_on\./, '.');
    },
    
    newimage01: function(src) {
    return src.substring(0, src.search(/(_00\.[a-z]+)$/)) + '_01' + src.match(/(\.[a-z]+)$/)[0];
    },

    oldimage01: function(src) {
        return src.replace(/_01\./, '_00.');
    }
};