$(document).ready(function() {
    PEPS.rollover.init();
    PEPS.changeImg.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.substring(0, src.search(/(\.[a-z]+)$/)) + '_ro' + src.match(/(\.[a-z]+)$/)[0];
            },

            oldimage: function(src) {
                return src.replace(/_ro\./, '.');
            }
        };

        PEPS.changeImg =
        {
            init: function() {

                $(".hbtn").click(
         function() { $("#info").attr('src', PEPS.changeImg.change($(this).attr('src'))); }
      );
            },


            change: function(src) {
                src = src.replace(/_ro\./, '.');
                return src.substring(0, src.search(/(\.[a-z]+)$/)) + '_info' + src.match(/(\.[a-z]+)$/)[0];
            }


        };