$(function() {

	var scrollPane = $('.scroll-pane');
	
	var scrollContent = $('.scroll-content');
	
	var scrollbar = $("#scrollbar-1").slider({
		slide:function(e, ui){

			if( scrollContent.width() > scrollPane.width() ){ scrollContent.css('margin-left', Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px'); } else { scrollContent.css('margin-left', 0); }
				
		}
	});
	
	var handleHelper = scrollbar.find('.ui-slider-handle');
	
	setTimeout(sizeScrollbar,10);
	
	//size scrollbar and handle proportionally to scroll distance
	function sizeScrollbar(){
		var remainder = scrollContent.width() - scrollPane.width();
		var proportion = remainder / scrollContent.width();
		var handleSize = scrollPane.width() - (proportion * scrollPane.width());
		scrollbar.find('.ui-slider-handle').css({
			width: handleSize,
			'margin-left': -handleSize/2
		});
		handleHelper.width('').width( scrollbar.width() - handleSize);
	}
	
	/* VVVVVVVVVVV ===== SOMETHINGS REALLY WRONG HERE ===== VVVVVVVVVVV
//Arrow Brains
	$(".right-arrow").click(function () {
		var sliderImg = $(".ui-slider-handle").css("left");
		sliderImg = sliderImg.replace("%", "");
		sliderImg = Math.abs(sliderImg);
		
		var slidePos = $(".scroll-content").css("margin-left");
		slidePos = Number(slidePos.replace("px", ""));
		var barW = $(".scroll-content").width();
		
		if(sliderImg < 100) {
			//run an equation to get some values.
			var incre = slidePos - 20;
			var sliderInc = Math.abs(slidePos) + 20
			
			sliderInc = sliderInc + "%";
			$(".ui-slider-handle").css("left", sliderInc);
			$(".scroll-content").css("margin-left", incre);
		}
		
		return false;
	});
	
	$(".left-arrow").click(function () {
		var sliderImg = $(".ui-slider-handle").css("left");
		sliderImg = sliderImg.replace("%", "");
		sliderImg = Number(sliderImg);
		
		var slidePos = $(".scroll-content").css("margin-left");
		slidePos = Number(slidePos.replace("px", ""));
		var barW = $(".scroll-content").width();
		
		if(sliderImg > 0) {
			//run an equation to get some values.
			var incre = slidePos + 20;
			var sliderInc = Math.abs(slidePos) - 20
			
			sliderInc = sliderInc + "%";
			$(".ui-slider-handle").css("left", sliderInc);
			$(".scroll-content").css("margin-left", incre);
		}
		
		return false;
	});
*/
	
})