var Select = new Class(
		{
			options : {
				container : false,
				baseClass : 'Select'
			},
			source : false,
			selected : false,
			_select : false,
			current : false,
			selectedOption : false,
			dropDown : false,
			optionsContainer : false,
			hiddenInput : false,
			slider : false,

			initialize : function(options) {
				this.setOptions(options);

				this.selected = false;
				this.source = $(this.options.container).getElement('select');
				this.buildFrameWork();

				$(this.source).getElements('option').each(this.addOption, this);
				$(this.options.container).set('html', '');
				this._select.inject($(this.options.container));

				this.bindEvents();

				$$('.optionsContainer').setStyle('display', 'none');
			},

			reset : function() {

				this.optionsContainer.getElements(".option.selected").each(
						function(e) {
							e.removeClass("selected");
						});
				$$('.selectedOption').set("id", 0).set("text",
						$$(".optionsContainer .option.first").get("text"));
				this.selected = this.optionsContainer
						.getElement(".option.first");

			},

			buildFrameWork : function() {
				this._select = new Element('div')
						.addClass(this.options.baseClass);
				this.current = new Element('div').addClass('selected').inject(
						$(this._select));
				this.selectedOption = new Element('div').addClass(
						'selectedOption').inject($(this.current));
				this.dropDown = new Element('div').addClass('dropDown').inject(
						$(this.current));
				new Element('div').addClass('clear').inject($(this._select))
				this.optionsContainer = new Element('div').addClass(
						'optionsContainer').inject($(this._select));
				var t = new Element('div').addClass('optionsContainerTop')
						.inject($(this.optionsContainer));
				var o = new Element('div').inject($(t));
				var p = new Element('div').inject($(o));
				var t = new Element('div').addClass('optionsContainerBottom')
						.inject($(this.optionsContainer));
				var o = new Element('div').inject($(t));
				var p = new Element('div').inject($(o));
				this.scroller = new Element('div').addClass('selectScrollbar')
						.inject($(this.optionsContainer));
				this.handle = new Element('div').addClass('selectHandle')
						.inject($(this.scroller));

				this.hiddenInput = new Element('input').setProperties({
					type : 'hidden',
					name : this.source.getProperty('name')
				}).inject($(this.options.container));

			},

			bindEvents : function() {
				document.addEvent('click', function() {
					if (this.optionsContainer.getStyle('display') == 'block')
						this.onDropDown()
				}.bind(this));

				$(this.options.container).addEvent('click', function(e) {
					new Event(e).stop();
				})
				this.current.addEvent('click', this.onDropDown
						.bindWithEvent(this));

			},

			// add single option to select
			addOption : function(option) {
				var o = new Element('div').addClass('option').setProperty(
						'value', option.value);
				if (option.disabled) {
					o.addClass('disabled');
				} else {
					o.addEvents({
						'click' : this.onOptionClick.bindWithEvent(this),
						'mouseout' : this.onOptionMouseout.bindWithEvent(this),
						'mouseover' : this.onOptionMouseover
								.bindWithEvent(this)
					})
				}

				if ($defined(option.getProperty('class'))
						&& $chk(option.getProperty('class')))
					o.addClass(option.getProperty('class'));

				if ($defined(option.get('id')) && $chk(option.get('id')))
					o.set('id', option.getProperty('id'));

				if ($defined(option.get('data-name'))
						&& $chk(option.get('data-name')))
					o.set('data-name', option.getProperty('data-name'));

				if (option.selected) {
					if (this.selected)
						this.selected.removeClass('selected');
					this.selected = o;
					o.addClass('selected');
					this.selectedOption.set('text', option.text);
					this.hiddenInput.setProperty('value', option.value);
				}
				o.set('text', option.text);
				o.injectBefore($(this.optionsContainer).getLast());
			},

			onDropDown : function(e) {
				var s = this;

				if (this.optionsContainer.getStyle('display') == 'block') {
					this.optionsContainer.setStyle('display', 'none');
				} else {
					this.optionsContainer.setStyle('display', 'block');
					if (this.selected)
						this.selected.addClass('selected');
					// needed to fix min-width in ie6
					var width = this.optionsContainer.getStyle('width').toInt() > this._select
							.getStyle('width').toInt() ? this.optionsContainer
							.getStyle('width') : this._select.getStyle('width')

					this.optionsContainer.setStyle('width', width);

					function makeScrollbar(content, scr, handle,
							horizontal, ignoreMouse) {
						
						var steps = content.getScrollSize().y 
								- content.measure(function() {
									return this.getSize();
								}).y;
						
						sli = new Slider(scr, handle, {
							'steps' : steps,
							'mode' : 'vertical',
							'wheel' : true,
							'onChange' : function(step) {
								var x = 0;
								var y = step;
								//content.scrollTo(x, y);
							}
						}).set(0);
						if (!(ignoreMouse)) {
							$$(content, scr).addEvent('mousewheel',
									function(e) {
										e = new Event(e).stop();
										var step = sli.step - e.wheel * 30;
										sli.set(step);
									});
						}
						$(document.body).addEvent('mouseleave', function() {
							sli.drag.stop();
						});
					}
					
					makeScrollbar(this.optionsContainer,this.scroller,
							this.handle);

					window.addEvent('keydown', function(event) {
						if (event.key == 'enter') {
							var selectedO = $$('.option.selected')[0]
							selectedO.removeClass('selected');
							$$('.selectedOption')[0].set('text', selectedO
									.get('text'));
							$$('.selectedOption')[0].set('id', selectedO
									.get('id'));
							s.hiddenInput.setProperty('value', selectedO
									.getProperty('value'));
							s.onDropDown();
							legalAgeSendForm();
						} else {
							s.keyboardScroll(event.key);
						}
					});

				}
			},
			onOptionClick : function(e) {
				var event = new Event(e);
				if (this.selected != event.target) {
					if( this.selected ) this.selected.removeClass('selected')
					event.target.addClass('selected')
					this.selected = event.target;
					this.selectedOption.set('text', this.selected.get('text'));
					this.selectedOption.set('id', this.selected.get('id'));
					this.hiddenInput.setProperty('value', this.selected
							.getProperty('value'));
				}
				this.onDropDown();
				legalAgeSendForm();
			},
			onOptionMouseover : function(e) {
				var event = new Event(e)
				$('countrySelect').getElements('.option').removeClass(
						'selected');
				if( this.selected ) this.selected.removeClass('selected');
				event.target.addClass('selected');
			},
			onOptionMouseout : function(e) {
				var event = new Event(e);
				event.target.removeClass('selected');
			},
			keyboardScroll : function(key) {
				var options = $('countrySelect').getElements('.option');
				if (key == 'right' || key == 'down') {
					var selectedOption = $('countrySelect').getElements(
							'.option.selected').getNext('.option');
				} else if (key == 'left' || key == 'up') {
					var selectedOption = $('countrySelect').getElements(
							'.option.selected').getPrevious('.option');
				} else {
					var selectedOption = $('countrySelect').getElements(
							'div[data-name=' + key + ']')[0];
				}
				options.removeClass('selected');
				if (selectedOption)
					selectedOption.addClass('selected');
				var box = $('countrySelect');
				var scroller = box.getElement(".optionsContainer");
				if( selectedOption ){
					var pos = selectedOption.getPosition(box);
					slider.set(pos.y + scroller.getScroll().y);
				}
				// console.log("scroll : " +scroller.getScroll().y);
				// console.log("pos : " +pos.y);
				

			}

		});
Select.implement(new Events);
Select.implement(new Options);