$(function() {
	//scrollpane parts
	var scrollPane = $('.scroll-pane');
	var scrollContent = $('.scroll-content');
	
	//build slider
	var scrollbar = $(".scroll-bar").slider({
		animate: true, 
		start: function(e, ui) {
			this.justStarted = true;
		},
		slide: function(e, ui){
			var o = 0;
			if( scrollContent.width() > scrollPane.width() ){ 
				o = Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )); 
			}
			var diff = o - parseInt(scrollContent.css('margin-left').split('px')[0], 10);
			if (Math.abs(diff) > 150 && this.justStarted) {
				scrollContent.animate({marginLeft:o}, 500);
			} else {
				scrollContent.css('margin-left', '' + o + 'px');
			}
			this.justStarted = false;
		}, 
		stop: function (e, ui) {
			var o = 0;
			if( scrollContent.width() > scrollPane.width() ){ 
				o = Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )); 
			}
			setLocationHashVar('scroll', -o)
		}
	});

	//append icon to handle
	var handleHelper = scrollbar.find('.ui-slider-handle')
	.mousedown(function(){
		scrollbar.width( handleHelper.width() );
	})
	.mouseup(function(){
		scrollbar.width( '100%' );
	})
	/*.append('<span class=""></span>')*/
	.wrap('<div class="ui-handle-helper-parent"></div>').parent();
	
	// change overflow to hidden now that slider handles the scrolling
	// do not remove, because otherwise no scrollbar is visible without js.
	scrollPane.css('overflow','hidden');
	
	//size scrollbar and handle proportionally to scroll distance
	function sizeScrollbar(){
		var remainder = scrollContent.width() - scrollPane.width();
		var proportion = remainder / scrollContent.width();
		var handleSize = Math.ceil(scrollPane.width() - (proportion * scrollPane.width()));
		scrollbar.find('.ui-slider-handle').css({
			width: handleSize,
			'margin-left': -Math.ceil(handleSize/2)
		});
		handleHelper.width( scrollbar.width() - handleSize);
	}
	
	//reset slider value based on scroll content position
	function resetValue(){
		var remainder = scrollPane.width() - scrollContent.width();
		var leftVal = scrollContent.css('margin-left') == 'auto' ? 0 : parseInt(scrollContent.css('margin-left'),10);
		var percentage = Math.round(leftVal / remainder * 100);
		scrollbar.slider("value", percentage);
	}
	
	//if the slider is 100% and window gets larger, reveal content
	function reflowContent(){
		var leftVal = scrollContent.css('margin-left') == 'auto' ? 0 : parseInt(scrollContent.css('margin-left'),10);
		var showing = scrollContent.width() + leftVal;
		var gap = scrollPane.width() - showing;
		if (gap > 0) scrollContent.css('margin-left', leftVal + gap);
	}
	
	//change handle position on window resize
	$(window).resize(function(){ resetValue(); sizeScrollbar(); reflowContent(); });
	
	//init scrollbar size
//	setTimeout(sizeScrollbar,10);//safari wants a timeout
	sizeScrollbar();
	
	var scrollHV = -getLocationHashVar('scroll');
	if (scrollHV !== null) {
		scrollContent.css({marginLeft: scrollHV+'px'});
		resetValue();
	}

});