
	var box, slider, up, down, scrollSize, listSize, slider, list, position=0, lineSize, interval=false;
	var wheelStap = 3; // lines
	var btnStap = 1; // line
	var clickStap = 50; // lines

	var init = function () {
		box = $('.cities div.box');
		box.css('overflow','hidden');
		$(".cities .control").css('display', 'block');

		slider = $('.cities div.slider');
		scrollSize = $('.cities div.scrollbar').height()-slider.height();
		list = $('.cities div.list');
		listSize = list.height()-box.height();

		lineSize = Math.round(list.height()/$('.cities div.list div').length);
		wheelStap *= lineSize;
		btnStap *= lineSize;

		box.mousewheel(wheel);
		$(".cities div.up").mousedown(btnUp);
		$(".cities div.down").mousedown(btnDown);
		$(".cities div.up").mouseup(clearInt);
		$(".cities div.down").mouseup(clearInt);
		$(".cities div.up").mouseout(clearInt);
		$(".cities div.down").mouseout(clearInt);
		$('.cities div.scrollbar').mousedown(barClick);

		slider.draggable({axis:'y', opacity: .8, containment: '.cities div.scrollbar', drag: dragCorrection });
	}

	var wheel = function(event, delta) {
		if ($.browser.opera) delta *= -1;
		var end = false;
		if (delta > 0){ // up
			position -= wheelStap;
			if (position<0) {
				position=0;
				end = true;
			}
			setScroll();

		}else if (delta < 0){ // down
			position += wheelStap;
			if (position>listSize) {
				position = listSize;
				end = true;
			}
			setScroll();
		}
		if (!end){
			event.stopPropagation();
			event.preventDefault();
		}
	}

	var btnUp = function () {
		position -= btnStap;
		if (position<0){
			position=0;
			clearInt();
		}
		setScroll();
		if(interval) return false;
		interval = window.setInterval(btnUp, 50);
	}

	var btnDown = function () {
		position += btnStap;
		if (position>listSize){
			position = listSize;
			clearInt();
		}
		setScroll();
		if(interval) return false;
		interval = window.setInterval(btnDown, 50);
	}

	var clearInt = function () {
		clearInterval(interval);
		interval = false;
	}

	function setScroll() {
		list.css('top', (position*-1));
		var pos = Math.round(/**/ (position/(listSize/100)) * (scrollSize/100)/**/);
		if (pos>scrollSize) pos = scrollSize;
		slider.css('top', pos);
	}

	var dragCorrection = function () {
		position = Math.round(/**/ (parseInt(slider.css('top'))/(scrollSize/100)) * (listSize/100)/**/);
		list.css('top', (position*-1));
	}

	var barClick = function (e) {
		slider.top = slider.offset().top;

		if (e.pageY<slider.top){
			position -= clickStap;
			if (position<0){
				position=0;
			}
		}else{
			position += clickStap;
			if (position>listSize){
				position = listSize;
			}
		}
		setScroll();
	}
	$(window).load(init);
