window.addEvent('domready', function() {
	/**
	 * Nakładka na pola typu select
	 */
	
	var container = $('container325');
	var selects = $$('select');

	selects.each(function(select, selectIndex) {

		if (select.hasClass('styled')) {
			return false;
		}

		/**
		 * 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 + 140);
		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 + 140 - 2);

			optionBox.inject(optionsList);
			
			/* Efekt podświetlenia elementu listy */
			var optionMorph = new Fx.Morph(optionBox, {
				duration: 100,
				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();
				}
			});
		});

		if (selectIndex == 0) {
			optionsBox.setStyles({
				position: 'absolute',
				top: 148,
				left: selectCoords.left,
				'z-index': 5
			});
        } else if (selectIndex == 1) {
			optionsBox.setStyles({
				position: 'absolute',
				top: 208,
				left: selectCoords.left
			});
        }

		/* Efekt wysuwania listy */
		var optionsSlide = new Fx.Slide(optionsList);
		optionsSlide.hide();
		selectBox.addEvent('click', function() {
			selectCoords = selectText.getCoordinates(container);
			
			/* Ustawianie listy pod selectem */
			optionsBox.setStyles({
				position: 'absolute',
				top: selectCoords.top + selectCoords.height - 1,
				left: selectCoords.left
			});

			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');
			}
		});
	});

	/**
	 * Nakładka na pola typu CheckBox
	 */
	var checkBoxes = $$('input[type=checkbox]');
	checkBoxes.each(function(checkBox) {
	
		var redParent = checkBox.getParent('.red');
		if (redParent) {
		
			/**
			 * Tworzenie struktury:
			 * 	<div class="checkBox">
			 * 	</div>
			 */
			var checkBoxBox = new Element('div');
			checkBoxBox.set('class', 'checkBox');
			checkBox.addEvent('change', function(event) {
				if (checkBox.get('checked')) {
					checkBoxBox.addClass('checked');
				} else {
					checkBoxBox.removeClass('checked');
				}
			});
			
			checkBoxBox.addEvent('click', function() {
				if (checkBox.get('checked')) {
					checkBox.erase('checked');
				} else {
					checkBox.set('checked', true);
				}
				checkBox.fireEvent('change');
			});
			
			checkBox.fireEvent('change');
			
			checkBoxBox.inject(checkBox, 'after');
			checkBox.setStyle('display', 'none');
		}
	});
});