/**
 * Creator: khastie
 * Date: Sep 16, 2008
 * Time: 12:15:01 PM
 * Contents are property of Cappex.com LLC, and strictly confidential.
 */
 
/** 
 * CLASS: SelectToggler
 * DESCR: Toggles the visibility of a set of elements (specified by targetClass) based on the selection of a value in a SELECT or an INPUT type="checkbox"
 * USAGE: - The toggler SELECT/INPUT must have the id indicated by the _togglerID_ init param.
 		  - Every togglable element must have the class indicated by the _targetClass_ init param.
 		  - For SELECTs, each individual togglable element must have a second class which matches the value of the specific option that toggles it.
 * EXMPL:

	// Select:
	var selectToggler = new SelectToggler('collegeType', 'jsAdmissionsTip', 'collegeTypeButton', admissionsCoach.doAnim.bind(admissionsCoach), admissionsCoach.hideTips.bind(admissionsCoach));

	<select id="collegeType">
		<option value="jsIvy" />
		<option value="jsTechnical"/>
	</select>

	<div class="jsAdmissionsTip jsIvy">...</div>
	<div class="jsAdmissionsTip jsTechnical">...</div>

	// Checkbox:

	var selectToggler = new SelectToggler('collegeType1', 'jsIvy');
	var selectToggler = new SelectToggler('collegeType2', 'jsTechnical');

	<input id="collegeType1" type="checkbox"/>
	<input id="collegeType2" type="checkbox"/>

	<div class="jsIvy">...</div>
	<div class="jsTechnical">...</div>	 

 */
var SelectToggler = new Class({

	togglerID : null,
	targetClass : null,
	buttonID : null,
	optionElems : null,
	targetElems : null,
	onComplete : function () {}, // do nothing by default
	onTrigger : function () {}, // do nothing by default

	toggleTargets : function () {

		var selectedOptionValue = $(this.togglerID).value;

		this.onTrigger();

		this.targetElems.each(function(targetElem) {

			// checkbox
			if ($(this.togglerID).getTag() == 'input') {

				if ($(this.togglerID).checked) {
					this.show(targetElem);
				} else {
					this.hide(targetElem)
				}

			// select
			} else {

				if (targetElem.hasClass(selectedOptionValue)) {
					this.show(targetElem);
				} else {
					this.hide(targetElem)
				}
			}

		}, this);

		this.onComplete();

	},

	show : function (targetElem) {
		targetElem.removeClass('jsHide');
	},

	hide : function (targetElem) {
		targetElem.addClass('jsHide');
	},

	/**
	 * @param togglerID The id of the toggler element (select)
	 * @param targetClass The class that will appear on any togglable elements
	 * @param buttonID (optional) The id of the button
	 * @param onComplete (optional) Callback function to call after toggling elements
	 * @param onTrigger (optional) Callback function to call before toggling elements
	 */
	initialize : function (togglerID, targetClass, buttonID, onComplete, onTrigger) {

		this.togglerID = togglerID;
		this.targetClass = targetClass;
		this.buttonID = buttonID;

		if (typeof onComplete != 'undefined') {
			this.onComplete = onComplete;
		}

		if (typeof onTrigger != 'undefined') {
			this.onTrigger = onTrigger;
		}

		window.addEvent('domready', function () {
			this.domReady();
		}.bind(this));
		
	},

	domReady : function () {

		this.optionElems = $$('option', this.togglerID);
		this.targetElems = $$('.' + this.targetClass);

// it looks like this loop was intended to add this event to each optionElem. Instead it should just perform that addEvent once.		
//		for (var i = 0; i < this.optionElems.length; i++) {

		if ($(this.togglerID).getTag() == 'input') {
			$(this.togglerID).addEvent('click', this.toggleTargets.bind(this));
			} else {
			$(this.togglerID).addEvent('change', this.toggleTargets.bind(this));	
		}
//		}

		if (this.buttonID != null) {
			$(this.buttonID).addEvent('click', this.toggleTargets.bind(this));
		}

		this.toggleTargets();
	},

	test : function () {
		this.toggleTargets();
	}
});