MD.SelectButton = new Class({

	Implements: [Options,Events]

	,options: {
		text: ''
		,width: 'auto'
		,className: ''
		,properties: {}
		,styles: {}
		,selectMenuOptions: {}
		,returnHTML: false
		,changeTextOnSelect: true
		,changeValueOnSelect: true
		,noMenu: false
		// ,onSelect: function(selectedObject){}
	}

	,initialize: function(options, optionalSelectElement){
		this.setOptions(options);
		this.text = this.options.text;
		this.value = '';

		this.html = new Element('div', Object.merge(this.options.properties, {
			'class': 'MDSelectButton '+this.options.className
			,styles: this.options.styles
		})).adopt(
			this.textElement = new Element('span', {html: this.text})
			,new Element('div.Arrow', {html: ' '})
		);

		if (this.selectMenuOptions == {}) return;

		this.selectMenu = new MD.SelectMenu(Object.merge(this.options.selectMenuOptions, {
			attachTo: this.html
			,onSelect: function(selectedItem){
				if (this.options.changeTextOnSelect) {
					this.textElement.set('html', selectedItem.text);
					this.text = selectedItem.text;
				}
				if (this.options.changeValueOnSelect) {
					this.value = selectedItem.value;
				}
				this.fireEvent('select', selectedItem);
			}.bind(this)
		}));

		// If the selectMenu has a pre-selected item, set the text of this button to the text of that item.
		if (this.selectMenu.selectedText && this.selectMenu.selectedText != '') {
			this.setText(this.selectMenu.selectedText);
		}
		if (this.selectMenu.value) {
			this.setValue(this.selectMenu.value);
		}

		if (this.options.returnHTML) return this.html;
	}

	,getValue: function(){ return this.value; }

	,setMenuData: function(dataArray){
		// remove any previous selectMenu's attached to this button

		if (this.selectMenu) delete this.selectMenu;
		this.html.removeEvents();

		dataArray.each(function(i) {
			if (i.selected) {
				this.textElement.set('html', i[this.options.selectMenuOptions.itemTextKey]);
			}
		}, this);
		this.selectMenu = new MD.SelectMenu(Object.merge(this.options.selectMenuOptions, {data:dataArray}, {
			attachTo: this.toElement()
			,onSelect: function(selectedItem){
				if (this.options.changeTextOnSelect) {
					this.textElement.set('html', selectedItem.text);
					this.text = selectedItem.text;
				}
				if (this.options.changeValueOnSelect) {
					this.value = selectedItem.value;
				}
				this.fireEvent('select', selectedItem);
			}.bind(this)
		}));
		return this;
	}

	,selectMenuItem: function(itemObj, hidden) {
		this.selectMenu.selectItem(itemObj, hidden);
		return this;
	}

	,setText: function(text){
		// console.log('should be setting', text);
		if (text && typeOf(text) == 'string') {
			this.textElement.set('text', text);
			this.text = text;
		} else {
			console.error('MDSelectButton: Cannot set text - not a string');
		}
		return this;
	}

	,setValue: function(value){
		if (value && (typeOf(value) == 'string' || typeOf(value) == 'number')) {
			this.value = value;
			this.selectMenu.value = value;
		} else {
			console.error('MDSelectButton: Cannot set value - not a string or number');
		}
		return this;
	}

	,getText: function(){ return this.text; }

	,toElement: function(){ return this.html; }

	,deactivate: function(){
		this.html.setStyles({opacity:0.5, cursor:'default'}).removeEvents().removeClass('Active').addClass('Inactive');
		return this;
	}

	,activate: function(){
		this.html.removeEvents();
		if (!this.options.noMenu) this.selectMenu.attachTo(this.html);
		this.html.setStyles({opacity: 1,cursor: 'pointer'}).removeClass('Inactive').addClass('Active');
		return this;
	}
});