window.addEvent('domready',function(){
	
	//create variables
	var myPages = $$('.page');
	var myBubbles = $$('.bubble');
	
	myBubbles.setStyle('opacity',0);
	$('bubbleWrap').setStyle('visibility','visible')
	
	window.addEvent('domready', function() {
		
	$('disc').setStyle('opacity',0);
	$('name').addEvents({
			'mouseenter': function() {
				$('disc').morph({
					'opacity' : 1
				});
			},
			'mouseleave' : function() {
				$('disc').morph({
					'opacity' : 0
				});
			}	
		});
	
	// Create variables (in this case two arrays) representing our bubbles and pages
	var myPages = $$('.page'); //grabs all elements with the class 'page'
	var myBubbles = $$('.bubble'); //grabs all elements with the class 'bubble'
	
	// Set bubbles opacity to zero so they're hidden initially 
	// and toggle visibility on for their container	back on
	myBubbles.setStyle('opacity', 0);
	$('bubbleWrap').setStyle('visibility','visible')
	
	// Add our events to the pages
	myPages.each(function(el, i) {
		/* Here we change the default 'link' property to 'cancel' for our morph effects, which 
		   ensures effects are interrupted when the mouse is leaving and entering
		   to immediately begin the morph effect being called */
		el.set('morph', {link : 'cancel'});
		
		el.addEvents({
			'mouseenter': function() {
				myBubbles[i].morph({
					'opacity' : 1,
					'margin-top' : '-15px'
				});
			},
			'mouseleave' : function() {
				myBubbles[i].morph({
					'opacity' : 0,
					'margin-top' : 0
				});
			}	
		});
	});
});

	
});