window.addEvent('domready', function() {
	
	// Create variables (in this case two arrays) representing our bubbles and pages
	var myPages = $$('.page');
	var myBubbles = $$('.bubbles');
	
	// Set bubbles opacity to zero so they're hidden initially and toggle visibility on for their container
	
	myBubbles.setStyle('opacity', 0);
	$('imagebubbleWrap').setStyle('visibility','visible')
	
	// Add our events to the pages

	myPages.each(function(el, i) {
		el.set('morph', {link : 'cancel'});
		
		el.addEvents({
			'mouseenter': function() {
				myBubbles[i].morph({
					'opacity' : 1,
					'margin-top' : 0
				});
				
			},
			'mouseleave' : function() {
				myBubbles[i].morph({
					'opacity' : 0,
					'margin-top' : 0
				});
				
			}	
		});
	});
});