document.observe('dom:loaded', function() {
	$$('.rating').each(function(element) { new App.Vote(element) });
	$('search').observe('submit', function(event) {
		if ($('query').value == '') {
			event.stop();	
		}
	});
	$$('.stretch').each(function(element) { new App.Stretch(element) });
});

var App = {};
App.Vote = Class.create(
{
	initialize: function(element)
	{
		this.element = $(element);
		this.h1 = document.getElementsByTagName('h1')[0];
		this.up = this.element.getElementsBySelector('.vote_up')[0]
			.observe('click', this.vote.bindAsEventListener(this));
		this.down = this.element.getElementsBySelector('.vote_down')[0]
			.observe('click', this.vote.bindAsEventListener(this));
		this.wait = new Element('span', {className: 'wait'})
			.update('Bitte warten ');
		this.error = new Element('span', {className: 'error'})
			.update('Fehler');
		this.state = 'thumbs';
		this.timeout = null;
	},
	vote: function(event) 
	{
		event.stop();
		if (this.timeout) {
			this.hideMessage();
		}		
		var url = event.findElement('a').href;
		this.showWait();		
		new Ajax.Request(url, {
			method: 'get',
			onSuccess: this.success.bind(this),
			onFailure: this.failure.bind(this)
		});
	},
	success: function(transport, json) 
	{
		if (json.status == 'success') {
			this[json.direction].update(json.votes);
			this.showMessage('Super, Deine Bewertung wurde registriert!', json.status);
			this.showThumbs();
		} else {
			this.showMessage('Sorry, aber Du kannst jede Definition nur einmal bewerten.', json.status);
			this.showError();
			setTimeout(this.showThumbs.bind(this), 1000);
		}
	},
	failure: function() 
	{
		alert('Oops, es ist ein Fehler aufgetreten, bitte versuch das nochmal.');
		this.showThumbs();		
	},
	showWait: function() 
	{
		this.hideElements();
		this.element.appendChild(this.wait);
		this.state = 'wait';
	},
	showThumbs: function() 
	{
		this.hideElements();
		this.element.appendChild(this.up);
		this.element.appendChild(this.down);
		this.state = 'thumbs';
	},
	showError: function() 
	{
		this.hideElements();
		this.element.appendChild(this.error);
		this.state = 'error';
	},
	hideElements: function() 
	{
		switch (this.state) {
			case 'thumbs':
				this.element.removeChild(this.up);
				this.element.removeChild(this.down);
			break;
			case 'wait':
				this.element.removeChild(this.wait);
			break;
			case 'error':
				this.element.removeChild(this.error);
			break;
		}
	},
	showMessage: function(message, type) 
	{
		this.message = new Element('div', {className: 'box message', id: type})
			.insert(new Element('div', {className: 'box_inner_1'})
				.insert(new Element('div', {className: 'box_inner_2'})
					.insert(new Element('p')
						.update(message))));
		this.h1.insert({after: this.message});
		this.timeout = setTimeout(this.hideMessage.bind(this), 5000);
	},
	hideMessage: function() 
	{
		this.message.remove();
		this.timeout = null;
	}
});

App.Stretch = Class.create({
	initialize: function(element) {
		this.element = element
			.setStyle({marginLeft: 0, marginRight: 0, float: 'none'});
		Element.observe(window, 'resize', this.resize.bindAsEventListener(this));
		var fontSize = this.element.getStyle('fontSize');
		var em = (fontSize.match(/em$/)) ? parseFloat(fontSize) : false;
		this.delta = Math.round(
			  this.calculatePixels(this.element.getStyle('paddingLeft'), em)
			+ this.calculatePixels(this.element.getStyle('paddingRight'), em)
			+ this.calculatePixels(this.element.getStyle('borderLeftWidth'), em)
			+ this.calculatePixels(this.element.getStyle('borderRightWidth'), em));
		this.resize();
	},
	calculatePixels: function(value, em) {
		if (value.match(/em$/) && em !== false) {
			value = parseFloat(value) / (0.1 / em);
		}
		return parseFloat(value);
	},
	resize: function() {
		var container = Element.extend(this.element.parentNode);
		var fontSize = container.getStyle('fontSize');
		var em = (fontSize.match(/em$/)) ? parseFloat(fontSize) : false;
		var padding = Math.round(
			  this.calculatePixels(container.getStyle('paddingLeft'), em)
			+ this.calculatePixels(container.getStyle('paddingRight'), em));
		this.element.setStyle({width: 0});
		this.element.setStyle({width: (container.getWidth() - padding - this.delta - 1) + 'px'});
	}
});