/**
 * This library contains form helper and classes
 * @author bjoern.wolf@e-tecture.com
 * @version 0.2
 */
EWT.Form = {}


/**
 * Connect two dropdown boxes to get the target's content be updated on change of the source dropdown.
 * @param {Object} source The master dropdown element
 * @param {Object} target The slave dropdown element
 * @param {Object} data Data which is injected in the dropdown element
 * @param {Object} [options] Optional configuration
 * @author Björn Wolf bjoern.wolf@e-tecture.com
 * @version 0.3
 */
EWT.Form.DropDownDependency = Class.create();
EWT.Form.DropDownDependency.prototype = {
	/**
	 * @constructor
	 */
	initialize: function(source, target, data, options) {
		this.source = source;
		this.target = target;
		this.data = data;
		this.options = Object.extend({
			showDefaultOption: true,
			defaultOption: {
				value: "", text: "Bitte wählen"
			},
			showSeparator: true,
			separator: {
				value: "", text: "-------------------"
			},
			hideEmptyTarget: false,
			afterUpdate: function() {},
			callback: null
		}, options || {});
		
		Event.observe(source, "change", this._updateTarget.bind(this));
	},
	/**
	 * Updates the specified target dropdown
	 * @method
	 */
	_updateTarget: function() {
		var value = this.source.value;
		var data = $A(this.data.values[value]);
		
		// Reset dropdown content
		this.target.innerHTML = "";
		// Show default option?
		if (this.options.showDefaultOption) {
			this.target.appendChild(this._buildOptionElement(this.options.defaultOption));
			// Show separator?
			if (this.options.showSeparator)
				this.target.appendChild(this._buildOptionElement(this.options.separator));
		}
		// Iterate available options
		data.each(function(option, index) {
			// Invoke custom callback	
			if (typeof this.options.callback == "function")
				option = this.options.callback(option);
			// Build option element
			this.target.appendChild(this._buildOptionElement(option));
		}.bind(this));
		// Select first option element
		this.target.selectedIndex = 0;
		// Hide target if empty and configured
		if (data == "" && this.options.hideEmptyTarget) Element.hide(this.target);
		else Element.show(this.target);
		// Invoke afterUpdate function
		this.options.afterUpdate();
	},
	/**
	 * Returns the DOMified "option" element
	 * @param {Object} option Object with data for option element
	 * @return {Object} Returns the DOMified "option" element
	 */
	_buildOptionElement: function(option) {
		var optionElement = $option({value: option.value}, document.createTextNode(option.text));
		
		return optionElement;
	}
}