// NavRoll - Handy image rollover script
// -----------
// By: David Rugendyke
// Ver: 0.1


window.addEvent('domready', function() {

	// Initialise the image rollover menu class and set the class vars
	var nav = new navRoll();
	// These can be changed to suit new images and rollover prefixes
	//nav.Prefix = '_on';
	//nav.ImageExt = '.jpg';

});


// Nav Roll Class
var navRoll = new Class({
	
	// Class vars
	options: {
		navPrefix: null,
		navImageExt: null
	},
	
	// Initialise the class
    initialize: function(){
		
		// Defaults
		this.Prefix = '-on';
		this.ImageExt = '.gif';

		// Now add the mouseover events
		this.navRollEvents();
    },
	
	// Adds events to all the main menu items
	navRollEvents: function(){

		var Ob = this;
		var menuItem = $$('.navImage'); 
		// Attach events to each main menu
		menuItem.each(function(elMenu) {
				
			// Get the image element in that menu item
			var imageMenuEL = $(elMenu).getElement('img');
			var imageMenuName = $(imageMenuEL).get('src');
			var imageMenuNameRoll = imageMenuName.replace(Ob.ImageExt, Ob.Prefix+Ob.ImageExt);
			// Only add the rollover to items not already selected
			if(!imageMenuName.test(Ob.Prefix+Ob.ImageExt)){
			
				elMenu.addEvents({
					 'mouseover': function(){
							// Implement image rollover
							$(imageMenuEL).set('src', imageMenuNameRoll);
						},
						'mouseout': function(){
							// Show default when the mouse leaves
							$(imageMenuEL).set('src', imageMenuName);
						}	   	
									
				}); // End Events
			}
				
		}); // End Menu Loop
	
	}
	
});