window.addEvent('domready', function() {
	/**
	 * Nakładka na pola typu select
	 */

	var selects = $$('.lang-selection-box select.styled');

	selects.each(function(select) {
		/**
		 * Tworzenie struktury selectboxa:
		 * 	<div class="select"> <-- selectBox
		 * 		<div class="text"></div>  <-- selectText
		 *		<div class="button"></div> <-- selectButton
		 * 	</div>
		 */

		var selectBox = new Element('div');
		var selectText = new Element('div');
		var selectButton = new Element('div');

		selectBox.set('class', select.get('class') + ' styledSelect');
		selectText.set('class', 'text');
		selectButton.set('class', 'button');

		/* Pobieranie parametrów z oryginalnego selecta */
		selectedOptions = select.getSelected();
		if (selectedOptions.length > 0) {
			selectText.set('html', '<img src="./images/template/flag_' + selectedOptions[0].get('id') + '.gif" style="vertical-align: middle;"/> ' + selectedOptions[0].get('text'));
		}

		selectText.inject(selectBox);
		selectButton.inject(selectBox);

		/**
		 * Tworzenie struktury listy:
		 *	<div class="selectWrapper">
		 *		<ul class="select">
		 *			<li>option 1</li>
		 *			...
		 *			<li>option n</li>
		 *		</ul>
		 *	</div>
		 */
		var optionsBox = new Element('div'); 
		var optionsList = new Element('ul');

		optionsBox.set('class', select.get('class') + ' selectWrapper');

		optionsList.inject(optionsBox);
		optionsList.addClass('select');
		optionsList.setStyle('opacity', '0');

		var container = new Element('div');
		container.inject($(document.body));

		/* Ustawianie boxa z opcjami w najwyższym punkcie dokumentu, aby znajdował się ponad wszystkimi innymi elementami strony */
		optionsBox.inject(container);

		/* Ukrywanie starego selecta i wstawianie pod nim nowego */
		select.setStyle('display', 'none');
		selectBox.inject(select, 'after');

		var selectCoords = selectText.getCoordinates();
		var selectButtonSize = selectButton.getSize();

		container.setStyles({
			'position': 'absolute',
			'left' : selectCoords.left,
			'top' : selectCoords.top + selectButtonSize.y,
			'text-align' : 'left'
		});

		/* Dodawanie opcji do listy */
		options = select.getChildren();
		options.each(function(option) {
			var optionBox = new Element('li');
			optionBox.set('html', '<img src="./images/template/flag_' + option.get('id') + '.gif" style="vertical-align: middle;"/> ' + option.get('text'));

			optionBox.inject(optionsList);

			/* Efekt podświetlenia elementu listy */
			var optionMorph = new Fx.Morph(optionBox, {
				duration: '100',
				link: 'chain'
			});

			var selectorHover;
			var selectorLeave;
			selectorHover = 'li.optionHover';
			selectorLeave = 'li.optionLeave';

			optionBox.addEvent('mouseenter', function() {
				optionMorph.start(selectorHover);
			});
			optionBox.addEvent('mouseleave', function() {
				optionMorph.start(selectorLeave);
			});

			/* Reakcja na kliknięcie */
			optionBox.addEvent('click', function() {
				var oldOption = select.getSelected()[0];

				selectText.set('html', optionBox.get('html'));
				selectBox.fireEvent('click');

				var selected = select.getSelected()[0];
				selected.erase('selected');
				option.set('selected', 'selected');

				var newOption = select.getSelected()[0];
				if (oldOption != newOption) {
					select.fireEvent('change');
				}
			});
		});

		/* Efekt wysuwania listy */
		var optionsSlide = new Fx.Slide(optionsList);
		optionsSlide.hide();

		selectBox.addEvent('click', function() {
			optionsSlide.toggle();

			if (optionsSlide.open) {
				optionsList.tween('opacity', '0');
			} else {
				optionsList.tween('opacity', '1');
			}
		});

		optionsBox.addEvent('mouseleave', function() {
			if (optionsSlide.open) {
				optionsSlide.toggle();
				optionsList.tween('opacity', '0');
			}
		});
	});
});