var TextFieldFocusBehavior = new Class({
	Implements: [Options],

	options: {
		element: null,
		watermark: '',
		focusColor: null,
		blurColor: null
	},

	initialize: function(options) {
		this.setOptions(options);
    },

	addFocusAndBlurEvents: function() {
		this.options.element.addEvent('change', this.handleChange.bind(this));
		this.options.element.addEvent('focus', this.handleFocus.bind(this));
		this.options.element.addEvent('blur', this.handleBlur.bind(this));
	},

	handleFocus: function(e) {
		if (this.options.watermark === this.options.element.value.trim()) {
			this.options.element.value = "";
			if (this.options.focusColor !== null) {
				this.options.element.setStyle('color', this.options.focusColor);
			}
		}
	},

	handleBlur: function(e) {
		if (this.options.element.value.trim() === "") {
			this.options.element.value = this.options.watermark;
			if (this.options.blurColor !== null) {
				this.options.element.setStyle('color', this.options.blurColor);
			}
		}
	},

	handleChange: function(e) {
		if (this.options.blurColor !== null && this.options.watermark === this.options.element.value.trim()) {
			this.options.element.setStyle('color', this.options.blurColor);
		}
		else if (this.options.focusColor !== null) {
			this.options.element.setStyle('color', this.options.focusColor);
		}
	}
});

var KrystalRaeEmailForm = new Class({
	emailForm: null,
	emailFormRequest: null,
	emailTextField: null,
	emailTextFieldFocusBehavior: null,
	emailTextFieldFocusFunction: null,
	emailRegEx: null,
	submitButton: null,
	submitInProgressFlag: false,

	initialize: function(emailTextFieldFocusBehavior) {
		this.emailForm = $('email-form');
		this.emailFormRequest = new Request.HTML({url: 'submitemail.php'});
		this.emailTextField = $('email');
		this.emailTextFieldFocusBehavior = emailTextFieldFocusBehavior;
		this.emailRegEx = new RegExp("^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$", "i");
		this.submitButton = $('submit');
    },

	addEvents: function() {
		this.emailForm.addEvent('submit', this.handleSubmit.bind(this));
		this.emailFormRequest.addEvent('success', this.handleSubmitComplete.bind(this));
		this.emailFormRequest.addEvent('failure', this.handleSubmitFailure.bind(this));
	},

	handleSubmit:function(event) {
		new Event(event).stop();
		if (!this.emailRegEx.test(this.emailTextField.value.trim())) {
			this.updateEmailTextField('Uh oh! Invalid email. Enter again.', true);
			return;
		}
		if (this.submitInProgressFlag) {
			return;
		}
		this.submitInProgressFlag = true;
		this.emailFormRequest.post({'email': this.emailTextField.value.trim()});
		this.emailTextField.disable = 1;
		this.submitButton.disable = 1;
	},

	handleSubmitComplete: function(element, responseText, responseXML) {
		var errorStr = null;
		if (responseText && responseText.length != 0 && responseText[0].wholeText.trim().length != 0) {
			errorStr = responseText[0].wholeText.trim();
		}
		if (responseXML && responseXML.trim().length != 0) {
			errorStr = responseXML.trim();
		}
		this.handleSubmitHelper(errorStr !== null ? errorStr : 'Thank you!', errorStr !== null);
	},

	handleSubmitFailure: function() {
		this.handleSubmitHelper('Uh oh! An error occurred. Try again.', true);
	},

	handleSubmitHelper: function(emailFieldText, errorFlag) {
		this.updateEmailTextField(emailFieldText, errorFlag);
		this.submitInProgressFlag = false;
		this.emailTextField.disable = 0;
		this.submitButton.disable = 0;
	},

	updateEmailTextField: function(newEmailTextFieldValue, errorFlag) {
		this.emailTextField.value = newEmailTextFieldValue;
		this.emailTextField.set('class', errorFlag === true ? 'error' : '');
		this.emailTextFieldFocusBehavior.setOptions({'watermark': this.emailTextField.value});
		this.emailTextFieldFocusFunction = this.handleTextFieldFocus.bind(this);
		this.emailTextField.addEvent('focus', this.emailTextFieldFocusFunction);
	}.protect(),

	handleTextFieldFocus: function(e) {
		this.emailTextField.set('class', '');
		this.emailTextFieldFocusBehavior.setOptions({'watermark': 'Enter your email'});
		this.emailTextField.removeEvent('focus', this.emailTextFieldFocusFunction);
	}
});

window.addEvent('domready', function() {
	var emailTextFieldFocusBehavior = new TextFieldFocusBehavior({
		element: $('email'),
		watermark: 'Enter your email'
	});
	emailTextFieldFocusBehavior.addFocusAndBlurEvents();

	var krystalRaeEmailForm = new KrystalRaeEmailForm(emailTextFieldFocusBehavior);
	krystalRaeEmailForm.addEvents();
});