$(function() {
	//scrollpane parts
	var scrollPane = $( ".scroll-pane" ),
		scrollContent = $( ".scroll-content" ,scrollPane),
		scrollBarWrap = $( ".scroll-bar-wrap" , scrollPane);
		
		
	scrollContent.css("width", $( ".scroll-content li", scrollPane).length*218 + "px");
	//build slider
	var scrollbar = $( ".scroll-bar" ,scrollPane ).slider({
		slide: function( event, ui ) {
			if ( scrollContent.width() > scrollPane.width() ) {
				/*scrollContent.animate( {marginLeft: Math.round(
					ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
				) + "px"}, 50 );*/
				
				scrollContent.css( "margin-left", Math.round(
					ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
				) + "px" );
			} else {
				scrollContent.css( "margin-left", 0 );
			}
		},
		animate:true,
		step:0.1
	});

	scrollbar.width(scrollBarWrap.width() -  scrollbar.find( ".ui-slider-handle" ).width() - 6);
	
	scrollPane.css( "overflow", "hidden" );
	
	//size scrollbar and handle proportionally to scroll distance
	function sizeScrollbar() {
		var remainder = scrollContent.width() - scrollPane.width();
	}
	
	//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

	
	
	
	var vScroll = $( ".v-scroll" ),
		vScrollContent = $( ".scroll-content" ,vScroll),
		vScrollBarWrap = $( ".scroll-bar-wrap" , vScroll);
	
	if (vScrollContent.height() <= 120){
		vScrollBarWrap.css("display","none");
	}
		
	//build slider
	var scrollbar = $( ".scroll-bar" ,vScroll).slider({
		slide: function( event, ui ) {
			if ( vScrollContent.height() > vScroll.height() ) {

				vScrollContent.css( "margin-top", Math.round( (100 - ui.value) / 90 * ( vScroll.height() - vScrollContent.height() )
				) + "px" );
			} else {
				vScrollContent.css( "margin-top", 0 );
			}
		},
		animate:true,
		step:0.1,
		orientation: "vertical",
		value: 100
	});
	
	scrollPane.css( "overflow", "hidden" );
	$(window).resize(function(){
		if (vScrollContent.height() <= 96){
			vScrollBarWrap.css("display","none")
			vScrollContent.css("margin-top", 0);
			$(".gradient_top, .gradient_bottom", vScroll).css("display","none");
		}
		else {
			vScrollBarWrap.css("display","block");
			$(".gradient_top, .gradient_bottom", vScroll).css("display","block");	
		}
	});
});