var Rollover = Class.create({
    initialize: function(id, options) {
        this.id = id;
        this.origsource = $(this.id).src;
        this.setOptions(options);
        this.preloadRollover();
        this.rollbackImage();
        this.observeMouse();
    },

    setOptions: function(options) {
        this.options = {
            suffix: ''
        };
        Object.extend(this.options, options || {});
    },

    observeMouse: function() {
        $(this.id).observe('mouseover', this.rolloverImage.bindAsEventListener(this));
        $(this.id).observe('mouseout', this.rollbackImage.bindAsEventListener(this));
    },

    preloadRollover: function() {
        this.preload = new Image();
        this.preload.setAttribute('src',this.origsource);
        this.preload_orig = new Image();
        this.preload_orig.setAttribute('src',this.parseRollbackSource());
    },

    parseRollbackSource: function()
    {
        path = this.origsource.match(/(.*)\/(.*\.(png|gif|jpg))/)[1];
        filename = this.origsource.gsub(path, '').substr(1);
        return path + '/' + this.id + '.jpg';
    },

    rolloverImage: function(e) {
        $(this.id).setAttribute('src',this.parseRollbackSource());
    },

    rollbackImage: function(e) {
        $(this.id).setAttribute('src',this.origsource);
    }
});

Event.observe(window, 'load', function(event) { 
	new Rollover('nav_become');
	new Rollover('nav_play');
	new Rollover('nav_what');
	new Rollover('nav_meet');
	new Rollover('nav_parents');				
	new Rollover('nav_customer');
	new Rollover('nav_store');	
});