var PrepareForm = new Class({
	initialize: function() {
		var form = $(document.body).getElement('form[name=requestform]');
		form.setStyle('visibility', 'visible');
		var fields = form.getChildren('fieldset');
		for (var i=0; i<fields.length; i++) {
			if (i==0)
				this.fieldsetOne(fields[i]);
			else if (i==8)
				this.fieldsetOne(fields[i]);
			else
				this.fieldsetRadio(i);
		}
		var send = form.getElement('button');
		this.button(send);
		
		this.triggerEvent();
		formsubmit = new Form;
	},
	triggerEvent: function() {
		var form = $(document.body).getElement('form[name=requestform]');
		// Fieldset 2 event
		if (getRadio('requestform', 'fmean')==2) {
			if (!$chk($(document.body).getElement('div.fphonecontainer'))) {
				var objContainer = new Element('div', {'class': 'fphonecontainer'});
				var input = form.getElements('input[name=fmean]');
				objContainer.inject(input[input.length-1], 'after');
				this.addPhoneLine();
			}
		} else {
			if ($(document.body).getElement('div.fphonecontainer')) {
				$(document.body).getElement('div.fphonecontainer').destroy();
			}
		}
	},
	addPhoneLine: function() {
		var container = $(document.body).getElement('div.fphonecontainer');
		var pos = container.getElements('div.line');
		var id = pos.length;
		
		var objLine = new Element('div', {'class': 'line'});
		var objSelectContainer = new Element('div', {'class': 'float'});
		var objInputContainer = new Element('div', {'class': 'float'});
		var objSelect = new Element('select', {'id': 'fphonetype'+id, 'name': 'fphonetype'+id});
		var objInput = new Element('input', {'type': 'text', 'id': 'fphone'+id, 'name': 'fphone'+id});
				
		objLine.inject(container);
		objSelectContainer.inject(objLine);
		objInputContainer.inject(objLine);
		objSelect.inject(objSelectContainer);
		objInput.inject(objInputContainer);
		
		new Element('option', {'value': '1', 'html': 'Mobile', 'selected': true}).inject(objSelect);
		new Element('option', {'value': '2', 'html': 'Home'}).inject(objSelect);
		new Element('option', {'value': '3', 'html': 'Work'}).inject(objSelect);
		new Element('option', {'value': '4', 'html': 'Other'}).inject(objSelect);
		
		var objAdd = new Element('a', {'class': 'add', 'html': 'Add'});
		objAdd.inject(objInputContainer, 'after');
		objAdd.addEvent('click', function(){ prepareform.addPhoneLine(); this.setStyle('visibility', 'hidden'); });
		if (id==3) { objAdd.setStyle('visibility', 'hidden'); }
		
		var objRemove = new Element('a', {'class': 'remove', 'html': 'Remove'});
		objRemove.inject(objAdd, 'after');
		objRemove.addEvent('click', function(){ this.getParent('div.line').destroy(); prepareform.removePhoneLine(); });
		if (id==0) { objRemove.setStyle('visibility', 'hidden'); }
		
		this.prepareInput(objInput);
		this.prepareSelect(objSelect);
	},
	removePhoneLine: function() {
		var container = $(document.body).getElement('div.fphonecontainer');
		var pos = container.getElements('div.line');
		pos[pos.length-1].getElement('a.add').setStyle('visibility', 'visible');
	},
	fieldsetOne: function(element) {
		var inputs = element.getElements('input');
		for (var i=0; i<inputs.length; i++) {
			this.prepareInput(inputs[i]);
		}
	},
	fieldsetRadio: function(element) {
		var name;
		switch(element) {
			case 1: name = 'fmean'; break;
			case 2: name = 'floc'; break;
			case 3: name = 'fmoney'; break;
			case 4: name = 'fheight'; break;
			case 5: name = 'fsize'; break;
			case 6: name = 'froom'; break;
			case 7: name = 'fkind'; break;
		}
		this.prepareRadio('requestform', name);
	},
	prepareInput: function(input) {
		var div = new Element('div', {'class': 'input'});
		div.inject(input, 'after');
		div.grab(input);
		input.addEvent('focus', function() { this.getParent().setStyle('background-position', '0 -24px'); });
		input.addEvent('blur', function() { this.getParent().setStyle('background-position', '0 0'); });
	},
	prepareRadio: function(form, input) {
		var radio = $(document.body).getElement('form[name='+form+']').getElements('input[name='+input+']');
		radio.each(function(element){
			element.getPrevious().addClass('radio');
			if (element.get('value')==getRadio(form, input)) { element.getPrevious().setStyle('background-position', '1px -42px'); }
			element.getPrevious().addEvent('mouseenter', function() {
				if (element.get('value')!=getRadio(form, input)) element.getPrevious().setStyle('background-position', '1px -18px');
				else element.getPrevious().setStyle('background-position', '1px -66px');
			});
			element.getPrevious().addEvent('mouseleave', function() { 
				if (element.get('value')!=getRadio(form, input)) element.getPrevious().setStyle('background-position', '1px 6px');
				else element.getPrevious().setStyle('background-position', '1px -42px');
			});
			element.setStyles({'position': 'absolute', 'left': '-2000em'}); 
			if (Browser.Engine.trident)
				element.addEvent('focus', function() { prepareform.changeRadio(form, input); });
			else
				element.addEvent('change', function() { prepareform.changeRadio(form, input); });		
		});
	},
	changeRadio: function(form, input) {
		var radio = $(document.body).getElement('form[name='+form+']').getElements('input[name='+input+']');
		radio.each(function(element){
			if (element.get('checked')==true) element.getPrevious().setStyle('background-position', '1px -42px');
			else element.getPrevious().setStyle('background-position', '1px 6px');
		});
		this.triggerEvent();
	},
	prepareSelect: function(select) {
		select.setStyles({'position': 'absolute', 'left': '-2000em'});
		var options = select.getChildren();
		var div = new Element('div', {'class': 'select', 'html': select.getSelected().get('html')});
		div.inject(select, 'after');
		div.addEvent('click', function(event) {
			this.removeEvents('click');
			var list = new Element('ul', {'class': 'select', 'id': 'fphonetypelist'});
	    	list.inject(div);
	    	options.each(function(element, index) {
	    		var option = new Element('li', {'html': element.get('html')});
	    		option.inject(list);
	    		option.addEvent('click', function() {
	    			options.each(function(element){
	    				if (element.get('html')!=option.get('html')) element.set('selected', false);
	    				else element.set('selected', true);
	    			});
	    			var div = this.getParent('div');
	    			div.destroy();
	    			prepareform.prepareSelect(select);
	    		});
	    		option.addEvent('mouseenter', function() { this.setStyle('background-color', '#bfc3c6'); });
	    		option.addEvent('mouseleave', function() { this.setStyle('background-color', '#a0a3a6'); });
	    		if (element.get('html')==select.getSelected().get('html')) {
	    			var pos = index;
					list.setStyle('top', '-'+(pos*24)+'px'); 
	    		}
	    	});
		});
	},
	button: function(button) {
		button.setStyles({'position': 'absolute', 'top': '0', 'z-index': '0', 'right': '0px'});
		new Element('div', {'styles': {'position': 'absolute', 'top': '0', 'z-index': '10', 'right': '0px', 'width': '90px', 'height': '30px', 'background-color': '#edeeef'}}).inject(button, 'after');
		var inner = button.get('value');
		var anchor = new Element('a', {'class': 'button', 'styles': {'float': 'left'}});
		anchor.inject(button, 'after');
		new Element('span').inject(anchor);
		new Element('span', {'html': inner}).inject(anchor.getElement('span'));
		var down = function() {
			anchor.setStyle('background-position', '0 -72px');
			anchor.getElement('span').setStyle('background-position', 'right -96px');
			anchor.getElement('span').getElement('span').setStyle('background-position', '0 -120px');
		};
		var up = function() {
			anchor.setStyle('background-position', '0 0');
			anchor.getElement('span').setStyle('background-position', 'right -24px');
			anchor.getElement('span').getElement('span').setStyle('background-position', '0 -48px');
		};
		anchor.addEvent('mousedown', down);
		anchor.addEvent('mouseup', up);
		anchor.addEvent('mouseleave', up);
	}
});

var getRadio = function(form, input) {
	var radio = $(document.body).getElement('form[name='+form+']').getElements('input[name='+input+']');
	for (var i=0; i<radio.length; i++) {
		if (radio[i].get('checked')==true) return radio[i].get('value');
	}
};

var Form = new Class({
	initialize: function() {
		this.form = $(document.body).getElement('form[name=requestform]');
		var send = this.form.getElement('a.button');
		this.form.addEvent('submit', function(event) { formsubmit.check(event); });
		send.addEvent('click', function(event) { formsubmit.check(event); });
	},
	check: function(event) {
		event.stop();
		this.errorCount = false;
		$(document.body).getElements('div.error').each(function(element){ element.destroy(); });
		if (!$chk($('fname').get('value'))) { this.error('You need to enter a name', 1); this.errorCount = true; }
		if (!$chk($('femail').get('value'))) { this.error('You need to enter an e-mail address', 2); this.errorCount = true; }
		if ($('fspam').get('value')!="DE5F6"&&$('fspam').get('value')!="DE5f6"&&$('fspam').get('value')!="de5f6")
			{ this.error('You need to enter the text you see', 3); this.errorCount = true; }

		if (this.errorCount) {
			var first = $(document.body).getElement('div.error');
		
			var myFx = new Fx.Scroll(window).toElement(first);
		} else {
			this.form.set('send', {url: '/post', method: 'post', onSuccess: function(){ window.location = '/post'; }});
			this.form.send();
		}
	},
	error: function(msg, field) {
		this.errorCount++;
		if (Browser.Engine.trident) var html = '<span><span><nobr>'+msg+'</nobr></span></span>';
		else var html = '<span><span>'+msg+'</span></span>';
		var div = new Element('div', {'id': 'errmsg'+this.errorCount, 'class': 'error', 'html': html});
		if (field<4) {
			if (field<3) var fieldset = this.form.getElement('fieldset');
			else {
				var fieldset = this.form.getElements('fieldset');
				fieldset = fieldset[8];
			}
			fieldset.setStyle('position', 'relative');
			div.inject(fieldset);
			if (field==1) div.setStyles({'top': '-10px', 'left': '208px'});
			if (field==2) div.setStyles({'top': '26px', 'left': '208px'});
			if (field==3) div.setStyles({'top': '23px', 'left': '308px'});
		}
	}
});

var prepareform;
var formsubmit;

window.addEvent('domready', function() {
	prepareform = new PrepareForm;
});