CustomScroll = function( FrameEl ) {
  this.Constructor( FrameEl );
}

$.extend(CustomScroll.prototype, {
	MouseStartY:		0,
	ScrollerStartY:		0,

	IsScrollStarted: 	false,
	
	Timer1:				null,

	Frame:				null,
	FrameScrollHeight:	0,
	
	Slider:				null,

	Constructor: function( FrameEl ) {
		
		this.Frame = FrameEl;
		this.Frame.before("<div class='scroll-bar'><div class='arrow up'></div><div class='scroll'><div class='slider'></div></div><div class='arrow down'></div></div>");
		this.Frame.wrapInner("<div class='container'></div>");
		
		this.Slider = this.Frame.prev().find('.slider');		
		
		this.OnContentChange();
		this.InitArrows();
		this.InitDragScroll();
		this.InitMouseWheel();
		
		var __instance = this;
		
		$(document).mouseup(function ( e ) {
			__instance.IsScrollStarted = false;
			document.ondragstart = function(){ return true; }
			document.onselectstart = function(){ return true; }
			if( __instance.Timer1 ) clearInterval(__instance.Timer1);
		});
		
	},
	
	OnContentChange: function() {
		this.FrameScrollHeight = this.Frame.find('.container').height() - this.Frame.height();
		if( this.FrameScrollHeight < 2 ) {
			this.Frame.prev().hide();
		} else {
			this.Frame.prev().show();
		}
		this.DoScrollTick(0);
	},
	
	DoScrollTick: function( Dir ) {
		
		if( Dir == "up") Dir = -1;
		if( Dir == "down") Dir = 1;
		
		var OldScrollTop = this.Frame.attr('scrollTop');
		var NewScrollTop = OldScrollTop + Dir*10;
		if( NewScrollTop < 0 ) NewScrollTop = 0;
		if( NewScrollTop > this.FrameScrollHeight ) NewScrollTop = this.FrameScrollHeight;
		
		var PercentsScrolled = NewScrollTop / this.FrameScrollHeight;
		
		var NewY = PercentsScrolled * ( this.Slider.parent().height() - this.Slider.height() );
		if( !isNaN(NewY) ) {
			this.Slider.css('top', NewY + 'px');
		}
		
		if( !isNaN(NewScrollTop) ) {
			this.Frame.attr('scrollTop', NewScrollTop);
		}
	},
	
	InitArrows: function() {
		var __instance = this;
		this.Frame.prev().find(".arrow").mousedown(function () {
			var dir =$(this).is('.up')?'up':'down';	
			__instance.Timer1 = setInterval( function() {__instance.DoScrollTick(dir)}, 50 );
		});
	}, 
	
	InitDragScroll: function() {
		var __instance = this;
		this.Slider.mousedown(function ( e ) {
			__instance.MouseStartY = e.clientY;
			__instance.ScrollerStartY = __instance.Slider.position().top;
			__instance.IsScrollStarted = true;
			document.ondragstart = function(){ return false; }
			document.onselectstart = function(){ return false; }
	    	e.preventDefault();	
		});
		
		$(document).mousemove(function ( e ) {
			if( __instance.IsScrollStarted ) {
				var NewY = __instance.ScrollerStartY - __instance.MouseStartY + e.clientY;
				if( NewY < 0 ) NewY = 0;
				if( NewY > (__instance.Slider.parent().height()-__instance.Slider.height()) ) NewY = __instance.Slider.parent().height() - __instance.Slider.height();
				
				var PercentsScrolled = NewY / ( __instance.Slider.parent().height() - __instance.Slider.height() );
				var ScrollBy = __instance.FrameScrollHeight * PercentsScrolled;
				
				__instance.Frame.attr('scrollTop', ScrollBy);
				
				__instance.Slider.css('top', NewY + 'px');
			}
		});
	},
	
	InitMouseWheel: function() {
		var __instance = this;
		this.Frame.mousewheel(function(event, delta) {
			__instance.DoScrollTick( -delta );
			return false;
        });
	}
	
	
	
});