function upgradeSelection(parent){
	if (parent){
		if ($type(parent) == 'string') 
			parent = $(parent);
	} else { 
		parent = $(document.body);
	}
	var list = parent.getElements('select.select');
	list.each(function(item){
		new select(item);
	});
	
	 document.addEvent ('mousedown', function(e){
		var target = new Event(e).target;
		if (!$(target).hasClass('optionitems') && !$(target).hasClass('selectArrow')){
			$$('.optionslist').setStyle('display','none');
			$$('.selectArrow')
				.addClass('plus')
				.removeClass('minus');
		}
	 });
}

function redrawSelect(id){
	var select = $(id);
	if (!select) return;
	var selectUl = select.getNext().getElement('.optionslist');
	selectUl.setHTML('');
	var optionsList = select.getElements('option');
	var selectText = select.getNext().getElement('span');
	selectText.setHTML('');
	var selectArrow = select.getNext().getElement('.selectArrow');
	optionsList.each(function(op){
		if (op.getProperty('selected') == true) selectText.setHTML(op.getHTML());
		new Element('li',{'class':'optionitems'})
			.setStyles({
				'min-width':select.getNext().getStyle('width')
			})
			.setHTML((op.getHTML() != '')?op.getHTML():'&nbsp;')
			.setProperty('specvalue',op.value)
			// events
			.addEvent('mouseover',function(){
				this.addClass('hover');
			})
			.addEvent('mouseout',function(){
				this.removeClass('hover');
			})
			.addEvent('click',(function(e){
				var target = new Event(e).target
				selectText.setHTML(target.getHTML());
				selectUl.setStyle('display','none');
				if (target.getProperty('specvalue') =='')
					select.getElement('option').setProperty('selected',true);
				else 
					select.setValue(target.getProperty('specvalue'));
				selectArrow.removeClass('minus');
				selectArrow.addClass('plus');
				select.fireEvent('change');
			}).bindWithEvent(this))
			// insert
			.inject(selectUl);
	},this);
	select.setStyle('display','none');
}

select = new Class({
	name: 'mySelect',
	initialize: function(){
		var params = Array.link(arguments, {'options': Object.type, 'element': $defined});
		this.element = $(params.element);
		
		this.element.setStyles({
			'display':'none'
		});
		
		// vytvoreni obalu kvuli IE a position absolute
		var selectObal = new Element ('div',{'class':this.element.className}).inject(this.element,'after');
		
		var selectArrow = new Element ('div',{'class':'selectArrow plus'})
			.addEvent('click',function(){
				if (selectUl.getStyle('display') == 'none'){
					this.addClass('minus');
					this.removeClass('plus');
					selectUl.setStyle('display','block')
				} else {
					selectUl.setStyle('display','none');
					this.removeClass('minus');
					this.addClass('plus');
				}
			})
			.inject(selectObal);
		var optionsList = this.element.getElements('option');
		var selectText = new Element ('span',{'class':'text'})
			.setStyle('width',selectObal.getStyle('width').toInt()-20)
			.setHTML(optionsList[0].getHTML())
			.inject(selectObal);
		var selectRelative = new Element('div',{'class':'mainrelative'}).inject(selectObal);
		
		
		//var obalUl = new Element('div',{'class':'optionslistOver'}).inject(selectRelative);
		var selectUl = new Element('ul',{'class':'optionslist'}).inject(selectRelative);
		selectUl.setStyle('z-index','10000');
		
		if (Browser.Engine.trident5){
			selectUl.setStyle('left','-' + (selectObal.getStyle('width').toInt()-17));
		}
		optionsList.each(function(op){
			if (op.getProperty('selected') == true) selectText.setHTML(op.getHTML());
			new Element('li',{'class':'optionitems'})
				.setStyles({
					'min-width':selectObal.getStyle('width'),
					'width':selectObal.getStyle('width')
				})
				.setHTML(op.getHTML())
				.setProperty('specvalue',op.value)
				// events
				.addEvent('mouseover',function(){
					this.addClass('hover');
				})
				.addEvent('mouseout',function(){
					this.removeClass('hover');
				})
				.addEvent('click',(function(e){
					var target = new Event(e).target
					selectText.setHTML(target.getHTML());
					selectUl.setStyle('display','none');
					if (target.getProperty('specvalue') =='')
						this.element.getElement('option').setProperty('selected',true);
					else
						this.element.setValue(target.getProperty('specvalue'));
					selectArrow.removeClass('minus');
					selectArrow.addClass('plus');
					this.element.fireEvent('change');
				}).bindWithEvent(this))
				// insert
				.inject(selectUl)
		},this);
		//var scr = new ScrollBar(obalUl, selectUl);
		this.element.addClass('hidden');
		this.element.addClass('ie');
	}
});


	var ScrollBar = new Class({

		Implements: [Events, Options],

		options: {
			maxThumbSize: 15,
			wheel: 8,
			arrows: true,
			hScroll: true // horizontal scrollbars
		},

		initialize: function(main, content, options){
			this.setOptions(options);
			
			/*
			this.main = $(main);
			this.content = $(content);
			*/
			this.main = main;
			this.content = content;
			
			if (this.options.arrows == true){
				this.arrowOffset = 30;
			} else {
				this.arrowOffset = 0;
			}
			
			if (this.options.hScroll == true){
				this.hScrollOffset = 15;
			} else {
				this.hScrollOffset = 0;
			}				

			this.vScrollbar = new Element('div', {
    				'class': 'vScrollbar'
				}).injectAfter(this.content);				

			if (this.options.arrows == true){				
				this.arrowUp = new Element('div', {
    					'class': 'arrowUp'
					}).injectInside(this.vScrollbar);
			}	

			this.vTrack = new Element('div', {
    				'class': 'vTrack'
				}).injectInside(this.vScrollbar);
				
			this.vThumb = new Element('div', {
    				'class': 'vThumb'
				}).injectInside(this.vTrack);

			if (this.options.arrows == true){				
				this.arrowDown = new Element('div', {
    					'class': 'arrowDown'
					}).injectInside(this.vScrollbar);
			}		
			
			this.hScrollbar = new Element('div', {
    				'class': 'hScrollbar'
				}).injectAfter(this.vScrollbar);

			if (this.options.arrows == true){							
				this.arrowLeft = new Element('div', {
    					'class': 'arrowLeft'
					}).injectInside(this.hScrollbar);
			}		

			this.hTrack = new Element('div', {
    				'class': 'hTrack'
				}).injectInside(this.hScrollbar);
				
			this.hThumb = new Element('div', {
    				'class': 'hThumb'
				}).injectInside(this.hTrack);							
	
			if (this.options.arrows == true){
				this.arrowRight = new Element('div', {
    					'class': 'arrowRight'
					}).injectInside(this.hScrollbar);
			}											

			this.corner = new Element('div', {
    				'class': 'corner'
				}).injectAfter(this.hScrollbar);
			
			this.bound = {
				'vStart': this.vStart.bind(this),
				'hStart': this.hStart.bind(this),				
				'end': this.end.bind(this),
				'vDrag': this.vDrag.bind(this),
				'hDrag': this.hDrag.bind(this),				
				'wheel': this.wheel.bind(this),
				'vPage': this.vPage.bind(this),
				'hPage': this.hPage.bind(this)				
			};

			this.vPosition = {};
			this.hPosition = {};			
			this.vMouse = {};
			this.hMouse = {};			
			this.update();
			this.attach();
		},

		update: function(){
			alert(this.content.getSize().y);
			this.main.setStyle('height', this.content.offsetHeight + this.hScrollOffset);
			this.vTrack.setStyle('height', this.content.offsetHeight - this.arrowOffset);
						
			this.main.setStyle('width', this.content.offsetWidth + 15);
			this.hTrack.setStyle('width', this.content.offsetWidth - this.arrowOffset);
			
			// Remove and replace vertical scrollbar			
			if (this.content.scrollHeight <= this.main.offsetHeight) {
				this.vScrollbar.setStyle('display', 'none');
				if (this.options.hScroll == true){				
					this.hTrack.setStyle('width', this.hTrack.offsetWidth + 15);
				}	
				this.content.setStyle('width', this.content.offsetWidth + 15);	
			} else {
				this.vScrollbar.setStyle('display', 'block');			
			}
			
			if (this.options.hScroll == true){			
			
				// Remove and replace horizontal scrollbar
				if (this.content.scrollWidth <= this.main.offsetWidth) {
					this.hScrollbar.setStyle('display', 'none');
					this.vTrack.setStyle('height', this.vTrack.offsetHeight + this.hScrollOffset);				
					this.content.setStyle('height', this.content.offsetHeight + this.hScrollOffset);	
				} else {
					this.hScrollbar.setStyle('display', 'block');			
				}
			
				// Remove and replace bottom right corner spacer			
				if (this.content.scrollHeight <= this.main.offsetHeight || this.content.scrollWidth <= this.main.offsetWidth) {
					this.corner.setStyle('display', 'none');				
				} else {
					this.corner.setStyle('display', 'block');			
				}		
			
				// Horizontal

				this.hContentSize = this.content.offsetWidth;
				this.hContentScrollSize = this.content.scrollWidth;
				this.hTrackSize = this.hTrack.offsetWidth;

				this.hContentRatio = this.hContentSize / this.hContentScrollSize;

				this.hThumbSize = (this.hTrackSize * this.hContentRatio).limit(this.options.maxThumbSize, this.hTrackSize);

				this.hScrollRatio = this.hContentScrollSize / this.hTrackSize;

				this.hThumb.setStyle('width', this.hThumbSize);

				this.hUpdateThumbFromContentScroll();
				this.hUpdateContentFromThumbPosition();			

			} else {
					this.hScrollbar.setStyle('display', 'none');
					this.corner.setStyle('display', 'none');										
			}
			

			// Vertical
			
			this.vContentSize = this.content.offsetHeight;
			this.vContentScrollSize = this.content.scrollHeight;
			this.vTrackSize = this.vTrack.offsetHeight;

			this.vContentRatio = this.vContentSize / this.vContentScrollSize;

			this.vThumbSize = (this.vTrackSize * this.vContentRatio).limit(this.options.maxThumbSize, this.vTrackSize);

			this.vScrollRatio = this.vContentScrollSize / this.vTrackSize;

			this.vThumb.setStyle('height', this.vThumbSize);

			this.vUpdateThumbFromContentScroll();
			this.vUpdateContentFromThumbPosition();
			
		},

		vUpdateContentFromThumbPosition: function(){
			this.content.scrollTop = this.vPosition.now * this.vScrollRatio;
		},
		
		hUpdateContentFromThumbPosition: function(){
			this.content.scrollLeft = this.hPosition.now * this.hScrollRatio;
		},		

		vUpdateThumbFromContentScroll: function(){
			this.vPosition.now = (this.content.scrollTop / this.vScrollRatio).limit(0, (this.vTrackSize - this.vThumbSize));
			this.vThumb.setStyle('top', this.vPosition.now);
		},
		
		hUpdateThumbFromContentScroll: function(){
			this.hPosition.now = (this.content.scrollLeft / this.hScrollRatio).limit(0, (this.hTrackSize - this.hThumbSize));
			this.hThumb.setStyle('left', this.hPosition.now);
		},		

		attach: function(){
			this.vThumb.addEvent('mousedown', this.bound.vStart);
			if (this.options.wheel) this.content.addEvent('mousewheel', this.bound.wheel);
			this.vTrack.addEvent('mouseup', this.bound.vPage);
			
			this.hThumb.addEvent('mousedown', this.bound.hStart);
			this.hTrack.addEvent('mouseup', this.bound.hPage);			
			
			if (this.options.arrows == true){
				this.arrowUp.addEvent('mousedown', function(event){
						this.interval = (function(event){
						this.content.scrollTop -= this.options.wheel;
						this.vUpdateThumbFromContentScroll();
					}.bind(this).periodical(40))
				}.bind(this));
			
				this.arrowUp.addEvent('mouseup', function(event){
					$clear(this.interval);
				}.bind(this));
			
				this.arrowUp.addEvent('mouseout', function(event){
					$clear(this.interval);
				}.bind(this));
						
				this.arrowDown.addEvent('mousedown', function(event){
						this.interval = (function(event){
						this.content.scrollTop += this.options.wheel;
						this.vUpdateThumbFromContentScroll();
					}.bind(this).periodical(40))
				}.bind(this));
			
				this.arrowDown.addEvent('mouseup', function(event){
					$clear(this.interval);
				}.bind(this));
			
				this.arrowDown.addEvent('mouseout', function(event){
					$clear(this.interval);
				}.bind(this));
			
				this.arrowLeft.addEvent('mousedown', function(event){
						this.interval = (function(event){
						this.content.scrollLeft -= this.options.wheel;
						this.hUpdateThumbFromContentScroll();
					}.bind(this).periodical(40))
				}.bind(this));
			
				this.arrowLeft.addEvent('mouseup', function(event){
					$clear(this.interval);
				}.bind(this));
			
				this.arrowLeft.addEvent('mouseout', function(event){
					$clear(this.interval);
				}.bind(this));
			
				this.arrowRight.addEvent('mousedown', function(event){
						this.interval = (function(event){
						this.content.scrollLeft += this.options.wheel;
						this.hUpdateThumbFromContentScroll();
					}.bind(this).periodical(40))
				}.bind(this));
			
				this.arrowRight.addEvent('mouseup', function(event){
					$clear(this.interval);
				}.bind(this));
			
				this.arrowRight.addEvent('mouseout', function(event){
					$clear(this.interval);
				}.bind(this));
			}			
						
		},
		
		wheel: function(event){
			this.content.scrollTop -= event.wheel * this.options.wheel;
			this.vUpdateThumbFromContentScroll();
			event.stop();
		},

		vPage: function(event){
			if (event.page.y > this.vThumb.getPosition().y) this.content.scrollTop += this.content.offsetHeight;
			else this.content.scrollTop -= this.content.offsetHeight;
			this.vUpdateThumbFromContentScroll();
			event.stop();
		},
		
		hPage: function(event){
			if (event.page.x > this.hThumb.getPosition().x) this.content.scrollLeft += this.content.offsetWidth;
			else this.content.scrollLeft -= this.content.offsetWidth;
			this.hUpdateThumbFromContentScroll();
			event.stop();
		},		

		vStart: function(event){
			this.vMouse.start = event.page.y;
			this.vPosition.start = this.vThumb.getStyle('top').toInt();
			document.addEvent('mousemove', this.bound.vDrag);
			document.addEvent('mouseup', this.bound.end);
			this.vThumb.addEvent('mouseup', this.bound.end);
			event.stop();
		},
		
		hStart: function(event){
			this.hMouse.start = event.page.x;		
			this.hPosition.start = this.hThumb.getStyle('left').toInt();
			document.addEvent('mousemove', this.bound.hDrag);
			document.addEvent('mouseup', this.bound.end);
			this.hThumb.addEvent('mouseup', this.bound.end);
			event.stop();
		},		

		end: function(event){
			document.removeEvent('mousemove', this.bound.vDrag);
			document.removeEvent('mousemove', this.bound.hDrag);			
			document.removeEvent('mouseup', this.bound.end);
			this.vThumb.removeEvent('mouseup', this.bound.end);
			this.hThumb.removeEvent('mouseup', this.bound.end);			
			event.stop();
		},

		vDrag: function(event){
			this.vMouse.now = event.page.y;
			this.vPosition.now = (this.vPosition.start + (this.vMouse.now - this.vMouse.start)).limit(0, (this.vTrackSize - this.vThumbSize));
			this.vUpdateContentFromThumbPosition();
			this.vUpdateThumbFromContentScroll();
			event.stop();
		},
		
		hDrag: function(event){
			this.hMouse.now = event.page.x;
			this.hPosition.now = (this.hPosition.start + (this.hMouse.now - this.hMouse.start)).limit(0, (this.hTrackSize - this.hThumbSize));
			this.hUpdateContentFromThumbPosition();
			this.hUpdateThumbFromContentScroll();
			event.stop();
		}		

	});

