$(document).ready(function(){
	
//селект
	$("select").each(function(i){
		var $oldSelect = $(this);
		$oldSelect.hide();

		var $newSelect = $("<div/>", {
			"class": "select all" 
		});
		var $variants = $("<div/>", {
			"class": "variants closed" 
		});
		$variants.append("<div class='fill g-png24'></div>");
		
		var $ul = $("<ul/>");

		$oldSelect.children().each(function(j){
			var $li = $("<li>" + $(this).text() + "</li>" );
			$li.get(0).option = $(this);
			if ( this.selected )
				$ul.prepend( $li );
			else 
				$ul.append( $li );
		});
		
		$ul.appendTo($variants);
		$variants.append("<div class='tl'></div>");
		$variants.append("<div class='tr'></div>");
		$variants.append("<div class='bl'></div>");
		$variants.append("<div class='br'></div>");
		
		$variants.appendTo($newSelect);

		$newSelect.append("<div class='opener'></div>")
		$newSelect.insertAfter($oldSelect);
	});
	

	$(".select .opener").live("click", function(e){
		var $v = $(this).siblings(".variants");

		var $t = $(this);
		//$('ul').css({ 'z-index' : '1' });

		if($v.hasClass("closed")){
			$v.removeClass("closed");
			var h = 0;

			$v.find("li").each(function(i){
				h += $(this).height();
			});

			$v.animate(
				{height: h + 6 + "px"}, 
				h*4 
			);
			$v.parent().css("z-index", 1000);
			
			$(document).one("click", function(){
				$v.animate(
					{height: "18px"},
					$v.height()*4, 
					function(){	$v.addClass("closed"); $v.parent().css({ 'z-index' : '100' }); }
				);				
			});
		} else {
			$v.animate(
				{height: "18px"},
				$v.height()*4, 
				function(){	$v.addClass("closed"); $v.parent().css({ 'z-index' : '100' }); }
			);
			return false;
		};
	});

	$(".select li")
		.live("click", function(e){
			$(this).get(0).option.attr("selected", "selected");
			$(this).prependTo($(this).parent());
			$(this).css("color", "#a6a6a6");

			var obj = e.target.parentNode.parentNode;
			$(obj).animate(
				{height: "18px"},
				$(obj).height()*4, 
				function(){	
					$(obj).addClass("closed"); 
					$('.opener').css({ 'z-index' : '2000' }); 
				}
			);
			$(obj).removeClass('obj');
			return false;
		})
		.hover(
			function(e){$(this).css("color", "#f9e3a1")},
			function(e){$(this).css("color", "#a6a6a6")}
		);
		

//слайдер
	$("input.slyder-from").each(function(){
		var maxValue = 100000;
		var minValue = 0;
		var $from = $(this);
		var $to = $(this).parent('fieldset').next().find('input.slyder-to');

		$from.parent('fieldset').hide();
		$to.parent('fieldset').hide();
		
		if (!$from.val()) $from.val( minValue );
		if (!$to.val()) $to.val( maxValue );
		
		var $lable = $("<label>Цена</label>" );
		var $slyder = $("<div/>", {"class": "slyder"});
		var $fieldset = $('<fieldset/>');

		$fieldset.insertAfter($to.parent('fieldset'));
		$fieldset.append($lable);
		$fieldset.append($slyder);
		var $selected = $("<div/>", {"class": "selected"});

		$slyder.get(0).from = $from;
		$slyder.get(0).to = $to;
		
		var step = $slyder.width() / (maxValue - minValue);
		
		var left = $from.val()*step;
		var width = $to.val()*step - left;
		
		$selected.css({
			left: left + "px",
			width: width + "px"
		});
		
		$selected.append("<div class='head from'><span class='value'>" + $from.val() + "</span></div>");
		$selected.append("<div class='head to'><span class='value'>" + $to.val() + "</span></div>");
		$selected.appendTo($slyder);
		
		if ( $('.slyder .head.from .value').text() == '' ) $('.slyder .head.from .value').text ( '1000' );	
	});
		
	$(".slyder .head").mousedown(function(ev){
		var $head = $(this);
		var $value = $head.find(".value");
		var $selected = $head.parent();
		var $slyder = $selected.parent()

		//потом надо будет брать откуда-нибудь:
		var maxValue = 100000;
		var minValue = 0;


		var step = (maxValue - minValue) / $slyder.width();

		function move(e) {
			if ($head.hasClass("from")) { //левый ползунок 
				var left = e.clientX - $slyder.offset().left;
				var width = $selected.offset().left + $selected.width() - e.clientX;
							
				if (left <= 0) {
					width += left;
					left = 0;
				} 
				if (width <= 0) {
					left += width;
					width = 0;	
				}					

				$selected.css({
					left:  left + "px",
					width: width + "px"
				});
				
				$value.text ( Math.ceil(minValue + step*left) );
				$slyder.get(0).from.val($value.text());
				
			} else { //правый ползунок
				var width = e.clientX - $selected.offset().left;


				width = Math.max(width, 0);
				width = Math.min(width, $slyder.offset().left + $slyder.width() - $selected.offset().left);

				$selected.css({
					width: width + "px"
				});

				$value.text( Math.ceil(minValue + step*( $selected.offset().left - $slyder.offset().left + width )));
				$slyder.get(0).to.val($value.text());
			};
			return false;
		};

		function release(e) {
			$(document)
				.unbind("mousemove", move)
				.unbind("mouseup", release);
				
		};
		
		$(document).bind("mousemove", move);
		$(document).bind("mouseup", release);
		
		return false;

	});	
});