Event.observe(window, 'load', function() {
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ set up some adding of classes to things */	
	
	$$('input[type=image]').invoke('addClassName', 'image');
	$$('input[type=submit]').invoke('addClassName', 'submit');
	$$('input[type=radio]').invoke('addClassName', 'radio');
	$$('input[type=checkbox]').invoke('addClassName', 'checkBox');	
	$$('input[type=file]').invoke('addClassName', 'file');
	
	$$('tr:nth-child(odd)').invoke('addClassName', 'even');
	$$('#footer ul li:first-child').invoke('addClassName', 'first');
	
	$$('#breadCrumb ul li:first-child').invoke('addClassName', 'first');
	
	$$('.image').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.removeClassName('hover');
		});
	});

	$$('td', 'th').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.up().addClassName('hover');
			element.up().up().up().addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.up().removeClassName('hover');
			element.up().up().up().removeClassName('hover');
		});
	});
		
	$$('table caption').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.up().addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.up().removeClassName('hover');
		});
	});
	
	$$('td a').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.up().up().addClassName('hover');
			element.up().up().up().up().addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.up().up().removeClassName('hover');
			element.up().up().up().up().removeClassName('hover');
		});
	});
	
	$$('div.callouts h3').each(function(el, s){		
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.addClassName('hover');
			element.next().addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.removeClassName('hover');
			element.next().removeClassName('hover');
		});
		el.observe('click', function(event) {
			calloutsToggle(this, s);
		});		
	});
	$$('div.callout-teaser').each(function(el, s){		
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.up().up().addClassName('hover');
			element.up().up().previous().addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.up().up().removeClassName('hover');
			element.up().up().previous().removeClassName('hover');
		});
		el.observe('click', function(event) {
			var parentH3 = this.up().up().previous();
			calloutsToggle(parentH3, s);
		});		
	});
	calloutsSetup();
	
	$$('div.news ul li','div.events ul li').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.removeClassName('hover');
		});
	});
	
	$$('div.news ul li h4','div.events ul li h4', 'div.news ul li h5','div.events ul li h5', 'div.news ul li p','div.events ul li p', 'div.news ul li img','div.events ul li img').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.up().addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.up().removeClassName('hover');
		});
	});
	
	$$('div.news ul li p a','div.events ul li p a').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.up().up().addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.up().up().removeClassName('hover');
		});
	});
	
	
	// clear out the search field on focus, bring it back on blur
	if($('keywords')) {
		$('keywords').observe('focus', function(event) {
			var element = Event.element(event);
			if(element.value == 'Search') {
				element.value='';
			} else {
				element.select();
			}
		});	
		$('keywords').observe('blur', function(event) {
			var element = Event.element(event);
			if(element.value == '') {
				element.value='Search';
			}
		});		
	}
	
	// do the image replacement on sub-nav
//	if($('left')) {
//		elements = $('left').getElementsBySelector('a','ir');
	
//		for(i=0; i<elements.length; i++) {
//			el = elements[i];
//			t = el.innerHTML.gsub(' ','%20');
			/*
				TODO : Move this script to the app/public folder
			*/
//			c='b';
//			if(el.up().className == 'venture-finance' || el.up().className == 'venture-finance current') {
//				c='r';
//			}
//			if(el.up().className == 'charitable-trust' || el.up().className == 'charitable-trust current') {
//				c='g';
//			}
//			u = 'http://clients.fudgestudios.com/firstethical/fonts/subnav5.php?c='+c+'&t='+t;
//			$(el).setStyle({backgroundImage: 'url('+u+')'});
//		}
//	}
	
	/////////	
	// do the image replacement on h3's
	/////////
	// This take the class name in the format:
	// ir-15-19-310-197-150-11
	//
	// This is made up of the following elements:
	// size-height-width-r-g-b
	/////////
	
//	if($('center')) {
//		els = $('center').getElementsBySelector('[class^=ir]');
//		if(els.length) {
//			for(i=0; i<els.length; i++) {
//				params = $(els[i]).className.split('-');
//				el = els[i];
//				t = el.innerHTML.gsub(' ','%20');
//				u = 'http://clients.fudgestudios.com/firstethical/fonts/header.php?s='+params[1]+'&h='+params[2]+'&w='+params[3]+'&r='+params[4]+'&g='+params[5]+'&b='+params[6]+'&f='+params[7]+'&t='+t;
//				$(el).setStyle({backgroundImage: 'url('+u+')'});
//				$(el).setStyle({height: '28px'});													
//			}	
//		}	
//	}
	
	////////////
	// Attach change event to select nav's
	////////////
	
	$$('.select-nav').each(function(el){
		el.observe('change', function(event) {
			if(this.value != '') {
				document.location.href = this.value;
			}
		});
	});	 
	mailingListBoxes();
});


// --------------------------------------------------------------------------------------------------------------
// call outs accordion


var calloutsSliding = false;
var calloutsWhichOpen = 0;

function calloutsSetup() {
	
	if($$('.callouts')[0]) {
	
		//calloutsWhichOpen = $$('div.callouts h3').length - 1;
		calloutsWhichOpen = 0;
		
			
		var calloutHeights = new Array();
		calloutHeights = $$('div.callouts div.callout').invoke('getHeight');	
		
		
		$$('div.callouts h3')[0].addClassName('first');
		$$('div.callouts div.callout div.callout-content').invoke('hide');
		$$('div.callouts div.callout div.callout-content')[calloutsWhichOpen].show();
		$$('div.callouts h3')[calloutsWhichOpen].addClassName('active');	
		$$('div.callouts div.callout div.callout-teaser')[calloutsWhichOpen].hide();
		
		
		var calloutsHeight = $$('div.callouts')[0].getHeight();
		var biggestCalloutHeight = calloutHeights.max();	
		calloutsHeight = calloutsHeight - $$('div.callouts div.callout div.callout-content')[calloutsWhichOpen].getHeight() + biggestCalloutHeight + "px";
		$$('div#right')[0].setStyle({ height:calloutsHeight });
	
	}
}


function calloutsToggle(el,x) {

	if (calloutsSliding == false && calloutsWhichOpen != x) {
				
		calloutsSliding = true;
		
		var nextTeaser = el.next().immediateDescendants()[0];
		var nextContent = el.next().immediateDescendants()[1];
		var currentTeaser = $$('div.callouts div.callout')[calloutsWhichOpen].immediateDescendants()[0];
		var currentContent = $$('div.callouts div.callout')[calloutsWhichOpen].immediateDescendants()[1];
		
		el.toggleClassName('active');
		$$('div.callouts div.callout')[calloutsWhichOpen].previous().toggleClassName('active');
		
		
		var isIE = Prototype.Browser.IE;
	
		var isIE7 = false;
			
		/* http://gmatter.wordpress.com/2006/10/20/detecting-ie7-in-javascript/ */
		if (typeof document.body.style.maxHeight != "undefined") {
			isIE7 = true;
		}
		
		if (isIE7) {

			new Effect.Parallel(
				[
					new Effect.BlindUp(nextTeaser, { sync:true}),  
					new Effect.BlindDown(currentTeaser, { sync:true}),
					new Effect.BlindUp(currentContent, { sync:true}) 
				],			
				{	duration: 0.4, 
					afterFinish: function() {

						new Effect.Parallel(
						[							
							new Effect.BlindDown(nextContent, { sync:true})
						],			
						{	duration: 0.4, 
							afterFinish: calloutsNotSliding,
							transition: Effect.Transitions.linear,
							scaleContent: false	
						});
						
					},
					transition: Effect.Transitions.linear,
					scaleContent: false		
				}
			);				
			
		} else {

			new Effect.Parallel(
				[
					new Effect.BlindUp(nextTeaser, { sync:true}), 
					new Effect.BlindDown(nextContent, { sync:true}), 
					new Effect.BlindDown(currentTeaser, { sync:true}), 
					new Effect.BlindUp(currentContent, { sync:true})
				],			
				{	duration: 0.5, 
					afterFinish: calloutsNotSliding,
					transition: Effect.Transitions.linear,
					scaleContent: false		
				}
			);
			
		}
		
		calloutsWhichOpen = x;
	}
}


function calloutsNotSliding() {
	calloutsSliding = false;
}




// function to set up the login boxes for action
function mailingListBoxes() {
	if ($$('div.joinOurMailingList').length!=0) {
		// set up the listeners/watchers/observe (whatever you wanna call it) for blur/focus
		$$('input.ff-yourName').invoke('observe', 'focus', yourNameOnFocus);
		$$('input.ff-yourName').invoke('observe', 'blur', yourNameOnBlur);	
		// test if value is already something (auto form fillers might fill with something on load
		if ($$('input.ff-yourName').first().value != "") {
			$$('input.ff-yourName').first().addClassName('noBg');
		}
		
		$$('input.ff-yourEmail').invoke('observe', 'focus', yourEmailOnFocus);
		$$('input.ff-yourEmail').invoke('observe', 'blur', yourEmailOnBlur);	
		if ($$('input.ff-yourEmail').first().value != "") {
			$$('input.ff-yourEmail').first().addClassName('noBg');
		}
	}
}


function yourNameOnFocus() {
	if ($$('input.ff-yourName').first().value == "") {
		$$('input.ff-yourName').first().addClassName('noBg');
	} else {
		return
	}
}
// what to do when you click out of the email box in the login
function yourNameOnBlur() {
	if ($$('input.ff-yourName').first().value == "") { 
		$$('input.ff-yourName').first().removeClassName('noBg');
	}
}

function yourEmailOnFocus() {
	if ($$('input.ff-yourEmail').first().value == "") {
		$$('input.ff-yourEmail').first().addClassName('noBg');
	} else {
		return
	}
}
// what to do when you click out of the email box in the login
function yourEmailOnBlur() {
	if ($$('input.ff-yourEmail').first().value == "") { 
		$$('input.ff-yourEmail').first().removeClassName('noBg');
	}
}