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



	var fx = new Fx.Morph($('topslide'), {duration:3000,transition: Fx.Transitions.Elastic.easeOut, wait:false});


	// Create variables (in this case two arrays) representing our bubbles and pages

	var myBubbles = $$('.to');
	var myPages = $$('.topbutton');
	// Set bubbles opacity to zero so they're hidden initially and toggle visibility on for their container	
	myBubbles.setStyle('opacity', 0);
	myBubbles.setStyle('height', 0);
	myBubbles.setStyle('display', 'none');

	
	
	// Add our events to the pages
	
	
		$('topimage').addEvents({
			'mouseover': function() {

					myBubbles.setStyle('opacity', 0);
					myBubbles.setStyle('height', 0);
					myBubbles.setStyle('display', 'none');
					
				}
		
		
		});
	
	
		myPages.each(function(el, i) {
		el.set('morph', {link : 'cancel'});



		el.addEvents({
			'mouseover': function() {
			

					myBubbles.each(function (bub) { 
					bub.morph({
						'opacity' : 0,
						'height' : '0',
						'display' : 'none'
					});
					
				});

			
				myBubbles[i].morph({
					'opacity' : 1,
					'display' : 'block',
					'height' : '73px'
				});		
			}	
		});


	});

		


});