// JavaScript Document


window.addEvent('domready', function() {
	
	// Create variables (in this case two arrays) representing our bubbles and pages
	var myPages = $$('.page');
	var myBubbles = $$('.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
				});
			}	
		});
	});
});