// JavaScript Document

$(document).ready(function(){												 
													 
	$('.visible-area').each(function(){		
		var $frame = $(this);	
		var $content = $(this).children('.inner');
		
		if($frame.height() < $content.innerHeight()) {

			var $scrollArea = $('<div class="scroll-bar"></div>');
			var $scroll = $('<div class="scroll"></div>');
		
			$scroll.appendTo($scrollArea);
			$frame.append($scrollArea);
			
			var $isDown = false;
			var $dY = 0;	
			var $kY = ($content.height() - $frame.height() + 16) / ($scrollArea.height() - $scroll.height());
		
			$scrollArea.css({'display' : 'block'});
			$scroll.bind('dragstart',  false);
		
			$content.css({'position' : 'absolute', 'top' : 0, 'padding-right' : '20px'});
			
			function checkOutLine() {
	
				if($scroll.offset().top < $scrollArea.offset().top) {
					$scroll.offset({top : $scrollArea.offset().top});
				}
				
				if(($scroll.offset().top + $scroll.height()) > ($scrollArea.offset().top + $scrollArea.height())) {
					$scroll.offset({ top : ($scrollArea.offset().top + $scrollArea.height() - $scroll.height())});
				}	
			}
			
			function moveContent() {
				var $y = -($kY * ($scroll.offset().top - $scrollArea.offset().top));
				$content.css({'top' : $y});
			}
			
			$scroll.mousedown(function(event){
				$isDown = true;
				
				$dY = event.pageY - $(this).offset().top;
			});
			
			$(document).mouseup(function(){
				$isDown = false;
			});
			
			$(document).mousemove(function(event){
				if($isDown) {
					$scroll.offset({top : event.pageY - $dY});
					checkOutLine();
					moveContent();
				}
			});
			
			$scrollArea.click(function(event){
				if($isDown == false) {
					$scroll.offset({top : event.pageY - $dY});
					checkOutLine();
					moveContent();
				}
				else {
					$dY = 0;
				}
			});
		}
	});
});