/**
 * Folder
 * Add the possibility to (un)fold a list of items
 * Calls a custom callback function when you opened or closed the slider.
 * 
 * See Options for details
 * 
 * @author Bart Stroeken [bart.stroeken@strawberries.nl]
 */
var Folder = new Class({
	
	Implements: [new Options()],
	
	/**
	 * The container that has to be folded in or out
	 */
	container : null,
	
	/**
	 * The elements that determine the height
	 */
	elements : null,
	
	/**
	 * Link of the button to be clicked
	 */
	togglers : null,
	
	/**
	 * the current status
	 */
	folded: false,
	
	/**
	 * Sizes of the table to be calculated
	 */
	sizes : {
		start: 0,
		end : 0
	},
	
	/**
	 * Options for the side slider
	 *  - Selectors: 
	 *  	- container: id of the element that has to be resized
	 *  	- elements: css-selector of the child-elements that determine the height
	 *  	- toggler:  the ID of the element that has to be clicked
	 *  
	 *  - Sizes: 
	 *  	- start: minimal height to be used.
	 *  	- end : total height 
	 *  	
	 * 	- functions: 
	 * 			After a toggle has been executed, an event is fired on the container. 
	 * 			These functions are called after the action has been executed
	 * 		- open: the slider is in its full size
	 * 		- close: the slider is in its minimal size. 
	 * 	- togglerHTML:
	 * 		The toggler has can be changed on click. 
	 * 		- open: displayed when the slider is in its full size
	 * 		- closed: displayed when the slider is in its minimal size.
	 * 
	 *  - duration: effect duration
	 *  - start_elements: amount of elements to be used as minimum
	 */
	options : {
		selectors: {
			container: 'slide_opleidingen_sdp',
			elements: ' .blockRow',
			toggler: ' #toggle_side'
		},
		
		sizes : {
			start: 0,
			end : 0
		},
		
		functions: {
			open: null,
			close: null
		},
		
		togglerHTML: {

		},
		
		duration: 1000,
		start_elements : 3
	},
	
	/**
	 * Initialisation. 
	 * Set the options, find all relevant elements
	 * Afterwards, call setup
	 */
	initialize: function(options){
		this.setOptions(options);
		this.container = $(this.options.selectors.container);
		if (!$chk(this.container)){
			return;
		}
		this.togglers = $$(this.options.selectors.toggler);
		this.elements = $$('#'+this.container.id + this.options.selectors.elements);
		this.setup();
	},
	
	/**
	 * Count all elements and define the necessary heights
	 * 
	 */
	setup: function() {
		if (this.elements.length <= this.options.start_elements) {
			/**
			 * hide the togglers, they're not useful
			 */
			this.togglers.each(function(el){
				el.setStyle('display', 'none');
			});
			return;
		}
		this.sizes.start = this.options.sizes.start;
		this.sizes.end = this.options.sizes.end;
		
		this.elements.each(function(el, index){
			var size = el.getSize();
			if (index < this.options.start_elements) {
				this.sizes.start += size.y;
			}
			
			this.sizes.end += size.y;
		}.bind(this));
		
		if ($chk(this.options.functions)) {
			if ($chk(this.options.functions.open) && typeof(this.options.functions.open) == 'function') {
				this.container.addEvent('open', this.options.functions.open.bind(this));
			}
			if ($chk(this.options.functions.close) && typeof(this.options.functions.close) == 'function') {
				this.container.addEvent('close', this.options.functions.close.bind(this));
			}
		}
		this.togglers.each(function(el){
			el.addEvent('click', this.toggle.bind(this));
		}.bind(this));
		this.hide();
	},
	
	/**
	 * Toggle the slider in or out
	 * 
	 */
	toggle: function() {
		if (this.folded) {
			this.togglers.each(function(el){
				if ($chk(this.options.togglerHTML.closed)){
					var el = $(el);
					el.set('html', this.options.togglerHTML.closed);
				}
			}.bind(this));
			this.folded = false;
			this.container.fireEvent('close');
			this.slideIn();
		} else {
			this.togglers.each(function(el){
				if ($chk(this.options.togglerHTML.open)){
					var el = $(el);
					el.set('html', this.options.togglerHTML.open);
				}
			}.bind(this));
			this.folded = true;			
			this.container.fireEvent('open');
			this.slideOut();
		}
	},
	
	hide: function() {
		var effect = new Fx.Tween(this.container, {duration: 0});
		effect.start('height',this.container.getSize().y, this.sizes.start);
	},
	
	slideIn: function() {
		var effect = new Fx.Tween(this.container, {duration: this.options.duration});
		effect.start('height',this.container.getSize().y, this.sizes.start);
	},
	
	slideOut: function() {
		var effect = new Fx.Tween(this.container, {duration: this.options.duration});
		effect.start('height',this.container.getSize().y, this.sizes.end);
	}
});