var dropDown = new Class({
            Implements: [Options, Events],
            options: {
			
			width:'inherit',
			optionmaxheight:200
				
            },
            initialize: function(el,options){			   
				  
                    this.setOptions(options);
					 this.construct(el);
					
					
			},
			construct: function(el) {		
				var elOptions = el.getChildren('option');
				var classs= el.getProperty('name');
				
				/*classs = classs.replace(/dropDown/,'');	*/			
				var outer = new Element('div', {'class':classs,'styles': {'position':'relative','float':'left','top':'0px','z-index':300}});						
				var value = new Element('input', { 'type': 'hidden','name':el.name}).inject(outer,'top');
				el.set('name','');
				
				var visibleinput = new Element('input',		{
					
					
					'id':el.id,	'type': 'text',	'style': {'width': el.getStyle('width') },'readonly':true,					'events': {
						'dblclick': function () { this.openOpts(divOptions) }.bind(this),						
						'keydown': function(e) {
							e.preventDefault();
							if(e.key=='up' || e.key=='down')
							{
								this.openOpts(divOptions);
								var selectedLI = ulOptions.getElement('li.selected');					
								
								
								if(e.key=='up') {
									
									if(!selectedLI) { selectedLI = ulOptions.getFirst('li'); }
									selectedLI = selectedLI.getPrevious('li')
									if(!selectedLI) { selectedLI = ulOptions.getFirst('li'); }	
									this.move('up');						
									
									
								}
								else if(e.key=='down') {
									this.move('down');
									if(!selectedLI) { selectedLI = ulOptions.getFirst('li'); }
									selectedLI = selectedLI.getNext('li')
									if(!selectedLI) { selectedLI = ulOptions.getLast('li'); }
								}
								
								this.selectLi(selectedLI,visibleinput,value);
								
								
							}
							else if(e.key=='enter')
							{
									this.closeOpts(divOptions);
									visibleinput.blur();
							}
							
						}.bind(this),
						'click':function(e) {
							e.stopPropagation();
						},
						'mouseup':function(e) {
							e.stopPropagation();
						}
						
						
					}
				}).inject(outer);
				visibleinput.setStyle('width',el.getStyle('width'));
				
				el.setStyle('display','none');
				el.id='';
				
				outer.inject(el.getParent(),'top');
				var visibleinputSize= visibleinput.getSize();	
				
							
				
				
				var divOptions= new Element('div',
				{
					'class':'options',
					'styles':{ 'z-index':301,'position':'absolute', 'width':'100%','top':'25px','left':'2px', 'border':'1px solid #E0DEDE', 'border-top':'none', 'height':1, 'overflow':'hidden'},
					'events':{
						'mousewheel':function(event) { 
						   event.preventDefault(); 
						   if (event.wheel > 0){	
						        this.move('up');
						   }
						   else if (event.wheel < 0){
							   this.move('down');					
						   } 			
				
					
						}.bind(this)
					}
										
				}).inject(outer);
				
				
				
				window.addEvent('click',function(e) {
					 
					 this.closeOpts(divOptions);					
				}.bind(this));
				
				var contentOptions = new Element('div', {
					'class':'contentOptions'
				}).inject(divOptions)
				
				var ulOptions = new Element('ul',{	'styles': {	'list-style-type':'none','margin':0,'padding':0	}}).inject(contentOptions);
				
				var downButton = new Element('a', {
					'styles':{	'display':'block',	'cursor':'pointer',	'position':'absolute',	'right':'-5px',	'top':'2px','z-index':1	},					
					'class':'downButton',
					'events': {
						'click': function(e) {
							e.stopPropagation();
							var display = divOptions.getStyle('display');
							if(display == 'none')
							 {
								this.openOpts(divOptions)
								visibleinput.focus();
							 }
							 else
							 {
								 this.closeOpts(divOptions);
								 visibleinput.blur();
							 }
							 
						}.bind(this)
					}
				}).inject(outer,'top');
				
				
				elOptions.each(function(opt,index){
					if(opt.getProperty('selected'))
					{
						visibleinput.value =  opt.innerHTML;
						value.value=opt.value;
					}
					
					var li = new Element('li', {
						'id':'li_'+opt.value,
						'styles': {'cursor':'pointer'},
						'class':'option',
						'html':opt.innerHTML						
					}).inject(ulOptions);
					
					li.addEvent('click',function() { this.closeOpts(divOptions);   this.selectLi(li,visibleinput,value);	 }.bind(this));
				}.bind(this));
				
				var scrollarea = new Element('div', {'class':'scrollarea','styles':{'top':0} }).inject(divOptions,'top');
				var scrollBarContainer = new Element('div', {'class':'scrollBarContainer'}).inject(scrollarea,'top');
				this.scrollknob = new Element('div', { 'class':'scrollKnob','styles':{'height':10,'top':'0px','position':'relative'} }).inject(scrollBarContainer);	
				
				this.from=0;
				
				this.knobfrom = 0;	
				this.curentfrom = 0;			
				var AllHeight	 = divOptions.getElement('ul').measure(function(){   return this.getSize().y; });
				
				var height= 0;
			
				var OptionMaxHeight = this.options.optionmaxheight;
				if(AllHeight>OptionMaxHeight)
				{
					$$(divOptions,contentOptions,scrollBarContainer).setStyles({'height':OptionMaxHeight,'overflow':'hidden'});
					height = OptionMaxHeight;
				}
				else
				{ 
				
					$$(divOptions,contentOptions,scrollBarContainer).setStyles({'height':AllHeight,'overflow':'hidden'})
					height = AllHeight;
					
				}
				
				this.step = divOptions.getElement('ul').getElement('li').measure(function(){   return this.getSize().y; });
				this.steps =  (AllHeight-height)/this.step;	
				this.scroller = new Fx.Scroll(divOptions.getElement('div.contentOptions'),{offset:{'x': 0, 'y': 0},duration:0});
				
				this.knobheight = 2*height-AllHeight;
				
				if(this.knobheight <= 0) {
					this.knobheight = 10;
					this.knobStep = (height-10)/this.steps;					
				}
				else {
					this.knobStep = this.step;					
				}
				this.knobStep = this.knobStep;
				this.scrollknob.setStyle('height',this.knobheight);	
				this.maxFrom = 	this.steps*this.step;
				this.maxKnobFrom = 	this.steps*this.knobStep;	
				if(height == OptionMaxHeight)
				{
				var knobslider = new Slider(scrollBarContainer, this.scrollknob, {
				
				wheel: true,
				steps :this.steps,
				mode :'vertical',
				onChange: function(value){
					this.from = this.step*value;
					this.knobfrom =this.knobStep*value;
					this.knobfrom = (!isNaN(this.knobfrom))?this.knobfrom:0;
					
					this.move(0);						
					console.log(value);				
				}.bind(this)
				});	
				}
				el.removeProperty('class');
				divOptions.setStyle('display','none');				
				
			},
			openOpts: function(el) {
				el.getParent('div').setStyle('z-index',el.getParent('div').getStyle('z-index').toInt()+3);
				el.setStyle('display','block');								
				
				
			},
			closeOpts: function(el) {
				el.getParent('div').setStyle('z-index',el.getParent('div').getStyle('z-index').toInt()-3);
				if(el.getParent('div').getStyle('z-index').toInt()<300) {
					el.getParent('div').setStyle('z-index',300);
				}
				el.setStyle('display','none');
			},
			selectLi:function(el,visibleinput,value) {
				el.getSiblings('li').removeClass('selected');
				el.addClass('selected');							
				visibleinput.value =  el.innerHTML;
				value.value=el.getProperty('id').replace(/li_/,'');	
				this.fireEvent('update',[visibleinput.value,value.value]);			
				
			},
			move:function(dir) {
				if(dir=='up'){
					this.from-=this.step;
					this.knobfrom -= this.knobStep;
					if(this.from<0) { this.from = 0; this.knobfrom = 0; }	
										
					this.scrollknob.setStyle('top',(!isNaN(this.knobfrom))?this.knobfrom:0);
									
				}
				else if (dir=='down')
				{
					this.from+=this.step;
					this.knobfrom += this.knobStep;
					if(this.from > this.maxFrom) { this.from = this.maxFrom; this.knobfrom = this.maxKnobFrom  }
									  
					this.scrollknob.setStyle('top',(!isNaN(this.knobfrom))?this.knobfrom:0);
				}
				else
				{
				}
				
				
				 if(this.from >= 0  || this.from <= this.maxFrom) 
				   { 
					   this.scroller.set(0,this.from);
					   this.curentfrom = this.from;					   				  
					   console.log('from '+ this.curentfrom +' step'+this.step+' KnobFrom'+this.knobfrom+ ' Knstep'+this.knobStep);
				   }
			}
			
});

window.addEvent('domready', function() {
	
	var noptiDrop = new dropDown($('title'),{	});
	
});