// remember to compress JS once final version is done and keep the original for editing

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

//------- ACCORDION ---------------
var list = new Accordion('h4.atStart', 'div.atStart', {
	opacity: false,
	onActive: function(togglers, togglersCopy){
		togglers.setStyle('color', '#0f0f0f'); //color of text
	},
 
	onBackground: function(togglers, togglersCopy){
		togglers.setStyle('color', '#050505');
	}
}, $('list'));

//------------- slide thing
var sliders = $$(".explanation");
var triggers = $$(".appear") ;
var triggers2 = $$(".disappear") ;
 
triggers.each(function( o, x ){
	
	var sl = new Fx.Slide( sliders[x], {mode:'horizontal', transition: Fx.Transitions.Expo.easeOut});
		$(triggers[x]).addEvent('click',function(e){
		e = new Event(e);
		sl.toggle();
		e.stop();
	})
	var sl = new Fx.Slide( sliders[x], {mode:'horizontal', transition: Fx.Transitions.Expo.easeOut});
		$(triggers2[x]).addEvent('click',function(e){
		e = new Event(e);
		sl.toggle();
		e.stop();
	})
		sl.hide(); // I do this as I can't find any config to set the slider hidden in start.
});

//------------ white tab
var list = $$('.white');
list.each(function(element) {
 
	var fx = new Fx.Styles(element, {duration:200, wait:false});
 
	element.addEvent('mouseenter', function(){
		fx.start({
			'background-color': '#e9feff'
		});
	});
 
	element.addEvent('mouseleave', function(){
		fx.start({
			'background-color': '#fff'
		});
	});
 
});

//------------- gray tab 
// - color for rollover copy box - e9feff
var list = $$('.gray');
list.each(function(element) {
 
	var fx = new Fx.Styles(element, {duration:200, wait:false});
 
	element.addEvent('mouseenter', function(){
		fx.start({
			'background-color': '#e9feff'
		});
	});
 
	element.addEvent('mouseleave', function(){
		fx.start({
			'background-color': '#f5f5f5'
		});
	});
 
});

//-------- footer links
var list = $$('.footernav li a');
list.each(function(element) {
 
	var fx = new Fx.Styles(element, {duration:200, wait:false});
 
	element.addEvent('mouseenter', function(){
		fx.start({
			'color': '#00e3f2'
		});
	});
 
	element.addEvent('mouseleave', function(){
		fx.start({
			'color': '#010101'
		});
	});
 
});

});