var EmailApp = Class.create();
EmailApp.prototype = Object.extend(new App(),
{
	initialize: function(url, id, trigger) 
	{
		this.url = url;
		this.id = id;
		this.trigger = trigger;

		$(this.trigger).onclick = function() { return false; }
		this.triggerObserver = this.run.bind(this);
		Event.observe(this.trigger, 'click', this.triggerObserver);
	},

	run: function()
	{
		Event.stopObserving(this.trigger, 'click', this.triggerObserver);

		if (!$(this.id).firstChild) this.draw();
		
		Element.Center(this.id);
		Effect.Appear(this.id, {duration: 0.3});

		Form.disable(this.id+'_form');
		Element.DisplayMessage(this.id, 'Please wait...', {showLoading: true});
			
		var params = {t: (new Date()).getTime()};
		this.sendRequest(params, this.prefill.bind(this));
	},

	draw: function() 
	{
		var message = "I came across an interesting article on Green Dot and would like to share it with you. The URL for the article is: " + document.URL + "\r\r";
		var content = null;
		
		content = Builder.node('h2', {className: 'form_heading'}, [ "Email This Page" ]);
		$(this.id).appendChild(content);
		
		content = Builder.node('form', {id: this.id+'_form', style: 'position: relative'}, [
			Builder.node('div', {className: 'form_item'}, [
				Builder.node('div', {className: 'label'}, [ "Your Name ", Builder.node('span', {className: 'form_required'}, [ '*' ]) ]),
				Builder.node('div', {className: 'input'}, [ Builder.node('input', {type: 'text', className: 'text', name: 'name', id: this.id+'_name'}) ]),
				Builder.node('div', {className: 'prompt', style: 'display: none', id: this.id+'_name_req' }, [ "Name is required." ]),
			]),
			Builder.node('div', {className: 'form_item'}, [
				Builder.node('div', {className: 'label'}, [ "Your Email ", Builder.node('span', {className: 'form_required'}, [ '*' ]) ]),
				Builder.node('div', {className: 'input'}, [ Builder.node('input', {type: 'text', className: 'text', name: 'from', id: this.id+'_email'}) ]),
				Builder.node('div', {className: 'prompt', style: 'display: none', id: this.id+'_email_req' }, [ "Valid email is required." ]),
			]),
			Builder.node('div', {className: 'form_item'}, [
				Builder.node('div', {className: 'label'}, [ "Recipient's Email ", Builder.node('span', {className: 'form_required'}, [ '*' ]) ]),
				Builder.node('div', {className: 'input'}, [ Builder.node('input', {type: 'text', className: 'text', name: 'to', id: this.id+'_to'}) ]),
				Builder.node('div', {className: 'prompt', style: 'display: none', id: this.id+'_to_req' }, [ "Valid recipient's email is required." ]),
				Builder.node('div', {className: 'description'}, [ "Please use ';' between your friends' email addresses if you want to send this article to more than one friend." ]),
			]),
			Builder.node('div', {className: 'form_item'}, [
				Builder.node('div', {className: 'label'}, [ "Subject " ]),
				Builder.node('div', {className: 'input'}, [ Builder.node('input', {type: 'text', className: 'text', name: 'subject', id: this.id+'_subject'}) ]),
			]),
			Builder.node('div', {className: 'form_item'}, [
				Builder.node('div', {className: 'label'}, [ "Your Message " ]),
				Builder.node('div', {className: 'input'}, [ Builder.node('textarea', {rows: '5', cols: '20', name: 'message'}, message) ]),
			]),
			Builder.node('div', {className: 'form_buttons'}, [
				Builder.node('input', {type: 'hidden', value: '', id: this.id+'_url'}),
				Builder.node('input', {type: 'button', value: 'Send', id: this.id+'_send'})
			]),
		]);
		$(this.id).appendChild(content);
		
		content = Builder.node('a', {href: '#', className: 'close_icon', id: this.id+'_close'}, [ Builder.node('img', {src: this.imgPath + "form_close.gif", alt: 'Close'}) ]);
		$(this.id).appendChild(content);
		
		Event.observe(this.id+'_send', 'click', this.send.bind(this));
		
		$(this.id+'_close').onclick = function() { return false; }
		Event.observe(this.id+'_close', 'click', this.close.bind(this));
	},
	
	prefill: function()
	{
		Form.enable(this.id+'_form');
		Element.DisplayMessage(this.id);
				
		if (this.isStatusOK()) 
		{
			if (this.isUserLoggedIn())
			{
				$(this.id+'_name').value = ($F(this.id+'_name') == '') ? this.getUsername() : $(this.id+'_name').value;
				$(this.id+'_email').value = ($F(this.id+'_email') == '') ? this.getUserEmail() : $(this.id+'_email').value;
			}
			$(this.id+'_subject').value = ($F(this.id+'_subject') == '') ? document.getElementsByTagName('h1')[0].firstChild.nodeValue : $(this.id+'_subject').value;
			$(this.id+'_url').value = document.URL;
		}
		else
		{
			Element.DisplayMessage(this.id, this.getMessage());
			setTimeout((function() { this.close() }).bind(this), 3000);
		}
	},
	
	validate : function(ele, email)
	{
		var val = $(ele).value
		if (val == null || val.length == 0)
		{
			Element.show(ele+'_req');
			return false;        	  
		}
		else
		{
			if (email)
			{
				if (val.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+(;\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+)*$/) != -1)
				{
					Element.hide(ele+'_req');
					return true;
				}
				else
				{
					Element.show(ele+'_req');
					return false;        	              
				}            
			}
			Element.hide(ele+'_req');
			return true;
		}
	},	

	send: function()
	{
		var ok = true;
		ok = this.validate(this.id+'_name', false) && ok;
		ok = this.validate(this.id+'_email', true) && ok;
		ok = this.validate(this.id+'_to', true) && ok;    
		if (ok)
		{
			Form.disable(this.id+'_form');
			Element.DisplayMessage(this.id, "Please wait...", {showLoading: true});		

			var data = Form.serialize($(this.id+'_form'));
			var pars = data.parseQuery();
			var params = {cmd: 'submit', uid: this.getUserUID(), url: document.URL};
			Object.extend(params, pars);
			this.sendRequest(params, this.update.bind(this));
		}
	},   

	update: function() 
	{
		Form.enable(this.id+'_form');
		Element.DisplayMessage(this.id, (this.isStatusOK() ? "Thank you for supporting Green Dot." : this.getMessage()));
		setTimeout((function() { this.close() }).bind(this), 3000);
	},

	close: function()
	{
		Effect.Fade(this.id, {duration: 0.3});
		Event.observe(this.trigger, 'click', this.triggerObserver);
	}
});