$extend(CustomInput, {
	
	// wish there was time to rewrite this!
	select: function(input) {
		if (input.hasClass('native')) return;
		function close() {
			$$('dl.selectbox-active').removeClass('selectbox-active');
		}
		function position() {
			if (structure.getCoordinates().bottom + dropdown.getHeight() > window.getHeight() + window.getScroll().y) {
				dropdown.setStyles({
					bottom: '100%',
					top: 'auto'
				});
			}
			else {
				dropdown.setStyles({
					bottom: 'auto',
					top: '100%'
				});
			}
		}
		var isCombo = input.hasClass('combobox');
		var label, inner, dropdown, fakeInput;
		var textBox = new Element('input', {
			type: 'text',
			readonly: !isCombo
		});
		var structure = new Element('dl', {
			'class': 'selectbox' + (isCombo ? ' combobox' : '')
		}).adopt(
			label = new Element('dt', {
				'class': 'selectinput textbox',
				events: {
					click: function(e) {
						e.stop();
						var list = this.getParent('dl');
						var isActive = list.hasClass('selectbox-active');
						close();
						if (isActive) list.removeClass('selectbox-active');
						else {
							list.addClass('selectbox-active');
							position();
						}
						document.addEvent('click', function() {
							close();
							document.removeEvent('click', arguments.callee);
						});
					}
				}
			}).adopt(
				inner = new Element('span', {
					'class': 'inner'
				}).adopt(textBox)
			),
			dropdown = new Element('dd', {
				'class': 'selectdrop'
			})
		);
		var items = new Element('ul').inject(dropdown), item;
		var longest = 0;
		for (var i = 0, l = input.options.length; i < l; ++i) {
			longest = Math.max(input.options[i].text.length, longest);
			var item = new Element('li').adopt(new Element('a', {
				href: '#',
				text: input.options[i].text,
				events: {
					click: function(e) {
						e.stop();
						e.target.blur();
						var option = this.getParent('li').retrieve('select:option');
						input.selectedIndex = option.index;
						textBox.value = option.text;
						close();
					}
				}
			}));
			item.store('select:option', input.options[i]);
			items.adopt(item);
		}
		if (input.selectedIndex >= 0) textBox.defaultValue = textBox.value = input.options[input.selectedIndex].text;
		textBox.size = Math.max(1, longest);
		structure.inject(input, 'before');
		label.adopt(input);
		if (!isCombo) {
			textBox.addEvent('focus', function(e) {
				e.target.blur();
				return false;
			});
		}
		else {
			if (input.hasClass('has-default')) {
				textBox.addEvents({
					focus: function() {
						if (this.value == this.defaultValue) {
							this.value = '';
						}
						this.removeClass('has-default');
					},
					blur: function() {
						if (this.value == '') {
							this.value = this.defaultValue;
							this.addClass('has-default');
						}
					}
				});
			}
			textBox.addEvents({
				click: function(e) {
					e.stopPropagation();
				}
			});
			textBox.name = input.name;
			input.dispose();
		}
	}
	
});

window.addEvent('domready', function() {
	
	$$('#nyyttarikone select').each(CustomInput.select);

});

var AutoComplete = new Class({
	
	Implements: [ Events ],
	
	initialize: function(container) {
		this.container = container;
		this.items = [];
		this.activeInput = null;
		this.visible = false;
		container.adopt(this.create());
	},
	
	add: function(items) {
		var container = this.listElement;
		items.each(function(item) {
			var el = new Element('li').adopt(
				new Element('a', {
					href: item.url,
					text: item.title,
					events: {
						click: function(e) {
							e.preventDefault();
							this.select(item);
						}.bind(this)
					}
				}),
				document.createTextNode(' (' + item.type + ')')
			).inject(container);
			item.element = el;
			this.items.push(item);
		}, this);
	},
	
	bindToInput: function(input) {
		input.addEvents({
			keyup: function() {
				this.filter(input);
			}.bind(this),
			focus: function() {
				this.filter(input);
			}.bind(this),
			blur: function() {
				this.hide();
			}.bind(this)
		});
	},
	
	create: function() {
		this.element = new Element('div', {
			'class': 'autocomplete',
			html: '<span class="title">Ehdotuksia:</span>'
		});
		this.listElement = new Element('ul').inject(this.element);
		return this.element;
	},
	
	filter: function(input) {
		var needle = input.value.toLowerCase();
		if (!needle.length) return this.hide();
		var count = 0;
		var found = this.items.filter(function(item) {
			if (count < 5 && item.title.toLowerCase().indexOf(needle) == 0) {
				item.element.className = 'match';
				++count;
				return true;
			}
			item.element.className = '';
			return false;
		});
		if (found.length) {
			if (!this.visible) {
				this.position(input);
				this.show(input);
			}
		}
		else {
			if (this.activeInput) this.fireEvent('nomatch', this.activeInput);
			if (this.visible) this.hide();
		}
	},
	
	hide: function() {
		this.visible = false;
		this.element.fade('out').get('tween').chain(function() {
			this.activeInput = null;
			this.element.removeClass('autocomplete-active');
		}.bind(this));
	},
	
	position: function(input) {
		this.activeInput = input;
		var coords = input.getCoordinates(this.container);
		this.element.setStyles({
			top: coords.bottom,
			left: coords.left
		});
	},
	
	select: function(item) {
		if (!this.activeInput) return;
		this.fireEvent('select', [ this.activeInput, item ]);
	},
	
	show: function(input) {
		this.visible = true;
		this.element.addClass('autocomplete-active');
		this.element.fade('in');
	}
	
});

var NyyttariKone = new Class({

	initialize: function(el) {
		this.element = $(el);
		this.selectedDishes = this.element.getElement('#nkselecteddishes');
		this.form = this.element.getElement('#nkform');
		this.showAllVisitors = false;
		this.attach();
		//this.autoCompleter = new AutoComplete($('nyyttarikone')).addEvents({
		//	select: function(input, item) {
		//		input.getParent('li').getElement('input.url').set('value', item.url);
		//		input.set('value', item.title);
		//	},
		//	nomatch: function(input) {
		//		input.getParent('li').getElement('input.url').set('value', '');
		//	}
		//});
		//this.loadAutoComplete();
	},
	
	attach: function() {
		this.element.getElements('button.next-phase').addEvents({
			click: this.crossBindEvent(this.onNextPhaseClicked)
		});
		this.element.getElements('button.previous-phase').addEvents({
			click: this.crossBindEvent(this.onPreviousPhaseClicked)
		});
		this.element.getElements('.go-phase').addEvents({
			click: this.crossBindEvent(this.onJumpPhaseClicked)
		});
		this.element.getElements('#nkdishchoices a').addEvents({
			click: this.crossBindEvent(this.onDishChoiceClicked)
		});
		this.element.getElements('#add-people-ok').addEvents({
			click: this.crossBindEvent(this.onAddPersonClicked)
		});
		this.element.getElements('#add-dish').addEvents({
			change: this.crossBindEvent(this.onAddDishChanged)
		});
		if (this.form) this.form.addEvents({
			keypress: function(e) {
				if (e.key == 'enter' && !$(e.target).match('textarea')) return false;
			},
			submit: function() {
				return this.checkCurrentPhase();
			}.bind(this)
		});
		if ($('nklistinvited') && $('nklistinvited').get('data-feed')) {
			this.updateVisitors();
		}
		if ($('nkshare-list')) {
			this.updateMenu();
		}
		if ($('nkrsvp')) {
			/*if ($('nkrsvp-form')) $('nkrsvp-form').addEvents({
				submit: function() {
					this.set('send', {
						url: this.action,
						method: 'post',
						onSuccess: function() {
							$('edit-rsvp').set('html', '<p class="info">Läsnäolotietosi on päivitetty.</p>');
						}
					}).send();
					return false;
				}
			});*/
			if ($('change-rsvp')) $('change-rsvp').addEvents({
				click: function() {
					$('edit-rsvp').removeClass('hidden');
					$('current-rsvp').addClass('hidden');
					return false;
				}
			});
		}
		$$('#inkmyrandom').set('value', this.getRandomString(15));
	},
	
	checkCurrentPhase: function() {
		var phase = this.element.getElement('div.active-phase');
		switch (phase.id) {
			case 'phase-2':
				var missingDate = !this.form.nkday.selectedIndex
					|| !this.form.nkmonth.selectedIndex
					|| !this.form.nkyear.selectedIndex;
				var missingTitle = this.form.nkname.value == '' || ($(this.form.nkname).hasClass('has-default') && this.form.nkname.value == this.form.nkname.defaultValue);
				var missingPlace = this.form.nkplace.value == '' || ($(this.form.nkplace).hasClass('has-default') && this.form.nkplace.value == this.form.nkplace.defaultValue);
				if (missingDate || missingTitle) {
					var what = [];
					if (missingTitle) what.push('tapahtuman nimi');
					if (missingPlace) what.push('paikka');
					if (missingDate) what.push('päivämäärä');
					var last = what.pop();
					alert('Ole hyvä ja syötä vielä ' + what.join(', ') + (what.length ? ' ja ' : '') + last + '.');	
					return false;
				}
				return true;
		}
		return true;
	},
	
	createSelectedDish: function(dishElement) {
		var container = new Element('li'), input;
		var originalImg = dishElement.getElement('span.icon img');
		var img = new Element('img', {
			src: originalImg.src
		});
		if (Browser.Engine.trident4)
			img.runtimeStyle.filter = originalImg.currentStyle.filter;
		container.adopt(
			new Element('input', {
				name: 'nkdishes[0][cat]',
				value: (dishElement.getParent('li').id || '').replace(/[^\d]/g, ''),
				type: 'hidden'
			}),
			new Element('input', {
				'class': 'url',
				name: 'nkdishes[0][url]',
				value: '',
				type: 'hidden'
			}),
			new Element('span', {
				'class': 'icon'
			}).adopt(img),
			new Element('span', {
				'class': 'label',
				text: dishElement.getElement('.label').get('text')
			}),
			input = new Element('input', {
				name: 'nkdishes[0][name]',
				type: 'text',
				'class': 'has-default',
				value: 'Kirjoita tähän mitä',
				events: {
				}
			}),
			new Element('a', {
				'class': 'remove',
				href: '#',
				text: 'Poista',
				events: {
					click: this.crossBindEvent(this.onRemoveSelectedDishClicked)
				}
			})
		);
		//this.autoCompleter.bindToInput(input);
		input.defaultValue = 'Kirjoita tähän mitä'
		CustomInput.text(input);
		return container;
	},
	
	crossBindEvent: function(fn) {
		var self = this;
		return function(e) {
			fn.call(self, this, e);
		};
	},
	
	getRandomString: function(length) {
		var chars = [];
		var salt = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
		for (var i = 0; i < length; ++i) {
			chars.push(salt.charAt(Math.round(Math.random() * salt.length - 1)));
		}
		return chars.join('');
	},
	
	goPhase: function(num) {
		if (!this.checkCurrentPhase()) return;
		var current = this.element.getElement('div.active-phase');
		var next = this.element.getElement('#phase-' + num);
		if (!next) return;
		if (next == current) return;
		if (Browser.Engine.trident) {
			current.removeClass('active-phase');
			next.addClass('active-phase');
			return;
		}
		current.fade('out').get('tween').chain(function() {
			current.removeClass('active-phase');
			next.set('opacity', 0).addClass('active-phase').fade('in');
		})
	},
	
	loadAutoComplete: function() {
		new Request.JSON({
			url: '/nyyttaricomplete.json',
			onSuccess: this.autoCompleter.add.bind(this.autoCompleter)
		}).get({ ts: $time() });
	},
	
	onAddDishChanged: function(el, e) {
		var url = el.options[el.selectedIndex].value;
		if (el.selectedIndex < 1) return;
		new Request({
			url: el.options[el.selectedIndex].value,
			onSuccess: function() {
				this.updateMenu();
			}.bind(this)
		}).get();
		el.selectedIndex = 0;
	},
	
	onAddPersonClicked: function(el, e) {
		var emailInput = $('add-people-email');
		if (!emailInput.value || emailInput.value == emailInput.defaultValue) return;
		var item = new Element('li').adopt(
			new Element('input', {
				type: 'hidden',
				name: 'nkpeople[0][name]',
				value: $('add-people-name').value
			}),
			new Element('input', {
				type: 'hidden',
				name: 'nkpeople[0][email]',
				value: $('add-people-email').value
			}),
			new Element('input', {
				type: 'hidden',
				name: 'nkpeople[0][random]',
				value: this.getRandomString(15)
			}),
			new Element('span', {
				'class': 'label',
				text: $('add-people-name').value
			}),
			new Element('span', {
				'class': 'email',
				text: $('add-people-email').value
			}),
			new Element('a', {
				'class': 'remove',
				href: '#',
				text: 'Poista',
				events: {
					click: this.crossBindEvent(this.onRemovePersonClicked)
				}
			})
		);
		$('add-people-name').value = $('add-people-name').defaultValue;
		$('add-people-email').value = $('add-people-email').defaultValue;
		var container = $('nkpeople');
		item.inject(container, 'top');
		item.highlight('#fefcf5', '#ffff88').get('tween').chain(function() {
			item.setStyle('background-color', 'transparent');
		});
		if (window.Cufon) Cufon.replace(item.getElement('.label'));
		this.updateListInputs(container);
		this.onInvitedPersonCountChanged();
	},
	
	onDishChoiceClicked: function(el, e) {
		e.target.blur();
		e.stop();
		var dish = this.createSelectedDish(el);
		dish.inject(this.selectedDishes, 'top');
		dish.highlight('#fefcf5', '#ffff88').get('tween').chain(function() {
			dish.setStyle('background-color', 'transparent');
		});
		this.updateListInputs(this.selectedDishes);
		if (window.Cufon) Cufon.replace(dish.getElement('.label'));
	},
	
	onJumpPhaseClicked: function(el, e) {
		e.target.blur();
		e.stop();
		this.goPhase(el.className.match(/go-phase-(\d+)/)[1]);
	},
	
	onNextPhaseClicked: function(el, e) {
		if (!this.checkCurrentPhase()) return;
		var current = el.getParent('.phase');
		var next = current.getNext('.phase');
		if (!next) return;
		if (Browser.Engine.trident) {
			current.removeClass('active-phase');
			next.addClass('active-phase');
			return;
		}
		current.fade('out').get('tween').chain(function() {
			current.removeClass('active-phase');
			next.set('opacity', 0).addClass('active-phase').fade('in');
		});
	},
	
	onInvitedPersonCountChanged: function() {
		var container = $('nklistinvited');
		var list = document.createDocumentFragment();
		$('nkpeople').getElements('span.label').each(function(label, i, all) {
			list.appendChild(new Element('strong', {
				'class': 'name',
				text: label.get('text')
			}));
			list.appendChild(document.createTextNode(' <' + label.getNext('span.email').get('text') + '>' + (i < all.length - 1 ? ', ' : '')));
		});
		container.empty();
		if (list.childNodes.length) container.appendChild(list);
		else container.set('text', 'Et ole vielä kutsunut ketään!');
	},
	
	onPreviousPhaseClicked: function(el, e) {
		if (!this.checkCurrentPhase()) return;
		var current = el.getParent('.phase');
		var previous = current.getPrevious('.phase');
		if (!previous) return;
		if (Browser.Engine.trident) {
			current.removeClass('active-phase');
			previous.addClass('active-phase');
			return;
		}
		current.fade('out').get('tween').chain(function() {
			current.removeClass('active-phase');
			previous.set('opacity', 0).addClass('active-phase').fade('in');
		});
	},
	
	onRemovePersonClicked: function(el, e) {
		e.target.blur();
		e.stop();
		var item = el.getParent('li');
		item.fade('out').get('tween').chain(function() {
			item.destroy();
			this.updateListInputs($('nkpeople'));
			this.onInvitedPersonCountChanged();
		}.bind(this));
	},
	
	onRemoveSelectedDishClicked: function(el, e) {
		e.target.blur();
		e.stop();
		var item = el.getParent('li');
		item.fade('out').get('tween').chain(function() {
			item.destroy();
			this.updateListInputs(this.selectedDishes);
		}.bind(this));
	},
	
	updateListInputs: function(list) {
		list.getElements('li').each(function(li, i) {
			li.getElements('input').each(function(input) {
				input.name = input.name.replace(/\[\d+\]/, '[' + i + ']');
			});
		});
	},
	
	updateMenu: function() {
		$clear(this.updateMenuTimer);
		var nk = this;
		new Request({
			url: $('nkshare-list').get('data-feed'),
			onSuccess: function(response) {
				if (response.indexOf('<li') == -1) {
					$$('.share-view').setStyle('display', 'none');
					return;
				}
				else $$('.share-view').setStyle('display', 'block');
				$('nkshare-list').empty().set('html', response);
				$$('#nkshare-list input[type=text]').addEvents({
					focus: function() {
						$clear(nk.updateMenuTimer);
					},
					blur: function() {
						nk.updateMenuTimer = nk.updateMenu.delay(5000, nk);
					}
				}).each(CustomInput.text);
				$('nkshare-list').getElements('.share-free').addEvents({
					click: function(e) {
						if ($(e.target).match('input')) return false;
						var data = { ts: $time() };
						var input = this.getElement('.name input');
						if (input) data.cmf_0_2 = input.value;
						new Request({
							url: this.get('data-add'),
							onSuccess: function() {
								nk.updateMenu();
							}
						}).get(data);
					}
				});
				$('nkshare-list').getElements('.share-me').addEvents({
					click: function() {
						new Request({
							url: this.get('data-remove'),
							onSuccess: function() {
								nk.updateMenu();
							}
						}).get({ ts: $time() });
					}
				});
				$('nkshare-list').getElements('a.remove').addEvents({
					click: function(e) {
						e.stop();
						e.target.blur();
						if (!confirm('Haluatko varmasti poistaa ruoan? Toimintoa ei voi enää myöhemmin peruuttaa.')) return;
						new Request({ url: this.href }).post({ cmf_op: 'delete' });
						var item = this.getParent('li');
						item.fade('out').get('tween').chain(function() {
							item.dispose();	
						});
					}
				});
				var els = $$('#nkshares span.label, #nkshares li.share-other span.choose-share');
				if (window.Cufon) Cufon.replace(els);
				if (Browser.Engine.trident) els.setStyle('zoom', 1);
				this.updateMenuTimer = this.updateMenu.delay(15000, this);
			}.bind(this)
		}).get({ ts: $time() });
	},
	
	updateVisitors: function() {
		var params = { ts: $time() };
		if (this.showAllVisitors) params.all = 1;
		new Request({
			url: $('nklistinvited').get('data-feed'),
			onSuccess: function(response) {
				$('nklistinvited').empty().set('html', response);
				var els = $$('#nklistinvited th, #nklistinvited strong.name, #nklistinvited strong.status');
				$$('#nklistinvited a.show-all').addEvent('click', function() {
					this.showAllVisitors = !this.showAllVisitors;
					this.updateVisitors();
					return false;
				}.bind(this));
				if (window.Cufon) Cufon.replace(els);
				this.updateVisitors.delay(20000, this);
			}.bind(this)
		}).get(params);
	}

});

window.addEvent('domready', function() {
	
	if ($('nyyttarikone')) new NyyttariKone($('nyyttarikone'));
	
});