window.addEvent('domready', function() {
				var w = 0;
				var h = 0;
				if(!window.innerWidth)
				{
					//strict mode
					if(!(document.documentElement.clientWidth == 0))
					{
						 w = document.documentElement.clientWidth;
						 h = document.documentElement.clientHeight;
					}else{//quirks mode
						 w = document.body.clientWidth;
						 h = document.body.clientHeight;
					}
				}else{
					w = window.innerWidth;
					h = window.innerHeight;
				}


				// Create variables (in this case two arrays) representing our bubbles and pages
				var myPages = $$('.footer-logo LI');
				var myBubbles = $$('#bubbleWrap LI');
				var myImg = $$('.footer-logo LI A IMG.rollover');
				
				// Set bubbles opacity to zero so they're hidden initially and toggle visibility on for their container	
				myBubbles.setStyle('opacity', 0);
				$('bubbleWrap').setStyle('visibility','visible')
				
				myBubbles.each(function(bub, i) {
					var tempX = (myPages[i].getCoordinates().left + (myPages[i].getSize().x - bub.getSize().x - w + 960)/2) ;
					bub.setStyles({'left' :  tempX + 'px' , 'top' : -bub.getSize().y + 'px'});
					//alert(myPages[i].getCoordinates().left);
				});
				
				// Add our events to the pages
				myPages.each(function(el, i) {
					
					el.set('morph', {link : 'cancel'});
					
					el.addEvents({
						'mouseenter': function(event) {							
							myBubbles[i].morph({
								'opacity' : 1,
								'margin-top' : '-10px'
							});
							//myImg[i].setAttribute('src',myImg[i].src.replace('2', '1'));
							myImg[i].morph({
								'opacity' : 0
							});
						},
						'mouseleave' : function() {
							myBubbles[i].morph({
								'opacity' : 0,
								'margin-top' : 0
							});
							myImg[i].morph({
								'opacity' : 1
							});
						}	
					});
				});
			});