if (typeof MOTO === 'undefined') { var MOTO = {}; MOTO.modulesLoaded = []; }
if (typeof MOTO.StyledForm === 'undefined') { MOTO.StyledForm = {}; }

/**
 * @namespace MOTO.StyledForm.Type
 */
MOTO.StyledForm.Type = {
	TAG: 'tag',
	CLASS: 'class',
	ID: 'id'
}

MOTO.StyledForm.getSelector = function(type,name) {
	var selector;
	switch (type) {
		case MOTO.StyledForm.Type.TAG:
			selector = name;
			break;
		case MOTO.StyledForm.Type.CLASS:
			selector = '.' + name;
			break;
		case MOTO.StyledForm.Type.ID:
			selector = '#' + name;
			break;
	}
	return selector;
};

MOTO.StyledForm.SelectOption = new Class({
	Implements: [Events, Options],
	options: {
		selected: false,
		optionTag: 'p',
		optionClass: 'option',
		disabledClass: 'disabled',
		selectedClass: 'selected',
		highlightedClass: 'highlighted',
		storageName: 'data'
	},
	display: null,
	displayElement: null,
	events: {
		highlight: null,
		removeHighlight: null,
		select: null,
		deselect: null
	},
	input: null,
	optionElement: null,
	selected: null,
	value: null,
	initialize: function(optionElement, options) {
		this.setOptions(options);
		var optionClass = optionElement.get('class') + ' ' + this.options.optionClass;
		var optionClass = optionClass.trim();
		var display = optionElement.getText();
		this.value = optionElement.getProperty('value');
		var events = this.events;
		events.highlight = this.highlight.bind(this);
		events.removeHighlight = this.removeHighlight.bind(this);
		events.select = this.select.bind(this);
		events.deselect = this.deselect.bind(this);
		this.displayElement = new Element(this.options.optionTag,{
			'class':optionClass,
			'html':display,
			'events': {
				'mouseenter': events.highlight,
				'mouseleave': events.removeHighlight,
				'click': events.select
			}
		});
		this.displayElement.store(this.options.storageName,this);
		this.optionElement = optionElement;
	},
	enable: function() {
		this.displayElement.removeClass(this.options.disabledClass);
		this.fireEvent('onEnable',this);
	},
	disable: function() {
		this.displayElement.addClass(this.options.disabledClass);
		this.fireEvent('onDisable',this);
	},
	select: function(e) {
		var evt;
		if (e) {
			evt = new Event(e);
			evt.stop();
		}
		this.fireEvent('onSelect',this);
		this.displayElement.addClass(this.options.selectedClass);
		this.displayElement.removeEvent('click',this.events.select);
		this.selected = true;
	},
	deselect: function(e) {
		var evt;
		if (e) {
			evt = new Event(e);
			evt.stop();
		}
		this.fireEvent('onDeselect',this);
		this.displayElement.removeClass(this.options.selectedClass);
		this.displayElement.addEvent('click',this.events.select);
		this.selected = false;
	},
	highlight: function() {
		this.displayElement.addClass(this.options.highlightedClass);
		this.fireEvent('onHighlight',this);
	},
	removeHighlight: function() {
		this.displayElement.removeClass(this.options.highlightedClass);
		this.fireEvent('onRemoveHighlight',this);
	},
	destroy: function() {
		this.display = null;
		this.displayElement = null;
		this.events = null;
		this.input = null;
		this.optionElement = null;
	}
});