window.addEvent('domready', function(){
/*========collapsing elements mootools 1.11=============*/

//list of target elements
var list = $$('.collapse');
//list elements to be clicked on
var headings = $$('.collapselink');
//array to store all of the collapsibles
var collapsibles = new Array();
var $ie = window.ie;



headings.each( function(heading, i) {

        //for each element create a slide effect
        var collapsible = new Fx.Styles(list[i], {
                duration: 400,
                transition: Fx.Transitions.linear
        });
        		
        collapsibles[i] = collapsible; //and store it in the array
		
				
        //add event listener
        heading.onclick = function(){                
				var $image = this.getElement('img'); //select images
				
				if ($image)
				{									
					var imgEffect = new Fx.Styles($image, {
							duration: 100, 
							transition: Fx.Transitions.linear
					});
				}
				
				
				if (this.hasClass('topen'))
				{
					this.removeClass('topen');				
					if ($image)
					{
						imgEffect.start({'width':  120});
					}
					
					setTimeout(function(){
						list[i].setStyle('display', 'none');
						if (!$ie) {
							collapsible.start({'opacity': [1.0, 0.0] });					
						}
					},110);					
				}
				else
				{					
					this.addClass('topen');
					if ($image)
					{
						$image.setStyle('height', 'auto');
						imgEffect.start({'width':  240});
					}
					
					setTimeout(function(){
						if (!$ie) {
							collapsible.start({'opacity': [0.0, 1.0] });	
						}
						list[i].setStyle('display', 'block');										
					},110);					
				}				
                return false;
        }
});

list.each( function(listitem, e) {
	list[e].setStyle('display', 'none');
	if (!$ie) {
		list[e].setStyle('opacity', '0.0');
	}
});

/*======== end collapsing elements mootools 1.11=============*/




});