Event.observe(window, 'load', function() {
	tx_collapseablecontentelements_pi1.init();		
});

var tx_collapseablecontentelements_pi1 ={
	init : function () {
		//fetch all collapsableboxes
		this.collapseblecontentElements = $$('#rightContent .version31');
		this.observeToggles();
		this.baseUrl = 'index.php?pid='+JSFE['pid']+'&eID=tx_collapseablecontentelements_pi1&';
	},
	
	observeToggles : function () {		
		this.collapseblecontentElements.each(function(contenElement) {
			var toggle = contenElement.down('h3');

			Event.observe(toggle, 'click', function(event) {					
				tx_collapseablecontentelements_pi1.toggle(toggle);		
			});
		});
	},
	
	toggle : function (toggle) {
		this.contentElementUid = toggle.up('div.contentElement').id.substr(1);
		var content = toggle.next();
		if(!content) return;
		content.toggle();
		this.visibilityStatus = content.visible() ? 0 : 1;	
		this.saveToDb();
		//swtich image
		this.switchImage();
	},
	
	// 0 = visible 1 = hidden
	saveToDb : function (contentElementUid) {
		if (contentElementUid) {
			this.contentElementUid = contentElementUid;
			this.switchImage();
		}
		if (!this.contentElementUid) return;
		
		var url = this.baseUrl+'&tx_collapseablecontentelements_pi1[uid]='+this.contentElementUid+'&tx_collapseablecontentelements_pi1[visibilityStatus]='+this.visibilityStatus;
		new Ajax.Request(url, {
		    method: 'get',
		    onComplete: this.Response			         
		});
	},
	
	switchImage : function () {
		if (!this.contentElementUid) return;
		var content = $('c'+this.contentElementUid);
		if(!content) return;
		(this.visibilityStatus == 1) ? content.addClassName('collapsableContentelementIsHidden') : content.removeClassName('collapsableContentelementIsHidden');
	}
};