window.addEvent('domready', function(){
		Element.implement({
			// Implement two functions to easily show / hide the info divs
			fancyShow: function() {
				this.setStyle('display', 'block');
				this.fade('in');
			},
			//implement hide
			fancyHide: function() {
				this.fade('out');
				this.setStyle('display', 'none');
			}
		});
		// Search the body of the document for all images with the css class button, add the following events:
		$$('img.button').addEvents({
			// mouseenter - fires when the mouse enters
			'mouseenter': function(){
				// Hide all info divs:
				//$$('div.info').fancyHide();
				// Shrink all the buttons:
				//$$('img.button').morph('img.button');
				// Move the div;
				// $(this.getProperty('id')+'Div').position({relativeTo: this, position: 'topRight', offset: {x:40, y:0}});
				// Show the one we want:
				$(this.getProperty('id')+'Div').fancyShow();
				// Enlarge the button:
				this.morph('img.buttonHover');
			},
			// mouseleave - fires when the mouse leaves
			'mouseleave': function(){
				$(this.getProperty('id')+'Div').fancyHide();
				this.morph('img.button');
			}
		});
		// Enlarge on hover for the index:
		$$('img.MenuImage').addEvents({
			// mouseenter - fires when the mouse enters
			'mouseenter': function(){
				// setup the morph function - long duration, ease the transition with an outward bounce
				// then fire the morph to bottomMenuHover
				//alert(this);
				this.set('morph', {duration: 'long', transition: 'bounce:out'});
				this.morph('img.MenuImageHover');
			},
			// mouseleave - fires when the mouse leaves
			'mouseleave': function(){
				// as above, short morph this time
				this.set('morph', {duration: 'short'});
				this.morph('img.MenuImage');
			}
		});
		// And finally quickly hide all the div's so the opacity etc. is set right
		// (avoids the first show not being a fade) This could be done in HTML however
		// it shouldn't take long with JS
		$$('div.info').fancyHide();
		
});