/*
	Slider jQuery Plugin.
	
	Takes a select box and turns it into a slider using progressive enhancement.
	
	Usage:
		Call the slider function on the select element that you want to
		replace.
		
		$("#mySelect").slider();
		
		This will hide #mySelect and replace it with the following HTML, which
		can be styled using normal CSS:
		
		<div id="sliderId">
			<div class="labels">
				// for each select option
				<div class="label<x>"></div> // where <x> is an incrementing number
			</div>
			<div class="rail">
				<div class="handle"></div>
			</div>
			
			// For styling
			<div class="tr"></div><div class="tl"></div>
			<div class="br"></div><div class="bl"></div>
		</div>
		
		Options of the original select element will be respected, and the
		selected element will be made active by default.
	
	Modified copy of this to work with a text box
*/

(function($) {
	
	$.fn.slider = function(options) {
		var opts = $.extend({}, $.fn.slider.defaults, options);
		
		// Get the number of elements we are replacing.
		var numReplaced = this.length;
		//Replace each element with given ID
		this.each(function(el) {
			//Hide original select box - This will need to be changed to text
			var select = $(this).hide(); 
			
			var labels = [];
			//In theory change options to 0-100 to get the value
			var tempArray = new Array(10)
			for(var i = 1; i<=100;i++){
				tempArray[i-1] = i;
			}
			//var options = select.children();
			var options = $.makeArray(tempArray); //Get Select box child elements
			/*for(var i = 1; i<=10;i++){
				options = $.extend({i},options);
			}*/
			// Create a container around the entire slider.
			var sliderId = opts.sliderId + (numReplaced > 1 ? el+1 : '');
			var container = $("<div>").attr("id", sliderId);
			
			if (opts.sliderClass) {
				container.addClass(opts.sliderClass);
			}
			//Slider set up add after the select box
			container.css({
				position: "relative"
			});
			select.after(container);
			
			
			// Find the nearest label to an event, searching on x-axis only.
			function findNearestLabel(pageX) {
				var nearest = null;
				var nearestDx = Infinity;
				
				$(labels).each(function(i) {
					nearest = nearest || this;
					
					var dx = Math.abs(this.offset + this.pos - pageX);
					
					if (dx < nearestDx) {
						nearestDx = dx;
						nearest = this;
					}
				});
				
				return nearest;
			}
			
			
			// Create container element for labels.
			var labelsEl = $("<div>").addClass("labels");
			container.append(labelsEl);
			//
			var innerLabelsEl = $("<div>").addClass("slider-flames-grey");
			labelsEl.append(innerLabelsEl);
			var activeLabelsEl = $("<div>").addClass("slider-flames-active");
			labelsEl.append(activeLabelsEl);
			// Create handle.
			var rail = $("<div>").addClass("rail");
			var handle = $("<div>").addClass("handle");
			
			handle.css({position: "absolute"});
			
			rail.append(handle);
			container.append(rail);
			
			
			var widthPerLabel = labelsEl.width() / (options.length);
			var labelOffset = function(i) {
				return (i * widthPerLabel);
			};
			
			// Create labels for each option.
			$(options).each(function (i) {
				
				// Markers are spaced evenly. Labels are center aligned above,
				// except the first and last, which we adjust here to align up
				// to the edge.
				var adjust = 0;
				if (i === 0) { adjust = -0.25; }
				else if (i == options.length-1) { adjust = 0.25; }
				var dx = 15 * (adjust + 1);
				var left = labelOffset(i) - dx;
				// Store label along side some helper data.
				labels.push({
					val: this,
					pos: this*widthPerLabel,
					offset: labelsEl.offset().left,
					option: this,
					marker: labelOffset(i) - (adjust * (handle.width() * 0.25))
				});
			});
			
			// Set handle position to default selected value.
			handle.css({
				left: labels[(($(select).val()*10)-1)].marker - handle.width() / 2 + "px"
			});
			$('.slider .labels .slider-flames-active').css("width",labels[(($(select).val()*10)-1)].pos + "px");
			//highlightLabel(labels[50], "active");
			
			
			// Snap the handle to a label using a quick animation.
			function snapToLabel(label, fireEvent) {
				handle.stop();
				
				// Select the original select box option.
				
				if (fireEvent) {
					//Set the new value of the text boz
					var setVal = label.val/10;
					$(select).val(setVal);
					$("#rating-slider span.current-rating").text(setVal);
				}
				$('.slider .labels .slider-flames-active').css("width",label.pos + "px");
				
				handle.animate({
						left: label.marker - (handle.width() / 2)
					},
					opts.easingDuration,
					"easeOutBounce"
				);
			}
			
			// Snap to label nearest a given point.
			function snapToNearestLabel(pageX) {
				snapToLabel(findNearestLabel(pageX), true);
			}
			
			
			// Clicking anywhere within the container will snap the handle to
			// the nearest label.
			container.click(function(ev) {
				if (ev.target == handle.get(0)) {
					return
				};
				snapToNearestLabel(ev.pageX);
			});
			
			
			// Set up handler for dragging the handle.
			handle.mousedown(function(e) {
				e.preventDefault();
				
				var curNearest;
				handle.stop(true);
				
				// Track mouse moves across whole document.
				$(document).mousemove(function(e) {
					// Prevent IE from highlighting text as you drag.
					e.preventDefault();
					
					// Prevent handle from moving past the end of the rail.
					var left = e.pageX - container.offset().left - handle.width() / 2;
					
					var minX = labels[0].marker - handle.width() / 2;
					var maxX = labels[labels.length-1].marker - handle.width() / 2;
					
					if (left < minX) { left = minX; }
					else if (left > maxX) { left = maxX; }
					
					handle.css("left", left);
					
					// Trigger near label event.
					var nearest = findNearestLabel(e.pageX);
					if (curNearest != nearest) {
						//highlightLabel(nearest, "near");
						if (opts.nearLabelCallback) {
							opts.nearLabelCallback(nearest.option.parentNode, $(nearest.option).val(), $(nearest.option).text());
						}
						curNearest = nearest;
					}
				});
				
				// Snap to nearest label on mouse release.
				$(document).one("mouseup", function(e) {
					e.preventDefault();
					$(document).unbind("mousemove");
					snapToNearestLabel(e.pageX);
				});
			});
			
			
			// Listen for changes to the selected option and animate slider to
			// match.
			$(select).change(function(e) {
				snapToLabel(labels[e.target.selectedIndex], false);
			});
			
			// Add styling elements.
			container.append('<div class="tr"></div><div class="tl"></div>');
			container.append('<div class="br"></div><div class="bl"></div>');
		});
		
		return this;
	};
	
	// Allow access to defaults.
	$.fn.slider.defaults = {
		sliderId: "sliderId",
		sliderClass: "",
		easingDuration: 400,
		nearLabelCallback: null
	};
	
})(jQuery);