// JS configuration
var articleMin = "50px";
var articleMax = "290px";
var toggleDuration = 500;
var fadeDuration = 200;
var inMotion = false;

window.addEvent('domready', function(){
	// enable tips
	var Tips2 = new Tips($$('.tips'), {
		initialize:function(){
			this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 300, wait: false}).set(0);
		},
		onShow: function(toolTip) {
			this.fx.start(1);
		},
		onHide: function(toolTip) {
			this.fx.start(0);
		}
	});
	
	// add events and behaviours to elements
	var allArticles = $$("#accordion .element");	
	var firstOne = true;
	
	allArticles.each(function(thisArticle) {
		var thisToggler = thisArticle.getPrevious();

		// add mouseover event to toggler =============================================
		var thisOpacity = new Fx.Style(thisToggler, 'opacity', {wait:false, duration:fadeDuration});
		
		thisToggler.addEvent('mouseover', function() {
			   thisOpacity.start(0.01);
		});
		
		thisToggler.addEvent('mouseleave', function() {
			var thisArticle = this.getNext();
			var thisArticleHeight = thisArticle.getStyle('height');
			if ((thisArticleHeight == articleMin)&&(inMotion != thisArticle)) {
			   thisOpacity.start(1);
			}
		});
		
		
		// add click event to toggler =============================================
		thisToggler.addEvent('click', function() {
			var heightChange = new Fx.Style(thisArticle, 'height', {wait:false, duration:toggleDuration, transition: Fx.Transitions.Quad.easeOut}).addEvent('onComplete', function() {
														// make sure it's colour after it's expanded

														inMotion = false;
													} );
			
			var thisHeight = thisArticle.getStyle('height');	
			if (thisHeight==articleMin) { //expand this one
			// contract all others first
					var allArticles2 = $$("#accordion .element");
					allArticles2.each(function(thisArticle2) {
						if (thisArticle2.getStyle('height')==articleMax) {
							// contract the active article
							var heightChange2 = new Fx.Style(thisArticle2, 'height', {wait:false, duration:toggleDuration, transition: Fx.Transitions.Quad.easeOut}).addEvent('onComplete', function() {
															// make sure it is bw after it's contracted
															var thisToggler2 = thisArticle2.getPrevious();
															thisToggler2.fireEvent('mouseleave');
														} );
								heightChange2.start(articleMin);
						}
					});
					
			// expand the clicked one now
				thisOpacity.set(0.01);
				inMotion = thisArticle;
				heightChange.start(articleMax);
			} else { //contract this one
				heightChange.start(articleMin);
			}
	   });	   	
	
		// contract by default, but apart from the first one (on load only)
		if (firstOne == true) {
			thisArticle.setStyle('height', articleMax);	
			thisOpacity.set(0.01);			
			firstOne = false;
		} else {
			thisArticle.setStyle('height', articleMin);
			thisOpacity.set(1);
		}
	   
	});
	
	// reset tooltip position on window resize
	$("more").addEvent("resize", function() {
		var allTooltips = $$(".tool-tip");
		allTooltips.each(function(thisTooltip) { 
			thisTooltip.setStyle("visibility", "hidden");
			thisTooltip.setStyle("opacity", "0");
			thisTooltip.setStyle("top", "1px");
			thisTooltip.setStyle("left", "1px");		
		});
   });

}); // end dom ready