$(document).ready(function(){

	//scrollpane parts
	var scrollPane = $( "#content-scroll" )
	, scrollContent = $( "#content-holder" )
	, sliderContent = $( "#content-slider" );
		
	
	//build slider
	var scrollbar = $( "#content-slider-scroll-bar" ).slider({
		animate: true,
		value: 100,
		stop: function( event, ui) {
			if ( scrollContent.width() > scrollPane.width() ) {
				scrollContent.animate({marginLeft: Math.round(ui.value/100*(scrollPane.width()-scrollContent.width())) }, 1000);
			} else {
				scrollContent.animate({marginLeft: 0 }, 1000);
			}
		},
		create: function(event, ui) {
			if ( scrollContent.width() > scrollPane.width() ) {
				scrollContent.css( "margin-left", (scrollPane.width()-scrollContent.width()) + "px" );
			} else {
				scrollContent.css( "margin-left", 0 );
			}
		}

	});

	var handleHelper = scrollbar.find( ".ui-slider-handle" ).wrap( "<div id='content-slider-inner'></div>" ).parent();

	$("#content-slider")
	.mouseover(function() { //state #1		
		handleHelper.css("margin-left",0);
		scrollbar.width(handleHelper.width()).css("margin-left",String(Math.round(0.15*sliderContent.width()))+"px");		
	})
	.mouseout(function() { //state #0
		handleHelper.css("margin-left",String(Math.round(0.15*sliderContent.width()))+"px");
		scrollbar.width("100%").css("margin-left",0);
		
	})
	.click(function(event){
		if(2*event.clientX > $(this).width()){
			scrollbar.slider("value",100);
			scrollContent.animate({marginLeft: scrollPane.width()-scrollContent.width() }, 1000);
		}else{
			scrollbar.slider("value",0);
			scrollContent.animate({marginLeft: 0 }, 1000);
		}
	});


	//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() );
		*/
		var scrollbarwidth = scrollbar.width();
		var handleSize = 0.3*scrollbarwidth;
		scrollbar.find( ".ui-slider-handle" ).css({
			width: handleSize,
			"margin-left": -handleSize / 2
		});
		handleHelper.width( "" ).width( scrollbar.width() - handleSize).css("margin-left",String(Math.round(0.15*scrollbar.width()))+"px");
	}

	//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" ));
		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 showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
			var gap = scrollPane.width() - showing;
			if ( gap > 0 ) {
				scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
			}
	}

	//change handle position on window resize
	$( window ).resize(function() {
		resetValue();
		sizeScrollbar();
		reflowContent();
	});
	//init scrollbar size
	setTimeout( sizeScrollbar, 10 );//safari wants a timeout

});