/*
 * slider functions.
 */
(function($){

	$(window).load(function(){

		// set common slider settings.
		$('#search div.slider')
			// set slider.
			.slider({
				range: true,
				values: [0, 100]
			})
			// bind slide event.
			.bind('slide', slideChanged)
			// add optional elements.
			.append('<div class="overlay" />')
			.append('<span class="min_value" />')
			.append('<span class="max_value" />')
		;

		// set price slider option.
		$('#search div.price')
			.slider('option', 'min', 0)
			.slider('option', 'max', 500)
			.slider('option', 'step', 10)
			.slider('option', 'values', [0, 500])
		;

		// set carat slider option.
		$('#search div.carat')
			.slider('option', 'min', 0.0)
			.slider('option', 'max', 20.0)
			.slider('option', 'step', 0.5)
			.slider('option', 'values', [0.0, 20.0])
		;

		// switch max-handle bg.
		var handleBg = $('#search div.slider > a:last').css('backgroundImage');
		handleBg = handleBg.replace(/(.*?)_03(.*?)/, '$1_04$2');
		$('#search div.slider').find('a:last').css({ backgroundImage: handleBg })

		// fire event.
		$('#search div.slider').each(function(){
			var vals = [$(this).slider('values', 0), $(this).slider('values', 1)];
			$(this).trigger('slide', { handle: $(this).find('a:first'), values: vals });
		});

	});

	// sliding event.
	function slideChanged(event, ui) {
		var parent = $(ui.handle).parent();
		var minPosition = $(parent).find('a:first').css('left');
		var maxPosition = $(parent).find('a:last').css('left');

		// set overlay cliping area.
		minPosition = parseInt(minPosition);
		maxPosition = parseInt(maxPosition);
		var width = $(parent).width();
		var height = $(parent).height();
		var right = Math.floor(width * (maxPosition / 100));
		var left = Math.floor(width * (minPosition / 100));
		$(parent).find('div.overlay').css({
			clip: 'rect(0 '+ right +'px '+ height +'px '+ left +'px)'
		});
		// set optional text.
		if ($(parent).hasClass('price')) {
			// price slider.
			$(parent)
				.find('span.min_value')
					.text(addFigure(ui.values[0]) +'\u4e07\u5186')
					.css({
						right: (100 - minPosition) +'%'
					})
				.end()
				.find('span.max_value')
					.text(addFigure(ui.values[1]) +'\u4e07\u5186')
					.css({
						left: (maxPosition - 2) +'%'
					})
				.end()
			;
		}
		else {
			// carat slider.
			$(parent)
				.find('span.min_value')
					.text(ui.values[0].toFixed(1) +'ct\u002e')
					.css({
						right: (100 - minPosition) +'%'
					})
				.end()
				.find('span.max_value')
					.text(ui.values[1].toFixed(1) +'ct\u002e')
					.css({
						left: (maxPosition - 2) +'%'
					})
				.end()
			;
		}
	}

	// http://webdev.seesaa.net/article/22769178.html
	// returns string that separated 3 figures.
	function addFigure(number) {
		var numberString = new String(number).replace(/,/g, '');
		while(numberString != (numberString = numberString.replace(/^(-?\d+)(\d{3})/, '$1,$2')));
		return numberString;
	}

})(jQuery);