Ext.onReady(function() {
	
	// at the news page: close all elements and open the selected element
	Ext.select('.open, .close').on('click', function(e, t) {
		toggleElement(t.id,1);	
	});
	
	// open and close the content boxes
	Ext.select('.closeIcon').on('click', function(e, t) {
		toggleElement(t.id,0);		
	});	

});



/**
 * Toggle the contentbox 
 */
var counter = 0;

function toggleElement(id, all) {

	var filepath = 'fileadmin/templates/images/';

	if(all!=1) {
		// We need this for the FORUM and BLOG
		if (Ext.fly(id).getAttribute('src').substr(0,3) == '../') {
			filepath = '/' + filepath;
		}

		// We need this for the WIKI
		if (Ext.fly(id).getAttribute('src').substr(0,1) == '/') {
			filepath = '/' + filepath;
		}

		// change the toggle icon in the right corner
		(Ext.fly(id).getAttribute('src') == filepath + 'closeIcon.png') ? Ext.fly(id).set({src: filepath + 'openIcon.png'}) : Ext.fly(id).set({src: filepath + 'closeIcon.png'});	
	}


	// find the right element-Id
	var mark = id.substr(0,1) == 'l' ? 'l' : 'c';
	var id = id.split(mark + '_');

	// effect for news page
	if(all==1) {	
		counter++;
		if(counter % 2 == 0) {
			Ext.select('div.newsTeaserText').setStyle('display','block');
			Ext.fly('news_' + id[1]).setStyle('display','none');
		} else {
			Ext.select('div.newsTeaserText').setStyle('display','none');
			Ext.fly('news_' + id[1]).setStyle('display','block');
		}
	}

	// only the active element will show or hide
	else {
	
		var el = Ext.get('cb_' + id[1]);		
	
		// hide or show the element
		if(el.getStyle('display') == 'none') {		
			Ext.fly(el.id).next("div").setStyle('display','block');
			toggleIn(el);	
			
		} else {
			Ext.fly(el.id).next("div").setStyle('display','none');
			toggleOut(el);
			
		}			
	}

}


/**
 * show the element
 */
function toggleIn(id) {		
	id.slideIn('t', {
		duration: .5
	});	
}


/**
 * hide the element
 */
function toggleOut(id) {
	id.slideOut('t', {
		duration: .5,
		useDisplay: true
	});	
}