/*
* <ul>
* 	<li class="{params.class_title}">
*		<div class="{params.class_title_clickable}">XYZ 1</div>
*		<ul>
*			{content}
*		<ul>
*	</li>
* 	<li class="{params.class_title}">
*		<div class="{params.class_title_clickable}">XYZ 2</div>
*		<{params.content_select}>
*			{content}
*		</>
*	</li>
* <ul>
*
* OR
*
* 	<div class="{params.class_title}">
*		<div class="{params.class_title_clickable}"><?= tr('Comment') ?></div>
*		<div class="{params.content_select}">
*			{content}
*		</div>
*	</div>
*
*
*
*
*/
var i4_Toggle = {
	instances: [],
	
	factory: function() {
		var instance = new i4_Toggle_instance();
		this.instances.push(instance);
		return instance;
	},
	
	/**
	* element: close all exept element
	*/
	close_all: function(element) {
		this.instances.each(function(item){ 
			if (!element.hasClassName(item.params.class_title)) {
				item.close_all();
			}
			
		});
	}
}

var i4_Toggle_instance = Class.create({
	all_collapsed: false,
	
	default_params: '',
	params: '',
	
	initialize: function() {
		this.default_params = {
			class_title: '',
    		class_title_clickable: '',
			content_select: '.content',
    		effect_duration: 0.2,
    		collapse_on_create: true,
			create_toggle_all_link: false,
			icon_open_src: '',
			icon_close_src: '',
			icon: true
		};
		
	},
	
	create: function(params) {
		
		// merge params with default-params
		params = this.merge_params(params);
		
		this.params = params;

		if (params.create_toggle_all_link) {
			$$('.'+params.class_title)[0].up('ul').insert({
				top: new Element('li').
					update('Toggle Visibility').
					addClassName('toggle_link').
					observe('click', (function(){
						this.toggle_all(params)
					}).bind(this))
			});
		}
			
		$$('.'+params.class_title).each((function(item, i){
			
			item.down('.'+params.class_title_clickable).setStyle({ 'cursor': 'pointer' });
			if (params.icon) {
				item.down('.'+params.class_title_clickable).insert({
					top: new Element('img').addClassName('icon')
				});
			}
			
			if (params.collapse_on_create) {
				// console.log(item);
				// console.log(params.content_select);
		    	item.down(params.content_select).hide();
		    	this.all_collapsed = true;
		    	
		    	if (params.icon) {
		    		item.down('.icon').writeAttribute('src', params.icon_close_src);
		    	}
		    } else {
		    	if (params.icon) {
		    		item.down('.icon').writeAttribute('src', params.icon_open_src);
		    	}
		    }
				
		    item.down('.'+params.class_title_clickable).observe('click', (function(){
		    	if(typeof this.before_toggle_function == 'function') {
		    	    this.before_toggle_function(item);
		    	}
		    
		    	if (item.down(params.content_select).getStyle('display') == 'none') {
		    		item.down(params.content_select).blindDown({ duration: params.effect_duration, afterFinish: (function(){
		    			if (params.icon) {
		    				item.down('.icon').writeAttribute('src', params.icon_open_src);
		    			}
		    			if(typeof this.after_toggle_function == 'function') {
		    				this.after_toggle_function(item, 'open');
		    			}
		    		}).bind(this)});
		    	} else {
		    		item.down(params.content_select).blindUp({ duration: params.effect_duration, afterFinish: (function(){
		    			if (params.icon) {
		    				item.down('.icon').writeAttribute('src', params.icon_close_src);
		    			}
		    			if(typeof this.after_toggle_function == 'function') {
		    				this.after_toggle_function(item, 'collapsed');
		    			}
		    		}).bind(this)});
		    	}
		    }).bind(this));
		}).bind(this));
	
	}, // i4_Toggle.create()
	
	toggle_all: function(params) {
		
		var collapse = true;
		if (this.all_collapsed) {
			this.all_collapsed = false;
			collapse = true;
		} else {
			this.all_collapsed = true;
			collapse = false;
		}
	
	
		$$('.'+params.class_title).each(function(item){
		    if (collapse) {
		        item.down(params.content_select).blindDown({ duration: params.effect_duration, afterFinish: function(){
		        	if (params.icon) {
			    		item.down('.icon').writeAttribute('src', params.icon_open_src);
		    		}
		    	}});
		        
		    } else {
		        item.down(params.content_select).blindUp({ duration: params.effect_duration, afterFinish: function(){
		        	if (params.icon) {
			    		item.down('.icon').writeAttribute('src', params.icon_close_src);
					}
		    	}});
		        
		    }
		});
		
	}, // i4_Toggle.toggle_all()
	
	close_all: function() {
		this.all_collapsed = true;
	
		$$('.'+this.params.class_title).each((function(item){
		    
			item.down(this.params.content_select).blindUp({ duration: this.params.effect_duration, afterFinish: (function(){
			    if (this.params.icon) {
			    	item.down('.icon').writeAttribute('src', this.params.icon_close_src);
			    }
			}).bind(this)});
		        
		    
		}).bind(this));
		
	}, // i4_Toggle.close_all()
	
	after_toggle: function(func){
		var after_toggle = 'var after_toggle_function = '+func;
		eval(after_toggle);
		this.after_toggle_function = after_toggle_function;		
		return this;
	},
	
	before_toggle: function(func){
		var before_toggle = 'var before_toggle_function = '+func;
		eval(before_toggle);
		this.before_toggle_function = before_toggle_function;		
		return this;
	},
	
	merge_params: function(params) {
		
		var result = this.default_params;
		for (attrname in params) {
			if (result[attrname] != params[attrname]) {
				result[attrname] = params[attrname];
			}
		} 
		return result;
	}

}); // i4_Toggle