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

	var container = $('container5435');
	var selects = $$('select');
	

	selects.each(function(select) {
		/**
		 * Tworzenie struktury selectboxa:
		 * 	<div class="select">
		 *		<label></label>		// jeśli jest etykieta dla tego pola, przenoszona jest do wnętrza selecta (łatwiejsze stylowanie)
		 * 		<div class="text"></div>
		 *		<div class="button"></div>
		 * 	</div>
		 */
		
		var selectBox = new Element('div');
		var selectText = new Element('div');
		var selectButton = new Element('div');
		
		selectBox.set('class', 'select');
		selectText.set('class', 'text');
		selectButton.set('class', 'button');
		
		/* Pobieranie parametrów z oryginalnego selecta */
		if (null !== ( selectSelected = select.getSelected()[0] )) { 
			selectText.set('text', selectSelected.get('text'));
		}
		
		selectText.inject(selectBox);
		selectButton.inject(selectBox);
		
		/* Sprawdzanie, czy istnieje etykieta dla tego pola */
		var labels = $$('label');
		var selectLabel = null;
		labels.each(function(label) {
			labelFor = label.getProperty('for');
			selectId = select.getProperty('id');
			
			if (labelFor && selectId && (labelFor == selectId)) {
				selectLabel = label;
				return;
			} 
		});
		
		/* Przenoszenie etykiety (jeśli istnieje) do wnętrza nowego selecta. */
		if (null !== selectLabel) {
			selectLabel.inject(selectBox, 'top');
		}
		
		/**
		 * 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');
		optionsList.inject(optionsBox);
		optionsBox.addClass('selectWrapper');
		var redParent = select.getParent('.red');
		if (redParent) {
			optionsBox.addClass('red');
		}
		optionsList.addClass('select');
		optionsList.setStyle('opacity', '0');
		
		/* 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');
		
		/* Dodawanie opcji do listy */
		var selectCoords = selectText.getCoordinates(container);
		var selectButtonSize = selectButton.getSize();
		
		optionsList.setStyle('width', selectCoords.width + selectButtonSize.x);
		options = select.getChildren();
		options.each(function(option) {
			var optionBox = new Element('li');
			optionBox.set('text', option.get('text'));
			
			optionBox.setStyle('width', selectCoords.width + selectButtonSize.x - 5);
			optionBox.inject(optionsList);
			
			/* Efekt podświetlenia elementu listy */
			var optionMorph = new Fx.Morph(optionBox, {
				duration: 'short',
				link: 'chain'
			});
	
			var selectorHover;
			var selectorLeave;
			if (optionsBox.hasClass('red')) {
				selectorHover = 'li.optionHoverRed';
				selectorLeave = 'li.optionLeaveRed';
			} else {
				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() {
				selectText.set('text', optionBox.get('text'));
				selectBox.fireEvent('click');
				
				var selected = select.getSelected()[0];
				selected.erase('selected');
				option.set('selected', 'selected');
				if (select.onchange) {
					select.onchange();
				}
			});
		});
		
		/* Efekt wysuwania listy */
		var optionsSlide = new Fx.Slide(optionsList);
		optionsSlide.hide();
		selectBox.addEvent('click', function() {
			selectCoords = $('container5435').getCoordinates();
			
//			alert(selectCoords.top + ', ' + selectCoords.height + ',' + selectCoords.border + ', ' + selectCoords.left);
			
			/* Ustawianie listy pod selectem */
			optionsBox.setStyles({
				position: 'absolute',
				top: selectCoords.top + selectCoords.height -4,
				left: selectCoords.left,
				'z-index': 1001
			});
			
			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');
			}
		});
	});
});