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

	/************************************
		FIRST CHECK FOR CSS SUPPORT
	************************************/
	function checkCSS()
	{
		var newDiv = document.createElement('div');
		document.body.appendChild(newDiv);
		newDiv.style.visibility = 'hidden';
		newDiv.style.width = '20px';
		newDiv.style.padding = '10px';
		var divWidth = newDiv.offsetWidth;
		if (divWidth != 40) {
			document.body.removeChild(newDiv);
			return false;
		}
		else {
			document.body.removeChild(newDiv);
			return true;
		}
	}

	if (checkCSS()) {
		Cufon.replace('h1', { fontFamily: 'GrotesqueCondensed' });
		Cufon.replace('h2, p', { fontFamily: 'Grotesque' });
//		Cufon.replace('h3', { fontFamily: 'Grotesque' });
	}

	
	/************************************
		BUBBLE HOVER
	************************************/
	var bubbleheight = $('bubble').getHeight();
	var bubbleFX = new Fx.Morph('bubble', {duration: 300, transition: Fx.Transitions.Circ.easeOut}).set({
	    'opacity': 0
	});	
	var liFX = [];
	$$('ol.frames li').each(function(li,i) {
		var a = li.getFirst(a);
		var href = a.get('href');
		liFX[i] = new Fx.Morph(a, {duration: 300, transition: Fx.Transitions.Circ.easeOut});	
		li.addEvent('mouseenter', function() {
			// STOP ANY ANIMATION
			bubbleFX.cancel();
			// GRAB H2
			var h3 = a.getFirst('h3').get('text');
			var p = a.getFirst('p').get('text');
			// SET TEXT FOR BUBBLE
			$('bubble').getFirst('h3').set('text', h3);
			$('bubble').getFirst('p').set('text', p);
			// DETERMINE WHICH DIRECTION BUBBLE FACES
			var diff = li.getLeft() - ($(document).getWidth()/2);
			if (diff > 0) {
				$('bubble').addClass('arrow-right');
				var x = li.getLeft() - 163;
			}
			else {
				$('bubble').removeClass('arrow-right');
				var x = li.getLeft() - 16;
			}
			// GRAB COORDINATES FOR BUBBLE
			var y = li.getTop() - bubbleheight - 5;
			bubbleFX.cancel();
			bubbleFX.set({
				'left' : x,
				'margin-top' : 0,
				'top' : y - 35
			});
			bubbleFX.start({
				'top' : y,
				'opacity' : 1
			});
			liFX[i].cancel();
			liFX[i].start({
			    'opacity' : 0
			});
		});
		li.addEvent('mouseleave', function() {
			bubbleFX.cancel();
			bubbleFX.start({
				'margin-top' : 15,
				'opacity' : 0
			});
			liFX[i].cancel();
			liFX[i].start({
			    'opacity' : 1
			});
		});
		li.addEvent('click', function() {
			window.open(href);
		});
	});

	footerFX = new Fx.Morph('footer', {delay:10, duration: 300, transition: Fx.Transitions.Circ.easeOut});
	var waiting = setInterval(
		function(){
			footerFX.start({
			    'bottom' : 0
			});
		}, 1000
	);
	
});