/**
  * Initialize the single slider
  */
var singleSlider;
function createHardnessSingleSlider() {  
	if (!singleSlider) singleSlider = $('select#hardness-slider').accessibleUISlider({width:200});
 
 	// on slide, populate the hidden text input
	$('select#hardness-slider').next().bind('slide', 
		function(e, options){
			var currentRating = $('#hardness-rating').val();
    		var slideInput = Math.floor(options.value/10) + (options.value < 100 ? 1 : 0);
    		if (slideInput != currentRating) {
	    		$('#hardness-rating').val(slideInput);
				$('table.hardness-scale td#id' + currentRating).removeClass('selected');
				$('table.hardness-scale td#id' + slideInput).addClass('selected');
			}
  		}
	);
}

/** 
  * Initialize a double slider.
  */
function createHardnessDoubleSlider(selectMin, selectMax, onChange) {

	var result = $(selectMin + ',' + selectMax).accessibleUISlider({width:200});
	
	// Reflect initial (current) selection in the scale:
	for (var i = 1; i <= 10; i++ ) {
		if (i == $('#hardness-min').val() || i == $('#hardness-max').val()) {
			$('table.hardness-scale td#id' + i).addClass('selected');
		}
	}
	
	// on slide:
	$(selectMin + ',' + selectMax).next().bind('slide', 
		function(e, options){
					
			if (e.target.id.indexOf('min') > 0) {
				var hiddenElement = '#hardness-min';  // left slider
			}
			else if (e.target.id.indexOf('max') > 0) {
				var hiddenElement = '#hardness-max';  // right slider
			}
			// Occasionally, and for a reason that escapes me, this function is called on targets
			// other than the two handles.  Ignore those, as we can't tell if the right or left handle
			// is being dragged.
			else return;  
			
			var currentRating = $(hiddenElement).val();
	    	var slideInput = Math.floor(options.value/10) + (options.value < 100 ? 1 : 0);
    		if (slideInput != currentRating) {
    			$(hiddenElement).val(slideInput);
    			if (onChange) onChange();
    			$('table.hardness-scale td#id' + currentRating).removeClass('selected');
				$('table.hardness-scale td#id' + slideInput).addClass('selected');
			}
  		}
	);
	
	return result;

}