window.addEvent('domready', function() {
	
	/* COMMON FUNCTIONS */
	
	window.get_px = function(value) {
		return value.split('p', 2)[0]
	}
	
	/* --- --- --- --- --- --- ---  --- */
	
	/* HOVER EFFECT FOR THE MENU */
	
	$$('#menu li a').forEach(function(element) {
		var effect = new Fx.Tween(element, {property: 'background-color'});
		element.addEvents({
			'mouseenter': function() { effect.start('#3A454B', '#000'); },
			'mouseleave': function() { effect.cancel(); effect.set('transparent'); }
			});
	});
	
	/* --- --- --- --- --- --- ---  --- */
	
	/* FADE EFFECT FOR THE RESULTS TABLE */
	
	effect_fadein = function(element) {
		display = $(element).getStyle('display');
		effect = new Fx.Tween(element, {'duration': 1000});
		if(display == 'none') { effect.set('display', 'block'); }
		effect.start('opacity', 0, 1);
	};
	
	$$('.fadein p, .fadein img, .fadein h3, .fadein table, .fadein h4, .fadein h5, .fadein ul').forEach(function(element) {
		effect_fadein(element);
	});
	
	/* --- --- --- --- --- --- ---  --- */
	
	/* IMAGE SLIDE FOR THE HEADER */
	
	/* Initialize variables */
	window.slide = {
		element: $('image_slide'),
		width: window.get_px($('images').getStyle('width')),
		duration: 1500,
		interval: 5500,
		size: $('image_slide').getElementsByTagName('IMG').length
	};
	window.slide['effect'] = new Fx.Tween(window.slide['element'], {
		duration: window.slide['duration'],
		fps: 24
	});
	
	/* Get ready */
	window.slide['element'].setStyle('width',
		(window.slide['width'] + window.slide['size']) + 'px');
	
	/* Move the images */
	window.image_slide = function() {
		position = window.get_px(window.slide['element'].getStyle('left'));
		if(position <= -(window.slide['width'] * (window.slide['size'] - 1))) {
			/* Move the last image to the start */
			var els = window.slide['element'].getElementsByTagName('IMG');
			window.slide['element'].insertBefore(els[els.length - 1], els[0]);
			/* Move to the first position (which is still the same image) */
			position = 0;
			window.slide['effect'].set('left', '0px');
		}
		window.slide['effect'].start(
			'left', (position - window.slide['width']) + 'px');
		window.setTimeout("image_slide();", window.slide['interval']);
	};
	
	/* Start the loop */
	setTimeout("image_slide();", slide['interval']);
	
	/* --- --- --- --- --- --- ---  --- */
	
});


function addPlayer()
{
	players = $$('.plantilla');
	html = players.get('html')+
		'<li><span class="dorsal"><input type="text" name="numbers[]" size="1" /></span><input type="text" name="players[]" /></li>';

	players.set('html', html);
}