(function($){

$.scrollable = { eventsBound:false, scrollPanes:[] };
$.fn.scrollable = function(){
	return $(this).each(function(){
		var scrollPane = $(this);
		$.scrollable.scrollPanes[$.scrollable.scrollPanes.length] = scrollPane;
		if (scrollPane.get(0).scrollWidth > scrollPane.get(0).clientWidth)
		    $.scrollable.init(scrollPane);
		
		if (!$.scrollable.eventsBound) {
			$.scrollable.eventsBound = true;
			//change handle position on window resize
			$(window)
			.resize(function(){
				$.scrollable.resetValue();
				$.scrollable.sizeScrollbar();
				$.scrollable.reflowContent();
				$.scrollable.checkIfNeeded();
			});
		}
	});
}

$.scrollable.init = function(scrollPane){
	if (scrollPane.data('hasSlider') == true) return false;
	scrollPane.data('hasSlider', true).find('.scroll-bar-wrap').show();
	var scrollContent = scrollPane.find('.scroll-content');
	//build slider
	var scrollbar = scrollPane.find(".scroll-bar").slider({
		step : 1,
		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); }
		}
	});

	//append icon to handle
	scrollbar.find('.ui-slider-handle')
	.mousedown(function(){
		$(this).parent().parent().width( $(this).parent().width() );
	})
	.mouseup(function(){
		$(this).parent().parent().width( '100%' );
	})
	.append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>')
	.wrap('<div class="ui-handle-helper-parent"></div>');

	//change overflow to hidden now that slider handles the scrolling
	scrollPane.css('overflow','hidden');
	
	//init scrollbar size
	setTimeout(function(){
		$.scrollable.sizeScrollbar();
	}, 10);//safari wants a timeout
}

//size scrollbar and handle proportionally to scroll distance
$.scrollable.sizeScrollbar = function(){
	for (var i=0;i<$.scrollable.scrollPanes.length;i++) {
		var scrollPane = $.scrollable.scrollPanes[i];
		if (scrollPane.data('hasSlider')) {
			var scrollContent = scrollPane.find('.scroll-content');
			var remainder = scrollContent.width() - scrollPane.width();
			var proportion = remainder / scrollContent.width();
			var handleSize = scrollPane.width() - (proportion * scrollPane.width());
			scrollPane.find(".scroll-bar").find('.ui-slider-handle').css({
				width: handleSize,
				'margin-left': -handleSize/2
			});
			scrollPane.find('.ui-handle-helper-parent').width('').width( scrollPane.find(".scroll-bar").width() - handleSize);
		}
	}
}

//reset slider value based on scroll content position
$.scrollable.resetValue = function(){
	for (var i=0;i<$.scrollable.scrollPanes.length;i++) {
		var scrollPane = $.scrollable.scrollPanes[i];
		if (scrollPane.data('hasSlider')) {
			var scrollContent = scrollPane.find('.scroll-content');
			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);
			scrollPane.find(".scroll-bar").slider("value", percentage);
		}
	};
}

//if the slider is 100% and window gets larger, reveal content
$.scrollable.reflowContent = function(){
	for (var i=0;i<$.scrollable.scrollPanes.length;i++) {
		var scrollPane = $.scrollable.scrollPanes[i];
		if (scrollPane.data('hasSlider')) {
			var scrollContent = scrollPane.find('.scroll-content');
			var showing = scrollContent.width() + parseInt( scrollContent.css('margin-left') );
			var gap = scrollPane.width() - showing;
			if(gap > 0){
				scrollContent.css('margin-left', parseInt( scrollContent.css('margin-left') ) + gap);
			}
		}
	};
}

$.scrollable.checkIfNeeded = function(){
	for (var i=0;i<$.scrollable.scrollPanes.length;i++) {
		var scrollPane = $.scrollable.scrollPanes[i];
		if (scrollPane.get(0).scrollWidth > scrollPane.get(0).clientWidth) {
			$.scrollable.init(scrollPane);
		}
		if (scrollPane.width() > (scrollPane.find('.scroll-content').width() + 50)){
			scrollPane.find('.scroll-content').css('margin-left', 0);
			scrollPane.find(".scroll-bar").slider('destroy').empty();
			scrollPane.data('hasSlider', false);
		}
	}
}

})(jQuery);