$dr(document).ready(function(){
  $dr(document).bind('click', function(e) {
		var clicked = $dr(e.target);
		if (!clicked.parents().hasClass('dropdown')) {
			$dr('span.selectbox ul.dropdown').hide().find('li.sel').addClass('selected');
			$dr('span.selectbox').removeClass('focused');
		}
	});

	$dr('.styled-select select').each(function() {

		var option = $dr(this).find('option');
		var optionSelected = $dr(this).find('option:selected');
		var dropdown = '';
		var selectText = $dr(this).find('option:first').text();
		if (optionSelected.length) selectText = optionSelected.text();

		for (i = 0; i < option.length; i++) {
			var selected = '';
			var disabled = ' class="disabled"';
			if ( option.eq(i).is(':selected') ) selected = ' class="selected sel"';
			if ( option.eq(i).is(':disabled') ) selected = disabled;
			dropdown += '<li' + selected + '>'+ option.eq(i).text() +'</li>';
		}

		$dr(this).before(
			'<span class="selectbox">'+
				'<span class="select"><span class="text">' + selectText + '</span>'+
					'<b class="trigger"><i class="arrow"></i></b>'+
				'</span>'+
				'<ul class="dropdown">' + dropdown + '</ul>'+
			'</span>'
		).css({position: 'absolute', left: -9999});

		var ul = $dr(this).prev().find('ul');
		var selectHeight = $dr(this).prev().outerHeight();
		if ( ul.css('left') == 'auto' ) ul.css({left: 0});
		if ( ul.css('top') == 'auto' ) ul.css({top: selectHeight});
		var liHeight = ul.find('li').outerHeight();
		var position = ul.css('top');
		ul.hide();
		
		ul.outerWidth( $dr(this).parent().find('span.selectbox').width() );

		/* ��� ����� �� ������������� */
		$dr(this).prev().find('span.select').click(function() {

			/* ����� ���������������� */
			var topOffset = $dr(this).parent().offset().top;
			var bottomOffset = $dr(window).height() - selectHeight - (topOffset - $dr(window).scrollTop());
			if (bottomOffset < 0 || bottomOffset < liHeight * 6)	{
				ul.height('auto').css({top: 'auto', bottom: position});
				if (ul.outerHeight() > topOffset - $dr(window).scrollTop() - 20 ) {
					ul.height(Math.floor((topOffset - $dr(window).scrollTop() - 20) / liHeight) * liHeight);
				}
			} else if (bottomOffset > liHeight * 6) {
				ul.height('auto').css({bottom: 'auto', top: position});
				if (ul.outerHeight() > bottomOffset - 20 ) {
					ul.height(Math.floor((bottomOffset - 20) / liHeight) * liHeight);
				}
			}

			$dr('span.selectbox').css({zIndex: 1}).removeClass('focused');
			if ( $dr(this).next('ul').is(':hidden') ) {
				$dr('ul.dropdown:visible').hide();
				$dr(this).next('ul').show();
			} else {
				$dr(this).next('ul').hide();
			}
			$dr(this).parent().css({zIndex: 2});
			return false;
		});

		/* ��� ��������� ������� �� ����� ������ */
		$dr(this).prev().find('li:not(.disabled)').hover(function() {
			$dr(this).siblings().removeClass('selected');
		})
		/* ��� ����� �� ����� ������ */
		.click(function() {
			$dr(this).siblings().removeClass('selected sel').end()
				.addClass('selected sel').parent().hide()
				.prev('span.select').find('span.text').text($dr(this).text())
			;
			option.removeAttr('selected').eq($dr(this).index()).attr({selected: 'selected'});
			$dr(this).parents('span.selectbox').next().change();
		});

		/* ����� �� ������� ��� ������� �� Tab */
		$dr(this).focus(function() {
			$dr('span.selectbox').removeClass('focused');
			$dr(this).prev().addClass('focused');
		})
		/* ������ ������ � ���������� */
		.keyup(function() {
			$dr(this).prev().find('span.text').text($dr(this).find('option:selected').text()).end()
				.find('li').removeClass('selected sel').eq($dr(this).find('option:selected').index()).addClass('selected sel')
			;
		});

	});
	
	
	
	
	
	$dr('select#citySelectClick').change(function(){
		window.location.href = $dr(this).val();
	});
}); 