var SelectStyle = new Class({
	selectElement: null,
	selectBox: null,
	inputElement: null,
	buttonElement: null,
	selectWrapper: null,
	ulElement: null,
	initialize: function (select, divElementName, clickFunction) {
		if (select != null) { 
			/**
			 * Tworzenie struktury selectboxa:
			 * 	<div class="selectBox">		<-- selectBox
			 * 		<div class="text"></div><-- selectText
			 *		<div class="button"></div> <-- selectButton
		 	 * 	</div>
		 	 */
			var that = this;
			this.selectElement = select;
			this.selectElement.setStyle('display', 'none');
			
			// tworzenie elemenu selectBox
			this.selectBox = new Element('div');
			this.selectBox.addClass(divElementName);
			this.selectBox.setStyles({
				position: 'relative'
			});
			this.selectBox.inject(select.getParent());
				
			// tworzenie element selectText 
			this.inputElement = new Element ('div');
			this.inputElement.addClass('text');
			if (this.selectElement.get('name') != undefined) {
				this.inputElement.set('name', this.selectElement.get('name'));
			}
			this.inputElement.inject(this.selectBox);
		
			// tworzenie elementu selectButton 
			this.buttonElement = new Element('input', {type: 'button'});
			this.buttonElement.addClass('button');
			this.buttonElement.setStyles({
				position: 'absolute',
				top: 0,
				left: this.inputElement.getSize().x - 1, // -1 - określa krawędź elementu inputElement 
				height: this.inputElement.getSize().y,
				width: this.inputElement.getSize().y
			});
			this.buttonElement.inject(this.selectBox);
			
			/**
			 * Tworzenie struktury listy:
			 *	<div class="selectWrapper">
			 *		<ul class="selectList">
			 *			<li>option 1</li>
			 *			...
			 *			<li>option n</li>
			 *		</ul>
			 *	</div>
			 */
			this.selectWrapper = new Element('div');
			this.selectWrapper.addClass('selectWrapper');
			this.selectWrapper.setStyles({
				position: 'absolute',
				left: 0,
				top: this.inputElement.getSize().y  + ((Browser.Engine.trident)?0:-1),
				width: this.inputElement.getSize().x + this.buttonElement.getSize().x - 1,  /* -1 - określa krawędzi elementu inputElement oraz buttonElement */
				'z-index': 2000
			});
			this.selectWrapper.inject(this.selectBox);
			
			// tworzenie listy ul
			this.ulElement = new Element ('ul');
			this.ulElement.addClass('selectList');
			this.ulElement.inject(this.selectWrapper);
			this.selectElement.getElements('option').each(function(option) {
				// tworzenie elementu li
				var optionBox = new Element('li');
				optionBox.set('text', option.get('text'));
				// Efekt podświetlenia elementu listy 
				var optionMorph = new Fx.Morph(optionBox, {
					duration: '100',
					link: 'chain'
				});
				optionBox.addEvent('mouseenter', function() {
					optionMorph.start('li.optionHover');
				});
				optionBox.addEvent('mouseleave', function() {
					optionMorph.start('li.optionLeave');
				});
				// Reakcja na kliknięcie 
				optionBox.addEvent('click', function() {
					that.inputElement.set('text', optionBox.get('text'));
					that.inputElement.fireEvent('click');
					// zanaczenie elementu w selekcie
					var selected = select.getSelected()[0];
					selected.erase('selected');
					option.set('selected', 'selected');
					if (select.onchange) {
						select.onchange();
					}
					if (typeof clickFunction == 'function') {
						clickFunction();
					}
				});
				
				optionBox.inject(that.ulElement);
			});
			// wpisanie do diva wcześniej zaznaczonego selecta
			var selected = select.getSelected()[0];
			if (selected != null) {
				that.inputElement.set('text', selected.get('text'));
			}
			// rozwijanie selectWrappera
			var optionsSlide = new Fx.Slide(that.ulElement);
			optionsSlide.hide();
			this.selectBox.addEvent('click', function() {
				optionsSlide.toggle();
					if (optionsSlide.open) {
					that.ulElement.tween('opacity', '0');
				} else {
					that.ulElement.tween('opacity', '1');
				}
			})
			// schowaj liste po opuszczenia kursora
			this.selectWrapper.addEvent('mouseleave', function() {
				if (optionsSlide.open) {
					optionsSlide.toggle();
					that.ulElement.tween('opacity', '0');
				}
			});
			
			this.selectElement = null;
		}
	}
});

var CheckboxStyle = new Class({
	checkboxElement: null,
	selected: undefined,
	initialize: function (checkbox, floatValue, clickFunction) {
		if (checkbox != null) {
			/**
			 * Tworzenie struktury selectboxa:
			 * 	<div class="checkBox"></div>		<-- checkBox
		 	 */
			var that = this;
			this.checkboxElement = checkbox;
			checkbox.setStyle('display', 'none');
			
			if (floatValue == undefined) {
				floatValue = 'left';
			}
			var checkBox = new Element('div');
			checkBox.setStyles({
				float: floatValue,
				height: '13px',
				width: '13px',
				'background': 'url(./images/checkbox_unselected.png) no-repeat',
				cursor: 'pointer'
			});
			
			if (checkbox.get('checked') != false) {
				this.selected = true;
				checkBox.setStyle('background', 'url(./images/checkbox_selected.png) no-repeat');
			} else {
				this.selected = false;
			}
			
			checkBox.setStyle('margin', checkbox.getStyle('margin'));
			checkBox.setStyle('padding', checkbox.getStyle('padding'));
			checkBox.inject(checkbox.getParent(), 'top');
			
			checkBox.addEvent('click', function () {
				if (that.selected) {
					that.selected = false;
					checkBox.setStyle('background', 'url(./images/checkbox_unselected.png) no-repeat');
					checkbox.erase('checked');
				} else {
					that.selected = true;
					checkBox.setStyle('background', 'url(./images/checkbox_selected.png) no-repeat');
					checkbox.set('checked', 'checked');
				}
			});
		}
	}
});


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

	var selects = $$('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('text', 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'); 
		optionsBox.setStyle('width', '185px');
		var optionsList = new Element('ul');

		optionsBox.addClass('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 + (Browser.Engine.trident ? -1 : 0),
			'top' : selectCoords.top + selectButtonSize.y + (Browser.Engine.trident ? -1 : 0),
			'text-align' : 'left'
		});

		/* Dodawanie opcji do listy */
		options = select.getChildren();
		options.each(function(option) {
			var optionBox = new Element('li');
			optionBox.set('text', option.get('text'));
			optionBox.set('value', option.get('value'));
			
			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() {
				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();
				}
				
				var url = window.location.href;
				if (url.indexOf('?')>0) {
					url = url.substring(0,url.indexOf('?')); 
				}
				window.location.href = url + '?ma=go&region=' + optionBox.get('value');
			});
		});

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

	new SelectStyle($('actionType'), 'selectBox');
	new SelectStyle($('age'), 'selectBox');
	new SelectStyle($('region'), 'selectBox');
	new SelectStyle($('chooseRegion'), 'choose-province-select');
	
	$$('input.checkboxStyled').each(function(checkbox) {
		new CheckboxStyle(checkbox, 'left');
	});
});