$(document).ready(function() {
	function scrollbar_design() {

		var $scrollwrap = $("#khome-scrollbar");
		var $scrollBar = $scrollwrap.find('.bar');
		var $scrollBody = $scrollwrap.find('.body');

		function scrollbar_size() {
			var h = $('body').outerHeight(true);
			var w_h = parseInt($(window).height());
			var w_t = $(window).scrollTop();
			var scroll_h = w_h / h * 100;
			var scroll_p = w_t / h * 100;
			
			$scrollBody.css({height:h});
			$scrollBar.css({height:scroll_h+'vh', top:scroll_p+'%', 'transition-duration':''});

			if(w_t == 0) {
				$scrollwrap.removeClass('on');
			} else {
				$scrollwrap.addClass('on');
			}
		}

		$scrollBar.draggable({
			containment: '#khome-scrollbar',
			cursor: 'dafault',
			snap: '#khome-scrollbar',
			drag:handleStop,
		});

		function handleStop(event, ui) {
			var h = $('body').outerHeight(true);
			var w_h = parseInt($(window).height());
			var offsetYPos = parseInt(ui.helper.css('top'));
			var test = offsetYPos/w_h*100;
			var test2 = test*h/100;

			ui.helper.css({'transition-duration':'0ms'});

			window.scrollTo({top:test2, left:0, behavior:'auto'});
		}


		$(window).scroll(function(){
			scrollbar_size();
		});
		scrollbar_size();

	}
	$(window).on('resize', function() {
		scrollbar_design();
	});

	scrollbar_design();
});