/* requires Jquery */
var WK = WK || {};
WK.bubble = function(event, element) {
	var targ = event.target;
	var relativeTarget = targ;
	var count = 0;

	if (targ == element) {
		return true;
	}

	while (relativeTarget.nodeName != 'BODY') {
		relativeTarget = relativeTarget.parentNode;
		if (relativeTarget == element) {
			return true;
		}
		if (count > 7) {
			break;
		}
		count++;
	}
	return false;
}

function DropDown(div) {
	this._container = $(div);
	DropDowns[DropDowns.length] = this;
	return this.init();
}
DropDown.prototype = {
	_container: null,
	_disabled: null,

	_options: null,
	_optionsContainer: null,

	_selectedOption: null,
	_selectedOptionContainer: null,

	_onChange: null,

	isDisabled: function() {
		return this._disabled;
	},
	
	getSelectedValue: function() {
		return $(this._selectedOption.children().get(0)).attr('value');
	},

	enable: function() {
		this._disabled = false;
		this._container.removeClass('disabled');
		return this;
	},
	
	disable: function() {
		this._disabled = true;
		this._container.addClass('disabled');
		return this;
	},

	onChange: function(func) {
		if ($.isFunction(func)) {
			this._onChange = func;
		}
		return this;
	},
	
	select: function(container) {
		if (this._onChange) {
			var value = $(container.children().get(0)).attr('value');
			this._onChange(value);
		}
		this.selectHelper(container);
		ViewManager.showStep(2);
	},
	
	selectHelper: function(container) {
		var optionContainer = $(container.children().get(0));
		if (this._selectedOption) {
			this._selectedOption.show();
		}
		this._selectedOption = container;
		this._selectedOptionContainer.empty().append(optionContainer.clone());
		
		this._selectedOption.hide();
		this.hideOptions();
	},
	
	selectFirst: function() {
		if (firstOption = this._options[0]) {
			this.select(firstOption);
		}
	},
	
	toggleOptions: function() {
		var self = this;
		if (!this.isDisabled()) {
			if (this._optionsContainer.is(':visible')) {
				this.hideOptions();
			}
			else {
				this._selectedOptionContainer.find('a.dropDownButton').addClass('expanded');
				this._optionsContainer.show();
				
				$('html').click(function(event) {
					if (WK.bubble(event, self._container.get(0)) != true) {
						self.hideOptions();
					}
				});
			}
		}
	},
	
	hideOptions: function() {
		this._optionsContainer.hide();
		this._selectedOptionContainer.find('a.dropDownButton').removeClass('expanded');
		$('html').unbind('click');
	},
	
	reset: function() {
		this._options = [];
		this._optionsContainer.empty();
		this._selectedOptionContainer.empty();
		this._selectedOption.empty();

		return this;
	},
	
	addOption: function(value, description) {
		var option = $(document.createElement('div'));
		option.attr('value', value);
		option.html(description);
		this.initOption(option);

		return this;
	},

	addOptionsFromJson: function(json) {
		for (var i in json) {
			this.addOption(i, json[i]);
		}
		return this;
	},
	
	init: function() {
		var options = this._container.children();
		var self = this;
		
		this._options = [];
		this._container.empty().addClass('dropDown');

		var dropDownButton = $('<a href="#" class="dropDownButton">toggle</a>');
		dropDownButton.click(function() { self.toggleOptions(); });
		this._selectedOptionContainer = $("<a class='selected'></a>").css('display', 'block').click(function() { self.toggleOptions(); });
		this._container.append(this._selectedOptionContainer).append(dropDownButton);

		this._optionsContainer = $("<div class='dropDownOptions'></div>").hide();
		this._container.append(this._optionsContainer);

		options.each(function(i) {
			self.initOption($(this));
		});
		return this;
	},
	
	initOption: function(optionContainer) {
		var self = this;
		var optionContainer = optionContainer;
		var container = $('<a href="#" class="option"></a>');
		container.html(optionContainer).css('display', 'block').click(function() { self.select(container); });
		this._optionsContainer.append(container);
		this._options[this._options.length] = container;
		if (this._options.length == 1) {
			self.selectHelper(container);
			container.addClass('first');
		}
	}
};
var DropDowns = [];