$(function() {
	$(".scroller_wrap").each(function() {
		slider_init(this)
	})

});

function slider_init(obj) {
	//scrollpane parts
	var scrollPane = $(obj),
		scrollContent = $(".scroller_block ul", obj);

	//build slider
	var scrollbar = $(".scroller_slider_bar", obj).slider({
		slide: function( event, ui ) {
			slide(ui.value, scrollPane, scrollContent)
		}
	});

	var handleSize = $(".ui-slider-handle", obj).width();

	//append icon to handle
	var handleHelper = scrollbar.find(".ui-slider-handle", obj)
	.css({
		width: handleSize,
		"margin-left": -handleSize / 2
	})
	.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent()
	.width('').width( scrollbar.width() - handleSize);

	//change overflow to hidden now that slider handles the scrolling
	scrollPane.css( "overflow", "hidden" );

	$(".scroller_slider_prev, .scroller_slider_next", obj).mousedown(function() {
		var delta = $(this).hasClass('scroller_slider_prev') ? -10 : 10
		scrollbar.slider("value", scrollbar.slider("value") + delta);
		slide(scrollbar.slider("value"), scrollPane, scrollContent)
	})

	scrollPane.mousewheel(function(e, delta) {
		e.preventDefault()

		var delta = delta > 0 ? -10 : 10

		scrollbar.slider("value", scrollbar.slider("value") + delta);

		slide(scrollbar.slider("value"), scrollPane, scrollContent)
	});
}

function slide(val, scrollPane, scrollContent) {
	if ( scrollContent.width() > scrollPane.width() ) {
		scrollContent.css( "margin-left", Math.round(
			val / 100 * ( scrollPane.width() - scrollContent.width() )
		) + "px" );
	} else {
		scrollContent.css( "margin-left", 0 );
	}
}