var scroll_bar = document.querySelectorAll('.scroll-bar');

if(scroll_bar) {
	scroll_bar.forEach(function(element) {
		// Wrapper
		var content = element.innerHTML;

		var inner = document.createElement('div');
		inner.classList.add('inner');
		inner.innerHTML = content;
		
		var track = document.createElement('div');
		track.classList.add('track');
		var bar = document.createElement('figure');
		track.appendChild(bar);
		
		var outer = document.createElement('div');
		outer.classList.add('outer');
		outer.appendChild(inner);
		outer.appendChild(track);

		element.innerHTML = '';
		element.appendChild(outer);

		// Check if need scroll
		var outer_height = outer.offsetHeight;
		var inner_height = inner.offsetHeight;

		if (inner_height > outer_height) {
			element.classList.add('enabled');
		}

		// Avoid window scroll
		function preventDefault(event) {
			event.preventDefault();
		}
		
		// On wheel
		outer.onwheel = function(event) {
			outer_height = outer.offsetHeight;
			inner_height = inner.offsetHeight;

			// Check if still need scroll after inner height change
			if (inner_height > outer_height) {
				var wheel_delta_y = -event.deltaY;
				var position_top  = inner.offsetTop;
				var limit         = -(inner_height - outer_height);
				var scrolled      = position_top + wheel_delta_y;
				var bar_height    = bar.offsetHeight;
				var bar_limit     = outer_height - bar_height;
				var bar_scrolled  = bar_limit * scrolled / limit;

				window.addEventListener('wheel', preventDefault, {passive: false});

				if (wheel_delta_y >= 1 && position_top >= 0) {
					inner.style.top = 0;
					bar.style.top = 0;
				}

				else if (wheel_delta_y <= -1 && position_top <= limit) {
					inner.style.top = limit + 'px';
					bar.style.top = bar_limit + 'px';
				}

				else {
					inner.style.top = scrolled + 'px';
					bar.style.top = bar_scrolled + 'px';
				}
			}
		}

		outer.onmouseleave = function() {
			window.removeEventListener('wheel', preventDefault, {passive: false});
		}

		// On touch
		outer.ontouchstart = function(touchstart) {
			var touch_start = touchstart.touches[0].clientY;

			outer.ontouchmove = function(touchmove) {
				var touch_end = touchmove.touches[0].clientY;

				outer_height = outer.offsetHeight;
				inner_height = inner.offsetHeight;

				// Check if still need scroll after inner height change
				if (inner_height > outer_height) {
					var wheel_delta_y = (touch_start - touch_end) * -1;
					var position_top  = inner.offsetTop;
					var limit         = -(inner_height - outer_height);
					var scrolled      = position_top + wheel_delta_y;
					var bar_height    = bar.offsetHeight;
					var bar_limit     = outer_height - bar_height;
					var bar_scrolled  = bar_limit * scrolled / limit;

					window.addEventListener('touchmove', preventDefault, {passive: false});

					if (wheel_delta_y >= 1 && position_top >= 0) {
						inner.style.top = 0;
						bar.style.top = 0;
					}

					else if (wheel_delta_y <= -1 && position_top <= limit) {
						inner.style.top = limit + 'px';
						bar.style.top = bar_limit + 'px';
					}

					else {
						inner.style.top = scrolled + 'px';
						bar.style.top = bar_scrolled + 'px';
					}
				}
			}
		}

		outer.ontouchend = function() {
			window.removeEventListener('touchmove', preventDefault, {passive: false});
		}

		// Check if inner height changed
		var observer = new MutationObserver(function() {
			var new_inner_height = inner.offsetHeight;

			if (new_inner_height != inner_height) {
				inner.style.top = 0;
				bar.style.top = 0;

				if (new_inner_height <= outer_height) {
					element.classList.remove('enabled');
				}

				else {
					element.classList.add('enabled');
				}
			}
		});

		observer.observe(inner, {
			attributes: true,
			characterData: true,
			childList: false,
			subtree: true
		});

		window.onresize = function() {
			outer_height = outer.offsetHeight;
			inner_height = inner.offsetHeight;

			inner.style.top = 0;
			bar.style.top = 0;

			if (inner_height <= outer_height) {
				element.classList.remove('enabled');
			}

			else {
				element.classList.add('enabled');
			}
		}
	});
}