var ONEHAT = ONEHAT || {
	browser: {},
	util: {},
	widget: {}	
};

ONEHAT.widget.paypal = function() {
	var obj = {
		init: function() {
			var oThis = this;
			
			// get elements to work with
			this.form = Ext.get('paypalForm');
			this.amount = Ext.get(this.form.dom.amount);
			this.item_name = Ext.get(this.form.dom.item_name);
			this.description = Ext.get(this.form.dom.os0);
			this.paypalButton = Ext.get('paypalButton');
			
			// Assign event handlers
			this.paypalButton.on('click', function(e) {
				oThis.handleButton(e);
			});
			this.item_name.on('change', function(e) {
				oThis.handleItemChange(e);
			});
			this.description.on('focus', function(e) {
				oThis.handleDescriptionFocus(e);
			});
			this.description.on('blur', function(e) {
				oThis.handleDescriptionBlur(e);
			});
		},
		
		handleButton: function(e) {
			try {
				// check that all form elements are filled out
				if (this.amount.dom.value === '') {
					throw new Error('Please enter an amount you wish to pay.');
				}
				if (this.item_name.dom.value === 'Other') {
					if (this.description.dom.value === 'Please describe' || this.description.dom.value === '') {
						throw new Error('Please describe what this payment is for.');
					}
				}
				
			} catch (err) {
				// Stop event
				e.stopEvent();

				// show error message
				alert(err.message);
			}
		},
		
		handleItemChange: function(e) {
			if (this.item_name.dom.value === 'Other') {
				this.description.removeClass('hide');
			} else {
				this.description.addClass('hide');
			}
		},
		
		handleDescriptionFocus: function(e) {
			if (this.description.dom.value === 'Please describe') {
				this.description.dom.value = '';
			}
		},
		
		handleDescriptionBlur: function(e) {
			if (this.description.dom.value === '') {
				this.description.dom.value = 'Please describe';
			}
		}
	};
	obj.init();
	return obj;	
}();