var EventSignUp = {
	tween: '',

	__constructor: function () {
		//construct the shadow overlay
		var overlay = new Element('div', {id: 'overlay'});
		$$('body')[0].grab(overlay);
		overlay.setStyle('opacity', 0);

		window.addEvent('scroll', EventSignUp.position);

		//set up the tween action
		TweenOptions = {
			duration: 500,
			property: 'opacity',
			onComplete: function () {
				$('panel').setStyle('display', 'block');
			}
		}

		EventSignUp.tween = new Fx.Tween(overlay, TweenOptions);

		//create the grey panel
		var panel = new Element('div', {id: 'panel'});
		overlay.grab(panel);

		//create the form
		var eventForm = new Element('form', {method: 'post', action: '/agenda'});

		//create the title field
		var eventTitle = new Element('p').adopt(
			new Element('label').set('html', 'Titel'),
			new Element('input', {type: 'text', name: 'title', id: 'title'})
		);

		//create the date field
		var eventDate = new Element('p').adopt(
			new Element('label').set('html', 'Datum'),
			new Element('span').adopt(
				new Element('input', {type: 'text', name: 'day', id: 'day', value: 'dd', size: '2'}),
				document.createTextNode(' - '),
				new Element('input', {type: 'text', name: 'month', id: 'month', value: 'mm', size: '2'}),
				document.createTextNode(' - '),
				new Element('input', {type: 'text', name: 'year', id: 'year', value: 'yyyy', size: '4'})
			)
		);

		//create the subject field
		var eventSubject = new Element('p').adopt(
			new Element('label').set('html', 'Betreft'),
			new Element('input', {type: 'text', name: 'subject', id: 'subject'})
		);

		//create the description field
		var eventDescription = new Element('p').adopt(
			new Element('label').set('html', 'Beschrijving'),
			new Element('textarea', {rows: '7', cols: '40', id: 'description', name: 'description'})
		);

		//create the e-mailaddress field
		var eventEmail = new Element('p').adopt(
			new Element('label').set('html', 'E-mailadres'),
			new Element('input', {type: 'text', name: 'email', id: 'email'})
		);

		//create the submit button
		var eventSubmit = new Element('p').grab(
			new Element('button', {type: 'submit', html: 'Meld aan'}).addEvent('click', function (event) {
				var errorsArray = EventSignUp.validateForm();

				if (errorsArray.length > 0) {
					errorString = '';
					for (var i=0; i<errorsArray.length-1; i++) {
						errorString = errorString + errorsArray[i] + '<br />'; 
					}

					errorString = errorString + errorsArray[errorsArray.length-1];

					if ($('feedback')) {
						$('feedback').set('html', errorString);
					} else {
						$('panel').grab(new Element('p', {id: 'feedback', html: errorString}), 'top');
					}

					event.stop();

				} else {
					var jsonRequest = new Request.json({
						url: $('panel').getElement('form').get('action'),
						onComplete: function (json) {
							if ($('feedback')) {
								$('feedback').set('html', json.feedback);
							} else {
								$('panel').grab(new Element('p', {id: 'feedback', html: json.feedback}), 'top');
							}

							$('panel').getElement('form').getNext().setStyle('display', 'none');
							$('panel').getElement('form').setStyle('display', 'none');

							$('feedback').grab(new Element('a', {html: 'Sluiten'}).addEvent('click', EventSignUp.hide));
						}
					});
				}
			})
		);

		//create the cancel link
		var eventCancel = new Element('p').grab(
			new Element('a', {href: '#'}).set('html', 'Sluit dit venster zonder te versturen').addEvent('click', function () {
				EventSignUp.hide();
				return false;
			})
		);

		eventForm.adopt(eventTitle, eventDate, eventSubject, eventDescription, eventEmail, eventSubmit);

		panel.adopt(eventForm, eventCancel);

		$$('body')[0].grab(panel);
	},


	/*
	 * SHOW THE SIGNUP FORM
	 */
	show: function () {
		//show it. $('panel') is shown in the onComplete event of the tween
		$('overlay').setStyle('display', 'block');
		EventSignUp.position();
		EventSignUp.tween.start(0, 0.8);

		//hide everything that might show thru
		["object", window.ie ? "select" : "embed"].forEach(function(tag) {
			Array.forEach(document.getElementsByTagName(tag), function(el) {
				el.style.visibility = "hidden";
			});
		});
	},

	
	/*
	 * HIDE THE SIGNUP FORM
	 */
	hide: function () {
		//hide it
		$('overlay').setStyles({'opacity': 0, 'display': 'none'});
		$('panel').setStyle('display', 'none');
		$('panel').getElement('form').getNext().setStyle('display', 'block');
		$('panel').getElement('form').setStyle('display', 'block');

		//show everything we hide when opening
		["object", window.ie ? "select" : "embed"].forEach(function(tag) {
			Array.forEach(document.getElementsByTagName(tag), function(el) {
				el.style.visibility = "visible";
			});
		});
	},


	/*
	 * POSITION THE SHADOW
	 */
	position: function () {
		$('overlay').setStyles({
			'height': window.getHeight(),
			'top': window.getScrollTop()
		});
	},

	/*
	 * VALIDATE THE FORM
	 */
	validateForm: function () {
		var errors = new Array();

		if ($('title').value == '')
			errors.push('Vul alstublieft een titel in.');

		if ($('subject').value == '')
			errors.push('Vul alstublieft het veld \'betreft\' in');	

		if ($('description').value == '')
			errors.push('Vul alstublieft een omschrijving in.');	

		var eventDay   = $('day').value.toInt();
		var eventMonth = $('month').value.toInt();
		var eventYear  = $('year').value.toInt();
		var eventDate  = true;

		if (eventDay > 31 || isNaN(eventDay)) {
			errors.push('De ingevulde dag is niet geldig.');
			eventDate = false;
		}

		if (eventMonth > 12 || isNaN(eventMonth)) {
			errors.push('De ingevulde maand is niet geldig.');
			eventDate = false;
			
		}

		if (eventYear < 2008 || isNaN(eventYear)) {
			errors.push('Het ingevulde jaar is niet geldig.');
			eventDate = false;
		}

		if (eventDate) {
			var leapYear = ((eventYear%4 == 0) && (eventYear%100 > 0)) || (eventYear%400 == 0);

			if (eventYear == 29 && !leapYear && eventYear == 2) {
				errors.push(eventYear.toString() + ' is geen schrikkeljaar.');

			} else if ((eventMonth == 4 || eventMonth == 6 || eventMonth == 9 || eventMonth == 11) && eventDay == 31) {
				errors.push('De gekozen maand heeft geen 31 dagen.');
			}
		}

		var emailRegExp = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i;

		if (!$('email').value.test(emailRegExp))
			errors.push('Vul alstublieft een geldig e-mail adres in.');

		return errors;
	}
}

window.addEvent('domready', function () {
	if ($('showform')) {
		EventSignUp.__constructor();
	
		$('showform').addEvent('click', function (event) {
			event.stop();
			EventSignUp.show();
			return false;
		});
	}
});