// Helper to get closest value in array
function arrayClosest(arr, num) {
	var curr = arr[0];
	var diff = Math.abs (num - curr);
	for (var val = 0; val < arr.length; val++) {
			var newdiff = Math.abs (num - arr[val]);
			if (newdiff < diff) {
					diff = newdiff;
					curr = arr[val];
			}
	}
	return curr;
}

// Age slider
(function ageSlider(){

	var $container = $('.age-slider-pointer-wrapper'),
			$wrapper = $('.age-slider'),
			$pointer = $('.age-slider-pointer'),
			$markers = $('.age-slider-makers li'),
			$input = $('.section-age input[name="age"]'),
			gridColumns = $markers.length,
			leftNotches, pointerWidth, i, left;

	// Create slider
	var draggable = Draggable.create($pointer, {
		bounds: $wrapper,
		type: 'x',
		throwProps:true,
		minDuration: 0.25,
		maxDuration: 1.5,
		overshootTolerance: 0,
		onThrowComplete: function(){ // Update values at end of animation
			
			var ageValue = arrayClosest(leftNotches, Math.round(this.endX));
					ageValue = leftNotches.indexOf(ageValue);
					$input.val( ageValue );
					$pointer.text( ageValue );
		},
		onDrag: function(){ // Update slider value during drag

			var ageValue = arrayClosest(leftNotches, Math.round(this.x));
					ageValue = leftNotches.indexOf(ageValue);
					$pointer.text( ageValue );
		}
	});

	// Watch for click on wrapper
	$container.on('click.homepage', function(event){

		var offset = event.offsetX - pointerWidth,
				closest = arrayClosest(leftNotches, Math.round(offset)),
				ageValue = leftNotches.indexOf(closest),
				target = draggable[0].target;

		if( ! $(event.target).is('.age-slider-pointer') ){

			// Move marker
			TweenLite.to(target, 0.5, { x: closest, ease: Power3.easeOut });

				// Update values
				$input.val( ageValue );
				$pointer.text( ageValue );
			}
		});

	// Set dynamic values on init and resize
	function updateSlider(){

		var gridWidth = $markers.first().width(),
				slider = draggable[0];

		leftNotches = [];
		pointerWidth = $pointer.width();

		// Update grid
		for (i = 0; i < gridColumns; i++) {
			left = (i * gridWidth) % (gridColumns * gridWidth);
			leftNotch = left - (pointerWidth/2);
			if (i < gridColumns) {
					leftNotches.push(leftNotch);
			}
		}

		slider.applyBounds();
		slider.vars.snap = leftNotches;
	}
	updateSlider();

	// Resize
	$(window).on('throttledresize.homepage', function(){
		updateSlider();
	});
})();