// JavaScript Document
var urlSite;
var popup;
var popupHeight = 87;
var popupValidName = false;
var popupValidEmail = false;

Element.implement({
	hasEvent: function(eventType,fn) {
		//get the element's events
		var myEvents = this.retrieve('events');
		//can we shoot this down?
		return myEvents && myEvents[eventType] && (fn == undefined || myEvents[eventType].keys.contains(fn));
	}
});


var domready = function()
{
	new Form();
}	

var setUrl = function(urlsite) {
	urlSite = urlsite;			
}

var validate_email = function(value)
{
	apos = value.indexOf("@");
	dotpos = value.lastIndexOf(".");
	if (apos < 1 || dotpos-apos < 2)
	{return false;}
	else {return true;}
}

var Field = new Class({	

  Implements: Options,

	options: {
		prop : 'background-color',
		active : '#2f57a1',
		nonactive : '#fff',
		validate: false
	},

	initialize: function(el, label, parent, options) {
		this.setOptions(options);
		
		this.el = el;
		this.label = label;
		this.parent = parent;
		this.inError = false;
		
		this.setEvents();
	},
	
	setEvents: function()
	{
		this.el.addEvents({
					'focus' : function() {
								if(!this.inError)
								{
									this.fieldFocus();
								}
							}.bind(this),
					'blur' : function() {
								if(this.inError)
									this.parent.setStyle(this.options.prop, 'orange');
								else
									this.fieldBlur();
							}.bind(this)
					})
	},
	
	validate: function()
	{
		var value = this.el.get('value').trim();
		if(this.options.validate == true && value  == '')
		{
			this.fieldInvalid();
			this.inError = true;
		}
		else if(this.el.hasClass('email') && !validate_email(value))
		{
			this.fieldInvalid();
			this.inError = true;
		}
		else
		{
			this.fieldBlur();
			this.inError = false;
		}
	},
	
	fieldFocus: function()
	{
		this.parent.setStyle(this.options.prop, this.options.active);
		this.labelActive();
	},
	
	fieldBlur: function()
	{
		this.parent.setStyle(this.options.prop, this.options.nonactive);
		this.labelInActive();
	},
	
	fieldInvalid: function()
	{
		this.parent.setStyle(this.options.prop, '#b50007');
		this.labelActive();
	},
	
	labelActive: function()
	{
		if(this.label != null) this.label.setStyle('color', '#fff');
	},
	
	labelInActive: function()
	{
		if(this.label != null) this.label.setStyle('color', '#000');
	}
})

var Form = new Class({	

  Implements: Options,

	options: {
	},

	initialize: function(options) {
		this.setOptions(options);
		
		this.fields = [];
		this.setFields();
		this.setRefresh();
		this.setSubmit();
	},
	
	setFields: function()
	{
		$$('.formfield').each(function(el){	
			var parent = el.getParent();
			var label = (parent.getFirst().tagName == 'LABEL') ? parent.getFirst() : null;
		
			var options = {};
			if(el.hasClass('validate'))
			{
				options.validate = true;
			}
			this.fields.push(new Field(el, label, parent, options));		
		}.bind(this));
	},
	
	setSubmit: function()
	{	
		if($('questionform'))
		{
			$('questionform').addEvent('submit', function(event){
				new Event(event).stop();
			
				var valid = true;
			
				this.fields.each(function(index){
					index.validate();
					
					if(index.inError && valid == true)
					{
						valid = false;
						var myFx = new Fx.Scroll(window).toElement(index.parent);
	
					}
				});
				
				if(valid)
				{
					document.forms['questionform'].submit();
				
					/*
					var req = new Request.JSON({
						url       : urlSite + 'gateway.php',
						//url       : urlSite,
						data      : $('questionform'),
						onRequest: this.showLoader.bind(this),
						onComplete: function(response){
										this.hideLoader.delay(1500, this, response.message);
										if(response.result == true)
										{
											$('questionform').reset();
											this.refreshCaptcha();
										}
										
										$('submit').disabled = false;
							}.bind(this)
					}).send();*/
				}
			}.bind(this));
		}
	},
	
	setRefresh: function()
	{
		if($('refresh'))
		{
			$('refresh').addEvent('click', function(e){
				new Event(e).stop();
				
				this.refreshCaptcha();
			}.bind(this))
		}
	},
	
	refreshCaptcha: function()
	{
		$('captcha').setProperty('src', urlSite + 'captcha/securimage_show.php?' + Math.random());
	},
	
	showLoader: function()
	{
		$('loader').setStyle('display', 'block');
	},
	
	hideLoader: function(msg)
	{
		$('loader').setStyle('display', 'none');
		alert(msg);
	}
})

var showPopUp = function()
{
	if($('popupBox'))
	{
		return;	
	}
	
	var windowSize = window.getSize();
	var top = windowSize.y - popupHeight;
	var width = windowSize.x;
/*
	popup = $('popupBox');
	popup.addEvent('close', function(){ popupMorph(top, top+popupHeight); });
	popup.setStyles({
					'width' : width, 
					'height' : popupHeight, 
					'top': windowSize.y,
					});
	
	ebook = $('eBook');
	ebook.addEvent('jump', function(){																								
								var jump = new Fx.Morph(ebook, {duration: 'short', transition: Fx.Transitions.Sine.easeOut, link: 'chain'});
							
								jump.start({
									'top': [-125, -150]
								});
								jump.start({
									'top': [-150, -125]
								});	
							});
	
	closeBtn = $('closeBtn');
	closeBtn.addEvent('click', function(){ $clear(jumpBook); popup.fireEvent('close');});
	*/

	popup = new Element('div', {
								'id' : 'popupBox',
								'styles' : {
											'width' : width, 
											'height' : popupHeight, 
											'top': windowSize.y
											},
								'events' : {
											'close' : function(){ popupMorph(top, top+popupHeight); }
											}											
								});

	var ebook = new Element('div', {
								'id' : 'eBook',
								'events' : {
											'jump' : function(){																								
													var jump = new Fx.Morph(ebook, {duration: 'short', transition: Fx.Transitions.Sine.easeOut, link: 'chain'});
												
													jump.start({
														'top': [-125, -150]
													});
													jump.start({
														'top': [-150, -125]
													});	
												}
											}
								}).inject(popup);
	
	var closeBtn = new Element('div', {
								'id' : 'closeBtn',
								'events' : {
											'click' : function(){ $clear(jumpBook); popup.fireEvent('close');}
											}
								}).inject(popup);
	
	var text = new Element('div', {
								'id' : 'popupText',
								//'html': '<div id="arrow"></div><strong>Pak deze GRATIS info mee!</strong><br /><br />eBoek + wekelijkse marketingtips t.w.v. &euro;97'
								'html': '<strong>Pak deze GRATIS info mee!</strong><br />eBoek + wekelijkse MarketingTips om met minder<br />moeite meer klanten te krijgen'
								}).inject(popup);

	var valueName = 'voornaam';
	var valueEmail = 'emailadres';
	var formHtml = '<form id="formpopup" name="formpopup" method="post" action="http://www.aweber.com/scripts/addlead.pl">' + 
						'<input type="hidden" name="meta_web_form_id" value="986871543" />' + 
						'<input type="hidden" name="meta_split_id" value="" />' + 
						'<input type="hidden" name="listname" value="marketingtipsnl" />' + 
						'<input type="hidden" name="redirect" value="http://www.infomarketeers.nl/bevestig/" id="redirect_662d66a32e71047b20f8069b5e8d7a18" />' +
						'<input type="hidden" name="meta_redirect_onlist" value="http://www.infomarketeers.nl/je-bent-al-ingeschreven/" />' + 
						'<input type="hidden" name="meta_adtracking" value="Webform_pop-up_Chris" />' + 
						'<input type="hidden" name="meta_message" value="1" />' + 
						'<input type="hidden" name="meta_required" value="custom Voornaam,email" />' +  
						'<input type="hidden" name="meta_tooltip" value="" />' + 
						'<table cellspacing="0" cellpadding="0"><tr><td>' + 
						'<input type="text" id="popup_name" class="popupForm" name="custom Voornaam" value="' + valueName + '" /></td></tr><tr><td>' + 
						'<input type="text" id="popup_email" class="popupForm" name="email" value="' + valueEmail + '" /></td></tr><tr><td><div id="popupSend"></div></td></tr></table>' + 
					//	'<input type="hidden" name="submit" class="submit" value="a"/>' + 
						'<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=nBxsHOyMrCzM" alt="" /></div>' + 
					'</form>';

	var form = new Element('div', {
								'id' : 'popupForm',
								'html': formHtml
								}).inject(popup);
	
	popup.inject(document.body);
	
	var show = new Fx.Morph(popup, {duration: 'long', transition: Fx.Transitions.Sine.easeOut});

	show.start({
		'top': [windowSize.y, top]
	});	
	
	var jumpBook = function()
	{
		ebook.fireEvent('jump')
	}.periodical(3000);

	$('popup_name').addEvents({
							  'focus' : function() {
								  			popupFieldFocus($('popup_name'), valueName);
								  		},
							  'blur' : function() {
								  			popupValidName = popupFieldBlur($('popup_name'), valueName);
								  		}
							  });
	$('popup_email').addEvents({
							  'focus' : function() {
								  			popupFieldFocus($('popup_email'), valueEmail);
								  		},
							  'blur' : function() {
								  			popupValidEmail = popupFieldBlur($('popup_email'), valueEmail);
								  		}.bind(this)
							  });
	
	$('popupSend').addEvent('click', function() { 
		if(popupValidName == true && popupValidEmail == true)
		{
			document.formpopup.submit();
		}
	});
}

var popupFieldFocus = function(el, value)
{
	el.setStyle('color', '#000');
	if(el.get('value') == value)
	{
		el.set('value', '');
	}
}

var popupFieldBlur = function(el, value)
{
	if(el.get('value') == '')
	{
		el.setStyle('color', '#999999');
		el.set('value', value);
		el.addClass('popupFormError');
		return false;
	}
	else if(el == $('popup_email') && !validate_email(el.get('value')))
	{
		el.addClass('popupFormError');
		return false;
	}
	else
	{
		if(el.hasClass('popupFormError'))
		{
			el.removeClass('popupFormError');
		}
		return true;
	}
}

var resize = function()
{
	if(!$('popupBox'))
	{
		return;
	}
	
	if($('popupBox') && $('popupBox').getStyle('display') == 'block')
	{
		var windowSize = window.getSize();
		var top = windowSize.y - popupHeight;
		var width = windowSize.x;
		popup.setStyles({
					   'top' : top,
					   'width' : width
					   });
		popup.removeEvent('close');
		popup.addEvent('close', function(){ popupMorph(top, top+popupHeight); });
	}
}

var popupMorph = function(top, newTop)
{
	var hide = new Fx.Morph(popup, {duration: 'long', transition: Fx.Transitions.Sine.easeOut, onComplete: function(){ popup.setStyle('display', 'none');}});

	hide.start({
		'top': [top, newTop]
	});	
}

window.addEvent("resize", resize);
window.addEvent("domready", domready);