window.addEvent('domready', function(){
	
	var form;

	$$('a[href$=contact-form]').addEvent('click', function(event){
		event.preventDefault();

		if (!form) form = new ContactForm('contact-form');
		form.show();
	});

	var jobs = document.id('jobs');
	if (jobs) new Fx.Accordion(jobs, '.job-position', '.job-description', {
		opacity: false,
		alwaysHide: true,
		display: -1
	});
	
	var signup = document.id('newsletter');
	if (signup) new Form(signup);
	
	$each({
		'.email': 'text',
		'a[href^=mailto]': 'href'
	}, function(prop, selector){
		$$(selector).each(function(el){
			el.set(prop, el.get(prop).replace(/\sat\s/, '@'));
		});
	});
	
});

var Form = new Class({
	
	Implements: Options,
	
	options: {
		success: 'Submitted!',
		failure: 'Please try again.',
		rules: {
			name: ['required', 'alphanum'],
			email: ['required', 'email'],
			role: 'required',
			message: 'required'
		},
		formcheck: {
			submitByAjax: true,
			trimValue: true,
			fieldErrorClass: 'invalid',
			display: {
				addClassErrorToField: 1,
				removeClassErrorOnTipClosure: 1,
				tipsOffsetY: 5,
				scrollToFirst: false,
				fixPngForIe: false
			}
		}
	},
	
	initialize: function(element, options){
		this.setOptions(options);
		element = this.element = document.id(element);
		
		var rules = this.options.rules;
		for (var name in rules){
			var input = element.getElement('[name=' + name + ']');
			if (input) input.addRules(rules[name]);
		}
		
		this.inputs = element.getElements('input[type=text]');
		this.spinner = element.getElement('.spinner');
		this.feedback = element.getElement('.feedback');
		
		new FormCheck(element, this.options.formcheck).addEvents({
			submit: this.onSubmit.bind(this),
			validateFailure: this.onInvalid.bind(this),
			ajaxRequest: this.onRequest.bind(this),
			ajaxFailure: this.onFailure.bind(this),
			ajaxSuccess: this.onSuccess.bind(this)
		});
	},
	
	onSubmit: function(){
		this.inputs.fireEvent('focus');
	},
	
	onInvalid: function(){
		// this.inputs.fireEvent('blur');
	},
	
	onRequest: function(){
		this.feedback.hide();
		this.spinner.show();
	},
	
	onFailure: function(){
		this.spinner.hide();
		this.feedback.set('text', this.options.failure).show();
	},
	
	onSuccess: function(){
		this.spinner.hide();
		this.feedback.set('text', this.options.success).show();
		this.reset();
	},
	
	reset: function(){
		this.element.reset();
		return this;
	}
	
});

var ContactForm = new Class({
	
	Extends: Form,
	
	options: {
		success: "Thanks! We'll be in touch."
	},
	
	initialize: function(element){
		this.parent(element);
		element = this.element;
		
		element.getElement('.close').addEvent('click', this.hide.bind(this));
		
		this.overlay = new Overlay({
			onShown: function(){
				element.show();
				element.getElement('input').focus();
			}
		});
	},

	show: function(){
		this.overlay.show();
		return this;
	},

	hide: function(){
		this.element.hide();
		this.overlay.hide();
		return this;
	}

});

var Overlay = new Class({

	Implements: [Options, Events],

	options: {
		color: '#000',
		duration: 500,
		opacity: 0.5
	},

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

		this.element = new Element('div', {
			opacity: 0,
			styles: {
				position: 'fixed',
				top: 0,
				left: 0,
				width: '100%',
				height: '100%',
				'z-index': 100,
				'background-color': this.options.color
			},
			tween: {
				duration: this.options.duration,
				onComplete: this.onComplete.bind(this)
			}
		});
	},

	onComplete: function(){
		var element = this.element,
			opacity = element.get('opacity');

		if (opacity == 0){
			element.dispose();
			this.fireEvent('hidden');
		} else {
			this.fireEvent('shown');
		}
	},

	show: function(){
		this.element.inject(document.body).fade(this.options.opacity);
		return this;
	},

	hide: function(){
		this.element.fade('out');
		return this;
	}

});

Element.implement({
	
	addRules: function(){
		return this.addClass("validate['" + Array.flatten(arguments).join("','") + "']");
	},
	
	hide: function(){
		return this.setStyle('display', 'none');
	},
	
	show: function(){
		return this.setStyle('display', 'block');
	}
	
});


// Custom Form Stuff

window.addEvent('domready', function(){
	var color = '#aaa';
	
	$$('select').each(function(el){
		var options = el.getChildren(),
			placeholder = el.get('placeholder');
		
		var fake = new Element('div', {
			'class': 'select'
		}).inject(el, 'before');
		
		el.addEvent('change', function(){
			var text = options.filter(':selected')[0].get('text');
			fake.set('text', text);
		});
		
		if (placeholder){
			el.selectedIndex = -1; // deselect
			new Element('span', {
				text: placeholder,
				styles: {color: color}
			}).inject(fake);
		} else {
			el.fireEvent('change');
		}
	});
	
	$$('input[type=checkbox]').each(function(el){
		var fake = new Element('div', {
			'class': 'checkbox'
		}).inject(el, 'before');
		
		el.addEvent('change', function(){
			fake[el.checked ? 'addClass' : 'removeClass']('checked');
		});
		
		el.fireEvent('change');
	});
	
	// Modified from plugin by Alexey Gromov
	if ('placeholder' in document.createElement('input')) return;

	$$('input[type=text]').each(function(el){
		var text = el.get('placeholder'),
		    defaultColor = el.getStyle('color');
		
		if (!text) return;
		
		var change = function(focus){
			var value = el.value;
			if (value != '' && value != text) return;
			
			el.set('value', focus ? '' : text).setStyle('color', focus ? defaultColor : color);
		};
		
		el.addEvents({
			focus: change.pass(true),
			blur: change.pass(false)
		});
		
		change();
	});
});